Les arrière-plans

L'élément Arrière-plan permet d'ajouter du contenu modifiable (groupe, séparateur, image, texte, vidéo, code) par-dessus une image de fond.

L’un de ses principaux atouts est sa flexibilité sur mobile : contrairement à une image classique, vous pouvez zoomer, recadrer ou même remplacer l’image de fond, offrant ainsi plus de possibilités créatives.

Il existe de nombreuses façons de créer des mises en page avec l’arrière-plan. Voici les 6 étapes de base à suivre :

Glissez-déposez une section dans votre email, puis double-cliquez dessus. 

Depuis l'onglet "Éléments" qui se trouve dans le volet de conception, glissez-déposez l'élément arrière-plan.

Cliquez sur l'arrière-plan, l'onglet "Styles” s'ouvrira dans le volet de conception.

Dans la catégorie "Conteneur", vous pourrez importer l’image depuis la médiathèque en cliquant sur le bouton “Choisir” ou en renseignant directement l'URL de l'image.

Comment connaître la hauteur de mon visuel ?

Si l’image est déjà sur votre ordinateur, vous pouvez vérifier sa hauteur dans les propriétés de l'image, notamment au niveau des dimensions.

Si l’image n’est pas sur votre ordinateur, voici comment procéder :

1. Ajoutez un élément "image" dans l’email.
2. Importez le visuel d’arrière-plan comme source pour cet élément.
3. Survolez l’image avec la souris : les dimensions s’afficheront en bas à gauche. Notez la hauteur, c’est celle que vous devrez utiliser pour configurer l’arrière-plan.

Vous pouvez sélectionner la manière dont le visuel va s’afficher dans l’arrière-plan grâce aux options Rendu et Alignement.

Étiré

Va déformer le visuel afin que celui-ci soit entièrement visible. Cette option est particulièrement utile lorsqu’un dégradé de couleur est utilisé en tant que visuel d’arrière-plan.

Image originale

Rempli

Va redimensionner le visuel en préservant ses proportions afin de remplir tout l’espace disponible dans l’élément arrière-plan, quitte à ce que certaines parties du visuel ne soient plus visibles.

Ajusté

Va redimensionner le visuel en préservant ses proportions afin qu’il soit entièrement visible dans l’élément arrière-plan, quitte à ce que des marges apparaissent.

L’option d’alignement va quant à elle permettre de modifier simplement la position du visuel lorsque le rendu est défini sur “Rempli” ou “Ajusté”.

Dans les vues tablettes et mobiles il est possible de sélectionner le mode “Personnalisé” qui va vous permettre d’aller plus loin dans la manière dont le visuel sera rendu et aligné.

Pour plus d’informations vous pouvez vous référer à l’étape 7 ci-après.

Ces options Rendu et Alignement fonctionnent avec la majorité des clients mails du marché, cependant, si vous souhaitez privilégier la compatibilité d’affichage de vos visuels 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.

Une fois positionné dans l’arrière-plan, double-cliquez dessus. Vous pouvez alors y ajouter les éléments suivants en les glissant-déposant :

• Texte
• Image
• Groupe
• Vidéo
• Séparateur
• Élément code

Remarque : Par défaut, les éléments éditables sont ajoutés et positionnés en haut de l’arrière-plan.

Important : Les éléments placés sur l’arrière-plan ne doivent pas dépasser les limites de l'image, sous peine d'être coupés.

Ajouter un Bouton ou CTA sur l’arrière-plan

1. Ajoutez un élément "texte" dans l’arrière-plan 
2. Appliquez une couleur de fond.
3. Ajustez la hauteur de ligne.
4. Ajoutez des bordures.
5. Insérez un lien.

Pour ajuster la position des éléments superposés à l'arrière-plan, accédez aux paramètres de la catégorie “Position".

En augmentant la valeur de la position haute, vous déplacerez les éléments vers le bas.

Astuce : Utilisez des pourcentages pour les paramètres de position afin d'assurer un affichage optimal sur tous les écrans en mode responsive.

Aligner le contenu

Pour aligner vos éléments à droite ou à gauche du visuel, procédez comme suit :

1. Ajoutez un groupe dans l’arrière-plan.
2. Insérez deux colonnes dans ce groupe.
3. Placez les éléments éditables dans la colonne de votre choix.

Espacer les éléments superposés sur l’arrière-plan

Pour créer de l'espace entre vos éléments, ajustez leurs marges supérieures et inférieures. Si vous avez besoin d'espacer des boutons entre eux, utilisez l'élément "séparateur".

Pour plus d'informations sur la conception et la mise en page, vous pouvez vous référer à l'article : Organisation du Designer.

L’arrière-plan propose plusieurs options de mise en page pour les vues mobiles :

1. Choisir une image différente pour la version mobile

Dans la source de l’image de fond, vous pouvez télécharger un nouveau visuel spécifique à la version mobile.

2. Recadrer l’image

Pour ajuster l’arrière-plan sur mobile, utilisez les options de recadrage disponibles dans la catégorie “Conteneur”. Assurez-vous que l’image est conçue pour le recadrage, sans bordures ni mentions légales au bas, pour une adaptation optimale.

Les réglages ci-après vous permettent de personnaliser l’arrière-plan en fonction du rendu souhaité pour mobile.

• Position horizontale : pour déplacer l’image de droite à gauche.
• Position verticale : pour déplacer l’image de haut en bas.
• Largeur de l’image : pour effectuer un zoom sur l’image au-delà de 100%.
• Hauteur de l’image : pour ajuster la hauteur et ainsi,éviter la déformation ou l’écrasement de l’image.

3. Afficher l’image en entier

Pour plus d'informations sur la configuration des arrière-plans en mobile, vous pouvez vous référez à l'article : Adapter l'arrière-plan en mobile

Définissez une couleur de fond pour l’arrière-plan.
Ainsi, même si les images ne s'affichent pas dans la boîte mail, les éléments resteront visibles grâce au contraste avec cette couleur de fond.

Astuce : Si vous souhaitez afficher le rendu de votre emails sans les médias, cliquez sur cet icône.

Il peut y avoir plusieurs raisons à cela. Nous vous conseillons de les passer en revue en procédant par élimination :

Dans l’Email Builder: 

• Avez-vous bien renseigné le chemin de l’arrière-plan dans le champ « Source » ?
• Avez-vous bien renseigné la hauteur de l’arrière-plan en pixels ?

Après routage : 

• L’URL de l’arrière-plan est-elle correcte, ne renvoie-t-elle pas une erreur 404 ?
• L’URL de l’arrière-plan est-elle bien en « https » ?
• L’URL de l’arrière-plan est-elle bien remplacée dans le code HTML du routeur ?
• Si l’URL n’est pas remplacée dans le code du routeur vous pouvez copier/coller directement dans l’Email Builder l’URL d’hébergement de l’arrière-plan. N’hésitez pas à contacter l’équipe support en cas de besoin.