Repetidor

El Campo repetidor convierte un conjunto de controles en tantas filas como el usuario necesite. Usted define los campos una vez (un nombre, un precio, una descripción) y cualquiera que edite el widget en Elementor puede agregar, duplicar, reordenar y eliminar elementos del panel, exactamente como los repetidores en la propia Lista de iconos de Elementor o en los widgets del carrusel de testimonios. Dentro de los complementos maestros Creador de widgets, el Repetidor es la forma en que crea cuadrículas de tarjetas, menús, listas de funciones, secciones de equipo y cualquier otra cosa donde el recuento de elementos depende del propietario del sitio, no del autor del widget.

El Repetidor se empareja con ambos sistemas complementarios: Condiciones muestra u oculta el control en el panel, y el Motor de plantilla de sintaxis de ramita representa sus filas en la parte delantera con {% for item in my_repeater %} bucles y tokens punteados como {{ item.title }}. Ambas guías cubren la configuración y las limitaciones.

El repetidor funciona junto con el bucle de plantilla en su HTML: a {% for %} block imprime su marcado una vez por fila. Tres elementos representan tres cartas; agregue un cuarto en el panel y aparecerá una cuarta carta, sin cambios de código.

Qué hace el campo Repetidor #

Un campo Repetidor representa el control del repetidor estándar de Elementor en el panel de opciones de su widget. Cuando alguien selecciona el widget, ve una pila de filas plegables con cuatro acciones familiares:

• Agregar artículo: un botón debajo de las filas crea un nuevo elemento con sus valores predeterminados.
• Duplicar: el ícono de copia clona una fila, configuraciones y todo.
• Reordenar: las filas se arrastran y caen en un nuevo orden y la página se actualiza para que coincida.
• Eliminar: el icono de eliminar elimina una fila.

Cada fila se expande para mostrar los subcampos que definió: texto, área de texto, selección, medios, URL, íconos y los otros tipos de campos del Creador de widgets pueden vivir dentro de un repetidor. Esto difiere de los campos de un solo valor como Texto de una manera importante: la conexión a su HTML es un bucle, no un código corto único. Si eres nuevo en la creación de widgets, comienza con Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor de Widget Builder. Nuestro ejemplo es una sección de “platos exclusivos” de restaurante que representa una cuadrícula de tarjetas de 3 columnas, una tarjeta por fila de repetidor.

Cómo agregar un campo Repetidor #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Repetidor campo, listado con los demás campos estructurales.

Arrastre el repetidor a una sección debajo del Contenido pestaña, donde pertenece el contenido repetido. Una vez que aterriza, las opciones del campo se abren a la izquierda, y aquí es donde ocurre la configuración real: definir los subcampos que llevará cada fila.

Se explican las opciones de campo del repetidor #

• Etiqueta: el encabezado que se muestra encima de las filas de Elementor, por ejemplo “Platos exclusivos”.
• Nombre: el identificador único para todo el repetidor, letras, números y guiones bajos únicamente. Este es el nombre al que se refiere su bucle, por ejemplo signature_dishes.
• Campos: los subcampos que contiene cada fila. Agregue uno por pieza de contenido por elemento « en el ejemplo de plato: un campo de texto Nombre de plato, un campo de texto Precio, un área de texto Descripción y una selección Estilo de etiqueta.
• Campo de título: qué subcampo etiqueta la fila colapsada, escrita como {{{ dish_name }}}. El valor predeterminado es el primer subcampo, que suele ser lo que desea.
• Predeterminado: las filas con las que comienza el widget. Envíe dos o tres elementos completos para que el widget luzca vivo en la primera entrega.
• Texto del botón: la etiqueta en el botón agregar, por ejemplo “Agregar plato” en lugar del genérico “Agregar artículo”.
• Prevenir el vacío: impide que el usuario elimine la última fila restante.
• Artículos mínimos/máximos: límites opcionales sobre cuántas o cuántas filas se permiten.

Conecte el repetidor a su HTML con un bucle #

Aquí está la parte que funciona de manera diferente a cada campo de valor único: el Repetidor no tiene nada claro {{shortcode}}. Su valor es una lista de filas, por lo que su HTML envuelve el marcado repetido en a {% for %} bloquear. Dentro del bucle, cada subcampo está disponible en la variable del bucle:

<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 es el nombre del repetidor.
• dish es una variable de bucle que inventas en el acto; llámalo cualquier cosa.
• {{ dish.dish_name }} imprime el nombre del plato de esa fila. Cada subcampo funciona de la misma manera: {{ dish.<sub_field_name> }}.
• Todo entre {% for %} y {% endfor %} imprime una vez por fila, en el orden en que se ubican las filas en el panel.

Campos opcionales dentro del bucle #

Envuelva cualquier cosa opcional en un {% if %} bloquee para que los campos vacíos no dejen marcas perdidas. En el ejemplo del plato, cada tarjeta tiene una insignia de etiqueta opcional:

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

Una fila con un texto de etiqueta vacío no representa ninguna insignia. El {% if %} block también acepta comparaciones como {% if dish.tag_style == 'spicy' %} cuando necesita un marcado que cambia por valor.

Subcampos de medios y enlaces #

Un subcampo de imagen imprime su URL directamente, como en <img src="{{ dish.photo }}">, y un subcampo de URL expone su dirección de la misma manera. Las propiedades anidadas están disponibles con notación de puntos cuando las necesita.

Utilice el repetidor en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. El repetidor aparece como una pila de filas debajo de la etiqueta que configuró, cada fila titulada por su campo de título.

Haga clic en una fila para expandir sus subcampos y editarlos; las actualizaciones de vista previa están activas. Si una nueva fila no representa nada, compruebe que el nombre del bucle en su HTML coincida exactamente con el campo Nombre del repetidor « una falta de coincidencia falla silenciosamente en lugar de generar un error. Haga clic Agregar plato (o lo que diga el texto del botón) y aparece una nueva fila con sus valores predeterminados, lista para editar. Arrastre el identificador de cualquier fila para reordenar y las tarjetas de la página seguirán.

Debido a que el bucle imprime cada fila, el diseño crece con el contenido. En nuestra cuadrícula de 3 columnas, las tres primeras tarjetas llenan una fila; una cuarta antena parabólica inicia una segunda fila debajo, automáticamente, porque así es como se envuelve la cuadrícula CSS del widget.

Casos de uso comunes #

• Rejillas para tarjetas « servicios, características, niveles de precios, platos o miembros del equipo, una fila por tarjeta.
• Menús y listas de precios «restaurantes, salones y gimnasios donde los artículos cambian semanalmente.
• Paredes de logotipos y listas de clientes « un subcampo de imagen por fila.
• Preguntas frecuentes y secciones de acordeón « un campo de texto de pregunta y un área de texto de respuesta por fila.
• Cronogramas y pasos del proceso «filas ordenadas que el usuario puede arrastrar a secuencia.

Consejos para trabajar con el campo Repetidor #

• El bucle es la conexión. No hay {{repeater_name}} shortcode para imprimir por sí solo; el repetidor sólo tiene sentido por dentro {% for %}…{% endfor %}.
• Envíe valores predeterminados reales. Dos o tres filas completadas hacen que el widget se pueda presentar en el momento en que se suelta y sirven como ejemplo de lo que espera cada campo.
• Establezca el campo Título. Las filas colapsadas etiquetadas como “Margherita del Forno” son mucho más fáciles de administrar que tres filas, todas etiquetadas como “Artículo”.
• Guarde los campos opcionales con {% if %}. Los tramos vacíos y los envoltorios vacíos son invisibles hasta que rompen el espacio.
• Deje que CSS maneje el recuento de filas. Una cuadrícula con repeat(3, 1fr) envuelve elementos adicionales en nuevas filas por sí solo; el bucle solo imprime tarjetas.
• Nombra los subcampos claramente. {{ dish.dish_price }} se lee mejor en una plantilla que {{ dish.field_2 }}, para ti y para quien herede el widget.

Preguntas frecuentes #

Envolviendo #

El campo Repetidor de Widget Builder es lo que convierte un diseño fijo en uno vivo: define los subcampos, imprimelos en a {% for %} bucle, y cada decisión de contenido después de eso sucede en el panel Elementor: agrega una tarjeta, arrástrala a su lugar y elimínala la próxima temporada. Emparejarlo con el Campo de tipografía para fuentes controladas por el editor y el Campo fronterizo para diseñar tarjetas, un solo widget cubre una sección completa de la página. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.