Répéteur

Le Champ répéteur transforme un ensemble de contrôles en autant de lignes que l'utilisateur a besoin Vous définissez les champs une fois (un nom, un prix, une description) et toute personne éditant le widget dans Elementor peut ajouter, dupliquer, réorganiser et supprimer des éléments du panneau, exactement comme les répéteurs dans la propre liste d'icônes ou les widgets du Carrousel de témoignage d'Elementor À l'intérieur des modules complémentaires principaux Constructeur de widgets« Le répéteur est la façon dont vous construisez des grilles de cartes, des menus, des listes de fonctionnalités, des sections d'équipe et tout ce qui relève du nombre d'éléments, et non de l'auteur du widget. ».

Le répéteur s'associe aux deux systèmes compagnons : Conditions affiche ou masque la commande dans le panneau, et le Moteur de modèles de syntaxe Twig rend ses rangées sur l'avant avec {% for item in my_repeater %} boucles et jetons pointillés comme {{ item.title }}. Les deux guides couvrent la configuration et les limitations.

Le répéteur fonctionne avec la boucle de modèle dans votre HTML : a {% for %} block imprime votre balisage une fois par ligne Trois éléments rendent trois cartes ; ajoutez une quatrième dans le panneau et une quatrième carte apparaît, aucun code ne change.

Ce que fait le champ Répéteur #

Un champ Répéteur rend le contrôle standard du répéteur d'Elementor dans le panneau d'options de votre widget Lorsque quelqu'un sélectionne le widget, il voit une pile de lignes pliables avec quatre actions familières :

• Ajouter un élément : un bouton sous les lignes crée un nouvel élément avec vos valeurs par défaut.
• Dupliquer: l'icône de copie clone une ligne, les paramètres et tout.
• Réorganiser : les lignes glissent et tombent dans un nouvel ordre et les mises à jour de la page correspondent.
• Supprimer: l'icône supprimer prend une ligne.

Chaque ligne s'étend pour afficher les sous-champs que vous avez définis : texte, zone de texte, sélection, média, URL, icônes et les autres types de champs Widget Builder peuvent tous vivre dans un répéteur. Cela diffère des champs à valeur unique comme Texte d'une manière importante : la connexion à votre HTML est une boucle, pas un shortcode unique Si vous êtes nouveau dans la construction de widgets, commencez par le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est une section de restauration “signature vats” qui restitue une grille de cartes à 3 colonnes, une carte par ligne de répéteur.

Comment ajouter un champ Répéteur #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Répéteur champ, répertorié avec les autres champs structurels.

Faites glisser le répéteur dans une section sous le Contenu tab, où le contenu répétitif appartient Une fois qu'il atterrit, les options du champ s'ouvrent à gauche, et c'est là que se produit la configuration réelle : définir les sous-champs que chaque ligne portera.

Options du champ de répétition expliquées #

• Étiquette: le titre indiqué au-dessus des lignes dans Elementor, par exemple “Signature Dishes”.
• Nom: l'identifiant unique pour l'ensemble du répéteur, les lettres, les chiffres et les traits de soulignement uniquement. C'est le nom auquel votre boucle fait référence, par exemple signature_dishes.
• Champs: les sous-champs que contient chaque ligne Ajoutez-en un par morceau de contenu par élément dans l'exemple de la parabole : un champ de texte D Name, un champ de texte Price, une zone de texte Description et une sélection Tag Style.
• Champ du titre : quel sous-champ étiquette la ligne effondrée, écrite comme suit {{{ dish_name }}}. Par défaut, le premier sous-champ, qui est généralement ce que vous voulez.
• Par défaut: les lignes avec lesquelles le widget commence Expédiez deux ou trois éléments remplis pour que le widget ait l'air vivant dès la première goutte.
• Texte du bouton : l'étiquette sur le bouton d'ajout, par exemple“Add Dish” au lieu du générique “Add Item”.
• Empêcher le vide : empêche l'utilisateur de supprimer la dernière ligne restante.
• Articles Min/Max : limites facultatives sur le nombre ou le nombre de lignes autorisées.

Connectez le répéteur à votre HTML avec une boucle #

Voici la partie qui fonctionne différemment de chaque champ à valeur unique : le Répéteur n'a pas de plain {{shortcode}}. Sa valeur est une liste de lignes, donc votre HTML enveloppe le balisage répétitif dans un {% for %} bloc. A l'intérieur de la boucle, chaque sous-champ est disponible sur la variable de boucle :

