L'option “Type de section”

Au sein de la catégorie “Conteneur” de l’onglet “Styles” du volet de conception, se trouve l’option “Type de section”. Celle-ci permet de choisir entre l’option “Section classique” qui est la valeur sélectionnée par défaut ou “Section pleine largeur”, et aura un effet sur l’affichage de votre section et de son contenu en vue desktop.

Compatible avec la majorité des clients mails, une section pleine largeur vous permet de créer des emails plus immersifs.

Pour plus d’informations concernant l’élément Section vous pouvez vous référer à l’article Les sections.

Lorsque vous ajoutez une nouvelle section dans votre email, par défaut celle-ci sera de type “classique”.

En vue desktop, sa largeur sera donc fixée à la valeur définie dans l’option “Largeur de la composition”, par exemple 640px. Cette option apparaît lorsque vous sélectionnez le Corps de votre email, dans la catégorie “Conteneur”.

Ainsi, lorsque vous ajoutez un élément avec une largeur de 100% dans votre section, cet élément fait 640px de large.

Après avoir ajouté une section dans votre email vous pouvez sélectionner le type “Section pleine largeur” en accédant à la catégorie “Conteneur” de l’onglet “Styles” du volet de conception.

En vue desktop, votre section occupera alors toute la largeur disponible. Par conséquent, tous les éléments qu’elle contient verront leur taille et leur position s’adapter à la largeur de la section.

Par exemple, pour une section 3 colonnes contenant chacune une image, un texte et un CTA, dans le cas d’une section de type “classique” dans un email faisant 640px de large nous avons un rendu tel que celui ci-après.

Si nous modifions le type de la section pour le passer en “pleine largeur” nous avons alors le rendu ci-après.

Cette section ainsi que son contenu s’adapteront alors en fonction de la taille de l’écran du destinataire de votre email.

Lorsque l’on modifie le type d’une section pour le passer en “pleine largeur”, la couleur de fond et la couleur de section se superposent : seule la couleur de fond reste visible. L’option “Couleur de section” n’est donc plus accessible.

Cependant, si vous n’aviez défini qu’une couleur de section, alors celle-ci sera appliquée en tant que couleur de fond lors du changement de type de section.

Si vous souhaitez privilégier la qualité d’affichage de vos visuels dans la majorité des clients mails, nous vous conseillons d’utiliser des visuels desktop ayant une largeur de 1500px, et une hauteur égale à la hauteur du contenu que vous allez intégrer dans l’arrière-plan.

Dans l’exemple ci-dessus, l’arrière-plan contient une image (logo), plusieurs textes, un CTA et des marges en haut et en bas. Au total, le contenu possède une hauteur de 500px. L’image d'arrière-plan doit donc avoir une taille de 1500x500px.

Cependant si vous souhaitez privilégier la compatibilité d’affichage de vos visuels avec l’ensemble des clients mails, en particulier avec les clients mails Orange, GMX et Web.de, nous vous conseillons d’utiliser des visuels ayant une largeur de 640px, et une hauteur égale à la hauteur du contenu que vous allez intégrer dans l’arrière-plan.

• Les anciennes versions de Outlook Windows (2016, 2019 et 2021) ne sont pas compatibles avec l’option “pleine largeur”. Sur ces clients mails les sections de type “pleine largeur” seront alors affichées avec une largeur fixe de 950px.
  
  
• Lorsque l’on intègre un élément Image dans une Section de type “pleine largeur”, il est nécessaire de fixer la hauteur de cette image pour que celle-ci s’affiche correctement dans toutes les versions de Outlook Windows.