Le bloc « Titre du produit » récupère et affiche dynamiquement le titre de chaque produit WooCommerce sur vos modèles de produit unique. Plutôt que de saisir manuellement le nom d'un produit, ce bloc extrait directement le titre de WooCommerce pour chaque produit, ce qui garantit l'exactitude et la cohérence de vos pages dans l'ensemble de votre catalogue.
Ce bloc est exclusivement conçu pour être utilisé dans les modèles de produit unique. Vous avez un contrôle total sur la façon dont le titre est affiché : choisissez le niveau de titre HTML (H1 à H6), définissez l'alignement et la taille de la police par appareil et, si vous le souhaitez, intégrez le titre dans un lien. L'onglet Avancé vous offre des options de style supplémentaires, notamment la typographie, la couleur et les effets d'ombre du texte.
Ajouter le bloc Titre du produit à vos pages
Suivez ces étapes pour ajouter un bloc Titre du produit à votre modèle SeedProd Single Product Template :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, glissez-déposez le bloc Titre du 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 Titre du produit pour ouvrir ses paramètres. Dans l'onglet Contenu, la section Titre contient le champ de texte du titre et toutes les options d'affichage permettant de définir l'apparence du titre du produit sur la page.
- Texte : Le champ de contenu est prérempli avec le
shortcode, qui récupère automatiquement le titre correct du produit depuis WooCommerce pour chaque produit. Vous pouvez ajouter du texte personnalisé autour du shortcode si nécessaire, ou utiliser l'éditeur de texte enrichi pour appliquer le gras, l'italique ou d'autres formats en ligne. - Lien : Vous pouvez éventuellement associer un lien hypertexte au titre du produit en saisissant une URL dans le champ Lien. Développez les options de lien pour activer cette fonctionnalité. Ouvrir dans une nouvelle fenêtre (ouvre le lien dans un nouvel onglet du navigateur) ou No Follow (ajoute un
rel="nofollow"attribuer au lien à des fins de référencement). - Alignement : définissez l'alignement horizontal du titre : à gauche, au centre ou à droite. Prend en charge l'alignement par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Taille de la police : définissez la taille de la police du titre à l'aide du curseur (10 à 72 pixels). Prend en charge le redimensionnement par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Niveau : choisissez la balise HTML utilisée pour afficher le titre du produit : H1, H2, H3, H4, H5 ou H6. Pour optimiser le référencement naturel, utilisez H1 pour le titre principal du produit s'il n'y a pas d'autre balise H1 sur la page.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser davantage l'apparence du titre et contrôler sa visibilité sur les différents appareils.
Styles :
- Typographie : définissez la famille de polices, le poids, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le titre du produit, ce qui vous offre un contrôle plus poussé que celui offert par le curseur Taille de la police de l'onglet Contenu.
- Couleur : définissez la couleur du texte du titre du produit.
- Ombre du texte : ajoutez un effet d'ombre directement au texte du titre. Choisissez parmi les tailles prédéfinies (Aucune, Très fine, Petite, Moyenne, Grande, Très grande, 2 fois plus grande) pour ajouter une profondeur subtile ou spectaculaire à l'en-tête.
Espacement :
- Marge : contrôlez l'espacement extérieur autour du bloc Titre du produit (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le titre et les éléments environnants sur la page du produit.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Titre du produit (haut, droite, bas, gauche). Cela crée un espace entre le texte du titre et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Titre du 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-title|product).
Visibilité des appareils :
- Masquer sur le bureau : masque le bloc Titre du produit sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Titre du produit sur les tablettes.
- Masquer sur mobile : masquer le bloc Titre du produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Titre du 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 Titre du produit et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Titre du produit à votre modèle de produit unique ! Le bloc affiche automatiquement le titre correct pour chaque produit de votre catalogue WooCommerce sans aucune intervention manuelle. Testez différents niveaux de titres, tailles de police par appareil et effets d'ombre de texte pour créer une présentation du titre du produit à la fois visuellement attrayante et optimisée pour les moteurs de recherche.