Le starter version « Newsletter » est un thème dédié à afficher une version web d’une newsletter. Ce thème utilise le builder « Gutenberg » de WordPress couplé à ACF, permettant d’utiliser des blocs personnalisés spécialement configurés pour le format « Newsletter« .
1 – Les différentes étapes pour créer une page et son contenu :
• Étape 1 – Créer une page
Rendez-vous dans la section « Pages » dans le menu latéral. Pour ajouter une page, vous pouvez cliquer sur le bouton « Ajouter » en haut à gauche, ou dans le sous-menu « Ajouter » dans la section « Pages » du menu latéral.
Une fois dans le panel d’édition de la page, il est important de renseigner le titre de la page.
Attention à ce que celui-ci soit bien raccord avec la newsletter à laquelle il fait référence !
• Étape 2 – Configurer la page
Dans la colonne à droite de l’écran se trouvent plusieurs paramètres relatifs à la page. Ceux qui nous intéressent sont les suivants :
- Image mis en avant : Image qui s’affiche en entête de la page.
- Thème : Définis la couleur générale de la page.
- Intitulé de l’encart : Intitulé qui s’affiche juste en dessous de l’image mis en avant.
- Lien vers la newsletter : URL du bouton en bas de page retournant sur la newsletter.
Tous ces champs sont obligatoires, en laisser un ou plusieurs vides nuits à l’ergonomie de la page.
• Étape 3 – Ajouter le contenu
Tout contenu est obligatoirement compris dans un bloc. Pour ajouter un bloc, rendez-vous dans la section « blocs » accessible via le bouton « + » en haut à gauche de la page.
Un choix de 9 blocs est proposé :
- Séparateur : Créer une ligne de démarcation pour séparer du contenu.
- Espacement : Créer un espace paramétrable.
- Texte : Ajout de contenu textuel simple avec l’option de le séparer en plusieurs colonnes.
- Texte + Image : Ajout d’une colonne texte et d’une colonne image avec largeur des colonnes éditables (et divers options sur l’image).
- Image : Ajout d’une image en pleine largeur.
- Boutons : Ajout d’un groupe de bouton.
- Titre : Ajout d’un titre avec sa description en option.
- Colonnes : Ajout de colonnes paramétrables avec contenu textuel et image.
- Icons : Ajout de contenu textuel accompagné d’icons.
Chaque bloc peux être dupliqué, déplacé ou supprimé. Tous les champs ne sont pas obligatoires et il sera à vous de juger quel bloc est le plus adapté pour tel type de contenu, dans l’objectif d’avoir un rendu sur la page le plus ergonomique possible.
2 – Éditer un bloc :
Tout bloc (sauf exception) possède 3 onglets dans son panel administratif :
- Onglet « Titre » : Permet l’ajout d’un titre principal au bloc sur toute sa largeur (et en option sa description/sous-titre)
- Onglet « Contenu » : Contient tous les champs spécifiques au bloc, cet onglet diffère d’un bloc à l’autre.
- Onglet « Paramètres de Style » : Regroupe tous les champs relatifs au design du bloc.
La marge du haut a pour valeur par défaut « Petit » sur tous les blocs, cela n’est pas utile dans toutes les configurations.
3 – Les règles à respecter :
• Intégrer des espaces insécables
Beaucoup d’automatismes sont intégrés, mais les espaces insécables sont malheureusement à rentrer à la main.
Un espace insécable est un espace que l’on intercale entre deux mots qui ne doivent pas être séparés en fin de ligne. Sa mise en place est selon l’interprétation de l’utilisateur, mais il est impératif de l’utiliser pour ne pas séparer :
- Un nombre et son unité
- Un double point, guillemet, point-virgule, point d’interrogation ou point d’exclamation de leur mot d’attache
- Un groupe de chiffre ou de lettre
- Une abréviation, initiales ou nom propre
Il existe plusieurs manières de l’intégrer, en code HTML nous utilisons « « .
Pour ce faire, dans chaque champ de contenu qui contient du texte, il est possible de remplacer tout espace par « » pour créer un espace insécable. Dans l’éditeur de texte de WordPress, attention à bien-être en mode « Texte« .
• Mettre le texte entre guillemets en italique
Tout texte compris entre des guillemets doivent être en italique. Dans l’éditeur de WordPress, l’option est directement disponible. Mais dans un champ texte basique, il faut mettre le texte entre les balises suivantes : « <em> » et « </em>«
• Tous les liens doivent s’ouvrir sur un nouvel onglet
Créer un lien se fait de 2 manières :
- Soit on utilise l’option « lien » de l’éditeur WordPress,
- Soit on comprend le texte qui servira de lien dans les balises suivantes : « <a> » et « </a>« . Le lien vient s’ajouter dans la balise « <a> » de la manière suivante : « <a href='{URL}’> » où {URL} est replacé par l’URL du lien.
Qu’importe le lien (sauf exception pour le lien de la newsletter), tous doivent s’ouvrir sur un nouvel onglet. L’option est disponible dans l’éditeur de WordPress, dans un champ texte basique il faut rajouter « target=’blank‘ » à la balise « <a>« .