O Loop Carousel é o carrossel dinâmico do Elementor Pro Em vez de adicionar slides à mão, você constrói um slide como modelo e aponta o widget para uma consulta (postagens, produtos ou qualquer tipo de postagem personalizado) e ele se preenche Adicione um post, o carrossel não necessita de edição.
Chegou no Elementor 3.11 e é o Widget carrossel elementor a maioria das pessoas está realmente procurando quando eles procuram por um pós-carrossel ou um controle deslizante de produto Também é Pro-only, sem equivalente livre no núcleo Elementor, então a segunda metade deste post cobre o widgets carrossel grátis isso te deixa por perto se você não tiver licença.
O que este guia cobre
- Loop Carousel vs Loop Grid: qual usar
- O que você precisa antes de começar
- Como criar um Loop Carousel no Elementor
- As configurações que fazem as pessoas subirem
- Carrossel Loop para produtos WooCommerce
- Nenhum Elementor Pro? O caminho livre
- Quando um Loop Carousel é a escolha errada
- Perguntas frequentes
Loop Carousel vs Loop Grid: qual
Mesmo motor, mesmo modelo de Item de Loop, apresentação diferente A grade empilha linhas verticalmente O carrossel coloca os mesmos itens em uma pista horizontal.
Escolha o carrossel quando os itens forem opcionais: um “você também pode gostar de tira de”, postagens relacionadas, produtos em destaque Ninguém precisa ver o item sete para que a página faça sentido.
Escolha a grade quando os itens são a página Um arquivo, uma categoria de loja, um índice de blog Esconder dois terços de uma listagem de categoria atrás de uma seta custa conversões, porque um comprador que precisa clicar para ver mais produtos geralmente não o faz.
A regra que EU daria a um cliente: se a seção tem um cabeçalho como “Mais do blog,” carrossel Se o cabeçalho é o título da página, grade.
O que você precisa antes de começar
- Elementor Pro. Loop Carousel não está no plugin gratuito e não há versão parcial dele.
- Um modelo de item de loop. Este é o design de slide único: imagem em destaque, título, trecho, botão Construído uma vez no Construtor de Tema, reutilizado em todos os lugares.
- Conteúdo a consultar. Postagens, produtos ou um tipo de postagem personalizado registrado.
Em instalações mais antigas, você também pode precisar habilitá-lo em Elementor → Configurações → Recursos Ele foi enviado atrás de um sinalizador de experimento e permaneceu lá por alguns lançamentos antes de ficar estável.
Como criar um Loop Carousel no Elementor
Construa o slide primeiro, depois o carrossel Fazer o contrário significa projetar dentro de uma visualização apertada.
- Criar o modelo de Item de Loop. Modelos → Construtor de temas → Item de loop → Adicionar novo Escolha o tipo de postagem que ele renderizará Você está projetando uma carta, não uma lista, e o Elementor mostra um único item e o repete mais tarde.
- Construa o cartão com tags dinâmicas. Adicione um widget de imagem e defina sua origem como Imagem dinâmica → em destaque. Widget de cabeçalho → Dinâmico → Título de postagem. Editor de texto → Post Excerpt. Botão → Dinâmico → URL de postagem. Nada aqui é codificado; cada campo extrai de qualquer postagem que caia nesse slot.
- Publicar o modelo e pule o prompt de condições de exibição Os itens de loop não precisam de condições, porque são chamados por um widget em vez de atribuídos a um local.
- Largue o widget Loop Carousel em sua página e escolha o modelo que você acabou de fazer em Escolha um modelo.
- Defina a consulta. Fonte (Posts, Products, ou seu CPT), então restrinja-o: inclua por taxonomia, exclua o post atual, defina posts-per-pageLigue o “Avoid Duplicates” se houver outro loop na mesma página, caso contrário, sua tira de posts relacionados repetirá o que já está na barra lateral.
- Configurar o carrossel. Slides por visualização, slides para rolar, reprodução automática, loop infinito, velocidade, pausa no hover Defina slides por visualização separadamente para desktop, tablet e celular usando os ícones do dispositivo na parte superior do painel.
- Estilo a navegação. Setas, pontos ou fração. Tamanho, cor, posição e estado de pairar ficam na guia Estilo.
As configurações que fazem as pessoas subirem
O loop infinito precisa de itens suficientes. Elementor clones slides para fingir o wrap-around, e ele precisa de pelo menos duas vezes seus slides-per-view para fazê-lo invisivelmente Quatro posts em três-per-view irá saltar visivelmente quando ele envolve Ou levantar posts-per-page ou desligar o loop.
Posts por página é um limite de consulta, não um limite de exibição. Defina-o como 6 e o carrossel contém seis itens no total, no entanto, muitos são visíveis As pessoas definem-no como 3 para combinar com slides-per-view e, em seguida, se perguntam por que não há nada para rolar.
A lacuna na borda muda a dica. Um carrossel que termina nivelado na borda do recipiente parece terminado Adicione uma pequena lacuna de borda para que o próximo slide espreite e as pessoas saibam deslizar São alguns pixels e muda de forma mensurável a taxa de interação.
Autoplay mais links é um par ruim. Se seus slides são clicáveis e o carrossel se move em um temporizador, alguém vai pegar um cartão e clicar naquele que o substituiu Pause-on-hover corrige o gabinete da área de trabalho No toque não há hover, então para cartões clicáveis Eu desligaria totalmente a reprodução automática.
Carrossel Loop para produtos WooCommerce
Mesmo processo, uma diferença: defina a origem para Produtos e você terá controles de consulta específicos do WooCommerce Filtre por categoria, tag ou atributo, classifique por preço, popularidade ou data e exclua itens fora de estoque.
O modelo de item de loop para produtos deve ter preço e um botão de adição ao carrinho como elementos dinâmicos, não texto estático Perca isso e cada cartão no carrossel mostra o mesmo preço, que é exatamente o tipo de bug que sobrevive à produção porque parece bom na visualização do editor.
Produtos relacionados, visualizados recentemente, e “complete as tiras look” são todas o mesmo widget com uma consulta diferente. E se você precisar apenas de um produto chamado em vez de uma tira, o Widget de produto em destaque faz isso sem uma consulta em tudo É um widget Pro, e é o único widget de produto WooCommerce Master Addons navios.
Sem Elementor Pro? aqui está o caminho livre
Loop Carousel é Pro. Se você estiver no Elementor gratuito, não o receberá e nenhum complemento gratuito reimplementa o sistema de modelos Loop Item.
O que você pode obter de graça é o resultado: um carrossel dinâmico que puxa posts ou produtos e se atualiza Master Addons' Widget blog possui um modo carrossel no plugin gratuito Consulte por tipo de postagem, categoria, tag ou autor, escolha um layout, mude a exibição para carrossel e configure as mesmas setas, pontos, reprodução automática e controles por ponto de interrupção.
O trade-off é honesto: você não projeta o cartão O widget Blog dá predefinições de layout e uma guia Estilo em vez de uma tela de Item de Loop em branco Se você precisar de controle de pixel sobre o slide, a abordagem do Elementor Pro é melhor se você precisar de seis posts mais recentes em um slider que pareça decente, o” o widget gratuito chega lá mais rápido.
Os produtos são mais finos, e vale a pena dizer claramente: não há widget de carrossel de produtos gratuito Uma tira de produto deslizante e auto-atualizada precisa do Loop Carousel da Elementor Pro, ou um layout preenchido à mão como o abaixo guia carrossel do produto funciona através de ambos E se seus slides são imagens fixas, em vez de uma consulta, o livre Widget Carrossel de Imagem é o caminho mais curto, embora nesse ponto você esteja construindo um controle deslizante, não um loop.
Há uma terceira opção gratuita que vale a pena conhecer Navios Master Addons 20 designs de carrossel e controle deslizante nomeados como importável Construtor de widgets arquivos, e 8 deles importam gratuitamente Eles não são orientados por consultas, então você preenche os itens à mão, mas dois ficam perto do que um Loop Carousel produz. Catálogo Paginado Quadrante páginas uma grade de nove caixas de itens três de cada vez, cada uma com uma imagem, categoria, título e cópia, que é a coisa livre mais próxima de um loop de produto paginado. Slider de índice de razão coloca um índice clicável de entradas ao lado de uma placa de exibição, construída para arquivos e listas de obras Todos os 20 são coletados no hub de widgets carrossel.
Quando um Loop Carousel é a escolha errada
Três casos, e EU vi todos os três darem errado em sites de clientes.
Sua página de arquivo. Uma listagem de categorias em um carrossel significa que o rastreador do Google vê seis produtos onde você tem sessenta O resto está no DOM, mas o sinal para um usuário, e para qualquer um que julgue a profundidade da página, é que essa categoria é fina.
Acima da dobra no celular. Um carrossel dinâmico é uma consulta, uma renderização de modelo e um inicialização deslizante antes que qualquer coisa pinta Coloque isso no topo de uma página de telefone e sua maior tinta contente é um spinner.
Menos de cinco itens. Um carrossel com três slides é uma grade que faz as pessoas trabalharem Basta mostrar todos os três.
Perguntas frequentes
O carrossel Elementor Loop é gratuito?
O No. Loop Carousel requer o Elementor Pro, e não há versão gratuita reduzida A alternativa gratuita é um widget de carrossel orientado a consultas de um addon, e o widget Blog do Master Addons tem um modo carrossel em seu nível livre que puxa postagens dinamicamente Para layouts preenchidos à mão, 8 dos 20 designs de carrossel importáveis da Master Addons também são gratuitos.
Qual é a diferença entre Loop Grid e Loop Carousel?
Eles compartilham o mesmo modelo de Item de Loop e controles de consulta A Grade de Loop organiza resultados em linhas e colunas; o Carrossel de Loop os coloca em uma trilha deslizante horizontal com setas e pontos Use a grade para arquivos e listagens, o carrossel para o “related” opcional ou “featured” tiras.
Como adiciono um Loop Carousel no Elementor?
Construa um modelo de Item de Loop no Construtor de Tema primeiro, usando tags dinâmicas para a imagem, título e trecho Publique-o, depois arraste o widget Loop Carousel para sua página, selecione esse modelo, defina a fonte de consulta e os filtros e configure slides por visualização e reprodução automática nas configurações do Carrossel.
Por que meu Loop Carousel não está mostrando postagens?
Normalmente a consulta Verifique se o tipo de postagem do modelo de Item de Loop corresponde à fonte de consulta do widget, porque um modelo construído para Posts não renderizará Produtos A segunda causa mais comum é um filtro de taxonomia sem conteúdo correspondente A terceira é o conjunto de postagens por página inferior ao que você pensa.
O Loop Carousel pode mostrar tipos de postagem personalizados?
Sim. qualquer tipo de postagem pública registrada aparece no menu suspenso da fonte de consulta, e seus campos personalizados estão disponíveis como tags dinâmicas se você estiver usando ACF, Meta Box ou Pods. Construa o modelo de item de loop em relação a esse tipo de postagem e o carrossel lida com o resto.
Como faço um Loop Carousel responsivo?
Defina slides-per-view separadamente em cada ponto de interrupção usando os ícones do dispositivo na parte superior da configuração Três na área de trabalho, dois no tablet, um no celular é o padrão seguro Também verifique o tamanho da seta no celular, porque o padrão da área de trabalho é muitas vezes muito pequeno para ser um alvo de toque confortável.
Para onde ir a partir daqui
Se você tiver o Pro, construa o modelo de Item de Loop primeiro e trate-o como um ativo de design que você reutilizará em grades e carrosséis para o resto do site É a peça que retribui.
Se você preferir construir o cartão como um widget reutilizável do que como um modelo, é isso autor de seu próprio widget é para, e o página preços cobre o nível em que se senta.
Se não o fizer, comece com os widgets gratuitos orientados por consultas e veja se as predefinições de layout o aproximam o suficiente Ambos os caminhos são cobertos no Widgets Carrossel Elementor page, juntamente com o resto das opções de carrossel Ainda decidindo sobre o formato? Carrossel versus controle deslizante estabelece qual formato sua seção realmente precisa e o arredondamento do 'plugin' deslizante cobre os plugins que o constroem.
