Le bloc Shortcode vous permet d'intégrer n'importe quel shortcode WordPress directement sur vos pages SeedProd. Les shortcodes sont de petits morceaux de code entourés de crochets — tels que [contact-form-7] ou [woocommerce_cart] — qui déclenchent des fonctionnalités spécifiques lors du rendu de la page. Ce bloc fait le lien 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 en utilisant ce bloc. Les exemples courants incluent les formulaires de contact, les boutons de paiement, le contenu d'adhésion, les curseurs, les calendriers de réservation et les extraits de code PHP personnalisés. L'option de bascule d'aperçu en direct vous permet de voir le rendu de la sortie directement dans l'éditeur, afin que vous puissiez vérifier que votre shortcode fonctionne avant de 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, faites glisser et 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 éventuellement d'en prévisualiser la sortie dans l'éditeur.
- Shortcode : Tapez ou collez votre shortcode WordPress dans la zone de texte. Entrez le shortcode complet, y compris ses crochets et ses attributs — par exemple,
[contact-form-7 id="1" title="Contact form"]. Le shortcode sera traité et rendu sur la page en direct. - Afficher l'aperçu du Shortcode : Activez cette option pour afficher un aperçu en direct de la sortie du shortcode directement dans l'éditeur SeedProd. Cela vous permet de vérifier que le shortcode fonctionne et de voir son apparence sans quitter le constructeur. Désactivez-la pour masquer l'aperçu et maintenir la réactivité de l'éditeur lors de la modification d'autres éléments.
Étape 3 : Personnaliser 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ît entre la sortie du shortcode et les éléments environnants de la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Shortcode (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration entre la sortie du shortcode et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Shortcode. Cet ID est créé automatiquement par SeedProd pour le ciblage de styles personnalisés ou de 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é à l'enveloppe du bloc.
- Attributs personnalisés : Ajoutez tous les attributs HTML à l'élément enveloppant le bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-form|contact).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Shortcode sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Shortcode sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Shortcode sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se déclenchent lorsque le bloc Shortcode apparaît à l'écran. Les options incluent Rebondir, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Shortcode et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Shortcode à votre page ! Ce bloc libère toute la puissance de l'écosystème des plugins WordPress à l'intérieur de 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 le sélecteur d'aperçu en direct pour confirmer que tout est exactement comme prévu avant la mise en ligne de votre page.