20 modelos de controle deslizante de elementor, 8 deles gratuitos: fluxo de cobertura, linha do tempo, depoimento e muito mais

A maioria dos modelos de controle deslizante Elementor que você encontra on-line são o mesmo controle deslizante Imagem de largura total, texto sobre o meio, setas nas laterais, a seguir.

Esses vinte não são isso Um dobra os slides ao redor da borda de um círculo Um pinos entradas para uma linha do tempo datada onde as lacunas entre os anos são desenhadas em escala Um transforma uma lista de linhas na própria navegação Oito deles importam para o plugin gratuito Master Addons sem licença Pro, que a repartição livre versus Pro analisa detalhadamente e cada um dos vinte tem uma demonstração ao vivo que você pode abrir, cutucar e quebrar antes de decidir se deseja.

Abaixo: cada design, para que é realmente bom, e a nota honesta sobre quais são uma má ideia para o seu site Para os carrosséis convencionais do plugin ao lado destes, comece no hub widget carrossel.

Os 20 designs em resumo

Escolha pelo que você está construindo, não pelo que parece melhor em uma captura de tela Um fluxo de cobertura que parece impressionante em um portfólio enterrará uma grade de produtos.

O que você precisa para executar estes

Elementor livre é suficiente para a própria página A divisão está nos desenhos:

• Os designs 13 a 20 são gratuitos. Eles importam através de Master Addons → Widget Builder → Import Widget no plugin gratuito: sem licença Pro, sem teste, sem cartão. Cada um cai no painel Elementor sob Favoritos com seus próprios controles.
• Os projetos 01 a 12 precisam do Master Addons Pro. Eles são construídos ao máximo Construtor de widgets, que é um recurso Pro.

O que não precisa de nada: as demos ao vivo Abra qualquer um dos vinte, redimensione o navegador, arraste um slide, observe como ele se comporta em uma janela de visualização com largura de telefone Isso não custa nada e é a única maneira de julgar se um estilo de movimento se adapta ao seu conteúdo.

O plugin gratuito também envia widgets carrossel convencionais (Image Carousel, Logo Slider, Team Slider e o widget Blog no modo carrossel), todos cobertos na página do widget carrossel vinculada na introdução.

01. Fluxo de cobertura do meridiano

Demonstração ao vivo Baixar Widget JSON

O slide central fica plano e quadrado. Os de cada lado giram para longe no eixo Y e escurecem, então seu olho pousa onde deveria. Fluxo de cobertura clássico, menos o reflexo que ninguém queria desde 2011.

Funciona porque mostra contexto sem competir por atenção Um visitante vê que há mais cinco estudos de caso sem poder ler nenhum deles, que é exatamente a tensão que faz as pessoas clicarem na seta.

Use-o para: bobinas de estudo de caso, peças de portfólio, qualquer coisa onde cada slide mereça uma leitura completa.

Não o use para: grades de produtos O fluxo de cobertura mostra um item corretamente e sugere dois Os compradores que comparam seis produtos vão te odiar.

02. Acordeão Concertina

Demonstração ao vivo Baixar Widget JSON

Seis painéis verticais estreitos Passe o mouse um e ele se expande; os outros comprimem para abrir espaço Sem setas, sem pontos, sem reprodução automática: toda a navegação é o hover.

Observe o que acontece no celular embora Não há nenhum hover em uma tela sensível ao toque, então os painéis caem de volta para toque-para-expandir Isso está bem, mas significa que o comportamento de primeiro toque tem que ser óbvio ou as pessoas vão rolar direto para além dele Adicione uma divisa visível no painel ativo e o problema vai embora.

Use-o para: seis ou menos categorias de serviços, listas de destinos, qualquer coisa onde as etiquetas vendam.

03. Sobreposição de umbra

Demonstração ao vivo Baixar Widget JSON

Imagem preenche o quadro, legenda fica em um gradiente que só escurece o terço inferior Slide muda, legenda cross-fades uma batida mais tarde.

Esse atraso é todo o design Texto e imagem chegando juntos lê como um anúncio de banner Texto chegando em segundo lugar lê como uma legenda em uma fotografia, que é o que você quer se a fotografia é o produto.

Este é o design mais próximo do Elementor Image Widget carrossel se você quiser o mesmo visual sem Pro. O widget gratuito faz imagem mais legenda, apenas sem o desvanecimento escalonado.

04. Convés de Estrato

