Personnaliser les colonnes

Lors de la création d'emails, il est fréquent de vouloir disposer des éléments côte à côte afin d'obtenir une mise en page plus dynamique et harmonieuse. Avec l’Email Builder, cela est réalisable grâce aux colonnes, qui permettent de structurer et organiser visuellement vos contenus.

Les colonnes peuvent être ajoutées au niveau des groupes, des sections et des slides du slider, vous offrant une grande flexibilité dans la disposition de vos éléments.

La méthode de création et de gestion des colonnes au sein de ces éléments est la même. Elle est détaillée ci-après.

Pour ajouter des colonnes dans une section de votre email, suivez ces étapes :

1. Sélectionnez la section souhaitée en cliquant dessus.
   Cela ouvrira le panneau de personnalisation de ses Styles.
2. Dans ce panneau, vous trouverez un encart dédié aux colonnes, qui vous permet de gérer le nombre de colonnes au sein de la section. 

Vous pouvez ajouter jusqu'à 8 colonnes en cliquant sur "+ Ajouter une colonne".

Pour chaque colonne, vous avez la possibilité de personnaliser sa largeur en pourcentage, ce qui vous permet d'ajuster avec précision leur disposition. Les colonnes qui n’ont pas de largeur définie sont alors calculées automatiquement et la valeur est affichée grisée dans le champ.

3. Ajouter dans vos colonnes, les éléments souhaités.

La création de colonnes au sein d’un groupe et d’un slider se fait de la même manière que celle expliquée précédemment.

Lorsque vous survolez la poignée en début de ligne ou le picto “Dupliquer” ou le picto “Supprimer”, l’Email Builder met en évidence la colonne correspondante dans le Designer, facilitant ainsi l'identification rapide de son contenu.

Vous avez également la possibilité de dupliquer ou de supprimer une colonne. De plus, vous pouvez déplacer et réorganiser les colonnes en utilisant les poignées situées sur les côtés.

En vue desktop, à partir du moment où vous ajoutez au moins une colonne supplémentaire dans une Section, un Groupe ou une Slide de l’élément Slider, il vous est possible de personnaliser l’alignement vertical du contenu de chaque colonne.

Pour cela, vous pouvez choisir parmi ces 3 valeurs :

• Aligner en haut
• Aligner au centre
• Aligner en bas

En vue tablette et mobile, cette option n’est disponible que lorsque vos colonnes sont sur la même ligne. Si vous placez vos colonnes les unes en dessous des autres (comme expliqué dans la partie suivante), la hauteur de vos colonnes s’ajustera en fonction du contenu de chacune d’elles et cette option ne sera plus disponible.

Pour pouvoir gérer l’alignement vertical de vos contenus de colonnes en vue tablette et mobile il faudra intégrer ces contenus dans un groupe et définir une hauteur à ce groupe.

ll est possible d'ajuster la largeur des colonnes pour les versions mobile et desktop de manière indépendante, ce qui vous permet d'optimiser la mise en page pour différents appareils sans affecter la version desktop initiale. Voici comment procéder pour adapter vos colonnes :

1. Placer les colonnes les unes en dessous des autres : Pour ce faire, attribuez une largeur de 100 % à chaque colonne dans la vue mobile. Cela alignera les colonnes verticalement, offrant ainsi un affichage adapté aux écrans plus petits.

2. Masquer une colonne : Pour masquer une colonne sur la version mobile, évitez de cliquer sur l'icône de la corbeille, car cela supprimerait la colonne également dans la version desktop. Au lieu de cela, définissez la largeur de la colonne à 0 %.

• En vue desktop, la somme des largeurs de toutes les colonnes doit toujours totaliser 100%. Pour faciliter cette gestion, vous pouvez définir une colonne avec une largeur "vide". L’Email Builder ajustera automatiquement la largeur de cette colonne restante pour garantir que la somme des largeurs des colonnes soit toujours exactement de 100%.
  
  
• Ne jamais attribuer une valeur de 0 % ou 100 % à une colonne en version desktop, car cela pourrait entraîner des problèmes d'affichage, notamment sur Outlook. Si vous souhaitez intégrer des éléments les uns en dessous des autres, vous ne devez pas utiliser les colonnes.

• Les valeurs décimales ne sont pas autorisées pour les largeurs de colonnes. Utilisez uniquement des valeurs entières pour garantir une compatibilité optimale.

Il est également possible de créer des colonnes en utilisant des groupes avec une largeur réduite. Cette méthode vous permet de concevoir des structures spécifiques, telles que :

• L'inversion de colonnes : permet d'échanger l'ordre des colonnes pour un effet visuel différent. Pour plus d’informations concernant l’inversion de colonnes, vous pouvez vous référer à l’article : Mettre en place une inversion de colonnes
• La double inversion de colonnes : permet de combiner deux inversions pour des mises en page plus complexes et dynamiques. Pour plus d’informations concernant la double inversion de colonnes, vous pouvez vous référer à l’article : Mettre en place une double inversion de colonnes.

Une colonne en desktop vers deux en mobile : pour plus d’informations, vous pouvez vous référer à l’article : Créer une colonne vers deux en mobile