Le bloc HTML personnalisé vous permet d'intégrer n'importe quel balisage HTML directement dans vos pages SeedProd. Que vous ayez besoin d'ajouter un widget tiers, un code d'intégration personnalisé, une sortie HTML brute ou tout autre extrait pour lequel SeedProd ne dispose pas d'un bloc dédié, ce bloc vous offre un moyen direct de l'insérer.
Cela le rend idéal pour intégrer des outils externes, des scripts personnalisés ou tout contenu HTML que vous souhaitez placer précisément dans la mise en page de votre page.
Ajouter le bloc HTML personnalisé à vos pages
Suivez ces étapes pour ajouter un bloc HTML personnalisé à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc HTML personnalisé dans la section souhaitée de votre page.
Faites glisser le bloc HTML personnalisé depuis le panneau Blocs et déposez-le dans la section de la page souhaitée.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc HTML personnalisé pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez saisir votre code HTML et accéder à l'éditeur plein écran.
- Code personnalisé : collez ou saisissez votre balisage HTML directement dans la zone de texte. Il peut s'agir de n'importe quel code HTML valide, y compris des codes d'intégration, des iframes, des éléments personnalisés ou des balises de script.
- Éditeur étendu : cliquez sur ce bouton pour ouvrir un éditeur de code plein écran plus grand, facilitant ainsi le travail avec des extraits HTML plus longs ou plus complexes.
Entrez votre code HTML dans l'onglet Contenu. Utilisez le bouton Agrandir l'éditeur pour obtenir un espace d'édition plus grand.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez contrôler la mise en page et la visibilité de votre bloc HTML personnalisé.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc HTML personnalisé (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le bloc et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur de votre bloc HTML personnalisé (haut, droite, bas, gauche). Cela crée un espace entre votre contenu HTML et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc HTML personnalisé. Cet ID est créé automatiquement par SeedProd pour le ciblage de styles personnalisés ou 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|html-embed).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc HTML personnalisé sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc HTML personnalisé sur les tablettes.
- Masquer sur mobile : masquer le bloc HTML personnalisé sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc HTML personnalisé apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation entrante et bien d'autres encore.
Utilisez l'onglet Avancé pour contrôler l'espacement, les attributs, la visibilité des périphériques et les animations d'entrée pour votre bloc HTML personnalisé.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc HTML personnalisé, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc HTML personnalisé à votre page ! Que vous intégriez un widget tiers, un formulaire personnalisé ou tout autre extrait HTML dont votre site a besoin, le bloc HTML personnalisé vous offre la flexibilité nécessaire pour placer n'importe quel balisage exactement où vous le souhaitez sur vos pages SeedProd.