Demonstração ao vivo Baixar Widget JSON

Cartas empilhadas com um ligeiro deslocamento para que você possa ver três ou quatro arestas atrás da superior Avançar e a carta superior se levanta e desliza, revelando a próxima.

A pilha faz algo que um carrossel plano não pode: mostra quantidade Um visitante sabe que há mais depoimentos sem contar pontos Para a prova social que é a maior parte do trabalho.

Use-o para: depoimentos, níveis de preços, etapas de integração.

Cuidado: mantenha a pilha em cinco ou seis cartões visíveis. Além disso, os deslocamentos ficam tão finos que a profundidade é lida como um bug de renderização.

05. Divisão de bissetriz

Demonstração ao vivo Baixar Widget JSON

A tela se divide no meio A metade superior se move para cima, a metade inferior se move para baixo e eles se encontram no próximo slide Dois painéis, um gesto.

Eu colocaria isso em um herói e em nenhum outro lugar É um grande movimento: ele come o viewport completo e exige um segundo da atenção do visitante Em um herói que é um comércio justo No meio de uma página de serviços é apenas barulho.

Use-o para: heróis da página inicial, páginas de destino da campanha, pares antes/depois.

06. Roda do mouse de subida

Demonstração ao vivo Baixar Widget JSON

Sem setas Você rola, ele avança O controle deslizante captura a roda enquanto está em vista e a libera quando você atinge o último slide.

Scroll-jacking tem uma má reputação e ganhou A versão aqui libera a roda no momento em que você chegar a qualquer extremidade, então um visitante que quer continuar descendo a página nunca fica preso Teste este em um trackpad antes de você cometer, porque o impulso trackpad é muito mais twitchier do que uma roda, e se seus slides são texto-pesado pessoas vão ultrapassar.

Use-o para: seções narrativas, histórias de produtos, cronogramas.

Não use: acima da dobra O primeiro pergaminho de um visitante deve mover a página, não um widget.

07. Pivô Flip

Demonstração ao vivo Baixar Widget JSON

O cartão gira 180° no eixo vertical Face frontal para fora, face traseira para dentro Ambas as faces são editáveis, de modo que o reverso pode conter uma biografia, uma folha de especificações ou um preço.

O conteúdo bilateral é mais raro do que parece e este design é a razão para procurá-lo Membro da equipe na frente, papel e links na parte de trás Parte dianteira do tiro do produto, dimensões para trás.

Use-o para: as grades da equipe, antes/depois, spec cards Flip senta-se ao lado do fluxo de cobertura, arco e órbita no Quebra do carrossel 3D.

08. Arco Curvo

Demonstração ao vivo Baixar Widget JSON

Os slides ficam na borda de um círculo cujo centro fica em algum lugar abaixo da dobra. Cada um chega na vertical na parte superior e desce ao sair. As máscaras de imagem em forma de arco seguem a mesma curva.

Nada mais no conjunto se parece com isso, e esse é o argumento para isso Ninguém viu isso em outro site WordPress.

Use-o para: coleções onde os itens são semelhantes e a apresentação deve trazer o interesse: um catálogo, uma lista de exemplares, um menu.

09. Mosaico Tessera

Demonstração ao vivo Baixar Widget JSON

Uma grade de peças desiguais que reorganiza em vez de deslizar As peças animam para novas posições e tamanhos; a composição muda, mas nunca esvazia.

Este é o que se deve alcançar quando se tem trinta imagens e nenhuma hierarquia entre elas Um carrossel convencional força uma ordem de leitura em conteúdos que não têm um Um mosaico não tem.

Use-o para: fotografia de eventos, páginas de galeria, imagens pesadas sobre páginas.

Custo: é o design mais pesado do conjunto para o trabalho de layout Mantenha as imagens de origem abaixo de 200 KB cada ou a remodelação gagueja no Android de gama média.

10. Arrasto de meandro

Demonstração ao vivo Baixar Widget JSON

Agarrar e lançar O impulso leva a pista para além de onde você solta e facilita para uma parada Não se encaixa para deslizar limites, então um slide pode sentar-se meio visível, que é o ponto, porque um slide meio visível é um sinal de que há mais.

O free-drag tem um custo de acessibilidade genuíno: os usuários de teclado não recebem nada de uma interação de arrasto O suporte à tecla de seta está conectado, mas se o seu público se inclinar para a tecnologia assistiva, o design 01 ou 04 os servirá melhor.

