Besoin d'aide? Nous assurons vos arrières.

Accueil Point d'informations aero-right Modèles & Éditeur aero-right Sections et Blocs de l’Email

Sections et Blocs de l’Email

Modèles & Éditeur Actualisé le août 26, 2021

Ajoutez de nouvelles sections et réorganisez les blocs au fur et à mesure. Utilisez des sections pour ajouter de nouvelles colonnes dans votre email, et des blocs pour ajouter du contenu tel que des images, du texte ou des boutons. Grâce à notre éditeur Drag&Drop (glisser-déposer), styliser vos emails est simple et rapide, ce que tous nos clients apprécient.

Topics covered in this article:

 

 


 

Sections

 

Les sections sont utilisées pour structurer votre email dans l’éditeur. Elles vous permettent de diviser votre contenu et servent de conteneur pour vos blocs de contenu. Vous pouvez ajouter de nouvelles sections, en supprimer au fur et à mesure de la mise en forme de l’email, ou donner un style individuel aux différentes sections de votre email.

 

Voici comment fonctionnent les sections :

  1. L’option Plus offre cinq types de colonnes différentes qui peuvent être ajoutées à la mise en page de l’email ; il n’y a pas de limite au nombre de sections que votre email peut avoir. Les sections disponibles sont :
    • Une colonne
    • Deux colonnes
    • Trois colonnes
    • Deux colonnes avec une barre latérale gauche
    • Deux colonnes avec une barre latérale droite
  2. Le crayon ouvre les paramètres de style pour cette section spécifique. Vous pouvez attribuer une couleur d’arrière-plan et une bordure à une section entière ou à chaque colonne si vous utilisez une section à plusieurs colonnes.
    • Les paramètres de style d’une section peuvent également être ouverts en cliquant n’importe où à l’extérieur de la zone de cette section.
    • Veuillez noter que les blocs de contenu peuvent être stylisés individuellement dans ces paramètres de bloc.
  3. Les flèches du haut et du bas vous permettent de réorganiser vos sections dans l’email.
    • Toutes les sections, à l’exception du pré-en-tête et du pied de page, peuvent être déplacées vers le haut ou vers le bas. Aucune autre section ne peut être placée au-dessus du pré-en-tête ou au-dessous du pied de page.
    • Le bloc de pied de page qui contient vos liens d’abonnement peut être déplacé dans l’email. Nous vous recommandons toutefois de le conserver dans la section de pied de page de votre email, ceci afin d’offrir à vos abonnés un moyen facile de se désabonner ou de gérer leurs préférences.
  4. La corbeille permet de supprimer une section. Chaque fois que vous supprimez une section, tout contenu ajouté précédemment, tel que les blocs ou le style, sera également supprimé ; l’option de suppression ne peut être réversible. Pour vous éviter de perdre du contenu précieux, il vous sera demandé de confirmer votre option de suppression.

 

Retour en haut

 


 

Styles Généraux

 

Dans les paramètres de Styles Généraux, vous pouvez gérer la palette de couleurs de votre email ; vous pouvez également ajouter une couleur de fond et ajouter une bordure à l’email.

Couleurs

Il existe 27 jeux de couleurs différentes ; choisissez celui qui convient le mieux à vos besoins. Les sections et les blocs peuvent toujours être personnalisés même si un thème de couleurs spécifique a été sélectionné. 

Couleur de fond

L’option de couleur de fond vous permet de sélectionner une couleur spécifique pour l’arrière-plan de votre email. Vous pouvez choisir parmi les couleurs disponibles ou ajouter le code hexadécimal de votre couleur. En outre, des sections et des blocs individuels peuvent se voir attribuer leur propre couleur de fond.

Bordure de l’Email

Vous pouvez modifier l’arrière-plan pour qu’il soit de pleine largeur ou de largeur encadrée dans l’option de bordure d’email. L’arrière-plan pleine largeur ne dispose pas d’options de style supplémentaires.

