Le bloc d’onglets de données produit affiche la description de votre produit WooCommerce, les informations supplémentaires et les avis clients dans une mise en page à onglets sur vos modèles de produit unique. Au lieu de présenter toutes les informations produit dans un seul bloc déroulant, l’interface à onglets les organise en sections clairement étiquetées que les acheteurs peuvent parcourir en un seul clic.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique et nécessite que WooCommerce soit installé. Vous pouvez entièrement personnaliser l’apparence des onglets et de leurs panneaux de contenu — y compris les couleurs, la typographie, les bordures, l’espacement et les ombres — pour correspondre au design de votre boutique.
Ajout du bloc d’onglets de données produit à vos pages
Suivez ces étapes pour ajouter un bloc d’onglets de données produit à votre modèle de produit unique SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, faites glisser et déposez le bloc Onglets de données produit dans la section souhaitée de votre modèle de produit unique.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc d’onglets de données produit pour ouvrir ses paramètres. L’onglet Contenu est divisé en deux sections déroulantes — Onglets et Panneau — où vous pouvez styliser les boutons d’onglets et la zone de contenu sous ceux-ci.
Onglets :
- Normal : Activez pour afficher les paramètres de couleur des onglets dans leur état par défaut (non sélectionné). Définissez la couleur du texte, la couleur d’arrière-plan et la couleur de la bordure pour les onglets inactifs.
- Actif : Activez pour afficher les paramètres de couleur de l’onglet actuellement sélectionné. Définissez la couleur du texte, la couleur d’arrière-plan et la couleur de la bordure pour l’état de l’onglet actif, lui permettant de se démarquer clairement des onglets inactifs.
- Typographie des onglets : Définissez la famille de polices, la taille, le poids, la hauteur de ligne et l’espacement des lettres pour le texte des étiquettes d’onglets.
- Rayon de bordure : Définissez l’arrondi des coins (0–100px) pour les boutons d’onglets. Augmentez cette valeur pour créer des onglets en forme de pilule ou arrondis.
Panneau :
- Couleur du texte : Définissez la couleur du texte par défaut pour le contenu affiché dans la zone du panneau.
- Typographie du panneau : Définissez la famille de polices, la taille, le poids et le style du texte du corps dans chaque panneau.
- Couleur des titres : Définissez la couleur de tous les éléments de titre (h2, h3, etc.) affichés dans le contenu du panneau.
- Typographie des titres : Définissez la famille de polices, la taille, le poids et le style du texte des titres du panneau.
- Rembourrage du panneau : Définissez l’espacement intérieur autour du contenu dans la zone du panneau.
- Ombre du panneau : Ajoutez un effet d’ombre à la zone du panneau — choisissez parmi des tailles d’ombre prédéfinies pour donner au panneau de la profondeur et le séparer de l’arrière-plan de la page.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner les bordures, l'espacement et la visibilité de votre bloc d'onglets de données produit.
Bordure du panneau :
- Rayon de bordure du panneau : Définissez l'arrondi des coins pour la zone de contenu du panneau.
- Épaisseur de bordure du panneau : Définissez l'épaisseur de la bordure pour chaque côté du panneau (Haut, Droite, Bas, Gauche).
- Style et couleur de bordure du panneau : Choisissez un style de bordure (Solide, Pointillé ou Tirets) et définissez une couleur de bordure pour la zone du panneau.
Bordure du bloc :
- Rayon de bordure : Définissez l'arrondi global des coins pour l'ensemble du bloc d'onglets de données produit.
- Épaisseur de bordure : Définissez l'épaisseur de la bordure par côté pour l'enveloppe extérieure du bloc.
- Style et couleur de bordure : Choisissez un style et une couleur de bordure pour l'enveloppe extérieure du bloc.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc d'onglets de données produit (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre les onglets et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc d'onglets de données produit (Haut, Droite, Bas, Gauche). Cela crée un espace entre le contenu des onglets et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc d'onglets de données produit. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément d'enveloppe du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-section|tabs).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc d'onglets de données produit sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc d'onglets de données produit sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc d'onglets de données produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc d'onglets de données produit défile dans la vue. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc d'onglets de données produit et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc d'onglets de données produit à votre modèle de produit unique ! Le bloc récupère automatiquement la description du produit, les informations supplémentaires et les avis clients de WooCommerce et les organise dans une interface d'onglets épurée. Utilisez les paramètres de couleur des onglets pour différencier les états actif et inactif, et ajustez la typographie et les bordures du panneau pour créer une expérience de page produit cohérente qui maintient l'engagement des acheteurs.