Use-o para: lookbooks, portfólios, longas coleções horizontais.

11. Cortina de ardósia

Demonstração ao vivo Baixar Widget JSON

Painéis verticais se separam como cortinas e o próximo slide já está sentado atrás deles A revelação é a transição.

Ele lê como cerimônia Isso é útil precisamente duas vezes em um site, um lançamento de produto e um herói de página inicial, e deslocado em todos os outros lugares.

Use-o para: lançamentos, heróis de anúncios, campanhas sazonais.

12. Órbita Halo

Demonstração ao vivo Baixar Widget JSON

Os itens orbitam um ponto central fixo. O que está na parte superior é ativo e em tamanho real; o resto encolhe à medida que viajam pelas costas.

Layouts circulares se adequam a conteúdos que genuinamente fazem loops Um processo de quatro estágios, um diagrama de ecossistema, uma roda de serviço Coloque uma lista linear nele e você confundirá as pessoas, porque um círculo implica “retorna ao início,” e um fluxo de integração de cinco etapas não.

Use-o para: diagramas de processos, mapas de ecossistemas, rodas de capacidade.

13. Slider Herói de Plinto (grátis)

Demonstração ao vivo Baixar Widget JSON

Uma imagem preenche o palco Um pedestal de legenda fica na parte inferior esquerda, a barra de controle (pontos, setas, contador) na parte inferior direita. Os slides trocam instantaneamente: sem desbotamento, sem deslizamento, nada para sair de sincronia ou gaguejar em um telefone lento.

A troca instantânea soa como uma limitação até que você cronometre um fade contra ele Uma transição de herói come atenção duas vezes: uma vez saindo, uma vez chegando Este design gasta esse orçamento na fotografia em vez disso É também o único design no conjunto com um controle de link por slide, além de um rótulo CTA compartilhado em todos os slides, que é exatamente a forma que um herói de página inicial precisa.

Use-o para: heróis da página inicial, topos da página de destino, em qualquer lugar onde a imagem é o argumento.

Não o use para: conteúdo que precisa de movimento para se explicar Não há nenhum, de propósito.

14. controle deslizante de índice de contabilidade (grátis)

Demonstração ao vivo Baixar Widget JSON

Uma coluna de linhas de entrada ao lado de uma placa grande Escolha uma linha e a placa, seu carimbo e sua legenda troquem para corresponder A lista é a navegação, sem necessidade de setas, embora elas estejam lá.

Isso inverte o problema usual do carrossel Um controle deslizante normal esconde tudo, exceto o slide atual; aqui o índice completo fica visível o tempo todo, e a imagem é a visualização detalhada Há uma alternância de seleção no hover se você quiser que as linhas respondam antes do clique.

Use-o para: coleções, arquivos, listas de obras: em qualquer lugar os títulos trazem informações reais.

Cuidado: as linhas vendem o clique. “Item 1, Item 2, Item 3” desperdiça todo o design; escreva títulos de linhas como manchetes.

15. Galeria de Placas Vitrinas (grátis)

Demonstração ao vivo Baixar Widget JSON

Uma única placa sob uma tira de miniaturas, com um painel adesivo ao lado segurando a legenda e uma tabela de dados de quadros: local, hora, lente, abertura, obturador, ISO. Os quadros são substituídos imediatamente; nada desliza.

Se você pesquisou o controle deslizante de imagem do “elementor com miniaturas,” isto é que, construído para fotógrafos Os rótulos da tabela de dados são todos editáveis, então uma gráfica pode transformar lente/abertura em papel/edição, e um museu pode transformá-los em meio/data/proveniência.

Use-o para: portfólios de fotografia, fotografia de objetos, galerias de detalhes de produtos Para o mesmo formato de placa e miniatura com vídeo, consulte o guia deslizante galeria.

Não o use para: imagens que não merecem metadados Um painel de dados vazio é lido como uma página inacabada.

16. Catálogo Paginado por Quadrante (grátis)

Demonstração ao vivo Baixar Widget JSON

Uma grade de caixas de itens, paginadas três de cada vez: nove itens em três páginas Um trilho de segmentos mostra onde você está na corrida e funciona como o controle de salto; botões de passo o levam para frente e para trás.

Este é o design para o trabalho que a maioria dos carrosséis são dados erroneamente: mostrando muitas coisas comparáveis Cada caixa carrega uma imagem, categoria, título, cópia e uma estatística, e como uma página inteira de três é visível de uma só vez, um visitante pode realmente comparar, que é o que o fluxo de cobertura e seus primos deliberadamente impedem.

