O que é o widget Carrossel?
Widget de carrossel(widgets rotativos) é uma ferramenta muito útil que permite um espaço limitado noApresente uma variedade de conteúdos, incluindo imagens, texto e outros elementos. Taldinâmica (ciência)VitrineNão só poupa espaço na página, como também atrai a atenção do utilizador e aumenta a interatividade do sítio.
Elementor Widget de carrosselé uma ferramenta flexível que permite aos utilizadores utilizar elementos aninhados em itens rotativos. Isto significa que os utilizadores podem adicionar elementos diferentes a cada item na rotação para obter um design único e personalizado. Ao combinar vários elementos do Elementor, como imagens, texto, botões, etc., os widgets de carrossel podem criar apresentações de conteúdos que correspondem ao estilo e às necessidades de um determinado sítio Web.
Casos de utilização comuns para widgets de carrossel
Os widgets rotativos são utilizados numa vasta gama de aplicações para todos os tipos de sítios Web, desde sítios de comércio eletrónico a páginas de apresentação de empresas. Eis alguns cenários de aplicação comuns:
- Montra da loja de mobiliário online::
Por exemplo, a Emily utilizou o widget Carrossel para apresentar diferentes produtos e serviços ao criar a sua loja de mobiliário online. Para a secção da página inicial, Emily criou um esquema de elementos aninhados que combina imagens de mobiliário com estilo, testemunhos de clientes e CTAs (Apelo à açãoOs botões de chamada para ação (call to action) são combinados para levar os utilizadores a navegar mais no sítio. - Plataformas educativas::
Nas plataformas educativas, os widgets de carrossel podem ser utilizados para apresentar diferentes módulos ou tópicos de cursos. Porrotação dinâmicacaraterísticas que permitem a apresentação de vários recursos educativos numa área compacta.Fácil para os alunos navegarem e escolherem. - Caraterísticas do produto::
Para os sítios Web de comércio eletrónico, os widgets rotativos são uma ferramenta ideal para apresentar as caraterísticas dos produtos. As empresas podem detalhar as principais caraterísticas de vários produtos através de rotações e para cada produtoConfigure diferentes imagens e descrições. - Promoção de eventos::
Na página do evento, os widgets rotativos podem ser apresentados sequencialmenteInformações sobre as diferentes actividadesA apresentação do seu evento é muito simples e rápida, com datas, locais, oradores, etc. Esta apresentação não só é esteticamente agradável, como também ajuda os utilizadores a compreender rapidamente os destaques do evento.
Como adicionar e configurar widgets de carrossel
Passo 1: Adicione o widget Carrossel à página
- Abra o editor Elementor e selecione o widget rotativo que pretende adicionar aopágina webParte.
- No painel esquerdo, procure por "Carrossel" e arraste-o e largue-o na página.
tomar nota de: Por defeito, oWidget de carrossel com três diapositivosAlém disso, cada diapositivo tem um contentor. Os utilizadores podem adicionar elementos a estes contentores para criar o seu próprio conteúdo rotativo.
Passo 2: Faça a gestão e personalize os diapositivos
- Adicione ou elimine diapositivosClique no espaço em branco doelementodo separador "slide (fotografia, software de apresentação)"Na secção, o utilizador pode clicar no botão "Adicionar projeto" para adicionar diapositivos. Os diapositivos também podem ser adicionados clicando no botãofaça uma cópia depara criar uma cópia de um diapositivo existente. Se precisar de apagar um diapositivo, basta clicar no ícone de apagar.
- Ajustar os títulos dos diapositivos e o número de visualizaçõesCada diapositivo pode serTítulos definidos individualmenteque facilita aos utilizadores a distinção entre os conteúdos dos diapositivos. Os utilizadores têm a opção de escolher entreNúmero de diapositivos apresentados de uma só vez na páginaque ajuda a controlar a visibilidade da rotação.
- Deslizamentos na deslocaçãoO utilizador pode definir o cliqueNúmero de diapositivos de cada vez quando navega com setas. Isto permite-lhe controlar visualmente a velocidade de deslocação dos diapositivos e da apresentação.
- Altura igual: Ativar"mesma altura" garante que todos os diapositivos têm a mesma altura e evita o desalinhamento do conteúdo.
- Definições de conteúdo:
Reprodução automática:
A reprodução automática está activada, o que significa que a rotação começará automaticamente a deslocar o conteúdo quando a página for carregada sem interação do utilizador.
Velocidade de deslocação:
Uma definição de velocidade de deslocação de 5000 milissegundos (5 segundos) significa que cada diapositivo se desloca para o seguinte após 5 segundos de visualização.
Faça uma pausa ao passar o rato:
Esta opção está activada. Quando o utilizador passa o cursor sobre a rotação, a reprodução automática é interrompida, impedindo que o diaporama continue a deslocar-se.
Faça uma pausa na interação:
Esta opção também está activada, o que significa que a reprodução automática será interrompida quando o utilizador interage com a rotação (por exemplo, clica no conteúdo da rotação).
Deslocação infinita:
Quando esta opção está activada, o conteúdo rotativo passa por todos os slides e, quando chega ao último, volta a passar para o primeiro e continua a ser reproduzido.
Duração da transição:
O tempo de transição está definido para 500 milissegundos, o que significa que a duração da animação para cada interrutor de diapositivo é de 0,5 segundos.
Direção (direção de deslocação):
A direção de deslocação está definida para "Esquerda", o que significa que o diapositivo se deslocará da direita para a esquerda.
Lados de deslocamento:
Esta definição é apresentada como "Nenhum" à frente do item, o que significa que não existe qualquer definição de desvio e que o conteúdo rotativo é apresentado no centro.
Passo 3: Personalize a rotaçãotipo
Widget de carrosselFornece uma grande variedade detipoDefinições que permitem aos utilizadores fazer personalizações profundas com base no estilo de design do sítio Web.
- espaçamentoO utilizador pode personalizar o espaço entre os slides para controlar a compacidade da disposição dos itens rotativos.
- Tipos de fundo e contornosO utilizador pode criar um novo nome de utilizador para ocartazesslide (fotografia, software de apresentação)Definir a imagem de fundo, gradiente de coretc. O tipo de contorno e o raio também podem ser personalizados para acrescentar interesse visual.
Passo 4: Definições avançadas
"nível elevado"O separador oferece aos utilizadores mais opções de personalização, incluindo:
- Código personalizadoOs utilizadores podem adicionar CSS ou JavaScript personalizados ao widget Carrossel para obter funcionalidades e efeitos mais sofisticados.
- conceção reactivaO widget Carrossel suporta layouts responsivos, permitindo que os utilizadores configurem diferentes efeitos de rotação para diferentes dispositivos, garantindo uma visualização consistente em dispositivos móveis, tablets e computadores.
- Preenchimento e tamanho do ícone: Ao definir oacolchoamentoresponder com cânticosTamanho do íconeIsto permite ao utilizador otimizar ainda mais a apresentação dos elementos individuais na rotação.
Perguntas frequentes e soluções
Ao utilizar o widget Carrossel, alguns utilizadores podem encontrar alguns problemas. Aqui estão alguns problemas comuns e as respectivas soluções:
- A rotação não é apresentada corretamente em alguns dispositivos::
Se a rotação não estiver a ser apresentada corretamente em alguns dispositivos, recomenda-se que verifique as definições de resposta para se certificar de que o rácio de visualização e a quantidade de deslocação adequados estão definidos para cada dispositivo. - Altura inconsistente do escorrega::
Ao conceber rotações complexas, o conteúdo de diferentes diapositivos pode resultar em alturas inconsistentes. A ativação da opção "altura igual" garante que cada diapositivo tem a mesma altura. - A rotação desloca-se demasiado depressa ou demasiado devagar::
Ao ajustar a definição "Scroll Slide", pode controlar o número de diapositivos por deslocação e, assim, ajustar a velocidade de deslocação da rotação. - Os controlos de navegação não estão alinhados::
No separador Estilos, pode ajustar o tamanho e a posição dos ícones de navegação e dos indicadores de paginação para garantir que ficam alinhados em diferentes dispositivos.
resumos
Elementor O widget Carrossel oferece aos utilizadores uma grande flexibilidade para criar efeitos rotativos únicos nas páginas Web. Quer seja para apresentar um produto, promover um evento ou fornecer testemunhos de utilizadores, o widgetWidget de carrosselAmbos podem ajudar a melhorar a interatividade e o aspeto visual do seu sítio Web. Ao tirar o máximo partido das funcionalidades do widgetElementos aninhados, personalização de estilos e funcionalidades avançadasO utilizador pode facilmente criar um ecrã rotativo que satisfaça as suas necessidades.
