Ajouter de l'espacement ou des séparateurs dans un modèle

Avant de commencer

Lorsque vous concevez votre infolettre, assurez-vous qu'il y ait suffisamment d'espacement autour de votre appel à l'action (CTA) et entre vos nouvelles afin de conserver une bonne lisibilité et de maximiser la compréhension ainsi que la clarté de votre message. Cela permettra d'aérer votre design et de ne pas submerger votre lecteur d'informations. Lorsqu'il y a trop d'éléments, de texte ou d'images au même endroit, cela peut rendre la lecture ardue et le cerveau ne sait plus où regarder. L'espacement, aussi appelé "espace blanc" ou "espace négatif", aidera votre abonné à bien voir, parcourir et comprendre rapidement les différentes sections de votre courriel. Pour créer des délimitations entre vos différents sujets, vous pouvez également utiliser des séparateurs, mais pensez à mettre suffisamment d'espace avant et après ceux-ci. C'est la même chose pour votre CTA, en ajoutant de l'espace autour de celui-ci il sera plus facile à repérer.

 

Différentes façons d'ajouter de l'espacement ou des séparateurs dans votre courriel

Vous pouvez :

Utiliser un bloc d'espacement ou séparateur

Que souhaitez-vous faire ?

Bloc d'espacement

Étape par étape

GIF-comment-ajouter-bloc-espacement

Pour ajouter un bloc d'espacement :

  1. Ouvrez votre modèle en mode édition.
  2. Dans le panneau latéral à votre droite, ouvrez la section Ajouter un bloc.
  3. Dans la liste des catégories, sélectionnez Espacement et séparateurs.
  4. En maintenant la pression sur votre souris, glissez et déposez le bloc Espacement à l'endroit approprié de votre modèle.
  5. Modifiez au besoin sa couleur de fond ou sa hauteur.
     
    En sélectionnant Aucune couleur comme arrière-plan, votre bloc d'espacement deviendra transparent. Si vous avez ajouté une image de fond comme arrière-plan pour votre courriel, vous verrez celle-ci apparaître dans votre bloc d'espacement. Cela peut être une autre façon de créer un design original!

    bloc-espacement-avec-fond-transparent

 

Bloc séparateur

Étape par étape

GIF-comment-ajouter-bloc-separateur

Pour ajouter un bloc séparateur :

  1. Ouvrez votre modèle en mode édition.
  2. Dans le panneau latéral à votre droite, ouvrez la section Ajouter un bloc.
  3. Dans la liste des catégories, sélectionnez Espacement et séparateurs.
  4. En maintenant la pression sur votre souris, glissez et déposez le bloc Séparateur à l'endroit approprié de votre modèle.
  5. Sélectionnez ensuite le type de ligne parmi les choix proposés.
  6. Puis, dans les propriétés du séparateur, ajustez la largeur, la taille, la position et la couleur de la ligne au besoin.
     
    Pour que votre ligne aille jusqu'à l'arrière-plan de votre modèle, décochez l'option Marge gauche et droite

 

Ajouter de l'espacement avant ou après un bloc

Étape par étape

GIF-comment-ajouter-espacement-avant-apres-bloc

Il est possible d'ajouter de l'espacement avant et après chaque bloc. Pour ce faire, sélectionnez la rangée où vous souhaitez ajouter de l'espacement. Dans le panneau latéral à votre droite, allez dans la section Propriétés du bloc. Sous ESPACEMENT DU BLOC, utilisez les flèches pour modifier l'espacement en haut et en bas du bloc ou entrez un nombre.

 

Créez une image personnalisée via l'éditeur d'images

Étape par étape

GIF-comment-creer-une-image-ligne-personnalisee-avec-editeur-image

Il est possible de créer une image personnalisée de toute pièce à partir de notre outil de retouche image.

Dans l'éditeur d'images, vous retrouverez des lignes de différents motifs.

En savoir plus sur l'utilisation de l'éditeur d'images >

Vous pouvez également rechercher des images dans notre banque d'images gratuites pour créer des compositions originales.

ligne-personnalise-banque-images

 

Utiliser l'outil ligne dans les blocs de texte

Étape par étape

GIF-comment-ajouter-ligne-bloc-texte

Il est possible d'ajouter une ligne dans le corps d'un bloc de texte. Pour ce faire, placez votre curseur à l'intérieur du bloc de texte, à l'endroit où vous souhaitez ajouter la ligne. Puis, cliquez sur l'icône Ligne horizontale qui se trouve dans les outils au haut du bloc. Cela ajoutera une mince ligne de couleur grise. En termes HTML, il s'agit d'une balise <hr>. Il n'est pas possible de modifier la couleur de cette ligne autre que via le HTML du bloc de texte en cliquant sur le bouton Source dans la barre d'outils au haut du bloc. Pour personnaliser la couleur, on utilise un code HTML de ce genre :

<hr style="color:#000000; border-top-color:#000000;"/>

Attention ! Bien qu'il soit possible de personnaliser la couleur d'une ligne créée à partir d'une balise <hr>, ce n'est pas tous les logiciels courriels qui supportent ceci. Certains logiciels courriel, comme Outlook, vont ignorer la couleur définie et afficher une autre par défaut. N'oubliez pas de toujours bien tester votre courriel !

Dans les blocs de texte, évitez de créer des lignes à partir d'une série de caractères spéciaux collés. Par exemple, à partir d'une suite d'astérisques (******) ou de barres de soulignement ( _______ ). Ces caractères deviennent insécables et peuvent causer des problèmes d'affichage lors de l'envoi de votre courriel. Utilisez plutôt l'outil ligne des blocs de texte pour obtenir un meilleur résultat.

 

Puiser de l'inspiration dans nos modèles prédessinés ou intelligents
 

exemple-courriel-lignes-diagonales exemple-courriel-points-blancs exemple-courriel-vague exemple-courriel-lignes-trois-couleurs


Parcourez notre grande sélection de modèles prédessinés et intelligents. Ces modèles, prêts à être utilisés, sont remplis de blocs spéciaux.

Pour réutiliser un bloc que vous aimez dans un autre modèle, rien de plus simple. Vous n'avez qu'à enregistrer la rangée dans vos blocs personnalisés et elle sera accessible dans tous vos modèles conçus à partir de notre éditeur glisser-déposer.

exemple-enregistrer-bloc-lignes-speciales

 

Haut