Centre d'assistance Wix
    Accueil
  1. Créer votre site
  2. Editor X
  3. Ajouter des éléments à l'Editor X
    4. Editor X : Utiliser des répéteurs

Editor X : Utiliser des répéteurs

Temps de lecture : 9 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Un répéteur est une liste d'éléments qui ont le même design et la même mise en page, mais dont le contenu est différent. C'est un moyen rapide et facile d'afficher votre contenu. 
Dans Editor X, les répéteurs sont disposés dans une mise en page flexible qui réorganise automatiquement le contenu lorsqu'il est redimensionné, ce qui le rend parfait sur toutes les tailles d'écran.
Dans cet article, apprenez à :
Exemple de répéteur que vous pouvez concevoir sur Editor X.
Suggestion :
Vous pouvez également utiliser des répéteurs pour afficher le contenu dynamique d'une collection en le connectant au CMS (Système de gestion de contenu). 

Ajouter un répéteur

Nous avons de nombreuses sections prédéfinies pour les répéteurs que vous pouvez ajouter à votre site et les personnaliser selon vos besoins. Certains répéteurs contiennent des images, d'autres sont plutôt du style « liste » avec un accent sur le texte. 

Pour ajouter un répéteur :

  1. Cliquer sur Ajouter des éléments  au-dessus de l'Editor X.
  2. Cliquez sur Outils de mise en page.
  3. Cliquez sur Répéteurs.
  4. Faites glisser un répéteur sur votre page.
Capture d'écran du panneau Ajouter des éléments dans l'Editor X, montrant les répéteurs que vous pouvez ajouter

Ajouter du contenu à un répéteur

Tous les éléments du répéteur ont le même design. Lorsque vous ajoutez un élément à un élément du répéteur, il est automatiquement ajouté aux autres éléments pour que le design reste cohérent. 
Cela dit, vous pouvez toujours personnaliser les éléments individuels à l'intérieur d'un élément (comme le texte, les images). Par exemple, ajouter un bouton à un élément l'ajoute au reste, mais vous pouvez modifier le texte du bouton dans chaque élément pour qu'il indique quelque chose de différent. 

Pour ajouter du contenu à un répéteur :


  1. Cliquer sur Ajouter des éléments au-dessus de l'Editor X.
  2. Faites glisser l'élément souhaité directement sur le répéteur. 
  3. Cliquez sur l'élément et personnalisez-le individuellement pour chaque élément. 
Suggestion :
La suppression d'une partie d'un élément du répéteur la supprime de tous les autres éléments. 
Vidéo montrant que l'ajout d'un élément aux éléments d'un répéteur l'ajoute à tous les autres éléments

Gérer les éléments de votre répéteur

Vous pouvez facilement dupliquer, renommer, réorganiser et supprimer les éléments du répéteur depuis le panneau inspecteur. 

