Le bloc « Onglets de données produit » affiche la description de votre produit WooCommerce, des informations supplémentaires et les avis clients dans une disposition à onglets sur vos modèles de produit unique. Au lieu de présenter toutes les informations sur le produit dans un seul bloc défilant, l'interface à onglets les organise en sections clairement identifiées que les acheteurs peuvent parcourir d'un simple clic.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique et nécessite l'installation de WooCommerce. 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, afin de les adapter au design de votre boutique.
Ajouter le bloc Onglets de données produit à vos pages
Suivez ces étapes pour ajouter un bloc Onglets de données produit à votre modèle SeedProd Single Product :
É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 Onglets de données produit pour ouvrir ses paramètres. L'onglet Contenu est divisé en deux sections repliables — Onglets et Panneau — où vous pouvez personnaliser le style des boutons d'onglets et de la zone de contenu située en dessous.
Onglets :
- Normal : activez cette option pour afficher les paramètres de couleur des onglets dans leur état par défaut (non sélectionnés). Définissez la couleur du texte, la couleur d'arrière-plan et la couleur de la bordure des onglets inactifs.
- Actif : activez cette option 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'onglet actif, afin qu'il se distingue clairement des onglets inactifs.
- Typographie des onglets : définissez la police, la taille, l'épaisseur, la hauteur de ligne et l'espacement des lettres pour le texte des libellés des onglets.
- Rayon de bordure : définissez l'arrondi des coins (0 à 100 pixels) pour les boutons d'onglet. Augmentez cette valeur pour créer des onglets en forme de pilule ou arrondis.
Panneau :
- Couleur du texte : définissez la couleur par défaut du texte affiché dans la zone du panneau.
- Typographie du panneau : définissez la police, la taille, l'épaisseur et le style du texte du corps dans chaque panneau.
- Couleur des titres : définissez la couleur des éléments de titre (h2, h3, etc.) affichés dans le contenu du panneau.
- Typographie des titres : définissez la police, la taille, le poids et le style du texte des titres des panneaux.
- Remplissage 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 plusieurs tailles d'ombre prédéfinies pour donner de la profondeur au panneau et le séparer de l'arrière-plan de la page.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner les bordures, l'espacement et la visibilité de votre bloc Onglets de données produit.
Bordure du panneau :
- Rayon de bordure du panneau : définissez l'arrondi des coins de la zone de contenu du panneau.
- Largeur de la bordure du panneau : définissez l'épaisseur de la bordure pour chaque côté du panneau (haut, droite, bas, gauche).
- Style et couleur de la bordure du panneau : choisissez un style de bordure (pleine, pointillée ou en pointillés) et définissez une couleur de bordure pour la zone du panneau.
Bordure de bloc :
- Rayon de bordure : définissez l'arrondi global des coins pour l'ensemble du bloc Onglets de données produit.
- Largeur de la bordure : définissez l'épaisseur de la bordure par côté pour l'encadrement extérieur du bloc.
- Style et couleur de la bordure : choisissez un style et une couleur pour la bordure extérieure du bloc.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc 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.
- Remplissage : ajustez l'espacement intérieur dans votre bloc 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 Onglets de données produit. Cet ID est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-section|tabs).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Onglets de données produit sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Onglets de données produit sur les tablettes.
- Masquer sur mobile : masquer le bloc Onglets de données produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Onglets de données produit apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation vers l'intérieur et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Onglets de données produit et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc « Onglets de données produit » à votre modèle de produit unique ! Le bloc extrait automatiquement la description du produit, les informations supplémentaires et les avis clients depuis WooCommerce et les organise dans une interface claire à onglets. Utilisez les paramètres de couleur des onglets pour différencier les états actifs et inactifs, et ajustez la typographie et les bordures du panneau pour créer une expérience cohérente sur la page produit qui captive l'attention des acheteurs.