Repetidor

O Campo repetidor transforma um conjunto de controles em quantas linhas o usuário precisar Você define os campos uma vez (um nome, um preço, uma descrição) e qualquer pessoa que edite o widget no Elementor pode adicionar, duplicar, reordenar e remover itens do painel, exatamente como os repetidores nos widgets Icon List ou Testimonial Carousel do próprio Elementor Dentro dos Master Addons Construtor de widgets, o Repetidor é como você constrói grades de cartões, menus, listas de recursos, seções de equipe e qualquer outra coisa em que a contagem de itens depende do proprietário do site, não do autor do widget.

O Repetidor emparelha com ambos os sistemas companheiros: Condições mostra ou oculta o controle no painel e o Mecanismo de modelo de sintaxe dupla renderiza suas fileiras na extremidade frontal com {% for item in my_repeater %} loops e tokens pontilhados como {{ item.title }}. Ambos os guias cobrem configuração e limitações.

O Repetidor funciona em conjunto com o loop de modelo no seu HTML: a {% for %} block imprime sua marcação uma vez por linha Três itens renderizam três cartões; adicione um quarto no painel e um quarto cartão aparece, sem alterações de código.

O que o campo Repetidor faz #

Um campo Repetidor renderiza o controle repetidor padrão do Elementor no painel de opções do seu widget Quando alguém seleciona o widget, ele vê uma pilha de linhas dobráveis com quatro ações familiares:

• Adicionar item: um botão abaixo das linhas cria um novo item com os seus valores por omissão.
• Duplicar: o ícone de cópia clona uma linha, configurações e tudo.
• Reordenar: as linhas arrastam e soltam em um novo pedido e a página é atualizada para corresponder.
• Remover: o ícone de exclusão retira uma linha.

Cada linha se expande para mostrar os subcampos que você definiu: texto, área de texto, seleção, mídia, URL, ícones e os outros tipos de campo do Widget Builder podem todos viver dentro de um Repetidor Isso difere dos campos de valor único como Texto de uma maneira importante: a conexão com seu HTML é um loop, não um shortcode único Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é uma seção de pratos de restaurante “signature” que renderiza uma grade de cartões de 3 colunas, uma carta por linha Repeater.

Como adicionar um campo Repetidor #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Repetidor campo, listado com os demais campos estruturais.

Arraste o Repetidor para uma seção abaixo do Conteúdo tab, onde o conteúdo repetido pertence Uma vez que ele pousa, as opções do campo abrem à esquerda, e é aqui que a configuração real acontece: definindo os sub-campos que cada linha carregará.

Opções de campo repetidor explicadas #

• Etiqueta: o título mostrado acima das linhas em Elementor, por exemplo “Signature Dishes”.
• Nome: o identificador exclusivo para todo o repetidor, letras, números e sublinhados apenas Este é o nome ao qual seu loop se refere, por exemplo signature_dishes.
• Campos: os subcampos de cada linha. Adicione um por item de conteúdo por item. (em inglês) contém o exemplo da antena: um campo de texto Nome do prato, um campo de texto Preço, uma área de texto Descrição e uma seleção Estilo da tag.
• Campo do título: qual subcampo rotula a linha recolhida, escrita como {{{ dish_name }}}. Padrões para o primeiro subcampo, que geralmente é o que você deseja.
• Predefinição: as linhas com as quais o widget começa Enviar dois ou três itens preenchidos para que o widget pareça vivo na primeira gota.
• Texto do botão: o rótulo no botão adicionar, por exemplo “Add Dish” em vez do genérico “Add Item”.
• Evite o vazio: impede o utilizador de apagar a última linha restante.
• Min / Máx. Itens: limites opcionais sobre quantas linhas são permitidas.

Conecte o Repetidor ao seu HTML com um loop #

Aqui está a parte que funciona de forma diferente de cada campo de valor único: o Repetidor não tem clareza {{shortcode}}. Seu valor é uma lista de linhas, portanto seu HTML envolve a marcação repetida em a {% for %} bloco. dentro do loop, cada subcampo está disponível na variável do loop:

<div class="dish-grid">
  {% for dish in signature_dishes %}
  <article class="dish-card">
    <h3>{{ dish.dish_name }}</h3>
    <span class="price">{{ dish.dish_price }}</span>
    <p>{{ dish.dish_desc }}</p>
  </article>
  {% endfor %}