Dans l’option d’arrière-plan encadré, vous pouvez ajouter ou modifier les éléments suivants : 

  • Bordure
  • Couleur bordure 
  • Taille bordure
  • Rayon d’angle
    • Appliquez le rayon d’angle au pré-en-tête et au pied de page de l’email.
Afficher les Sections

L’option Afficher les Sections vous permet de visualiser toutes les sections de votre email. Sélectionnez Masquer les Sections pour supprimer les noms des sections. À partir de cet écran, vous pouvez également cliquer sur n’importe quel bloc pour le modifier.

 

Retour en haut


 

Blocs

 

Séparés des sections, les blocs sont ce qui va contenir et montrer le contenu de votre email. Les blocs peuvent être utilisés comme éléments de design mais aussi comme fonctionnalités. Utilisez les blocs pour ajouter des images ou des boutons ainsi que du texte. Chaque bloc de contenu dispose de différentes options de style.  

Pour ajouter un bloc à votre email, cliquez sur le bloc souhaité et faites-le glisser vers une section de votre email.

Les blocs suivants sont disponibles dans l’éditeur d’email.

 


 

Blocs Image et Carte image

 

Avec ces blocs, vous pouvez télécharger une image ou sélectionner parmi les images déjà dans votre galerie. Pour utiliser ces blocs, faites-les glisser dans votre email, vous avez alors deux options pour ajouter vos images :

  1. Glissez/Déposez une image depuis votre ordinateur. Si vous choisissez cette option, assurez-vous que le bloc est ouvert avant de déposer l’image.
  2. Rechercher un fichier. Le choix de cette option vous permet de sélectionner une image déjà présente dans votre galerie. Vous pouvez également télécharger de nouvelles images ou utiliser des images hébergées sur d’autres sites Web. Si vous disposez de l’URL d’une image, cliquez sur l’option Insérer une image à partir de l’URL et collez l’URL de l’image.
  3. Une fois que vous avez placé votre image dans votre email, vous verrez un panneau à gauche avec quelques options pour personnaliser votre image.

Un bloc Image ajoutera une image à votre mise en page, tandis que le bloc Carte image ajoutera à votre mise en page une image et du texte dans un cadre.

Ci-dessous, vous pouvez voir un bloc Image à gauche et un bloc Carte image à droite.

Lequel utiliser ?

Utilisez le bloc Image lorsque vous devez ajouter une image simple.

Utilisez le bloc Carte image lorsque vous devez ajouter une description à votre image. Si vous déplacez ce bloc, la description se déplacera également.

Pour en apprendre davantage sur les blocs d’images et sur la façon d’ajouter des images, cliquez ici.

Cela peut vous intéresser :

 

Retour au menu des blocs


 

Blocs Légende image

 

Il existe trois types de blocs de Légende Image :

  • Bloc de texte à droite
  • Bloc de texte à gauche et,
  • Bloc inférieur

Pour savoir comment ajouter un bloc Légende image, cliquez ici.

Un bloc Légende image est un bloc qui vous permet d’ajouter un texte dans une image. La principale différence entre les blocs Légende image et les bloc Carte image est que le bloc Légende Image n’a pas de cadre ou de conteneur, vous pouvez ajuster le remplissage au bord de votre mise en page comme dans l’exemple ci-dessous (bloc Légende Image à gauche et bloc de Carte image à droite).

 

Retour au menu des blocs


 

Bloc Texte

 

You can add text to your email through the text block. To use this block, simply drag it to the desired place. Once there, click on it and replace the default text with yours.

Vous pouvez ajouter du texte à votre email via le bloc Texte. Pour utiliser ce bloc, faites-le simplement glisser à l’endroit souhaité. Puis cliquez dessus et remplacez le texte par défaut par votre texte.

Consultez le glossaire pour comprendre les options Conteneur et Contenu dans les paramètres du bloc de texte situés dans le panneau de gauche.

Pour modifier votre texte, utilisez la barre d’outils située au-dessus de votre email. Vous y trouverez les options courantes d’édition de texte. Vous disposerez également d’autres options d’édition, telles que l’ancrage du texte, l’ajout d’un lien, d’une image ou même d’un lien vers un document.

Copier et Coller

