Les groupes

Dans l’Email Builder, vos emails se structurent en sections, qui peuvent contenir un ou plusieurs groupes (et/ou des éléments isolés), groupes qui eux-même assemblent des éléments (textes, images, boutons, etc). Ainsi, le Groupe permet en premier lieu de rassembler des éléments (image, texte, bouton par exemple) dans un bloc commun.

Un groupe est l’équivalent d’un tableau dans une mise en page HTML.

Le Groupe permet d’éditer facilement des paramètres communs à l’ensemble des éléments qu’il contient (accessibles depuis l’onglet Styles après avoir sélectionné un Groupe) :

• La largeur
• La hauteur
• La couleur de fond
• L’opacité
• Les options pour masquer sur tablette et/ou sur mobile

Pour ajouter un groupe dans votre email, il vous suffit d’entrer dans une section, un groupe, un arrière-plan ou une slide, puis d’accéder à l’onglet eléments du volet de conception.

Vous pouvez alors glisser-déposer l’élément Groupe à l’intérieur.

Pour plus d’informations concernant le volet de conception, vous pouvez vous référer à l’article : Organisation du Designer.

Lorsque vous sélectionnez un Groupe et que vous accédez à l’onglet Styles du volet de conception, vous avez alors accès à plusieurs options de personnalisation réparties dans 7 catégories :

• Conteneur
• Colonnes
• Coins arrondis
• Bordures
• Lien
• Alignement de l’élément
• Contenu dynamique

Chacune de ces catégories vous donne alors accès à des options de personnalisation.

Cette catégorie vous donne accès aux options suivantes :

• Largeur, qui permet de personnaliser la largeur du groupe en pixels ou en pourcents par rapport à la largeur de l’élément parent.
• Hauteur, qui permet de personnaliser la hauteur du Groupe en pixels.
• Couleur de fond, qui permet de personnaliser la couleur de fond du Groupe.
• Opacité, qui permet de personnaliser l’opacité du Groupe et de son contenu.
• Masqué sur tablette, qui permet de masquer le Groupe en vue tablette.
• Masqué sur mobile, qui permet de masquer le Groupe en vue mobile.

Cette catégorie vous donne accès à la gestion des colonnes du groupe.

Vous pouvez créer jusqu’à 8 colonnes et pour chacune d’elles définir sa largeur en pourcentage de la largeur de l’élément qui contient le groupe.

Pour un résultat optimal en vue desktop, il est impératif que la somme des largeurs de vos colonnes soit toujours égale à 100%. Le plus simple pour y parvenir est de laisser l’une des colonnes avec une largeur “vide”, elle sera ainsi calculée automatiquement afin de toujours avoir un total égal à 100%.

Cette règle ne s’applique pas dans les autres vues. Au contraire, en vue tablette et mobile vous pouvez par exemple paramétrer la largeur de toutes vos colonnes à 100%. Ainsi chacune d’entre elles occupera toute la largeur de l’email, et leurs contenus seront affichés les uns en dessous des autres.

Au survol d’une colonne, l’Email Builder met en relation la colonne sélectionnée dans le Designer pour vous permettre d’identifier rapidement le contenu.

Vous pouvez dupliquer ou supprimer une colonne. Et vous pouvez également les déplacer en utilisant les poignées sur les côtés .

Par défaut c’est l’affichage desktop qui prend le relais sur les points de rupture tablette et mobile. Toutefois, l’Email Builder vous permet une flexibilité et une personnalisation d’affichage en différenciant vos contenus entre la version desktop et mobile.

Il est possible de changer la largeur des colonnes du desktop au mobile sans impacter la version desktop initiale. Par exemple, il est possible de passer les colonnes les unes sous les autres en mobile. Pour cela il suffit de passer les colonnes à 100%. Ou encore afficher une colonne à 100% et les deux autres en dessous.

Vous pouvez également  masquer des colonnes en tablette et mobile, pour cela il suffit de saisir votre colonne à 0%.

Pour plus d’informations sur le fonctionnement des coins arrondis et des bordures, vous pouvez vous référer à l’article : Adapter les coins arrondis et les bordures d'un élément.

Pour plus d’informations sur le fonctionnement des Liens, vous pouvez vous référer à l’article : Insérer des liens dans un email.

Cette catégorie permet de gérer l’alignement du Groupe à gauche, au centre ou à droite, au sein de l’élément qui le contient.

Il existe un article expliquant le fonctionnement du contenu dynamique.