Le bloc Séparateur vous permet d'insérer des séparateurs de ligne visuellement attrayants entre différentes sections de contenu sur votre page. Ces séparateurs améliorent la lisibilité et créent une mise en page plus structurée et engageante.
Au-delà d'une simple ligne, le bloc Séparateur vous permet de placer une étiquette de texte ou une icône au centre du séparateur, ce qui en fait un élément de conception polyvalent pour diviser le contenu avec style.
Ajouter le bloc Séparateur à vos pages
Suivez ces étapes pour ajouter un bloc Séparateur à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Séparateur dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Séparateur pour ouvrir ses paramètres. Dans l'onglet Contenu, configurez l'apparence et le style de votre séparateur.
Séparateur :
- Style : Choisissez le style de ligne pour votre séparateur — Ligne continue, Pointillé, Tiret ou Double.
- Couleur : Définissez la couleur de la ligne du séparateur.
- Largeur : Contrôlez la largeur du séparateur en pourcentage de son conteneur, de 1 % à 100 %.
- Hauteur : Définissez l'épaisseur de la ligne du séparateur en pixels, de 1px à 10px.
- Alignement : Alignez le séparateur à Gauche, au Centre ou à Droite. Prend en charge l'alignement par appareil pour ordinateur, tablette et mobile.
- Ajouter un élément : Placez éventuellement un élément au centre de la ligne de séparation. Choisissez parmi Aucun (juste la ligne), Texte (une étiquette de texte) ou Icône (une icône Font Awesome).
- Lorsque Texte est sélectionné : Saisissez le texte de l'étiquette et choisissez une Balise HTML (H1-H6 ou span) pour contrôler son balisage sémantique.
- Lorsque Icône est sélectionnée : Choisissez votre icône à l'aide du sélecteur d'icônes et définissez la Taille de l'icône.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser davantage l'apparence de votre bloc Séparateur.
Styles :
- Ombre : Ajoutez un effet d'ombre au séparateur. Choisissez parmi Aucune, Fine, Petite, Moyenne ou Grande.
- Typographie de l'en-tête (visible lorsque Ajouter un élément est défini sur Texte) : Personnalisez la famille de polices, le poids, la taille, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour l'élément texte.
- Couleur du texte (visible lorsque Ajouter un élément est défini sur Texte) : Définissez la couleur de l'étiquette de texte sur le séparateur.
- Couleur de l'icône (visible lorsque Ajouter un élément est défini sur Icône) : Définissez la couleur de l'icône affichée sur le séparateur.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Séparateur (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre le séparateur et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Séparateur (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Séparateur, 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 tous les attributs HTML à l'élément wrapper du séparateur. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Séparateur sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Séparateur sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Séparateur sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez un effet d'animation qui se joue lorsque le bloc Séparateur défile dans la vue, tel que 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 Séparateur et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Séparateur à votre page ! Les séparateurs sont un moyen simple mais efficace de créer une structure visuelle et de guider vos visiteurs à travers votre contenu. Expérimentez avec différents styles de ligne, couleurs, largeurs et éléments centraux pour trouver le look adapté à votre design.