Si vous souhaitez copier et coller du texte sur votre email, nous vous recommandons d’utiliser l’option Coller. En faisant cela, vous éliminerez tous les caractères cachés dans votre texte qui pourraient interférer avec le design de ce dernier.

Code Source

Pour ajouter un Code Source, cliquez sur l’icône du code et collez votre code.

Si vous ne voyez pas les options mentionnées ci-dessus, veuillez cliquer sur l’icône Plus de votre barre d’outils.

 

 

Note : Dans certains cas, vous verrez le logo TinyMCE lors de l’édition d’un bloc de texte. TinyMCE est une tierce partie que nous utilisons pour rendre notre Drag&Drop meilleur et plus rapide. Le logo n’apparaîtra pas dans vos emails, mais seulement quand vous éditez un bloc de texte.

 

 

 

Retour au menu des blocs


 

Bloc Video

 

Les vidéos sont des outils visuels très efficaces. Grâce à la vidéo, vous pouvez montrer les qualités d’un produit ou les raisons pour lesquelles on doit vous choisir plutôt que vos concurrents. Ne manquez pas l’opportunité d’utiliser des vidéos sur votre email.

Si vous souhaitez savoir comment ajouter une vidéo à votre email, cliquez ici.

 

Retour au menu des blocs


 

Bloc Diviseur

 

Utilisez des séparateurs pour créer des espaces entre les blocs et sections de votre email. Les séparations ne doivent pas nécessairement être des espaces vides. Pour ajouter un bloc Diviseur, faites-le glisser dans la section souhaitée. 

Découvrez toutes les possibilités de séparation ici.

 

Retour au menu des blocs

 


 

Bloc Bouton

 

Le CTA (Call To Action) est la partie la plus intéressante de votre email. Des boutons peuvent être utilisés pour inciter les abonnés à visiter une Landing page.

Pour ajouter un bouton, faites-le glisser à l’emplacement souhaité. Dans le panneau de gauche, vous verrez les options pour personnaliser votre bouton.  Pour en savoir plus sur les options d’édition des boutons, veuillez consulter notre glossaire. Continuez à lire pour configurer le bouton Contenus.

  1. Dans la zone de texte du bouton, ajoutez le texte de votre bouton. Faites en sorte que votre texte soit accrocheur pour attirer l’attention de votre abonné.
  2. Tout d’abord, sélectionnez le type de lien URL, puis ajoutez l’URL dans votre site Web. Notez qu’il peut s’agir d’une URL externe ou encore d’une zone située dans l’email lui-même. Il existe deux façons d’ajouter des liens :
    1. Vous pouvez ajouter un lien en cliquant sur l’option lien dans la barre d’édition du texte.
    2. Ou sélectionnez le type de lien dans l’option de contenu du bloc de boutons. Remarque : pour ajouter une ancre, vous devez d’abord la créer.
  3. Utilisez la barre d’outils texte pour styliser votre texte ou pour ajouter un lien.
  4. Si vous avez plusieurs boutons sur votre email, vous n’avez pas besoin de les personnaliser un par un. Personnalisez un bouton, puis cochez simplement Appliquer le style à tous les boutons. Le reste des boutons de votre email copiera le même style.

 

 

Retour au menu des blocs


 

Bloc Follow et Partage Réseaux Sociaux

 

Les blocs de réseaux sociaux sont essentiels. Notre éditeur vous propose deux types de blocs pour ajouter vos réseaux sociaux. Pour utiliser l’un des blocs, faites-le glisser à l’endroit de votre choix.

Le bloc de follow réseaux sociaux vous permet d’ajouter l’icône de votre réseau social ou l’icône plus du texte. Ce bloc vous permettra de suivre jusqu’à 20 réseaux différents, dont Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, entre autres.

Le bloc de partage réseaux sociaux vous permettra d’ajouter : Facebook, Twitter, Linkedin, Myspace et Instapaper. Ce bloc permettra aux utilisateurs de partager directement votre email avec les réseaux sociaux mentionnés.

Lequel utiliser ?

