Modifier le carrousel des produits (Accueil et Home)

Le carrousel des produits affiché sur la page d’accueil permet de présenter plusieurs familles de produits sous forme défilante. Ce carrousel a été créé avec le widget Carousel d’Elementor Pro.

Pour des modifications uniquement liées au contenu, il est conseillé de se connecter avec l'utilisateur WordPress suivant :

text_editor_user

Pour des modifications structurelles (ajout/suppression d’un produit), utilisez un utilisateur avec plus de droits, par exemple :

editor

✏️ Modifier un élément du carrousel

  1. Allez dans Pages > Accueil puis cliquez sur Modifier avec Elementor.

  2. Faites défiler jusqu’à la section “Nos Produits”.

  3. Cliquez sur le crayon du widget Carousel pour l’ouvrir.

  4. Dans le panneau de gauche :

    • Cliquez sur une slide (ex : Slide #1)

    • Modifiez l’image, le titre (nom du produit), et éventuellement le lien

Cliquer sur une slide dans le panneau latéral repositionne automatiquement le carrousel sur cette slide à l’écran, ce qui facilite l’édition.

Panneau d'édition du carrousel dans Elementor
Édition des slides du carrousel

➕ Ajouter ou dupliquer un produit

  1. Dans le panneau “Slides”, cliquez sur + Add Item.

  2. Ajoutez une image, un titre, et un lien si besoin.

  3. Vous pouvez aussi dupliquer une slide existante en cliquant sur l’icône 📄.

📹 Vidéo : Ajouter ou dupliquer un produit


❌ Supprimer un produit

  1. Cliquez sur la croix 🗙 à droite d’une slide pour la supprimer.


⚙️ Options d’affichage

  • Slides on display : nombre de produits visibles (par défaut 3)

  • Equal Height : permet d’aligner la hauteur des cartes même si le texte varie


🔗 Ajouter un bouton d’ancrage vers un produit

Il est possible d’ajouter un bouton personnalisé directement dans une slide du carrousel, permettant d’accéder à la fiche descriptive du produit sur la page /produits.

Cela se fait à l’aide du widget "Bouton Amélioré" (développé sur mesure) qui utilise un ancrage dynamique grâce aux balises d’Elementor Pro.

Étapes :

  1. Dans le panneau Elementor, ouvrez une slide du carrousel à modifier.

  2. Sélectionnez l'endroit souhaité pour placer votre bouton :

    • Cliquez sur Add Widget (Bouton + en haut à gauche de l'écran) > Bouton Amélioré

  3. Dans les options du widget :

    • Dans Lien, cliquez sur la balise dynamique Elementor Pro

      • Sélectionnez Internal URL, puis cliquez sur la clé à molette.

      • Choisissez le type de contenu Content et cherchez Produits.

      • Sinon, vous pouvez saisir manuellement un identifiant texte (ex : https://metal-rouge.fr/produits)

    • Dans ID cible (ancre), écrivez l'ID assigné à l'onglet du produit associé de la page /produits VIDEO

  4. Assurez-vous que l’ID correspondant est bien présent sur la page /produits :

    • Ex. : une section de la page, ou un onglet dans notre cas, a pour ID CSS produit-1

Cela permettra, au clic sur le bouton dans le carrousel, de faire défiler automatiquement la page /produits jusqu'à la bonne section.

📹 Vidéo : Ajouter un bouton avec ancrage dans une slide


Mis à jour