Le répéteur dynamique est un outil de conception basé sur les collections ( widget ) qui vous permet de créer rapidement et facilement des mises en page répétitives et structurées dont la conception est identique pour chaque élément, mais dont le contenu est différent, comme des listes de produits, d'événements ou de services.
Le contenu affiché dans le Repeater est géré à partir d'une collection interne. Pour vous familiariser avec les collections internes et leur fonctionnement, consultez la section Contenu dynamique : Collections internes.
Remarque
Pendant que le répéteur dynamique est à l'essai, seules les collections internes et les collections d'images peuvent être connectées. À l'avenir, nous prévoyons de prendre en charge Google Sheets, Airtable et les bases de données externes.
L'enveloppe (également appelée "frame") du widget Repeater est le conteneur des éléments de la collection. Dans l'image ci-dessous, trois éléments de la collection sont représentés.
Chaque élément de collection affiche le contenu d'une ligne de la collection interne connectée. Cela est possible en connectant widget aux colonnes de la collection interne.
Par exemple, sur un site web d'adoption de chiens, une collection interne répertorie les chiens adoptables. Vous trouverez ci-dessous une image de la collection.
Pour afficher les chiens dans le Répétiteur Dynamique, les colonnes et widget sont connectées comme suit :
-
La colonne "Image" est connectée à un widget Image.
-
La colonne "Nom du chien" est reliée à un widget "Small Heading".
-
La colonne "Description du chien" est reliée à un widget Texte.
Lorsque vous ajoutez le répéteur dynamique au canevas, une collection interne d'échantillons est créée et liée au répéteur dynamique. Vous pouvez modifier cette collection d'échantillons ou créer une nouvelle collection pour la relier au répéteur dynamique.
Pour ajouter un widget Dynamic Repeater :
-
Dans la section Éléments de mise en page du panneau widget, localisez le répéteur dynamique et faites-le glisser sur le canevas. Notez que lorsque vous ajoutez le répétiteur au canevas, un échantillon de collection interne est créé avec 4 éléments de collection (lignes de la collection) qui s'affichent dans le répétiteur dynamique. Cela vous permet de visualiser le design avant d'ajouter votre propre contenu.
-
Si vous le souhaitez, vous pouvez ajouter ou supprimer widget du répéteur dynamique pour répondre à vos besoins. Peu importe l'élément de collection que vous modifiez, les changements seront automatiquement mis à jour dans tous les autres éléments de collection. Notez que les nouveaux sites widget devront être connectés manuellement à une colonne de collecte spécifique. Cette opération sera réalisée dans une étape ultérieure.
tu peux modifier la conception de l'enveloppe du répéteur dynamique ou des éléments de la collection à l'intérieur du répéteur dynamique. Notez que les modifications apportées à la conception d'un élément de la collection s'appliquent à tous les autres. Cela vous permet de gagner du temps au lieu d'appliquer manuellement des modifications de conception à chaque élément de la collection et de risquer des erreurs.
Pour modifier la conception de l'enveloppe, cliquez sur le widget Répéteur dynamique pour ouvrir le menu flottant et cliquez sur Modifier la conception. Dans la section Wrapper du panneau de conception, vous pouvez configurer les éléments suivants :
-
Conception de la couverture. Vous pouvez définir la couleur d'arrière-plan, l'alignement, la taille, l'animation, la position (fixe ou épinglée) et l'espace entre les éléments de la collection à l'intérieur du répéteur dynamique.
Pour en savoir plus sur les sections du panneau de conception et sur la manière de configurer chaque option de conception, consultez la section Conception avec la technologie Flexbox.
Pour en savoir plus sur la signification des termes "fixe" ou "épinglé" en termes de position sur le site widget, consultez le sitewidget Position : Fixe et épinglée.
Pour définir la manière dont les éléments de collection s'affichent dans le répéteur dynamique, cliquez sur le widget Répéteur dynamique pour ouvrir le menu flottant et cliquez sur Modifier la conception. Dans la section Disposition du panneau de conception, vous pouvez configurer les éléments suivants :
-
Articles par ligne. Sélectionnez le nombre d'éléments de collection à afficher par ligne. Maximum de 10 éléments par ligne.
-
Les articles s'adaptent. Sélectionnez Largeur fixe ou Étirer pour ajuster.
Pour activer la pagination ou une option de chargement supplémentaire, ouvrez la section Navigation du panneau de conception et activez la case à cocher Activer la navigation. Une fois la navigation activée, configurez les éléments suivants :
-
Pagination ou Charger plus. La pagination divise les éléments de la collection en pages entre lesquelles les visiteurs du site peuvent naviguer. Charger plus affiche une quantité déterminée d'éléments de collection, puis chaque clic charge un ensemble supplémentaire d'éléments de collection.
-
Nombre d'articles par page. Définissez le nombre d'éléments de collection à afficher par page ou avant que d'autres résultats ne soient chargés.
Pour modifier la conception du site widget à l'intérieur d'un élément de collection, cliquez sur un élément de collection individuel pour ouvrir le menu flottant et cliquez sur Modifier la conception. Toutes les modifications de conception seront appliquées à chaque élément du répétiteur. Dans la section Disposition du panneau de conception, vous pouvez configurer les éléments suivants :
-
Alignement du contenu. Définir l'alignement horizontal et vertical du contenu à l'intérieur de l'élément de collection.
-
Sens d'empilage. Choisissez si les widget à l'intérieur du Repeater sont empilés horizontalement ou verticalement.
-
Alignement des enveloppes et des rangées. Si vous le souhaitez, vous pouvez faire en sorte que le site widget pour chaque élément de la collection s'étende sur une autre ligne. Si vous choisissez l'habillage, vous devez également définir l'alignement des lignes.
Il est important de noter que la largeur ou la hauteur des éléments de la collection dans le répéteur dynamique ne peut pas être modifiée. L'élément de collection s'adapte à 100% de l'enveloppe, ce qui signifie que la hauteur et la largeur de l'élément de collection sont contrôlées par la hauteur et la largeur de l'enveloppe du répéteur dynamique. La hauteur et la largeur du répéteur dynamique peuvent être définies dans la section Taille du panneau de conception.
Lorsque vous ajoutez le répéteur dynamique au canevas, une collection interne d'échantillons est créée et liée au répéteur dynamique et à l'adresse widget par défaut qu'il contient. Vous pouvez modifier cette collection d'échantillons ou créer une nouvelle collection interne pour la relier au répéteur dynamique. Si vous ajoutez de nouveaux widget au répéteur dynamique, ils devront être connectés à une colonne de collecte.
Remarque
Actuellement, le répéteur dynamique ne peut être connecté qu'à une collection interne ou à une collection d'images. À l'avenir, nous prévoyons de prendre en charge tous les types de collections.
Pour connecter un répéteur dynamique à une collection :
-
Cliquez sur le widget Répéteur dynamique pour ouvrir le menu flottant.
-
Cliquez sur l'icône à trois points du menu flottant, puis sélectionnez Remplacer la collection.
-
Dans la fenêtre modale, utilisez le menu déroulant pour sélectionner la collection souhaitée.
-
Cliquez sur Remplacer.
-
Ensuite, vous devez connecter widget aux colonnes de collecte. Cliquez sur un widget dans le répéteur dynamique pour ouvrir le menu flottant, puis cliquez sur l'icône à trois points et sélectionnez Connecter aux données.
-
Dans la fenêtre modale, utilisez le menu déroulant pour sélectionner la colonne de la collection qui sera connectée au widget. Notez que seules les colonnes compatibles s'afficheront. Par exemple, Image widget ne peut être connecté qu'à une colonne de la collection dont le type de champ est Image. Cliquez sur Connecter. Répétez l'opération pour chaque widget du répéteur dynamique.
Pour ajouter un élément de collection au répéteur dynamique, vous devez ajouter une nouvelle ligne à la collection. La ligne doit avoir un contenu avant d'être affichée dans le répéteur dynamique.
Pour supprimer un élément de la collection, supprimez la ligne correspondante dans la collection.
Pour ajouter un widget, ouvrez le panneau widget et glissez-déposez le widget souhaité dans le répéteur dynamique. Le widget est automatiquement ajouté à tous les autres éléments de la collection.
Lorsque vous êtes prêt à connecter le site widget à la collection, cliquez sur le site widget pour ouvrir le menu flottant. Cliquez sur l'icône à trois points et sélectionnez Connecter aux données. Dans la fenêtre contextuelle, sélectionnez la colonne à laquelle vous souhaitez connecter le site widget. Notez que seules les colonnes compatibles s'afficheront, ce qui signifie que l'image widget ne peut être connectée qu'à une colonne de la collection dont le type de champ est Image. Cliquez sur Connecter.
Pour modifier la connexion du widget, cliquez sur le widget pour ouvrir le menu flottant. Cliquez sur l'icône à trois points et sélectionnez Modifier la connexion. Utilisez le menu déroulant de la fenêtre contextuelle pour sélectionner une autre colonne de collecte. Cliquez sur Connecter.
Pour modifier le contenu d'un élément du répéteur dynamique, cliquez sur le widget et effectuez les mises à jour souhaitées. Comme le répéteur dynamique prend en charge l'édition en ligne, vos modifications seront également mises à jour dans la collection connectée.
Vous pouvez également modifier le contenu d'un élément de collection directement à partir de la collection.
Pour augmenter ou réduire l'espacement entre les éléments de la collection, cliquez sur le répéteur dynamique pour ouvrir le menu flottant et cliquez sur Modifier la conception. Dans la section Espacement du panneau de conception, utilisez le paramètre Espacement entre les éléments pour définir l'espace entre les éléments de la collection.