</div>

• signature_dishes é o Nome do Repetidor.
• dish é uma variável de loop que você inventa no local; chame de qualquer coisa.
• {{ dish.dish_name }} imprime o Nome do Prato daquela linha Todo subcampo funciona da mesma maneira: {{ dish.<sub_field_name> }}.
• Tudo entre {% for %} e {% endfor %} imprime uma vez por linha, na ordem em que as linhas ficam no painel.

Campos opcionais dentro do loop #

Envolva qualquer coisa opcional em um {% if %} bloqueie para que os campos vazios não deixem marcação perdida para trás No exemplo do prato, cada cartão tem um crachá de tag opcional:

{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}

Uma linha com um Texto de Tag vazio não renderiza nenhum emblema. O {% if %} block também aceita comparações como {% if dish.tag_style == 'spicy' %} quando você precisa de marcação que muda por valor.

Subcampos de mídia e link #

Um subcampo de imagem imprime seu URL diretamente, como em <img src="{{ dish.photo }}">, e um sub - campo URL expõe o seu endereço da mesma forma As propriedades aninhadas estão disponíveis com notação de pontos quando você precisa delas.

Use o Repetidor no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta O Repetidor aparece como uma pilha de linhas sob o rótulo que você definiu, cada linha intitulada por seu Campo de Título.

Clique em uma linha para expandir seus subcampos e editá-los; as atualizações de visualização ao vivo Se uma nova linha não renderizar nada, verifique se o nome do loop em seu HTML corresponde ao campo Nome do Repetidor exatamente 1 incompatibilidade falha silenciosamente em vez de lançar um erro Clique Adicionar Prato (ou o que quer que o Texto do Botão diga) e uma nova linha aparece com os seus valores por omissão, pronta a editar Arraste a pega em qualquer linha para reordenar, e os cartões na página seguem.

Como o loop imprime cada linha, o layout cresce com o conteúdo Em nossa grade de prato de 3 colunas, as três primeiras cartas preenchem uma linha; um quarto prato começa uma segunda linha abaixo, automaticamente, porque é assim que a grade CSS do widget se envolve.

Casos de uso comum #

• Grades cartão istências, recursos, níveis de preços ou membros da equipe, uma linha por cartão.
• Menus e listas de preços (Reuters), salões de beleza e academias onde os itens mudam semanalmente.
• Paredes de logotipo e listas de clientes 1 subcampo de imagem por linha.
• FAQ e seções de acordeão 1 campo de texto de perguntas e uma área de resposta por linha.
• Cronogramas e etapas do processo – linhas que o usuário pode arrastar para a sequência.

Dicas para trabalhar com o campo Repetidor #

• O laço é a ligação. Não há {{repeater_name}} shortcode para imprimir sozinho; o repetidor só faz sentido por dentro {% for %}…{% endfor %}.
• Enviar padrões reais. Duas ou três linhas preenchidas tornam o widget apresentável no momento em que é descartado e funcionam como um exemplo do que cada campo espera.
• Defina o Campo Título. As linhas desmoronadas rotuladas como “Margherita del Forno” são muito mais fáceis de gerenciar do que três linhas, todas rotuladas como “Item”.
• Proteja campos opcionais com {% if %}. Vãos vazios e embalagens vazias ficam invisíveis até quebrarem seu espaçamento.
• Deixe o CSS lidar com a contagem de linhas. Uma grade com repeat(3, 1fr) envolve itens extras em novas linhas por conta própria; o loop apenas imprime cartões.
• Nomeie subcampos claramente. {{ dish.dish_price }} lê melhor em um modelo do que {{ dish.field_2 }}, para você e para quem herda o widget.

Perguntas frequentes #

Embrulhando #

O campo Widget Builder Repeater é o que transforma um layout fixo em um vivo: defina os subcampos, imprima-os em um {% for %} loop, e cada decisão de conteúdo depois disso acontece no painel Elementor: adicione um cartão, arraste-o para o lugar, exclua-o na próxima temporada Emparelhe-o com o Campo tipografia para fontes controladas pelo editor e o Campo fronteiriço para o estilo do cartão, e um único widget cobre uma seção inteira da página Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.