Le bloc HTML personnalisé vous permet d'intégrer n'importe quel balisage HTML directement sur vos pages SeedProd. Que vous ayez besoin d'ajouter un widget tiers, un code d'intégration personnalisé, une sortie HTML brute ou tout extrait pour lequel SeedProd n'a pas de 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 basé sur 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 Conception > Blocs, faites glisser et 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 souhaitée de votre page.
É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 tapez votre balisage HTML directement dans la zone de texte. Il peut s'agir de n'importe quel HTML valide, y compris des codes d'intégration, des iframes, des éléments personnalisés ou des balises de script.
- Développer l'éditeur : Cliquez sur ce bouton pour ouvrir un éditeur de code plein écran plus grand, ce qui facilite le travail avec des extraits HTML plus longs ou plus complexes.
Saisissez votre code HTML dans l'onglet Contenu. Utilisez le bouton Développer l'éditeur pour un espace de travail d'édition plus grand.
Étape 3 : Personnaliser 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.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc HTML personnalisé (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration 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 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 conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-section|html-embed)
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc HTML personnalisé sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc HTML personnalisé sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc HTML personnalisé sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc HTML personnalisé défile dans la vue. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Utilisez l'onglet Avancé pour contrôler l'espacement, les attributs, la visibilité sur les appareils et les animations d'entrée de votre bloc HTML personnalisé.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc HTML personnalisé, assurez-vous de sauvegarder 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 extrait HTML dont votre site a besoin, le bloc HTML personnalisé vous offre la flexibilité de placer n’importe quel balisage exactement là où vous le souhaitez sur vos pages SeedProd.