Le Bloc de codes courts vous permet d'intégrer n'importe quel shortcode WordPress directement dans vos pages SeedProd. Les shortcodes sont de petits morceaux de code entre crochets, tels que [contact-form-7] ou [woocommerce_cart] — qui déclenchent des fonctionnalités spécifiques lorsque la page est affichée. Ce bloc comble le fossé entre l'éditeur visuel de SeedProd et l'écosystème plus large des plugins WordPress.
Tout plugin qui génère du contenu via un shortcode peut être intégré à une page SeedProd à l'aide de ce bloc. Parmi les exemples courants, citons les formulaires de contact, les boutons de paiement, le contenu réservé aux membres, les curseurs, les calendriers de réservation et les extraits PHP personnalisés. L'option d'aperçu en direct vous permet de voir le résultat final directement dans l'éditeur, afin que vous puissiez vérifier que votre shortcode fonctionne correctement avant de le publier.
Ajouter le bloc Shortcode à vos pages
Suivez ces étapes pour ajouter un bloc Shortcode à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Shortcode dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Shortcode pour ouvrir ses paramètres. Dans l'onglet Contenu, la section Paramètres vous permet de saisir votre shortcode et, si vous le souhaitez, de prévisualiser son résultat dans l'éditeur.
- Code court : Tapez ou collez votre shortcode WordPress dans la zone de texte. Entrez le shortcode complet, y compris ses crochets et tous les attributs, par exemple :
[contact-form-7 id="1" title="Contact form"]. Le shortcode sera traité et affiché sur la page en ligne. - Afficher l'aperçu du shortcode : activez cette option pour afficher un aperçu en direct du résultat du shortcode directement dans l'éditeur SeedProd. Cela vous permet de vérifier que le shortcode fonctionne et de contrôler son apparence sans quitter le générateur. Désactivez cette option pour masquer l'aperçu et conserver la réactivité de l'éditeur pendant que vous modifiez d'autres éléments.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez contrôler l'espacement autour du bloc et gérer sa visibilité sur différents appareils.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Shortcode (haut, droite, bas, gauche). Cela détermine l'espace qui apparaîtra entre le résultat du shortcode et les éléments de la page qui l'entourent.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Shortcode (haut, droite, bas, gauche). Cela crée un espace entre la sortie du shortcode et les bords du bloc.
Attributs :
- Identifiant CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Shortcode. Cet identifiant est créé automatiquement par SeedProd pour la personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou du CSS personnalisé à l'enveloppe du bloc.
- 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-form|contact).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Shortcode sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Shortcode sur les tablettes.
- Masquer sur mobile : masque le bloc Shortcode sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Shortcode apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Shortcode et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Shortcode à votre page ! Ce bloc libère toute la puissance de l'écosystème de plugins WordPress dans vos mises en page SeedProd, des formulaires de contact et widgets de paiement aux portails d'adhésion et fonctionnalités personnalisées. Collez n'importe quel shortcode fourni par vos plugins et utilisez l'aperçu en direct pour vérifier que tout s'affiche correctement avant de publier votre page.