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 un nom de produit, ce bloc extrait le titre directement de WooCommerce pour chaque produit, gardant vos pages précises et cohérentes sur l'ensemble de votre catalogue.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique. Vous avez un contrôle total sur la façon dont le titre est rendu — choisissez le niveau de titre HTML (H1 à H6), définissez l'alignement et la taille de la police par appareil, et encapsulez éventuellement 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 de texte.
Ajouter le bloc Titre du Produit à vos pages
Suivez ces étapes pour ajouter un bloc Titre du 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 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 pour la façon dont le titre du produit apparaît sur la page.
- Texte : Le champ de contenu est pré-rempli avec le shortcode
, qui récupère automatiquement le titre correct du produit de 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 un formatage gras, italique ou autre en ligne. - Lien : Encapsulez éventuellement le titre du produit dans un hyperlien en saisissant une URL dans le champ Lien. Développez les options de lien pour activer Ouvrir dans une nouvelle fenêtre (ouvre le lien dans un nouvel onglet du navigateur) ou Pas de suivi (ajoute un attribut
rel="nofollow"au lien à des fins de référencement). - Alignement : Définissez l'alignement horizontal du titre — Gauche, Centre ou Droite. Prend en charge l'alignement par appareil pour ordinateur, tablette et mobile.
- Taille de la police : Définissez la taille de la police du titre à l'aide du curseur (10–72px). Prend en charge le dimensionnement par appareil pour ordinateur, tablette et mobile.
- Niveau : Choisissez la balise de titre HTML utilisée pour afficher le titre du produit — H1, H2, H3, H4, H5 ou H6. Pour une meilleure pratique en matière de référencement, utilisez H1 pour le titre principal du produit s'il n'y a pas d'autre H1 sur la page.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner 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, vous donnant un contrôle au-delà de ce que le curseur de taille de police de l'onglet Contenu offre.
- 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 des tailles prédéfinies (Aucune, Cheveux, Petit, Moyen, Grand, Très grand, 2 fois plus grand) pour ajouter une profondeur subtile ou spectaculaire à l'en-tête.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre 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.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Titre du produit (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration 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 un style personnalisé ou un 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 enveloppant du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-title|product).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Titre du produit sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Titre du produit sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Titre du produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc Titre du produit défile dans la vue. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Titre du produit et de personnaliser son apparence, assurez-vous de sauvegarder 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 aucun effort manuel. Expérimentez avec les niveaux d'en-tête, les tailles de police par appareil et les effets d'ombre de texte pour créer une présentation de titre de produit à la fois visuellement saisissante et optimisée pour les moteurs de recherche.