La gestion des marges et des espacements inter-colonnes vous permet de faire les réglages que vous souhaitez pour contrôler l’aspect visuel du bloc ou de la ligne. Voici comment cela fonctionne.

L’objectif avec cet outil va être de mettre des espaces entre les blocs et/ou à l’intérieur même du bloc.

L’outil fait la distinction entre les marges intérieures, également appelées « padding », et les marges extérieures, également appelées « margin ».

En modulant les réglages des marges intérieures, on va venir jouer sur ce qui se passe à l’intérieur du bloc, tandis qu’avec les marges extérieures, cela va venir modifier les réglages à l’extérieur du bloc. Voici un exemple illustré pour comprendre comment bien utiliser les marges dans votre template.

Pour cet exemple, les blocs ont été délimités par des contours épais afin d’avoir une meilleure visualisation de ce qui est considéré comme étant une marge intérieure et comme une marge extérieure. Nous partons du principe que nous sommes en train de délimiter notre newsletter en catégorie et en sous-catégorie, avec comme objectif de les mettre en avant de manière visible.

Tout d’abord, modifions les réglages de nos marges intérieures pour les deux blocs:

Ensuite, nous allons modifier les réglages de nos marges extérieures.

Pour la première ligne, je vais modifier les marges extérieures du bloc afin de mettre en avant la catégorie:

L’objectif ici était de conserver la couleur de fond même à l’extérieur de mes contours. Pour la ligne « sous-catégorie », on va modifier les marges extérieures au niveau de la ligne, afin que l’extérieur du bloc ne soit pas de la même couleur:

Ainsi, les réglages des marges peuvent se faire au niveau de la ligne ou du bloc, et cela va vous permettre de jouer sur l’apparition des couleurs de fond, des bordures, etc. dans la création de vos templates.
​

Ce réglage concerne uniquement les lignes comprenant plusieurs colonnes:

Comme pour les marges, nous allons prendre un exemple visuel pour comprendre le fonctionnement de l’espacement inter-colonnes. Pour accéder à ce réglage dans les paramètres, il faut sélectionner la ligne (elle s’affiche en bleu), et descendre dans les paramètres (à droite de l’écran):

L’intérêt d’utiliser les espacements inter-colonnes plutôt que les marges dans ce cas de figure est d’assurer un affichage optimal sur mobile.

Dans l’exemple ci-dessous, le premier bloc utilise l’espacement inter-colonnes et les marges sont bien gérées sur mobile, alors que dans le second bloc, où les marges extérieures ont été utilisées plutôt que l’espacement inter-colonnes, on note un décalage des marges sur l’affichage mobile.