Les images

L’Image est un élément de contenu, qui permet d’intégrer un visuel dans un email.

Pour ajouter une Image dans un email, il vous suffit d’accéder à l’onglet Eléments du volet de conception.

Vous pouvez alors glisser-déposer l’élément Image dans une Section, un Groupe, un Arrière-plan ou un Slider au sein de votre email.

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

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

• Conteneur
• Police
• Lien
• Marges
• Coins arrondis
• Bordures
• Alignement de l’élément
• Etat au survol
• Attributs HTML personnalisés
• 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 de l’Image, en pixels ou en pourcents par rapport à la largeur de l’élément parent.
• Hauteur, qui permet de personnaliser la hauteur de l’Image, en pixels uniquement.
• Couleur de fond, qui permet de personnaliser la couleur de fond de l’Image.
• Opacité, qui permet de personnaliser l’opacité de l’Image.
• Source, qui permet de définir la source de l’Image (soit une image présente dans la Médiathèque via le bouton Choisir, soit une URL d’une image hébergée à l’extérieur).
• Retoucher l’image, qui permet d’accéder à l’outil d’édition d’image.
• Texte alternatif, qui permet de personnaliser l’attribut alt de la balise <img> dans le HTML.
• Masqué sur tablette, qui permet de masquer l’Image en vue tablette.
• Masqué sur mobile, qui permet de masquer l’Image en vue mobile.

Cette catégorie permet de personnaliser l’apparence du Texte alternatif qui apparaît lorsque l’image est bloquée par le client mail. Elle vous donne ainsi accès aux options suivantes :

• Niveau de titre, les titres structurés (h1, h2, etc.) permettent d’améliorer la navigation dans les documents. Pour plus d’informations sur le fonctionnement des titres structurés, vous pouvez vous référer à l’article : Améliorer l'accessibilité des emails.
• Collection de famille d’écriture, qui permet de sélectionner la police d’écriture dans laquelle le Texte alternatif sera affiché le cas échéant.
• Couleur de texte, qui permet de personnaliser la couleur du texte.
• Taille de police, qui permet de définir la taille du texte.
• Changement de casse, qui permet de modifier la casse du texte.
• Alignement du texte, qui permet de définir comment le texte s’aligne par rapport au cadre de l’image.

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

Cette catégorie permet de personnaliser les marges en haut, à droite, en bas et à gauche, à l’intérieur de l’élément Image. Elles peuvent être définies en pixels ou en pourcents de la largeur de l’élément qui contient l’Image.

Pour plus d’informations sur le fonctionnement des coins arrondis, 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 bordures, vous pouvez vous référer à l’article : Adapter les coins arrondis et les bordures d'un élément

Cette catégorie vous donne accès à 3 valeurs : Gauche, Centré ou Droite, et vous permet de personnaliser l’alignement de l’image par rapport à son élément parent.

Pour plus d’informations sur le fonctionnement de l’état au survol, vous pouvez vous référer à l’article : Personnaliser les états au survol

Pour plus d’informations sur le fonctionnement des attributs HTML personnalisés, vous pouvez vous référer à l’article : Ajouter des attributs HTML personnalisés

Il existe un article expliquant le fonctionnement du contenu dynamique.

Si vous souhaitez aller plus loin dans l’intégration et la personnalisation des images, vous pouvez vous référer à l’article : Usage et optimisation des images.