Si vous souhaitez rediriger les destinataires de vos emails vers vos réseaux sociaux, utilisez le bouton follow réseaux sociaux. Ils pourront ainsi cliquer sur le réseau social souhaité et le liker ou l’ajouter à leurs préférences.

Si ce que vous voulez, c’est que les utilisateurs partagent votre contenu, utilisez le bloc de partage réseaux sociaux.

Pour savoir comment utiliser les paramètres des conteneurs, consultez le glossaire.

Suivez ces instructions pour ajouter un réseau social dans les deux blocs :

  1. Faites glisser le bloc souhaité ou cliquez sur un bloc de réseau social existant dans votre email.
  2. Dans le panneau de gauche, accédez à l’onglet Contenu.
  3. Cliquez sur le menu déroulant Ajouter service, sélectionnez un réseau social, puis cliquez sur l’icône plus à côté de la case.
  4. Dans votre email, cliquez sur l’icône du nouveau réseau  récemment ajouté. Les options de personnalisation s’affichent dans le panneau de gauche.

Ajoutez un lien URL et personnalisez vos icônes. Lorsque vous avez terminé, vous pouvez utiliser l’option Appliquer rayon à tous les boutons du bloc pour ajouter le même rayon à tous les boutons.

 

 

En outre, lorsque vous passez votre souris sur une icône de réseau social, vous avez la possibilité de la déplacer ou de la supprimer.

 

 

Retour au menu des blocs


 

Bloc Barre de Navigation

 

La barre de navigation peut être utilisée pour diriger les destinataires de votre email vers d’autres parties de votre email avec une ancre. Elle peut également être utilisée pour des liens externes. 

Comment ajouter une barre de navigation

  1. Glissez/déposez l’icône de la barre de navigation dans votre email. La plupart des utilisateurs préfèrent l’afficher dans l’en-tête de l’email.
  2. Par défaut, votre barre de navigation ressemblera à ceci :
  3. Maintenant, cliquez sur un lien dans la barre de navigation. Les options de lien sont affichées sur le panneau de gauche.
  4. Ajoutez le type de lien dont vous avez besoin et personnalisez-le. Vous pouvez supprimer des liens en cliquant sur l’option Supprimer à l’intérieur du lien.
  5. En cliquant sur un lien, vous pouvez également modifier la couleur et l’apparence de la bordure de séparation. Cette bordure est facultative, si vous n’en voulez pas, il suffit de changer sa couleur en transparent ou avec une épaisseur de la ligne à zéro.

Comment personnaliser une barre de navigation

 

Pour en savoir plus sur l’onglet Conteneur, veuillez consulter le glossaire.

  1. Pour ajouter un lien, cliquez simplement sur l’icône Plus. Pour personnaliser un lien, cliquez dessus et les options du lien s’afficheront sur le panneau de gauche. Vous pouvez ajouter jusqu’à six liens. Il existe deux options de lien : texte ou image, vous pouvez choisir n’importe quelle option. Pour en savoir plus sur les différents types de liens, cliquez ici.
  2. Il existe trois types de dispositions disponibles pour vos liens de barre de navigation. Vous pouvez combiner des images et du texte. Cliquez sur tous les styles et choisissez celui qui convient le mieux à votre design.
  3. Utilisez les options d’alignement vertical et horizontal pour formater votre barre. La taille de la gouttière détermine l’espace entre chaque lien.
  4. Avec le Style Mobile, vous pouvez choisir entre les options par défaut, pile verticale ou pile verticale et centre. Vous pouvez choisir l’apparence de votre design sur un appareil mobile.

 

 

Retour au menu des blocs


 

Exemples d’Emails

 

Voici quelques exemples de la manière dont vous pouvez optimiser vos emails en utilisant des sections.

Les exemples d’emails ci-dessous montrent les sections et les blocs que nous avons utilisés dans la partie Design de l’email.

Exemple 1

Nous avons commencé par ajouter une barre de navigation dans la section d’en-tête. Le titre utilise la section de la barre latérale gauche, puis dans la deuxième colonne, nous avons ajouté les images et le texte à l’aide de blocs Carte Image. Enfin, dans la colonne latérale inférieure gauche, nous avons ajouté les icônes des réseaux sociaux et invité nos abonnés à nous faire part de leurs commentaires.

 

 

