Les séparateurs

Un séparateur dans l’Email Builder est un élément qui a pour vocation de diviser ou structurer le contenu. Il sert à créer des espaces distincts entre différentes sections d’un email, améliorant ainsi la lisibilité et l’organisation du message. 

Les séparateurs sont souvent des lignes, des marges ou des espaces vides qui permettent de guider l’œil du lecteur d’une section à l’autre et de rendre le design plus fluide et attrayant.

Intégrer un séparateur

Dans l’onglet “Éléments”  du volet de conception, l’élément “Séparateur” vous permet de déposer un séparateur dans la section désirée (ou le groupe désiré).

Personnaliser un séparateur

Depuis le volet de conception , dans l’onglet "Styles" représenté par l'icône (Pinceau), cliquez sur la catégorie "Conteneur" afin de configurer votre élément séparateur avec : 

  • Conteneur : La hauteur par défaut d’un séparateur est paramétré à 20px, il est possible de renseigner la valeur de votre choix. La couleur de fond par défaut est transparente mais vous avez la main,c’est paramétrable et la couleur s’appliquera à la totalité du séparateur. 
  • Coins arrondis : La gestion des coins arrondis s’applique à l'élément, vous pourrez constater les arrondis en appliquant une couleur de fond dans le conteneur. Pour plus d'informations sur les coins arrondis, vous pouvez vous référer à l’article Adapter les coins arrondis et les bordures d'un élément.
  • Bordure : Il est possible d’ajouter une bordure qui s’appliquera uniquement au milieu du séparateur. La taille est paramétrable et le style de trait également parmi le menu déroulant.
  • Alignement de l'élément : Vous pouvez gérer l’alignement de l'élément sur la largeur de son emplacement (section, groupe, etc.), ça ne sera visible que si la largeur de votre séparateur est inférieure à 100%.

Les bonnes pratiques

Pour plus d'informations sur l’optimisation du poids du code HTML, vous pouvez vous référer à l’article : Analyser et optimiser le poids du code HTML/CSS des emails qui fait référence à un usage “raisonné” des séparateurs dans vos campagnes. Certains espacements peuvent être effectués en utilisant les marges moins gourmandes en code HTML.  

Pour plus d'information sur l'élément arrière-plan, vous pouvez vous référer à l'article : Les arrière-plans qui conseille d’utiliser le séparateur pour créer de l’espace entre 2 éléments car l'élément est transparent par défaut. 

Bon à savoir

Le séparateur ne présente pas de contenu, les lecteurs à voix haute vont ainsi pouvoir ignorer cet élément. Par l’utilisation d’attributs comme aria-hidden="true" ou role="presentation" le code indique aux technologies d'assistance les éléments à ignorer, car ils ne contribuent pas au sens du message. 

L’Email Builder améliore l’accessibilité de vos emails sans aucune manipulation de votre part. Pour plus d’information sur l’accessibilité email, vous pouvez vous référer à l'article : Améliorer l’accessibilité des emails.