Use-o para: catálogos de estilo de produto, grades de recursos, menus de serviço. É também a rota gratuita no Guia carrossel de produtos WooCommerce.

Cuidado: contém exatamente nove itens em três páginas. Se o seu catálogo tiver trinta itens de profundidade, você deseja uma grade de produtos real com filtros, não um carrossel.

17. Painéis com guias de boletim (grátis)

Demonstração ao vivo Baixar Widget JSON

Uma faixa de tabulação sobre painéis empilhados Cada painel é um pequeno layout editorial: uma figura com sua legenda, um kicker, um título, um lede, cópia corporal, uma tabela de fatos de três linhas e uma assinatura.

Estritamente, isso é tabulações, não um controle deslizante, e é por isso que está aqui Metade do que as pessoas tentam forçar em carrosséis (compare três planos, três locais, três estudos de caso) é conteúdo tabulado vestindo um traje Este também faz a acessibilidade corretamente: semântica tablist ARIA real com tabindex itinerante, que a maioria dos widgets tabulação falso.

Use-o para: comparações de planos, páginas de localização, painéis de estudo de caso: quaisquer três coisas que um visitante escolha em vez de navegar.

18. Slider de citação de tribuna (grátis)

Demonstração ao vivo Baixar Widget JSON

Um painel de citações ao lado de um retrato, pisado com duas divisas Uma barra de progresso e uma faixa de contagem onde você está, e os botões de passo podem nomear a voz para a qual eles se moverão, como “Próximo: Amara Okafor” em vez de uma seta anônima.

Esse passo nomeado é o detalhe que vale a pena roubar Os carrosséis de testemunho perdem leitores na transição, porque uma seta não promete nada Um nome é uma razão para clicar A marca de citação é um controle de texto editável também, então ele pode ser definido para o glifo certo para o idioma do site, ou removido.

Use-o para: depoimentos, resenhas, cotações de clientes Tem a passo a passo do carrossel de testemunho completo, e você pode ver cotações reais de clientes em nosso próprio site.

Cuidado: ele detém três vozes, e cada um recebe o palco sozinho Escolha suas três melhores citações, e mantê-los curtos o suficiente para ler em uma respiração.

19. Slider da linha do tempo do almanaque (grátis)

Demonstração ao vivo Baixar Widget JSON

Entradas fixadas em um eixo datado As posições dos carrapatos são calculadas a partir dos anos que você digita, então o espaçamento é real e não uniforme. 1994 e 1996 ficam próximos, 1996 e 2011 ficam distantes, e a lacuna conta sua própria história. Um pente de uma década acima da regra dá ao espaçamento uma escala para ler.

Todos os outros widgets de linha do tempo espaçam suas entradas uniformemente, o que silenciosamente mente sobre a história Este não, e isso o torna o design mais opinativo do conjunto É também o painel mais profundo aqui, em 143 controles, porque o eixo, o pente e o estilo de estados de tique separadamente das entradas.

Use-o para: históricos de empresas, marcos de projetos, changelogs, registros com lacunas significativas Para uma versão estática, há um tintorial timeline usando o widget de estoque.

Não o use para: conteúdo sem data O eixo é o design; sem anos reais não há nada para desenhar.

20. controle deslizante de recursos Keystone (grátis)

Demonstração ao vivo Baixar Widget JSON

Um item apresentava grande; o resto espera em uma parede ao lado, cada um carregando apenas seu número e nome Clique em um satélite e ele é promovido para o recurso, e as caixas FLIP em seus novos lugares em vez de se teletransportar, então seu olho segue a troca em vez de perdê-la.

O recurso carrega uma placa de três fatos Foi construído para salas, espaços e exposições rotativas, e esse é o escopo honesto: apresenta um pequeno conjunto de coisas distintas uma de cada vez, com as outras visivelmente enfileiradas.

Use-o para: salas de recinto, espaços de estúdio, exposições, um portfólio de três a cinco peças.

Cuidado: os satélites mostram apenas número e nome, então o recurso tem que fazer a persuasão Liderar com seu item mais forte, porque a maioria dos visitantes nunca clica nele.

Como importar um modelo de controle deslizante para o Elementor