Exemple 2

Dans cet exemple, nous avons créé un email en utilisant des sections à une et deux colonnes. Nous avons également ajouté un arrière-plan encadré et utilisé l’option de rayon de bordure dans les paramètres généraux pour mettre en valeur le corps de l’email.

 

 

Exemple 3

Dans ce dernier exemple, nous avons créé un email en utilisant des sections à colonnes multiples. Nous avons utilisé un diviseur pour créer un espace entre les sections. Comme vous pouvez le constater, nous avons utilisé des blocs d’images, de texte, de boutons, de réseaux sociaux et un bloc vidéo.

 

 

Retour en haut


 

Glossaire

 

Les paramètres du conteneur varient en fonction du bloc que vous modifiez.

Couleur de fond

Cette option vous permet de définir la couleur d’arrière-plan d’un élément. Pour l’utiliser, cliquez sur le cercle de couleur et sélectionnez une couleur. Si vous disposez d’un code hexadécimal (Hex code), collez-le directement dans la case. Cliquez sur Sauvegarder lorsque vous avez terminé. L’option Réinitialiser permet de redonner à l’élément son apparence initiale.

Bordure et style de ligne

Certains éléments disposent de l’option de bordure. Vous pouvez définir une bordure de couleur en cliquant dans le cercle de couleur, puis en sélectionnant une couleur. Vous pouvez également utiliser des codes hexadécimaux dans le champ prévu à cet effet. Pour le style de bordure, choisissez parmi les neuf styles de ligne disponibles, puis ajoutez une épaisseur de 0 à 99. Cette bordure est facultative, si vous n’en voulez pas, il suffit de changer sa couleur en transparent ou avec une épaisseur de la ligne à zéro. L’option Réinitialiser permet de redonner à l’élément son apparence initiale.

Rayon d’angle

Certains éléments disposent de l’option de rayon d’angle. Cette option permet de définir l’arrondi des coins d’un élément. Vous pouvez définir un rayon compris entre 0 et 20. Lorsque vous avez terminé, vous pouvez cocher l’option Appliquer le rayon à tous les boutons du bloc ; tous les boutons auront ainsi le même rayon.

Marge (Gutter Size)

La marge est une option disponible dans certains blocs comme la barre de navigation, les blocs de follow et partage réseaux sociaux. Cette option définit l’espace entre un élément et un autre. Pour définir sa taille, faites glisser le point vert de 0 à 20.

Remplissage et Marge

Les bordures et les espacements sont généralement des options disponibles dans l’onglet Contenu. Elles sont toutes deux relatives à l’espace entourant un élément. Vous pouvez définir le remplissage ou la marge en faisant glisser la barre.

Alignement

L’option d’alignement est relative à la position d’un élément. Vous pouvez la définir en cliquant sur les options d’alignement souhaitées : centre, gauche, droite, bas ou haut.

Hauteur de ligne

L’option Hauteur de ligne n’est disponible que pour un bloc de texte, et elle est utilisée pour définir la hauteur entre deux éléments en ligne. Les options disponibles sont Simple – 1,25 – 1,5 et Double. 

Hex Code

Le hex code (code hexadécimal) est la valeur qui représente une couleur. Ce code commence par un dièse (#) et est suivi de six caractères ; par exemple, #CFCFDA ; les caractères peuvent être des chiffres ou des lettres. Les codes hexadécimaux peuvent être utilisés pour ajouter des couleurs institutionnelles. Si vous n’êtes pas sûr des couleurs du code hexadécimal, vous pouvez utiliser un logiciel de création ou un color picker en ligne.

 

Retour en haut

 


 

Si vous avez des questions sur l’utilisation des sections ou d’un bloc spécifique, veuillez contacter notre support par Email, LiveChat ou Téléphone.

 


Avons-nous répondu à votre question?
Vous avez déjà voté !

Vous ne trouvez pas ce que vous cherchez?

Soumettre un ticket