Cet article fait partie du tutoriel Lettre d’info : configuration basique.
Si vous ne l’avez pas déjà fait, mieux vaut commencer par le début : Lettre d’info basique — Introduction
4. Configurer l’habillage
Votre liste de contact est créée, votre page de désinscription fonctionne, vos options d’envoi sont configurées. En théorie, nous pourrions nous arrêter là et commencer directement à envoyer des infolettres et des communiqués de presse à tire-larigot. Mais il serait dommage de ne pas se préoccuper un tout petit peu d’esthétique.
Pour cela, nous allons cliquer sur l’onglet Admin > Lettre d’info > Habillages.
Votre site vous a normalement été livré avec un habillage de base, nommé « Base newsletter ». Jetons un œil à cet habillage :
Ce que vous avez sous les yeux est un tableau HTML, c’est-à-dire un moyen très simple de faire des mises en page sur internet. Les traits en pointillés n’apparaîtront pas dans le courriel final, ils vous servent juste à visualiser les différentes zones de votre message.
Faisons la liste de ces zones :
- 1re ligne : une bande blanche contenant un petit logo d’image cassée. Il s’agit d’une image dont WordPress a perdu le lien, donc qui ne s’affichera pas. Nous allons la remplacer par votre logo.
- 2e ligne : « Site témoin » ou « Ensemble à Lilliput », bref le nom de votre site.
- 3e ligne : le shortcode [newsletter]. Ce petit bout de code appelle le contenu de votre message, c’est-à-dire qu’au moment d’envoyer une infolettre, il sera remplacé par tout le texte et les images que vous aurez écrit.
- 4e ligne : mentions légales. Si vous regardez attentivement, vous allez voir ici un autre shortcode : [wpNSC]https://replication-white.eelv.fr/accueil/[/wpNSC]. N’y touchez pas, ce shortcode est automatiquement remplacé au moment de l’envoi par un lien vers la page de désinscription que vous avez configurée lors du chapitre 2 de notre tutoriel.
Ces éléments conviennent très bien pour un habillage d’infolettre basique. Nous allons juste remplacer l’image cassée par votre logo. Pour cela, cliquez une fois sur l’image avec votre souris. Deux petits pictogrammes apparaissent :
Supprimez l’image en cliquant sur le 2nd pictogramme. Puis cliquez sur « Ajouter un média ».
La fenêtre d’ajout de média s’ouvre. Naviguez dans voter bibliothèque de médias à la recherche de votre logo. S’il n’existe pas encore, rajoutez-le depuis votre ordinateur en cliquant sur « Envoyer des fichiers ».
Avant de fermer cette fenêtre, nous allons vérifier que la taille de notre logo est idoine pour un envoi par courriel. Tout en bas à droite de la fenêtre d’ajout de média, vous voyez un champ intitulé « Taille ». Le menu déroulant adjacent propose plusieurs tailles d’image en pixels. Il n’y a pas de taille idéale, elle dépend de votre logo (s’il est plutôt long, plutôt haut, ou plutôt carré). Choisissez une taille petite mais pas trop (autour de 300 pixels de large), nous pourrons le réduire plus tard si cela semble trop grand.
Cliquez sur « Insérez dans l’article ».
À droite de la fenêtre, cliquez sur le bouton « Mettre à jour ». Votre habillage est terminé !
Vous auriez aimé plus de customisation ? Pas de problème, on se donne rendez-vous dans le tuto « Configuration avancée » (à venir) pour peaufiner la mise en page !
Mais avant cela, l’heure est venue de faire notre premier envoi !