Quatro passos, cerca de noventa segundos Mesmo fluxo para projetos gratuitos e Pro, e diferente de importando um modelo Elementor, porque um design é registrado como um widget em vez de um layout de página.

1. Baixe o arquivo JSON do design da sua página de demonstração Um ficheiro por desenho.
2. Vá para Complementos Mestres → Construtor de Widgets no seu administrador WordPress e clique em Importar Widget.
3. Largue o JSON na zona de lançamento. O design é registrado como um widget com controles próprios: conteúdo, cores, tipografia, pontos de interrupção. Os oito designs gratuitos são importados no plugin gratuito; os doze designs Pro solicitam uma licença Pro aqui.
4. Arraste-o para uma página do painel Elementor, onde aparece em Favoritos, e troque o conteúdo do espaço reservado pelo seu.

A importação não toca no seu tema, não enfileira nada globalmente e não cria um shortcode Torna-se um widget no painel como qualquer outro.

Esses controles deslizantes funcionam em dispositivos móveis?

Todos os vinte são habilitados para toque e responsivos. Quatro mudam de comportamento em vez de apenas dimensionar:

• Concertina Acordeão muda de hover para expandir para tap-para expandir.
• Subida Mousewheel deixa cair a captura da roda e usa o deslizamento.
• Meandro Arraste mantém o arrasto, mas encurta o impulso para que um movimento não ultrapasse toda a faixa.
• Slider de índice de razão empilha o índice acima da placa e o select-on-hover volta a tocar.

Os oito gratuitos também mantêm a navegação do teclado ativada por padrão, e Plinth Hero e Rostrum Quote respondem a gestos de deslizar para fora da caixa Teste o mosaico em um telefone real, em vez de no emulador de dispositivo do navegador, porque as viewports emuladas não reproduzem o custo de layout do Android de médio alcance, e o mosaico é onde isso aparece primeiro.

Qual deles você deve realmente escolher?

Se você está preso, estes cobrem a maioria dos sites:

• Portfólio ou agência: Meridian Coverflow, ou Meander Drag se você tiver mais de uma dúzia de peças Em uma licença gratuita, Keystone Feature Slider.
• Negócio de serviços: Acordo de Concertina. De graça, Painéis com Tabulação de Boletim, cuja tabela de fatos ganha seu sustento nas comparações de planos.
• Loja: Catálogo Paginado por Quadrante para um nove com curadoria Não há widget gratuito que deslize um feed de produto ao vivo; esse trabalho precisa Carrossel Loop da Elementor Pro. Pule os designs 3 D de qualquer maneira: os compradores querem comparar e o fluxo de cobertura é construído para detê-los.
• Depoimentos: Rostrum Quote Slider É gratuito, e os botões de passo nomeados são o melhor prompt de transição no conjunto.
• Herói da página inicial: Plinto Herói Slider se a fotografia for forte, e o modelos de seção herói se você quiser o bloco inteiro em vez do controle deslizante; Divida o corte do corpo ou cortina de ardósia se você quiser que o movimento seja o momento, e apenas um deles, uma vez.
• Sobre página ou histórico: Slider de linha do tempo do Almanaque. nada mais aqui faz conteúdo datado honestamente.

Seja qual for a sua escolha, passe pelo teste que importa: carregue a página no seu próprio telefone, no celular, e veja se o controle deslizante é a primeira coisa que renderiza ou a última Um design que chega depois que o texto já foi lido não é um controle deslizante, é uma decoração.

Perguntas frequentes

Onde ir a seguir

Abra duas ou três demos e dê-lhes uma olhada real no seu telefone antes de escolher. Então:

Doze dos vinte precisam de licença para importar, então o página preços é o lugar para verificar qual nível cobre o design que você escolheu.

• Navegue por tudo em um só lugar no Widgets Carrossel Elementor page, com todos os vinte designs mais os widgets carrossel do próprio plugin.
• Apegando-se ao nível livre? O livre carrossel widgets post caminha por tudo que não custa nada, estes oito incluídos.
• Indo para a profundidade sobre o movimento? Os desenhos carrossel 3D (coverflow, flip, arco e órbita) olhem mais de perto.
• Quer uma página inteira em vez de uma seção? O kits modelo envie layouts completos com carrosséis já colocados.
• Construindo a página inteira, não apenas o controle deslizante? O modelos de seção de Elementor grátis a biblioteca cobre recursos, preços, depoimentos, equipe, FAQ e blocos CTA, cada um importável como um widget editável.