Pour gérer vos éléments :

  1. Cliquez sur votre répéteur.
  2. Cliquez sur l'icône Inspecteur en haut de l'Editor X.
  3. (Dans l'inspecteur) Cliquez sur Gérer à côté du nombre d'éléments. 

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. Choisissez comment vous souhaitez gérer les éléments de votre répéteur :
    • Dupliquer un élément : Cliquez sur Dupliquer l'élément en bas.
    • Supprimer un élément : Cliquez sur l'icône Plus d'actions à côté de l'élément, puis cliquez sur Supprimer .
    • Renommer un élément : Cliquez sur l'icône Plus d'actions à côté de l'élément, puis cliquez sur Renommer .
    • Réorganiser les éléments : Cliquez sur les éléments et faites-les glisser vers une nouvelle position.
Capture d'écran du panneau Gérer les éléments dans l'inspecteur

Concevoir le design de votre répéteur

Personnalisez le design de votre répéteur pour le rendre unique. Vous pouvez modifier la couleur d'arrière-plan des éléments, ajouter des bordures, une ombre ou un curseur intéressant qui apparaît lorsque les visiteurs survolent le répéteur. 

Pour personnaliser le design de votre répéteur :

  1. Cliquez sur votre répéteur.
  2. Cliquez sur l'icône Inspecteur en haut de l'Editor X.
  3. Cliquez sur l'onglet Design . 
  4. Utilisez les options disponibles pour concevoir votre répéteur :
    • Modifiez la couleur de remplissage et l'opacité de tous les éléments.
    • Ajoutez une bordure et une ombre pour faire ressortir les éléments.
    • Rendez les angles de l'élément rectangulaires ou ronds. 
    • Ajoutez un curseur sympa qui apparaît lorsque les visiteurs survolent le répéteur. 
Vous utilisez un modèle de conception AB ?
Ces modifications de design s'appliquent à tous les éléments du répéteur, quel que soit le modèle AB. 
Capture d'écran d'un répéteur et des options disponibles dans l'onglet Design du panneau inspecteur

Paramétrer un modèle de conception AB pour les éléments de répéteur

Divisez vos éléments de répéteur en 2 groupes pour créer un design plus élaboré. Le modèle AB vous permet de créer deux versions du même design, avec des styles et des interactions.
Une fois que vous avez activé le modèle AB, vos éléments de répéteur se divisent en groupes A et B. Vous pouvez voir quels éléments appartiennent à chaque groupe dans votre Éditeur. Lorsque vous concevez le design de l'un des éléments A ou B, les autres éléments du groupe changent automatiquement pour s'adapter. 
Capture d'écran d'un répéteur et du panneau Inspecteur, concevant tous les éléments B

Pour paramétrer un modèle de conception AB pour les éléments du répéteur :

  1. Cliquez sur votre répéteur.
  2. Cliquez sur l'icône Inspecteur en haut de l'Editor X.
  3. Faites défiler la page jusqu'à Affichage.
  4. Activez le curseur Définir un modèle de conception AB.
    A screenshot of the Display section in the Inspector panel, enabling the AB pattern toggle
  5. Personnalisez le design des éléments A et B :
    1. Cliquez sur l'élément A ou B de votre répéteur.
      Suggestion : Il peut s'agir de n'importe quel élément du groupe concerné.
    2. (Dans l'inspecteur) Cliquez sur l'onglet Design .
    3. Choisissez comment vous souhaitez personnaliser ce groupe d'éléments :
      • Choisissez un design prédéfini dans la section Design.
      • Modifiez la couleur de remplissage et l'opacité des éléments.
      • Ajouter une interaction ou un clic dans l'onglet Interactions . 

Modifier la mise en page de votre répéteur

Définissez comment les éléments de votre répéteur sont réorganisés lorsque la taille de l'écran change. En fonction du type d'affichage choisi (c'est-à-dire Cartes, Liste, Slider, Cellules de la grille), vous pouvez personnaliser les marges, l'alignement, la direction et d'autres paramètres. 
Capture d'écran d'une liste déroulante qui apparaît lorsque vous cliquez sur un répéteur, vous permettant de modifier rapidement la mise en page
Travailler avec des points de rupture :
  • Vous pouvez avoir une mise en page différente pour votre répéteur pour chaque point de rupture.
  • Les listes et les curseurs sont couramment utilisés sur des écrans plus petits tels que les tablettes et les appareils mobiles.

Pour personnaliser davantage la mise en page d'un répéteur :

  1. Cliquez sur votre répéteur.
  2. Cliquez sur le panneau Inspecteur en haut de l'Editor X.
  3. Personnalisez la mise en page de votre répéteur en fonction du type d'affichage sélectionné :
Remarque sur les espaces CSS :
Certains anciens navigateurs ne prennent pas en charge cette fonctionnalité (par exemple Chrome 76-83, Safari 12-14 et Edge 79-83). Cela signifie que les visiteurs qui accèdent à votre site à partir de ces navigateurs ne voient pas les espaces que vous avez configurés entre les éléments de répéteur. 
Capture d'écran du panneau Inspecteur dans l'Editor X, lors du réglage de l'affichage d'un répéteur
En savoir plus sur les répéteurs :
Rendez-vous sur Academy X pour accéder à nos cours et exercices sur les répéteurs. 

Cela vous a-t-il aidé ?

|
Dans cet article
  • Ajouter un répéteur
  • Ajouter du contenu à un répéteur
  • Gérer les éléments de votre répéteur
  • Concevoir le design de votre répéteur
  • Paramétrer un modèle de conception AB pour les éléments de répéteur
  • Modifier la mise en page de votre répéteur