<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 est le Nom du Répéteur.
• dish est une variable de boucle que vous inventez sur place ; appelez-le n'importe quoi.
• {{ dish.dish_name }} imprime le nom du plat de cette ligne Chaque sous-champ fonctionne de la même manière : {{ dish.<sub_field_name> }}.
• Tout entre {% for %} et {% endfor %} imprime une fois par rangée, dans l'ordre où les rangées se trouvent dans le panneau.

Champs facultatifs à l'intérieur de la boucle #

Enveloppez tout ce qui est facultatif dans un {% if %} bloquez pour que les champs vides ne laissent pas de balisage parasite derrière vous Dans l'exemple de la parabole, chaque carte a un badge de balise en option :

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

Une rangée avec un texte de balise vide ne donne aucun badge. Le {% if %} block accepte également les comparaisons comme {% if dish.tag_style == 'spicy' %} lorsque vous avez besoin d'un balisage qui change par valeur.

Sous-domaines médias et liens #

Un sous-champ d'image imprime directement son URL, comme dans <img src="{{ dish.photo }}">(en), et un sous-champ URL expose son adresse de la même manière Les propriétés imbriquées sont disponibles avec la notation par points lorsque vous en avez besoin.

Utilisez le répéteur dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Le Répéteur apparaît sous la forme d'une pile de lignes sous l'étiquette que vous définissez, chaque ligne intitulée par son Champ Titre.

Cliquez sur une ligne pour étendre ses sous-champs et les modifier ; les mises à jour de l'aperçu en direct Si une nouvelle ligne ne donne rien du tout, vérifiez que le nom de la boucle dans votre HTML correspond exactement au champ Nom du répéteur exactement : un décalage échoue silencieusement au lieu de lancer une erreur Cliquez sur Ajouter Plat (ou quoi que dise votre texte de bouton) et une nouvelle ligne apparaît avec vos valeurs par défaut, prête à être modifiée Faites glisser le handle sur n'importe quelle ligne pour la réorganiser, et les cartes de la page suivent.

Parce que la boucle imprime chaque ligne, la mise en page grandit avec le contenu Dans notre grille de plats à 3 colonnes, les trois premières cartes remplissent une rangée ; une quatrième parabole démarre une deuxième rangée en dessous, automatiquement, car c'est ainsi que la grille CSS du widget s'enroule.

Cas d'utilisation courants #

• Grilles cartes services, fonctionnalités, niveaux de tarification, vaisselle ou membres de l'équipe, une rangée par carte.
• Menus et listes de prix restaurants, salons et salles de sport où les articles changent chaque semaine.
• Murs de logo et listes de clients 10 sous-champ par rangée.
• sections FAQ et accordéon 15 champ de question et une réponse par ligne.
• Échéanciers et étapes du processus « Les rangées ordonnées peuvent être entraînées ».

Conseils pour travailler avec le champ Répéteur #

• La boucle est la connexion. Il n'y a pas {{repeater_name}} shortcode à imprimer tout seul ; le répéteur n'a de sens qu'à l'intérieur {% for %}…{% endfor %}.
• Expédier les défauts réels. Deux ou trois lignes remplies rendent le widget présentable au moment où il est abandonné, et elles servent également d'exemple de ce à quoi chaque champ s'attend.
• Définissez le champ Titre. Les lignes effondrées étiquetées “Margherita del Forno” sont beaucoup plus faciles à gérer que trois lignes toutes étiquetées “Item”.
• Gardez les champs optionnels avec {% if %}. Les travées vides et les emballages vides sont invisibles jusqu'à ce qu'ils brisent votre espacement.
• Laissez CSS gérer le nombre de lignes. Une grille avec repeat(3, 1fr) enveloppe seul des objets supplémentaires dans de nouvelles rangées ; la boucle imprime simplement des cartes.
• Nommez clairement les sous-champs. {{ dish.dish_price }} lit mieux dans un modèle que {{ dish.field_2 }}[TRADUCTION], pour vous et pour celui qui hérite du widget.

Foire aux questions #

Envelopper #

Le champ Widget Builder Repeater est ce qui transforme une disposition fixe en une disposition vivante : définissez les sous-champs, imprimez-les dans un {% for %} loop, et chaque décision de contenu après cela se produit dans le panneau Élémenteur : ajoutez une carte, faites-la glisser en place, supprimez-la la saison prochaine. Associez-la au Champ typographie pour les polices contrôlées par l'éditeur et le Champ frontalier pour le style de la carte, et un seul widget couvre toute une section de la page Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.