🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que la plupart de vos visiteurs qui aimeraient sauter le pas vont se décourager en constatant que c’est trop d’effort !

On fait d’abord un petit tour de galère et après, on installe un petit plug-in sympa qui va rendre le processus beaucoup plus “normal”.

👇🏻 On va passer de ça ….

… à ça ! 👇🏻

Agrandir

×

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

La procédure “par défaut” passe par 5 étapes dont la dernière est assez déconcertante :

➡️ En préalable, vérifiez dans Réglages > Général que tout le monde peut s’inscrire (avec le statut d’abonné) :

C’est par un bloc Gutemberg que vous pourrez procurer un lien, soit :

• dans le bandeau latéral ➡️ Apparence > Widget > Sidebar
• Dans le footer ➡️Apparence > Personnaliser > 🖍️ Footer

💡 Dans les deux, ça peut être pas mal aussi.

Cliquer dessus puis sur “Inscription”

👉🏻 Il faut déjà le voir en bas à gauche !

🙄 Il est probable que la plupart de vos visiteurs vont rebondir, ne pouvant pas donner d’identifiant et de mot de passe tout en pensant que le lien était mal intitulé et ne concernait que ceux ayant déjà un compte.

✅ Mais pour ceux qui ont le coup d’œil et de l’abnégation, ce n’est que le début de l’aventure !

Choisir un identifiant et donner son adresse mail

Agrandir

×

Se rendre sur sa boite mail et cliquer sur le lien d’activation

👉🏻 Mais, là, c’est plutôt normal pour sécuriser. Notre plug-in le fera aussi.

Choisir son mot de passe

👉🏻 Bon, là aussi, c’est normal.

🔒 Pour rappel, un bon mot de passe, c’est :

• minimum 12 caractères
• aA Un mélange majuscules / minuscules
• a1 Un mélange alphanumérique (lettres & nombres)
• #^ des caractères spéciaux

• Vous pouvez générer un mot de passe (merci le gestionnaire de mot de passe qui va proposer de le mémoriser, même si c’est moyen point de vue sécurité).
• Vous pouvez définir librement votre mot de passe, mais, là, évitez de reprendre toujours le même.

Agrandir

×

Agrandir

×

Le mot de passe “123Soleil!” est considéré par WordPress comme étant ❌”faible”

La plupart des scripts de craquage de mots de passe fonctionnent sur l’itération (ils testent tous les caractères les uns après les autres) Ca fait :

• 26 possibilités pour l’alpha
• 26 x 26 soit 676 si vous mélangez majuscules et minuscules
• dix fois plus si vous mixez avec des chiffres
• 1,7 million si vous mixez avec un caractère spécial

… et ce, pour chaque caractère !

👉🏻 Notons que c’est à peu près le nombre d’opérations qu’un 🖥️micro-processeur moyen peut traiter à la minute. Exponentiel 10 (pour mon nombre de caractères), cela lui prendra déjà un bon mois pour le trouver.

⚠️ C’est à cette étape de connexion que rien ne va plus ! C’est incompréhensible mais WordPress va vous envoyer vers le backoffice !

Agrandir

×

😗 C’est là que vous allez perdre les derniers de vos plus courageux visiteurs qui voulaient s’abonner !

2

Utiliser ©Ultimate Member

• les 4 pages de formulaires (sans “members” que je n’ai pas retenue)
• modifications / personnalisations de base

🔹2.1 | Installation et présentation des 4 pages support

• Extensions > Ajouter
• 🔎 Rechercher “Ultimate Members“
• ⬛ Installer Maintenant
• ⬛ Activer

➡️ Le plug-in Ultimate Member vous demandera d’installer 4 pages – ✅ Accepter. Il s’agit de :

• Compte (🌐 slug : /account/) pour la gestion des paramètres utilisateur.

• 🆔 Gestion des données personnelles :

Agrandir

×

• 🔐 modification du mot de passe

Agrandir

×

• 👀 Visibilité du profil et RGPD

Agrandir

×

👉🏻 C’est un super outil de Selfcare qui permettra à votre nouvel abonné de gérer son compte en toute autonomie. Elle contient en plus un paramètre de téléchargement des données (droit d’accès RGPD)

Agrandir

×

👈🏻 L’administrateur du site recevra une demande dans le backoffice et pourra générer le fichier à envoyer au demandeur.

ℹ️ C’est à la fois un gain de temps considérable et une conformité demandée par la réglementation sur la protection des données.

Agrandir

×

Le fichier est d’une extrême précision :

• Les sessions et leur durée

Agrandir

×

• les activités une par une

Agrandir

×

• les pages visitées, la durée de visite, les rebonds …

• Connexion (🌐 slug : /login/) pour l’identification.

Elle permet :

• De se connecter ou se déconnecter
• De maintenir l’état connecté (“se souvenir de moi”)
• De réinitialiser le mot de passe en cas d’oubli
• D’atteindre la page “mon compte” en état “déjà connecté”

👇🏻 Affichage si pas encore connecté

👇🏻 Affichage si déjà connecté

Utilisateur(🌐 slug : /user/) pour personnaliser son compte : profil, photo, revoir ses commentaires ou la liste des ses publications (si on a un profil autre qu’abonné pour cette dernière possibilité).

🗨️ Certains aimeront revoir leurs commentaires ou retrouver les réactions à ceux-ci

👉🏻 Pour ma part, j’ai désactivé l’image de fond qui était proposé par défaut (comme sur la plupart des réseaux sociaux) mais chacun fait comme il veut.

ℹ️ La possibilité de choisir une photo ou un avatar de profil plait beaucoup,ne l’enlevez pas. Elle permet aussi de rendre plus vivante votre section commentaires.

Agrandir

×

Inscription (🌐 slug : /register/) pour S’abonner

Et c’est là que nous voulions en venir!

🏴‍☠️ Il faudra d’urgence renommer le slug pour éviter les robots de hackers (un peu comme le wp-admin pour le répertoire du backoffice). Ne rendons pas la vie trop facile aux pirates.

👉🏻 Pour ma part, je n’ai pas activé la page des membres (une sorte de recueil de tous les abonnés) de peur que cela devienne un forum entre mes étudiants mais vous pouvez le faire pour créer du lien entre vos abonnés.

Pour ce blog, j’ai choisi de positionner deux liens dans le sidebar : “abonnez-vous” et “connexion” qui conduisent vers les pages Register et Login à partir desquelles il est possible d‘accéder à toutes les fonctionnalités. 👉🏻

Je reproduis aussi ces deux liens dans le footer en redondance.

🛑 La zone du footer est votre dernier espoir de provoquer un rebond interne. Par définition, le visiteur qui arrive là butte sur la bas de page écran.

➡️ Bien sur, les pages sont personnalisables et vous aurez aussi à modifier les contenus des mails qui sont tous en anglais.

🔹2.2 |Personnalisations de base

👉🏻 c’est dans réglages > Emails que cela se passe

• cliquez sur

Le panneau de contenu du mail s’ouvre (ici, l’email de bienvenue) 👇🏻

⚠️ Conservez les champs {intitulé} qui sont des champs personnalisés

➡️ Profitez en pour ajouter un footer RGPD :

3

Adaptation RGPD du formulaire

• ajout de l’opt-in (cas à cocher) au formulaire
• ajout d’un lien vers les CGU à la page

👉🏻 Pour être légal, il faudra ajouter l’opt-in des CGU sur le formulaire sous cette forme :

• Ultimate Member > Formulaire
• Modifier “Default Registration”

👉🏻 On va ajouter un champs sous le dernier (normalement, le mot de passe)

• Cliquer sur +
• choisir

• Titre (celui de votre contrôle) ➡️ qu’il soit parlant pour que vous puissiez le réutiliser facilement
• Texte d’aide (infobulle) apparaitra si l’utilisateur hésite à cliquer.
• Valeur par défaut (si plusieurs choix et 1 précoché) ➡️ ne nous concerne pas.
• Modifier les choix ➡️ liste de vos choix (ici, un seul)
• Icone (c’est juste décoratif)
• Champ obligatoire ➡️ cochez sans quoi le nouvel abonné pourra s’inscrire sans accepter les CGU
• Cliquer sur 🟦 “Mettre à jour“

Agrandir

×

➡️ Il faudra aussi ajouter un lien vers les cgu (pour pouvoir les lire avant de les accepter ou non)

• Pages > Inscription > Modifier
• Insérer un bloc texte
• Saisir “Voir les CGU (conditions générales d’utilisation)“
• Sélectionner “Voir les CGU”
• Ctrl + K (ou cliquer sur le chainon)
• Saisir l’URL des CGU
• Valider sur la flèche ↩
• Cliquer à nouveau sur le lien pour développer les options
• cocher “ouvrir dans un nouvel onglet”
• Cliquer sur 🟦Appliquer

⚠️ C’est important qu’il puisse lire les CGU dans un nouvel onglet afin de ne pas perdre son formulaire d’inscription.

👇🏻 Le résultat :

👉🏻 Vous pouvez tester tout cela sur le site en vous abonnant car c’est ce plug-in qui gère les comptes sur st9ph.fr.

WordPress | trucs et astuces pour embellir vos articles

15 décembre 2025 Aucun commentaire

WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️…

Lire la suite

WordPress | un article en partant de zéro ?

4 décembre 2025 Aucun commentaire

WordPress | un article en partant de 0️⃣? 👉🏻 C’est le pire scénario qui puisse…

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou…

Lire la suite

WordPress | Blocs Spectra remarquables

30 décembre 2024 Aucun commentaire

Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)….

Lire la suite

WordPress | Dompter Astra

29 décembre 2024 2 commentaires

Astra est un Theme Builder et c’est le thème imposé pour l’examen 🖥️ E5B de…

Lire la suite

WordPress | Fenêtres “surgissantes” de Spectra

26 décembre 2024 Aucun commentaire

WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)…

Lire la suite

St9ph

Webmaster

Je suis Formateur depuis 1997 et j’ai commencé ma carrière comme technicien en réseaux informatiques. J’ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d’Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d’Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !

L’article WordPress | Dépoussiérons la méthode d’abonnement est apparu en premier sur st9ph.fr.

Un petit tour d’horizon 🌤️ de petits tips, méthodes et outils que, je l’espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes – images..

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

1️⃣| les emoji pour renforcer votre texte

🖥️ La manipulation est simplissime sous Windows. Durant votre saisie dans une bloc paragraphe ou autre, à l’endroit ou vous voulez voir apparaitre le smiley :

• combinez les touches Windows et Point

• sélectionnez l’emoji souhaité (ou recherchez le dans la barre)

Le tour est joué ! 👌

Avec un Mac, je ne sais pas et je ne veux pas savoir. 😉

A l’examen, vous aurez un PC sous Windows, de toute manière. 😛

2️⃣| utilisez toutes les possibilités de vos blocs

👉 Les blocs n’exposent pas tous leurs atouts sur la barre d’outils, cliquez sur la Flèche ▽ pour les découvrir tous.

👈 ici, celle des paragraphes (mais tous ceux qui proposent de la saisie on la même).

Vous n’êtes pas obligé(e), par exemple, d’appliquer la couleur du paragraphe à tout le texte.

Google

Pour la construction ci-dessus, j’ai juste utilisé un bloc paragraphe que j’ai centré et demandé en taille L. J’ai ensuite changé la couleur de chaque lettre avec l’outil “mettre en évidence“, puis j’ai ajouté un screenshot directement dans le bloc avec l’outil “image en ligne“.

On verra plus loin comment faire une infographie avec le contrôle Numbers de Spectra mais il y’en a plein d’autres qui sont sous-utilisés.

👉 Vous pouvez aussi installer d’autres blocs par le biais d’extensions. Ici, le contrôle 🖼️ Image d’Ultimate Blocks qui permet d’encadrer, de rogner, de recolorier …

3️⃣| Illustrez facilement vos contenus

❌ L’usage des outils vu dans les deux premières sections de cette partie est proscrite (sauf consignes contraires dans le sujet).

3-1 | Instant Images, une bibliothèque libre de droits

Instant Images est une extension gratuite qui permet de téléverser directement des images des bibliothèques en ligne gratuites (libres de droit). Unsplash, Openverse, Pixabay, Pexels et Giphy.

C’est quoi une image libre de droits ❓

C’est une image dont l’auteur (photographe, designer, dessinateur … ) a abandonné les droits de propriétés, ce qui vous évite de demander une autorisation est de légender un © copyright (alt+ 0169)

Cette extension vous donnera un choix supplémentaire du menu Médias dans le tableau de Bord de votre Back Office.

• Cliquer dessus

• tapez un mot clé dans le moteur de recherche
• Choisissez votre source parmi Unsplash, Openverse, Pixabay, Pexels et Giphy.
• Cliquez sur l’image que vous préférez, elle sera directement téléversée dans la médiathèque

ℹ️ A noter que Giphy est plus une banque animées mais pourquoi pas !

3-2 | Utilisez l’IA pour générer des images

Google Gemini (par exemple) donne la possibilité de créer gratuitement des images pour illustrer vos articles. le nombre d’essais par jour est toutefois limité.

👉🏻 Le premier essai sera parfois différent de ce que vous imaginiez mais vous pouvez lui demander de corriger !

👈🏻 Ici, je trouve que la façon dont sont habillées les trois jeunes femmes sont trop semblables et que le fond fait trop “English College”.

Deux utilités si vous le faites :

• Gemini apprend vos gouts et oriente son travail sur ce qui vous satisfait (machine learning)
• Ca vous donne des tentatives journalières supplémentaires si vous êtes poli(e).

3-3 | Utilisez des contrôles dynamiques pour vos media

Voici un aperçu de trois contrôles qui permettent d’aménager un contenu riche en illustrations afin de ne pas saturer l’espace de votre article (et créer un déséquilibre)

J’ai utilisé les illustrations de cet article du blog d’entrainement en exemple.

• La Story
• Le Diaporama
• La Galerie

Dans la section Media, vous trouverez le bloc story, qui permet d’ouvrir automatiquement un onglet Story pour jouer une histoire à partir d’images et de vidéos (que vous pouvez mixer) depuis votre médiathèque. cliquez sur la Story ci-dessous pour la jouer.

WordPress | trucs et astuces pour embellir vos articles

Idem pour le diaporama avec un réglage diapositives ou fondu au choix. Là, c’est uniquement pour des images.

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Enfin, la galerie, qui permet de mettre en valeur certaines images par rapport à d’autres

4️⃣| L’infographie plutôt que des mots

J’en ai déjà parlé ici mais j’insiste. Des visuels de style “tableau de bord” avec des KPI appropriés vaudront tous les discours.

Prenons l’exemple du paragraphe ci-dessous :

Le référencement auprès de Google est une évidence. 94% des internautes effectuent leurs recherches avec ce seul moteur ! 42% ne dépasse jamais la première page de résultats (SERP) et ils sont 15 % à atteindre la page 3 ! Quand on sait que la mesure Google Lighthouse des boutiques en ligne donne un score moyen SEO de 65 / 100, il y’a encore pas mal de boulot pour les webmasters afin de les rendre visibles !

On peut dire exactement la même chose ainsi :

4️⃣| Un soupçon de HTML

👉🏻 Je sais ce que vous allez me dire : “On est pas développeur, nous !” et vous aurez raison, mais j’ai pas mal simplifié les choses pour vous.

4-1 | Utiliser des blocs HTML personnalisés

➡️ On avait déjà vu dans un autre article comment faire des textes défilants un intégrant un texte sous la forme ci-dessous à l’intérieur d’un 🔹bloc HTML Personnalisé.

<marquee> ✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨ </marquee>

Ca donnait ça 👇🏻 :

👆🏻 C’est cette méthode que j’utilise pour mes petits blocs comme celui ci-dessus. Je voulais un peu le style des blocs citations mais avec un fond coloré.

➡️ Il m’a fallu 2 choses :

• un composant que je balise en <div class=“nom du composant“> contenu (notre texte) </div>
• une “feuille de style” où je définis mes attributs de “décoration”

👉🏻 Il y’a un peu de travail pour trouver le bon dosage :

➡️ il me faut pas mal d’attributs aussi :

• La bordure gauche
  • sa taille (Size) en pixels (px)
  • sa courbure (radius)
• le fond
  • sa couleur (background) en héxadécimal
  • sa marge (margin)
  • son remplissage (taux en px)
• la police
  • sa taille (font-size)
  • son type (font-family)
  • sa couleur

Vous pouvez trouver le code hexa de couleur avec la palette des blocs texte ou titre :

👈🏻 basculez de “HTML” à “Prévisualiser” chaque fois pour voir le résultat en “live”

➡️ Vous pouvez aussi mettre en forme votre contenu (dans la balise div) :

🔵 Mettre en gras (balise strong)

<strong> le texte en gras </strong>

🔵 Mettre en italique (balise em)

<em> le texte en italique </em>

🔵 Souligner (balise u)

<u> le texte souligné </u>

🔵 Mettre en couleur (balise span en attribut color)

<span style=”color:blue;”> Texte en bleu </span>

👆🏻 Téléchargez le fichier ci-dessus que vous aurez juste à copier coller (après l’avoir ouvert) dans un bloc HTML personnalisé si vous souhaitez reproduire le composant juste au dessus.

4-2 | Les enregistrer sous forme de compositions

👉🏻 Vu le travail que cela a demandé, on ne va pas recommencer à chaque fois. Il suffit de créer une composition avec le bloc html que vous avez créé pour qu’il soit disponible ensuite, comme n’importe quel autre bloc, comme un modèle, en fait.

• cliquer sur le menu hamburger 🍔 (les 3 points tout au bout) de la barre flottante de votre bloc

• Choisir Créer une composition

• Saisissez le nom que vous souhaitez pour le modèle de bloc
• Cliquez sur catégories
• Classez votre composition dans la catégorie que vous souhaitez

➡️ un conseil : Faites-le ! Sinon, ça va vite devenir un problème pour le retrouver si vous en créez beaucoup

• Cliquer sur 🟦 Ajouter

👉🏻 Votre composition vous attend sagement dans le liste des blocs Gutenberg !

• Cliquer sur le de la barre d’éditeur ou de votre nouveau bloc
• Tapez les premières lettres de votre contrôle
• Cliquez dessus pour le choisir

⚠️ Attention : pour l’instant, il est inerte car il faut le détacher du modèle pour pouvoir le modifier.

• Cliquer sur le menu hamburger 🍔
• Choisir “Détacher” (du modèle)

👉🏻 Votre bloc est redevenu un HTML personnalisé indépendant que vous pouvez modifier librement sans affecter votre composition enregistrée 💾

👈🏻 Vous pouvez retrouver aussi vos compositions dans l’onglet “compositions” de l’éditeur de blocs.

👉🏻 Vous pouvez aussi modifier l’original soit :

• en cliquant sur “modifier l’original” de la barre flottante du bloc
• Dans Apparence > Design

➡️ Pour résumer :

• si vous utilisez les compositions sous forme de matrice (modèle à modifier)
  • insérez la composition et détachez la
  • Modifiez ensuite cette composition librement (elle est redevenue un bloc normal)
• Si vous utilisez les compositions sous forme de bloc invariable
  • insérez la composition sans la détacher
  • Si vous devez faire évoluer la composition, cliquez sur “modifier l’orignal” (elle sera modifée partout où elle apparait

📚 Voyez aussi un tour d’horizon complet des contrôles Spectra dans cet article, Gardez en tête l’HABI et proposez les outils et méthodes suggérées dans cet autre article, et vous deviendrez rapidement un auteur WordPress qui aura une foule d’abonnés ! 😉

📚 Sources

• 🔌 – Ultimate Blocks – Extension utilisée pour les images (arrondis, rognage …)
• 🔌 – InstantImages – Extension utilisée pour la bibliothèque d’images supplémentaire (Unsplash, Pixabay …)
• 🔊 Voicertool – introduction parlée
• 🌐 Nano Banana Pro de Google Gemini – génération d’image par IA

🧑‍🎓 NDRC

🟦 Cet article est à visée de l’épreuve technique E5B.

• savoir mettre en forme un article ou une page
• savoir utiliser les blocs Spectra

👉 les générations IA, Instant Image, Ultimate Blocks et le codage HTML sont hors programme

📘 Glossaire

• Infographie : dire par par des schémas, des KPI, des images, des icones avec peu de commentaires
• SERP : Search Engine Result (ou Response) Page
• Lighthouse : outil d’audit de site de Google Chrome
• Marquee : balise HTML de texte défilant
• Menu Hamburger : menu symbolisé par des points ou des traits verticaux (très utilisé en UX Mobile)

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que...

Lire la suite

WordPress | un article en partant de zéro ?

4 décembre 2025 Aucun commentaire

WordPress | un article en partant de 0️⃣? 👉🏻 C’est le pire scénario qui puisse...

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou...

Lire la suite

WordPress | Blocs Spectra remarquables

30 décembre 2024 Aucun commentaire

Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)....

Lire la suite

WordPress | Dompter Astra

29 décembre 2024 2 commentaires

Astra est un Theme Builder et c’est le thème imposé pour l’examen 🖥️ E5B de...

Lire la suite

WordPress | Fenêtres “surgissantes” de Spectra

26 décembre 2024 Aucun commentaire

WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)...

Lire la suite

L’article WordPress | trucs et astuces pour embellir vos articles est apparu en premier sur st9ph.fr.

👉🏻 C’est le pire scénario qui puisse se présenter sur votre sujet NDRC E5B de l’épreuve technique mais cela arrive. A partir d’annexes incomplètes ou, même, en partant de zéro, concevoir un article en un quart d’heure chrono qui respecte toutes les règles du genre !

Voyons, en détail, comment éviter la Bérézina !

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

voyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie

👉🏻 En complément de cet article, gardez en tête la méthode HABI (voir l’article) pour une structure SEO optimisée et le complément Yoast (voir la présentation sur ce blog)

1️⃣| Mettez vous à la place de vos lecteurs

1-1 | 🎯 Ne ratez pas votre cible !

Votre empathie naturelle vous aidera à vous mettre dans la peau de votre 🧑🏻 Persona afin de lui proposer un contenu qui l’intéresse, dans un 🪶phrasé qu’il apprécie, qui ℹ️ l’informe et le rend 🤔curieux de votre sujet. Il doit être varié et interactif, proposer du rebond à l’intérieur et à l’extérieur de votre blog.

Gardez une ligne éditoriale et une forme de communication (charte graphique) stable afin de ne pas décontenancer vos habitués.

✅ Gardez une ligne éditoriale et une forme de communication stable (charte graphique) stable afin de ne pas décontenancer vos habitués.

C’est quoi 🧑🏻 le Persona ?

C’est un personnage fictif qui a toutes les caractéristiques de votre cible et que vous personnalisez pour penser à lui et lui adresser votre contenu de la manière la plus adaptée. Tapez “persona” dans le moteur, il y’a un article à ce sujet/

👆🏻 Ci-Dessus, un exemple d’interactivité. Une définition qu’on obtient en cliquant sur la question. Dans la réponse, un moyen pour prolonger le sujet annexe.

1-2 | Focus sur la charte éditoriale

Prenons l’exemple de mon blog, sans avoir besoin de le légender, chacun qui à l’habitude de venir ici sait que :

• les sous parties principales sont titrées en Bleu 1️⃣| partie un
• une annonce du plan figure sous l’introduction 🔻
• Les paragraphes sur fond gris sont des commentaires 👉🏻 (instructifs, je l’espère)
• Les expressions principales des paragraphes sont en gras afin de faciliter une lecture rapide 👀.
• Les manipulations dans les tutos sont sous forme de liste à puces ↹
• les éléments précédés d’un triangle sont des définitions qu’on peut développer en cliquant dessus
• On peut liker 👍🏻 et commenter 💬 chaque article en bas (même si personne ne le fait)
• Une liste d’articles sur la même thématique est toujours présente tout en bas ⬇️.

👉🏻 Définissez une charte et respectez la sans quoi vous allez désorienter vos lecteurs. Remarquez qu’hormis les titres et les commentaires, tous les éléments listés ci-dessus sont interactifs.

La charte épaule votre ligne éditoriale (thèmes, ton, limite, registre) que vous devez affirmer dans la présentation de votre blog (voir la mienne)

💡 faites la partager à vos auteurs, abonnés et contributeurs qui conçoivent du contenu pour vous.

2️⃣| Proposez un titre accrocheur

➡️ Elément fondamental de votre article, le titre est le seul élément avec votre méta description qu’un internaute verra dans une SERP ou un flux RSS.

Comme toujours, tout reposera sur les 4 piliers habituels du CTA (appel au clic).

2-1 | 🤔 La curiosité

Il s’agit de lui donner envie d’en savoir plus. Prenons l’exemple du vététiste qui illustrait la partie précédente :

• Les 7 Réglages Essentiels Pour Rouler en VTT Sans Douleur
• Un jeune vététiste fait le buzz sur Tik-Tok !
• 3 Erreurs basiques à Éviter Absolument Quand On Débute en VTT

👉🏻 Remarquez qu’on fait souvent appel aux chiffres, aux morts forts, qu’on laisse le suspens entier !

2-2 | 🪙l’appât du gain

➡️ Sans doute le CTA le plus utilisé en marketing, Il fonctionne depuis toujours et pour toujours. Qui ne veut pas d’un bon plan pour économiser son argent, son temps ou ses efforts ?

• 5 modèles de VTT électriques à moins de 1000 €
• Nos conseils pour bien entretenir votre VTT
• S’équiper sans se ruiner pour le vélo tous terrains

📈 Selon Reuters, les plateformes en ligne (blogs, webzines …) concentrent 72 % des “usages d’information” grand public (B2C) en 2024. C’est souvent par votre communication non commerciale que vous accrocherez en premier vos lead ! Voir l’article sur MediaCulture

2-3 | ☝🏻La personnalisation

➡️ C’est l’art de faire comprendre à votre lecteur que cet article est fait particulièrement pour lui, qu’il traite de ses gouts, de son territoire, de ses hobbies, bref, de toutes choses qui le concernent.

• Le 3 meilleurs circuits de VTT dans le Bessin normand
• Le Fat Bike est-il fait pour vous ?
• Reprendre le VTT après 50 ans ? Est-ce une bonne idée ?

👉🏻 Les exemples ci-dessus en appellent à la proximité géographique, à un choix de personnalité et à un segment ciblé par sa génération.

2-4 | 😨 La peur de manquer (FOMO)

➡️ Très utilisée dans le commerce, cette technique peut aussi fonctionner dans le blog, avec modération.

Les trois titres ci-dessous jouent essentiellement sur la peur d’un changement.

• Equipez votre VTT d’un traceur GPS avant que votre assureur ne vous l’impose.
• Ce qui pourrait changer dans votre pratique du VTT si la loi sur les chemins de Grande Randonnée est votée
• Il ne sera bientôt plus possible d’acheter cette marque de VTT en France !

3️⃣| Une bonne introduction pour assoir vos lecteurs

✨ Ca y’est !Ils ont cliqué pour voir ! A vous maintenant de les rassurer qu’ils ont fait le bon choix !

➡️ Annoncez cette fois clairement

• de quoi vous allez traiter,
• posez votre plan sommairement.
• Ne dites pas tout dans l’introduction non plus, sinon la suite ne sert plus à rien.

3-1 | Répéter n’est pas jouer

➡️ Une technique que j’apprécie personnellement beaucoup mais que je n’utilise plus est celle de l’extrait, comme dans l’aperçu ci-dessous :

👉🏻 Le fait de reprendre un élément clé de ce que le lecteur s’apprête à découvrir (ici, les premières phrases) peut le rendre curieux et l’inciter à poursuivre quand le contenu entier lui semble un peu long.

ℹ️ Les journalistes utilisent beaucoup cette technique dans les interviews de la presse écrite afin de mettre en valeur un élément clé de la réponse (un trait d’humour, une annonce particulière …)

3-2 | Illustrer, c’est reposer et orienter

➡️ une petite illustration pour mettre dans l’ambiance ne gâtera rien si vous y pensez.

👉🏻 Les deux images ci dessus, toutes deux générées par l’IA, donnent un message différent tout en illustrant toutes les deux la même présentation d’une activité commerciale.

• La première focalise l’attention des visiteurs sur la présentatrice
• la seconde les concentre sur les plaquettes commerciales.

🖼️ L’image est non seulement récréative pour l’œil mais elle fait appel à l’interprétation individuelle. L’IA permet maintenant de créer avec précision l’univers visuel et l’ambiance que vous souhaitez diffuser.

4️⃣| Un contenu varié et interactif

➡️ Vos parties (deux H2 minimum) doivent être :

• équilibrées en longueur
• alterner les blocs
• proposer un maximum d’interaction et de rebond.

Je vous renvois au “A” de la méthode HABI dans cet article pour les règles de base.

• Tout ce qui pourra appuyer ou remplacer un propos écrit sera le bienvenu, sauf si vous écrivez dans un blog pour les passionnés de lecture, bien évidemment.
• Faites court, utilisez ma méthode de lecture rapide en mettant en gras les mots importants.
• Orientez par des expressions de liaison (“dans le même temps”, “a contrario”, “la seconde étape consiste à …”, “Pour résumer …”
• Introduisez vos divisions par des courtes phrases d’introduction et terminez lès en rappelant brièvement votre idée principale.
• Relisez vous-même à haute voix vos paragraphes. Vous pourrez mieux vous rendre compte quand ils sont trop longs et / ou difficiles à comprendre.

👉🏻 Yoast, dans, son onglet de lisibilité vous conseille à ce sujet :

4-1 | 🎧 Le podcast pour les mobinautes qui ont “la tête ailleurs”

Certains vous suivrons dans les transports en commun ou en faisant autre chose en même temps et apprécieront aussi que vous leurs proposiez du contenu 100% audio.

🌐 Des SaaS de Text-to-Speech (convertisseurs de texte en parole) sont disponibles en ligne. Certains dans leurs versions gratuites sont suffisantes pour débuter.

➡️ Le lecteur ci-dessus permet de lire l’introduction qui le précède. Il a été généré par Voicertool qui ne demande pas d’inscription et qui est gratuit. Un mp3 généré est téléchargeable gratuitement. Il vous suffit de le téléverser via le bloc “audio” de la section “Media“.

👉🏻 Vous pouvez aussi tout simplement utiliser le magnéto de Windows ou de votre smartphone pour enregistrer votre texte en le lisant.

4-2 | 📽️ De la vidéo pour rendre vivant votre contenu

➡️ Qu’il s’agisse de vidéos Youtube que vous allez sélectionner (ou pourquoi pas créer vous-même)pour illustrer votre propos, de schémas pour indiquer pas-à-pas un processus ou de captures d’écran vidéo pour un tuto logiciel, les outils de génération de contenus animées ne manquent pas.

🟦 Un lecteur vidéo

Une recherche google dans la section vidéo vous donnera en général une liste pléthorique d’illustrations de vos propos.

• Copiez en clic droit l’url de la vidéo que vous collerez dans un bloc vidéo de la section Media

💡 N’oubliez pas d’annoncer ce contenu par un paragraphe du style “ci-dessous, une vidéo d’Untel illustrant …”

🟦 Une animation Mpeg4

➡️ Un schéma animé peut être généré avec un logiciel de PréAO. Powerpoint, par exemple, fait cela très bien.

Adaptez la taille des diapositives pour que la vidéo que vous allez générer ne soit pas trop grosse.

👉🏻 Une vignette de 10 x 5 cm est largement suffisante pour un deskstop et le zoom arrière que proposera le Frendly Mobile ne sera pas trop violent pour visionner l’animation depuis un smartphone.

👇🏻 Dans la vidéo ci-dessous, un simple fond de carte et un icone de vélo que j’anime avec l’option “parcours personnalisé” du Ruban Animations afin d’indiquer le parcours à suivre sur une carte IGN.

• Il suffit d’enregistrer le diaporama en changeant le type de document de présentation PowerPoint -> vidéo mpeg4

🎧 Vous pouvez bien entendu utiliser touts les options de narration, d’effets audio et d’animations que vous souhaitez.

🟦 Un Screenshot vidéo

➡️ Enfin, pour montrer une manipulation ou une observation sur l’écran, utilisez l’outil de capture d’écran de votre PC qui ne fait pas que des Screenshot, vous pouvez aussi lui demander d’enregistrer de la vidéo d’une zone de votre écran (depuis Windows 11).

Dans cet article, par exemple, j’utilise un screenshot vidéo de la zone de chatbot de la boutique pédagogique pour en faire une démo.

👉🏻 Attention toutefois à faire des éléments courts et qui ne se substituent pas à ce que vous exposez à l’écrit.

• La complémentarité doit venir à la fois de l’alternance des formats et des contenus.
• Evitez l’effet hypnotique qui va détourner vos lecteurs de votre sujet.

⚠️ Les personnages ci-dessous sont fictifs, Fort heureusement ! Toute ressemblance avec mes étudiants serait une pure coïncidence 😜

4-3 | Utilisez les blocs interactifs

Ne parlons pas des blocs Spectra déjà mis en avant dans cet article (Google Maps, Post timeline ou grid, Compte-à-rebours, FAQ …) et concentrons nous sur les autres :

🟦 Le contrôle tabulaire à onglets (Spectra – tab)

➡️ C’est un moyen à la fois de permettre au lecteur de dérouler à son rythme un contenu (comme le contrôle FAQ) et de gagner de l’espace. C’est un moyen idéal de proposer un choix, aussi, pour des contenus optionnels que le lecteur ne souhaite peut-être pas tous parcourir.

• Franchissement
• Wheeling
• dérapage

🟦 Le partage sur les réseaux (Spectra- Social Share)

➡️ Si votre contenu a coutume d’être très populaire, tentez ce contrôle qui permettra à vos lecteurs de mettre en avant vos articles en les partageant sur leurs réseaux sociaux en deux clics.

🟦 Le comparateur d’image (JetPack)

Le JetPack est un Plug-In installé sur la plupart des CMS WordPress par défaut mais si ce n’est pas le cas, vous pouvez le faire gratuitement depuis la section extensions. Il fournit un certain nombre de blocs pour vos compositions dont celui-ci.

👉🏻 Le comparateur d’image est un moyen de juger de deux visuels différents afin de faire un choix (ici couleurs ou Noir et Blanc). Ca peut être aussi une maquette pour un projet d’aménagement (d’un espace vert, par exemple) avec des options différentes.

🟦 Sondez vos lecteurs

➡️ Il existe beaucoup d’extensions téléchargeables gratuitement qui permettent d‘effectuer des sondages.

👉🏻 Ci-dessous, un exemple avec Poll Maker.

• Vous pouvez voter pour alimenter le compteur si vous voulez. Cela vous permettra de consulter l’état des suffrages.

💡 Ca peut être un moyen idéal pour orienter vos travaux en fonction de leurs souhaits et de satisfaire au mieux leurs attentes.

👉🏻 L’objectif est de demander l’avis de vos lecteurs (donner leurs un contrôle commentaire pour permettre le débat).

🟦 Le commentaire

➡️La liste est longue des contrôles interactifs que vous pouvez proposer mais, pour terminer, le moins incontournable reste, bien évidemment, celui de laisser des commentaires. A condition :

• de les lire régulièrement
• d’y répondre rapidement si besoin
• d’en tenir compte s‘ils sont récurrents et concernent ce que vos lecteurs attendent de votre blog

4-4 | Eveiller est mieux qu’affirmer

🟦 Infographier plutôt que dire

➡️ Ci-dessous le contrôle Counter de Spectra :

👉🏻 Ce contrôle hyper personnalisable est excellent pour afficher des éléments d’infographie, qui, en peu de mots, donne les informations clés. Le fait de pouvoir l’animer va, en plus, porter l’attention sur lui. C’est un contrôle idéal pou rmettre en avant vos KPI.

🟦 Elargissez votre point de vue avec des apports extérieurs

👉🏻 Citez des personnalités Adhoc, interviewez des influenceurs, donnez des liens externes pour prolonger la découverte de votre sujet. Ne restez pas enfermé sur votre seule réflexion !

• Le bloc “Citations” permettra d’introduire ou d’illustrer votre propos :

“Oui, les circuits contiennent de plus en plus de passages techniques, […]. Je pense que c’est pour rendre la discipline plus spectaculaire. J’aime beaucoup les circuits techniques où il y’a de la pente. Les circuits de Coupe du Monde [ndla : de VTT] sont tellement beaux, il y en a pour tous les goûts.“

Interview d’Antoine Philipp sur le blog velo101 du 19 mars 2019 – voir l’article complet –

Pensez à mettre entre guillemets vos citations pour signalez que vous citez quelqu’un d’autre. Nommez le. Datez le propos et maillez vers la source si c’est possible. […] Indique que vous avez coupé un morceau de la citation (c’est obligatoire de le signaler). Vous pouvez également apportez une précision sous la forme [ndla : …] pour Note de l’Auteur. Ex : [ndla : “Lui” comprendre “mon sponsor”]

• les Flux RSS permettent d’ouvrir à l’actualité récente sur votre thème d’écriture

• Marquer l'histoire avant et sans Pogacar
  7 mai 2026
  Jonas Vingegaard va tenter, ces prochaines semaines sur les routes du Tour d’Italie, de devenir le 8e coureur à remporter les trois Grands Tours de trois semaines.
• Peut-être forfait pour le Giro à cause des beuses
  6 mai 2026
  Plusieurs coureurs de l'équipe Lotto-Intermarché n'ont pas pu participer à la présentation du parcours du Giro 2026, ce mercredi en Bulgarie. Ils sont malades.
• Émotion garantie: la belle annonce de Seixas à ses grands-parents
  5 mai 2026
  Le prodige français du cyclisme sera au départ de la Grande Boucle en juillet. Il a fait cette révélation à sa famille devant les caméras, pour un moment touchant.

Voir aussi l’article complet sur les flux RSS

🧑🏻‍🎓 | Conclusion, vers l’épreuve E5B

Ce tour d’horizon d’outils et de méthodes non exhaustifs, vous aura, je l’espère, donné des idées et des directions pour la conception de vos articles.

👉🏻 Votre blog doit rester aussi un prolongement de votre style et de votre personnalité. C’est ce qui le rendra différent des autres, comme vous l’êtes vous-même.

🖥️ Durant l’épreuve technique, vous ne pourrez bien sur pas installer de plug-in et le choix d’outils se limitera à ceux de Spectra et du modèle Gutenberg générique. Les autres outils et méthodes de cette article sont pour votre conception personnelle. N’oubliez pas :

• les annexes de votre sujet qui sont données pour alimenter votre production
• les blocs déjà intégrés dans les articles ou pages qu’on vous demande d’améliorer sont souvent à transformer (citations, FAQ, listes, données de tableaux … fournies sous formes de paragraphes simples)
• La médiathèque contient certainement des ressources en rapport avec votre sujet. Ca vaut le coup d’y jeter un œil pour voir ce que vous pouvez utiliser dedans.

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que…

Lire la suite

WordPress | trucs et astuces pour embellir vos articles

15 décembre 2025 Aucun commentaire

WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️…

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou…

Lire la suite

WordPress | Blocs Spectra remarquables

30 décembre 2024 Aucun commentaire

Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)….

Lire la suite

WordPress | Dompter Astra

29 décembre 2024 2 commentaires

Astra est un Theme Builder et c’est le thème imposé pour l’examen 🖥️ E5B de…

Lire la suite

WordPress | Fenêtres “surgissantes” de Spectra

26 décembre 2024 Aucun commentaire

WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)…

Lire la suite

L’article WordPress | un article en partant de zéro ? est apparu en premier sur st9ph.fr.

Durant l’épreuve E5B, vous serez amenez à concevoir ou mettre en forme un article ou une page puis à le référencer en utilisant Yoast SEO. Ces deux parties représentent les 2 tiers de l’examen soit approximativement 26 minutes de votre épreuve.

Voyons comment organiser ces deux taches de manière synchronisée.

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

Le grille d’évaluation de la conception de votre article comporte 4 points de vigilance clés qui sont :

• H pour la Hiérarchie des titres. Vos titres doivent respecter une structure comportant au moins deux sous-parties précédées par une introduction
• A pour l’Alternance des Blocs. Votre contenu doit être varié (si possible interactif) et ne pas comporter plus de 3 paragraphes consécutifs.
• B pour le Balisage ALT (Vos images doivent être référencées elles aussi)
• I pour Impasse à éviter. Votre contenu doit se terminer par un rebond interne pour éviter de perdre vos visiteurs en fin de lecture.

ℹ️ Vous ne trouverez cette méthode nulle part ailleurs car je l’ai inventée ! Je me suis basé sur les piliers du référencement rapide d’un article et sur la grille d’évaluation de l’épreuve E5B. Elle permet de réaliser la conformité d’au moins 60 % du SEO demandé si vous la respectez.

La structure en Header doit comporter au moins deux sous-parties.

Certains types de documents en comporteront naturellement plus. Ex : un menu -> Entrée, Plat, déssert

Si vous Passez en niveau H3 à l’intérieur d’un H2, il vous faudra également au moins deux H3 pour respecter la structure avant de remettre un H2.

Les exemples ci-dessous vous indiquent des exemples de bonnes et mauvaises structures.

• La première arborescence serait correcte sans le H3 unique de la 1ère sous partie. Il en faudrait un second si on en insère un 1er.
• La seconde ne propose pas d’introduction.
• Les 3èmes et 4ème sont correctes avec une introduction et au moins deux sous parties.
• La 5ème est correcte car elle propose une introduction, deux sous-parties et un troisième niveau dans sa seconde sous-partie elle-même divisée (au moins) en deux sous-parties H3

ℹ️ Lors du référencement automatique par le passage d’un Bot scrawleur sur votre site, le script recherche vos balises Header et s’attend à en trouver au moins deux à chaque niveau. Si ce n’est pas le cas, il identifie une erreur qui l’empêche de recenser votre contenu et il repart sans l’inscrire. ⚠️ Vous ne serez donc jamais référencé !

Le principe est assez simple :
“Si vous commencez à découper une pomme, vous obtiendrez au moins deux morceaux !“

Référencement synchronisé :

• Votre Titre H1 copié en expression clé
• Collé dans votre introduction
• Collé dans la moitié des vos titres H2
• Une introduction simplifiée qui servira de base pour votre méta description

Audit onglet SEO :

• Expression clé dans votre titre et sous titres (H2, H3) : Votre expression clé figure suffisamment dans vos titres.
• Expression clé dans l’introduction : Votre expression clé est présente dans votre introduction
• Expression clé dans votre méta description : Bon travail !

• Vous pouvez vérifier facilement la structure de votre site en cliquant sur ⬛ le bouton escalier de l’éditeur
• Onglet Structure (voir l’aperçu ci-contre)

👆🏻 Si vous voyez le schéma ci-dessus, c’est que vous ne disposez d’aucun Header !

➡️ Voir aussi les techniques pour rédiger un titre accrocheur dans cet autre article.

👉 L’objectif est de proposer un contenu varié, si possible interactif, qui maintienne l’attention de votre lecteur.

👈 Dans la barre supérieure, à droite, vous pouvez visualiser un aperçu de votre contenu en mode smartphone (mobile).

L’objectif est de faire défiler votre contenu sans qu’à aucun moment, vous ne soyez en présence de paragraphes seuls (ennuyeux à la longue et qui risquent donc de provoquer un rebond).

ℹ️ 6 visiteurs sur 10 vous liront sur un écran de moins de 7 pouces.

Cela équivaut au maximum à 3 paragraphes de 4 lignes maximum. Au delà, votre alternance est insuffisante.

• Alternez avec les images d’illustration fournies, les widget Vidéo ou podcast dont on vous donne le lien url (toujours en les faisant précéder d’une zone de texte : “voici une vidéo sur le sujet …”
• Ajoutez une trame fond à certains d’entre eux qui semblent être une synthèse ou un point de vigilance
• Transformez certains paragraphes qui seraient mieux mis en valeur en types de blocs différents (les citations, les listes, les tableaux …) comme dans l’exemple ci-dessous 👇🏻

Illustration “Muppet’s Show” ©BBC

Pour faire une sauce béchamel, il vous faudra 30 g de farine 30 g de beurre, 40 cl de lait, 1 pincée de muscade, du sel et du poivre.

Pour faire une sauce béchamel, il vous faudra :

• 30 g de farine
• 30 g de beurre
• 40 cl de lait
• 1 pincée de muscade
• du sel et du poivre.

• Transformez en FAQ Spectra les paragraphes qui semblent être un jeu de questions / réponses
• faites un compte à rebours quand vous lisez une information qui indique une échéance (ex : “Vous avez jusqu’à la fin du mois pour en profiter !”)
• Une signature de l’auteur, voire sa présentation dans l’introduction, même présentée sous forme de paragraphe, mérite un bloc Team de Spectra.

ℹ️ Pour rappel, vous êtes autorisé(e) à modifier le contenu des articles et pages qu’on vous demande de manipuler à l’examen à condition d’en conserver le sens et l’intégralité du message, sans l’interpréter ou le compléter par d’autres considérations personnelles.

Référencement synchronisé :

• Votre expression clé collée 2 ou 3 fois dans vos paragraphes
• Repérez un nom de site, de marque, de personnage célèbre afin de faire un lien externe, une URL déjà présente afin de la transformer en lien hypertexte

Audit Onglet SEO :

• Expression clé dans votre contenu : Votre expression clé est présente x fois dans le texte de votre article : bon travail !
• Liens externes : Parfait !

➡️ Voyons ce dernier point en détail :

Dans l’exemple ci-dessous, on va créer un lien vers la page Wikipédia de Steve Job, ce qui activera le flag “liens externes” en vert

• Selectionner le texte à cliquer (futur lien hypertexte)
• Cliquer sur le chainon pour indiquer l’URL

• Saisir l’URL cible
• Valider
• Selectionner à nouveau le lien hypertexte

• Cliquer sur modifier le lien 🖍️
• ✅ cocher “Ouvrir dans un nouvel onglet“
• 🟦 Enregistrer

👉 rappel, un lien externe s’ouvre toujours dans un nouvel onglet, sinon la nouvelle page va remplacer la page actuelle et vous allez perdre votre lecteur. En revanche, un maillage interne se fait toujours dans le même onglet (à la place de la page précédente). Vous allez énerver 😡votre lecteur s’il doit fermer un onglet à chaque page qu’il a consulté chez vous.

💡Petites astuces :

⚠️Pour rappel, vous n’aurez pas le droit de vérifier votre lien 🖥️ lors de l’examen. Ce qui compte, c’est qu’il soit correct au niveau de la structure et cohérent afin d’activer le flag vert pour “liens externes“.

Voir aussi comment créer un contenu varié et interactif

👉🏻 Le référencement de vos images ne peut se faire que si votre balise alternative (Alt) notée parfois “texte de remplacement” ou “texte alternatif” est renseignée avec des mots clés.

♿ La balise Alt a aussi un rôle pour les internautes mal voyants qui utilisent des polices agrandies et qui configurent leur navigateur afin qu’ils n’affichent pas les images mais leur texte de remplacement (plus facile à scroller).

➡️ Vous devez donc aussi la renseigner de manière descriptive (afin qu’elle puisse être lue par la synthèse vocale)🔈.

👉🏻 Une bonne balise Alt est donc idéalement : votre expression clé + le nom de votre blog + une description de l’image contenant des mots clés de vos étiquettes.

Dans l’exemple ci-contre, l‘expression clé “Biographie de Steve Jobs” est devant la mention du blog, suivi de mots clés inclus dans une description fidèle à l’image.

🔹 D’autres exemples :

TEXTE ALTERNATIF

Image d’un pack de bouteilles d’eau de la marque st9ph dans l’article “OP Com dans la Eshop” du blog St9ph

TEXTE ALTERNATIF

Image d’un personnage 3D féminin au téléphone, agacée d’attendre sur le SVI, dans l’article “La Satisfaction client” du blog Steph

🤨 C’est quoi une “étiquette” ?

La zone d’étiquette est l’endroit du bandeau paramètres – onglet article où vous allez saisir vos mots clés.

Référencement synchronisé :

• Votre expression clé dans toutes vos balises Alt

Audit en onglet SEO :

• Expression clé dans les images : Bon travail !

Un visiteur qui aura fini de lire votre article ne retournera pas forcément dans votre header pour retrouver votre menu de navigation. Il a besoin d’un CTA à la fin de votre contenu pour continuer à rebondir en interne sans quoi il va fermer l’onglet pour trouver d’autres lectures ailleurs.

La solution la plus simple et rapide est de lui proposer un lien hypertexte pour revenir à l’accueil.

Quel que soit l’URL du site d’examen, la page d’accueil sera toujours la partie précédent le /wp-admin

• copier l’url dans la barre d’adresse jusqu’à .fr
• Insérez un bloc texte en toute fin d’article
• Saisissez “Revenir à l’accueil ” puis sélectionner tout le texte
• Cliquez sur le chainon de la barre d’outils contextuelle
• coller l’url
• Valider par la flèche

Référencement synchronisé :

• votre lien de rebond interne active automatiquement le flag vert pour “maillage interne”, vous n’avez rien à faire.

Audit Onglet SEO :

• Maillage interne : Parfait !

URL, domaine, slug, pour rappel …

➡️L’URL (Uniform Ressource Locator) est l’adresse complète du lien qui commence par https:// (hypertexte transfert protocole securised), ➡️ le domaine est ce qui suit jusque au .fr, .org, .com ou autre (ici : st9ph.fr) Tout ce qui vient après est ➡️ le slug est un suffixe variable d’une page à l’autre à l’intérieur du même site. (ici : “/wordpress-methode-habi-et-yoast-seo-synchronises/”)

⚠️Attention ! D’autres méthodes comme l’ajout d’un bloc “derniers articles” ou “Catégories“ afin de proposer une navigation de pied de page ne sera pas identifié comme un maillage interne par Yoast SEO.

🤨 Idem, le bloc Spectra “Post grid“ que j’intègre en bas de chacun de mes articles sur ce blog n’est pas repéré par Yoast, d’où mon conseil ✅ du lien hypertexte de retour à l’accueil.

Alternative : le bloc “fil d’ariane de Yoast” (présent aussi en bas de cet article) qui propose nativement un retour à l’accueil tout en flaguant en vert votre maillage interne.

⬇️ Ca donne ça :

Accueil » 🛠️ création de sites » WordPress

✅Un HABI respecté en pensant à effectuer en simultané les manipulations de conformité SEO attendues par Yoast vous fera gagner énormément de temps. La très grande majorité des Flags sera déjà en vert quand vous irez contrôler leur état dans Yoast.

👉 Renseignez aussi des mots clés dans la zone étiquettes (du bandeau paramètres, onglet article).

🧑🏻‍🎓 La plupart des étudiants l’oublient durant l’épreuve E5B pensant qu’ils ont terminé en ayant tout flagué en vert dans Yoast et cela leurs coute des points.

Voyez aussi les articles sur la requête cible (expression clé) et sur le tour d’horizon de Yoast.

L’article WordPress | Méthode HABI et Yoast SEO synchronisés est apparu en premier sur st9ph.fr.

🖥️ Depuis le référenciel 2025, Spectra fait partie de l’évaluation technique E5B du BTS NDRC. La plupart des blocs expliqués ici sont donc à maitriser. Les autres porteront la mention “Ne figure pas au référenciel” (mais si je les ai mis là, c’est qu’il vont vous aider).

On y va ?

Le sommaire “Table of Contents”

• Remplacez “table of contents” par “sommaire” (par exemple ou comme pour cet article : “plan de l’article”)
• Choisissez dans le bandeau des réglages quels niveaux de titres seront affichés dans votre sommaire

ℹ️ Par défaut, tous vos titres de H1 à H6 figureront au sommaire. C’est sans-doute trop. Pour un sommaire principal, conserver les 3 plus hauts niveaux semble suffisant dans la plupart des cas.

• Réglez éventuellement les paramètres d’alignement et d’espacement selon vos envies.

👉 Dans l’onglet “style” vous pouvez aussi définir les couleurs de votre fond et des textes

ℹ️ Cet outil est précieux pour aider vos visiteurs à retrouver un contenu précis à l’intérieur d’un article; vous évitant de poser des ancres (voir l’article à ce sujet) car tous les éléments du sommaire son cliquables et emmènent le visiteur à la rubrique concernée.

Chronologie d’articles (post timeline)

Une chronologie d’articles peut permettre, notamment en fin d’article, de proposer un rebond interne, surtout qu’on peut filtrer sur la catégorie de son choix.

Dans l’exemple ci-dessus, la timeline déroule tous les articles de la catégorie 3D Builder de ce blog. En la plaçant en fin de chacun des articles traitant de ce logiciel, je propose à mes lecteurs de continuer à découvrir d’autres contenus en rapport avec celui qu’ils viennent de lire.

L’onglet général des paramètres de ce bloc permet :

• Post Type : de définir si ce sont vos pages ou vos articles qui doivent figurer dans la timeline
• Taxinomie : d’Indiquer si vous souhaitez filtrer sur vos catégories ou sur les mots-clés les contenus à retenir
• Catégorie (ou mot-clés) : de choisir la catégorie ou le mot-clé retenu pour le filtre
• “Exclude current post” : de dire si l’article en cours fera partie de la timeline. Activer le bouton radio pour l’ exclure.

Si vous utilisez la timeline comme rebond de fin d’article, excluez l‘article en cours que votre lecteur vient justement de finir. Il serait contreproductif de lui reproposer.

• Nombre d’éléments : de définir le nombre de posts proposés à l’écran afin d’éviter que le placard soit trop long.
• Oder by : de filtrer par date, ordre alphabétique des titres, position dans le menu ou de manière aléatoire (random)
• Order : d’indiquer si votre choix “order by” est croissant ou décroissant

👉 Il existe des variantes ;

• La grille de posts : que j’ai retenue personnellement à la fin de chacun des articles de ce blog. C’est un équivalent sans timeline.
• Le carrousel de posts : présent sur la page d’accueil, qui fait défiler les articles disponibles devant le lecteur.

Le compte-à-rebours (countdown)

Avant 2027

Aussi appelé ⏱️ Timer, le compte-à-rebours peut-être très utile pour créer un FOMO dans une fenêtre surgissante, par exemple. Voir l’article à ce sujet.

Il est assez facile et intuitif à paramétrer :

• l’onglet général définit les options de date et heure de fin du compte-à-rebours, ainsi que les étiquettes (labels) à remettre en français.
• l’onglet style permet de définir l’apparence de votre timer.

La Foire Aux Questions (FAQ)

La FAQ (Foire aux Questions en français ou Frenquently Asked Questions en anglais) est un outil d’aide qui propose sous la forme d’un glossaire, les réponses aux questions les plus couramment posées par les visiteurs.

C’est un outil aussi de SAV (il évite les tickets récurrents sur des questions simples) et de fidélisation (vos visiteurs adoreront être pris par la main).

Exemple de FAQ construite avec ce contrôle :

ℹ️ Par défaut, le bloc FAQ est composé de deux blocs “enfants” (FAQ child) mais on peut en ajouter d’autres avec le + en bas à droite

C’est depuis le bloc FAQ (et non depuis les blocs enfants) qu’il faut définir les options.

• Cliquez sur l’icone

du menu contextuel pour le réactiver si besoin.

• Le choix “accordéon” (il faut le voir verticalement, en fait), permet de plier et déplier les réponses pour économiser de la place sur l’écran.
• Le choix “Grid” présente les questions sous formes de vignettes d’un tableau.
• “Collapse other items” masque la réponse aux questions, sauf la première.
• “Expend first item” affiche la première réponse (ce qui peut donner l’idée aux lecteurs que les autres se présentent aussi sous les autres questions)
• “Enable toggle” permet au visiteur de développer et réduire les réponses comme il le souhaite. (désactivez aussi le premier choix si vous désactivez le toggle)

• Enable schéma support est une option de plan si votre FAQ s’inscrit dans un réseau de FAQ. Définissez alors les niveaux de headers dans l’onglet général (hors programme).
• Enable separator permet d’inclure ou non une ligne entre les FAQ enfants (valable uniquement si les réponses sont très longues et demandent au visiteur de scroller (c’est un repère).

Google Maps

Ce contrôle simplifie fortement la méthode vue dans cet article du contrôle HTML.

• Définissez un lieu en zone “Adress”
• Autorisez ou non la vue satellite ou restez en mode carte

Pensez à votre visiteur qui n’aura peut-être pas un débit de folie. Je préconise de rester en mode carte. N’oubliions pas que c’est son Google Maps avec sa connexion Internet qui va faire le travail.

• Définissez le zoom afin que le visiteur se repère au mieux par rapport aux indications périphériques, ainsi que la hauteur de la carte (Heigth)
• Définissez le langage sur “français”

Vous avez terminé !

N’oubliez pas d’annoncer votre bloc par une zone de texte au dessus afin de prévenir votre visiteur de ce que vous lui proposez dans ce contrôle. L’indication qu’il s’agit d’une carte interactive semble appropriée.

Retrouvez nous facilement à l’université de Caen en vous aidant de cette carte interactive Google Maps :

Quelle facilité ! Cependant, pour une carte vraiment personnalisée, cet article reste le plus adéquat (mais plus difficile).

Bloc Equipe (Team)

Sans doute le plus décevant des blocs Spectra dans la version freeware. En effet, pas de contenu dynamique, pas de liaison directe avec les comptes de votre blog : c’est juste un contrôle de type “Info Box” avec un contrôle Avatar et une barre de réseaux sociaux. Mais il est programme de l’évaluation !

a) Le bloc team de Spectra tel que vous devrez le maitriser à l’examen

St9ph

Webmaster

Je suis Formateur depuis 1997 et j’ai commencé ma carrière comme technicien en réseaux informatiques. J’ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d’Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d’Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !

Comme on le voit ci-dessus, il se compose de 5 éléments : l’avatar, le nom, la désignation (rôle), la description et les réseaux sociaux.

• Général
• Style

Dans l’onglet général, vous pourrez :

• Définir le niveau de titre de l’auteur (pour l’éventuel sommaire)
• Choisir une image ou un avatar

• Insérer les liens vers les réseaux sociaux de l’auteur

Il est plus que probable que cela soit demandé à l’examen si on vous demande d’insère le bloc Team.

• Choisir d’autres icones / réseaux que les 4 proposés (feu Twitter, Facebook, Linked In et Pinterest
• Supprimer en cliquant sur les croix les items (réseaux) à ne pas afficher

Vous ne pouvez en proposer que 4 maximum en version Freeware et vous n’avez pas d’autres choix que de masquer ceux que vous ne souhaitez pas (croix sur l’icône et pas de lien).

• Modifier la disposition (Presets) du bandeau Teams

Dans l’onglet style, vous pouvez :

• Modifier la couleur du texte
• Agir sur l’espacement entre les objets (Nom, Désignation, Description, Avatar et Réseau)

• Cliquez sur l’icone crayon de typographie pour avoir les contrôles détaillés.

Attention, ce sont tous les icones de Réseaux sociaux que vous recolorier à la fois. Impossible d’attribuer une couleur individuelle à chacun d’entre eux.

C’est quoi la différence entre “normal” et “hover” ?

Dans l’onglet “normal”, vous définissez la mise en forme de l’objet “au repos” (quand on n’agit pas dessus). “Hover” est la mise en forme “au survol” de la souris afin d’indiquer à l’utilisateur que l’objet est réactif.

b) astuce pour sauvegarder votre composition et la réutiliser à loisir

• Cliquer sur le menu hamburger (tout à droite) de la barre d’outils contextuels du bloc Team
• choisir “créer une composition”

ℹ️ Une composition est un bloc que vous enregistrez afin de pouvoir le réutiliser dans d’autres articles de votre blog. Ce blog Team est un exemple idéal de contrôle dont on aura souvent besoin et que l’on a pas trop envie de recommencer à chaque fois.

• Donnez un nom à votre composition
• Classez la dans une catégorie
• Cliquer sur Ajouter

Vous retrouverez maintenant ce bloc personnalisé parmi les autres :

Conseil : Afin de retrouver plus facilement vos compositions, utilisez la zone de recherche (d’où l’intérêt de donner à son bloc un nom “parlant’ dont on se souviendra).

Vous pourrez même modifier l’orignal en l’insérant dans vos articles. Ainsi, le contrôle sera modifié partout à la fois. C’est très pratique pour des blocs récurrents mais qu’il faut actualiser de temps en temps (comme les signatures).

C) Alternative au bloc Team de Spectra

👉 La plupart des thèmes vous procurent un bloc signature. Dans le thème GeneratedPress que j’ai choisi pour ce site, ce bloc s’appelle biographie mais chaque thème à son équivalent !

Il faut bien entendu renseigner les informations de compte de l’auteur pour que cela fonctionne !

.

👍 Avec Astra, vous disposez aussi d’un bloc “Auteur” qui ressemble beaucoup au bloc Team de Spectra sans la barre de réseaux.

Bref, le bloc Team en version freeware n’a aucun intérêt, sauf à utiliser l’astuce vue en b) mais, que voulez-vous, là-haut, au ministère, ils le trouvent sensationnel et il vous faudra donc le maitriser.

Témoignages (testimonials)

Bon, vous allez dire que je suis négatif mais, encore une fois, aucun intérêt dans la mesure où ce n’est là encore pas dynamique. C’est l’admin du site qui les écrit, même s’il se base sur un vrai témoignage (reçu par mail, par exemple), et qu’il le recopie fidèlement. Un formulaire que le “témoin” remplirait lui-même (comme un livre d’or) serait beaucoup plus pertinent.

👉 Il ne faut pas confondre avec les commentaires que vous pouvez autoriser sur votre site. Les témoignages sont plus globaux (le blog, son sujet) alors que les commentaires sont souvent des réactions à un article et les idées qu’il défend?

Génial ce site ! Il m’aide beaucoup à mettre en place ma boutique en ligne ! A quand Shopify dans les tutos ?

Abel-Yves A.E-commerçant

Ce blog m’aide beaucoup dans la préparation de mon BTS ! Merci à vous ! Chouette qu’on puisse s’inscrire depuis peu pour recevoir les nouveautés !

Agathe Z. Etudiante

Parcourez les onglets pour les réglages à explorer :

Voila, avec les formulaires et les fenêtres surgissantes, vous connaissez tous les contrôles à maitriser pour l’évaluation technique.

Vers l’épreuve E5B

La plupart des contrôles vus ici ne sont pas très difficiles à manipuler. En revanche, ils demandent du temps et il faudra vous entrainer à en créer un certain nombre pour le faire sans hésiter et sans perdre de précieuses minutes à peaufiner vos mises en forme.

Pensez à enregistrer régulièrement pour ne pas être déconnecté(e) lorsque vos manipulations durent un peu, même si vous n’avez pas terminé.

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que…

Lire la suite

WordPress | trucs et astuces pour embellir vos articles

15 décembre 2025 Aucun commentaire

WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️…

Lire la suite

WordPress | un article en partant de zéro ?

4 décembre 2025 Aucun commentaire

WordPress | un article en partant de 0️⃣? 👉🏻 C’est le pire scénario qui puisse…

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou…

Lire la suite

WordPress | Dompter Astra

29 décembre 2024 2 commentaires

Astra est un Theme Builder et c’est le thème imposé pour l’examen 🖥️ E5B de…

Lire la suite

WordPress | Fenêtres “surgissantes” de Spectra

26 décembre 2024 Aucun commentaire

WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)…

Lire la suite

St9ph

Webmaster

Je suis Formateur depuis 1997 et j’ai commencé ma carrière comme technicien en réseaux informatiques. J’ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d’Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d’Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !

L’article WordPress | Blocs Spectra remarquables est apparu en premier sur st9ph.fr.

• les options vraiment sympa sont payantes
• les options gratuites sont assez pénibles à paramétrer

Maintenant que je vous ai bien donné envie 😃, on fait le tour de ce qu’il faut retenir pour s’en sortir sans trop de mal.

⚠️ Attention, cet article part du principe que vous commencez avec un blog “tout neuf”. Si vous avez déjà créé des éléments avant l’installation d’Astra, épargnez-les des suppressions demandées dans la seconde partie (pages et menus).

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

voyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie

0️⃣ | Installer le thème Astra

0-1 | installer le plug-in

• Apparence > Thèmes > Ajouter un thème
• trouver Astra dans la liste des thèmes proposés (ou taper “Astra” dans le moteur de recherche)
• Cliquer sur 🟦 Installer

• Cliquer sur “Activer“

👈 Un choix supplémentaire apparait dans le bandeau principal du tableau de bord de votre backoffice.

En développant le choix “Astra“, on constate que le thème propose 4 sous options :

• 🧩Un tableau de bord qui permet d’accéder aux principales fonctionnalités (et de vous montrer celles que vous ratez en restant sur le plan gratuit),
• ✍️ une personnalisation qui permet d’accéder à toutes les commandes comme dans tous les autres thèmes,
• 🖥️ un constructeur automatique de site (Builder) mais nous ne pourrons rien y faire vu que c’est réservé au plan payant
• Spectra, une invitation à installer ce plug-in que nous verrons dans cet article.

➡️ Vous l’aurez compris, c’est surtout depuis le menu “Personnaliser” que nous pourrons adapter le thème.

🧹 Mais commençons par faire un peu de ménage pour enlever l’affreuse page d’accueil ajoutée et les deux menus qui, en plus, ne respectent aucune règle de ce que l’on peut mettre dans un menu.

0-2 | Enlever les pages auto générées

😯 A moins que vous ne soyez fan du violet criard, supprimons d’urgence la nouvelle page d’accueil que ce farceur d’ Astra vient de nous imposer :

• Pages > toutes les pages
• cocher “page d’exemple” et “Politique de confidentialité“
• Action Groupée > mettre à la corbeille
• Appliquer

👉 Ce n’est pas fini. Il va falloir laisser Astra définir une page d’accueil pour pouvoir la supprimer …

• Astra > personnaliser
• Publier
• Cliquer sur la croix en haut à gauche pour fermer l’éditeur de personnalisation.

Retournons maintenant sur Pages pour constater qu’une nouvelle page est apparue :

• cocher “Accueil“
• Action Groupée > mettre à la corbeille
• Appliquer

☑️ Ca y’est, cette fois, nous sommes débarrassés de cette affreuse erreur de gout !

0-3 | Supprimer les menus auto-générés

• Apparence > Menu

👉 Deux menus ont été auto générés par Astra : Principal et principal2

👀 Observez au passage que “Principal” est composé de pages dont certaines n’ont jamais existé ! C’est du super boulot ! 👍

• Cliquer sur supprimer (quel que soit celui des deux affiché)

Observez que WordPress demande une confirmation (cette opération est irréversible).

• Cliquer sur OK
• ➰ Répéter l’opération avec le second menu

➡️ Vous devriez normalement voir une invitation à créer votre premier menu :

Bon, on a perdu dix minutes à faire le ménage mais notre thème est enfin “propre” 👍

ℹ️ Rassurez-vous, pour l’épreuve, vos examinateurs auront déjà fait le ménage pour vous.

1️⃣ | Personnaliser Astra

En retournant dans Astra > Personnaliser, on constate dans l’aperçu de droite que le site est désormais en affichage générique : les derniers articles

N’oubliez pas, dans la suite de l’article, de publier à la fin de vos manipulations afin de les appliquer réellement. Ce que vous voyez dans le panneau de droite n’est qu’un aperçu du résultat si vous le validez.

👉 Développez les toggles ci-dessous pour voir la démo, rubrique par rubrique :

1-1 | Global

Le sous-menu global se décompose en 8 options (et ce n’est qu’un des 11 sous-menus !). Courage !

• Typographie, comme son nom l’indique, va permettre de choisir les polices de présentation de votre blog.

A noter qu’il est possible de prérégler les typographies des niveaux de headers, ce qui est un plus !

• Couleurs permet de définir une palette.

En cliquant sur le “style guide” (à côté de la croix”, vous obtenez un aperçu plus détaillé des différents objets que vous pouvez utiliser afin d’avoir un aperçu de l’effet de vos modifications

Il faudra procéder à de nombreux essais dans vos choix avant d’obtenir laborieusement à un résultat qui soit convenable.

• Conteneurs vous permet de modifier le cadre global de la zone large de votre site, selon que vous destinez votre site à des écrans de Desktop ou des mobiles.

Vous disposez aussi de curseurs pour un réglage au pixel près.

L’intérêt est discutable pour un CMS comme WordPress qui est déjà responsive.

• Boutons permet de régler l’apparence (texte, fond, bordure) de vos boutons

Vous avez deux niveaux de boutons (sans rapport avec l’état Repos- Pointé – Cliqué) et il est conseillé d’activer l’affichage “style guide” pour observer les résultats de vos tests.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

• Retour en haut est une option très utile qu’il faut activer. Elle permet au visiteur de revenir en haut de page (et d’y retrouver votre menu).

C’est le cas sur ce site (voyez en bas à droite). Ce bouton de retour vous suit au fur et à mesure que vous descendez dans l’article.

• Accessibilité est une personnalisation de la surbrillance et des encadrements disponibles quand les options d’accessibilité de votre OS sont activées (personnes handicapées visuelles).

• Editeur de blocs permet de modifier le réglage de la proximité entre les éléments de votre blog.

Ce peut être pratique quand vous voulez compacter vos contenus (les paragraphes, notamment) mais un réglage trop serré peut nuire à l’affichage correct sur certains navigateurs.

• Divers permet d’activer “le défilement doux vers les ID”

Les ID sont des balises comme des tags ou des signets. Le scroll peut alors être “ralenti” pour ne pas provoquer un glissé trop brut. Bon, c’est un peu gadget, en fait, d’autant que cela ne sera pas du gout des processeurs graphiques des ordis de vos visiteurs.

Bon, la bonne nouvelle, c’est que les autres sous-options de personnalisation ne comportent pas elles-mêmes de sous-rubriques, comme Global.

1-2 | Entête

Il faut soigner au mieux cette section car le Header de votre Blog est le premier élément que vont voir vos visiteurs.

• Entête > Eléments > titre du site & logo

Observez à droite les éléments prédisposés sur le header, que vous pouvez déplacer ou supprimer, voire remplacer par d’autres.

Pour la création de votre logo, utilisez votre logiciel de création graphique préféré ou, si vous êtes en panne d’inspiration, je vous conseille un créateur en ligne comme Free Logo Design qui fera l’opération pour vous en quelques instants.

• Tapez le nom de votre enseigne
• Cliquez sur “Get Started“
• Choisissez une catégorie qui correspond à votre activité
• Explorez les propositions de logos de Free Logo Design

• Cliquez sur celui qui vous correspond le mieux et costumisez-le.

• terminez par un Imprim écran pour sauvegarder votre œuvre (ce qui vous évitera de laisser votre mail pour vous inscrire).

Il vous faudra un format .jpg ou .png et une image de moins de 2 Mo si vous voulez qu’elle soit acceptée par votre blog (ce sont les paramètres par défaut de la plupart des plateformes).

• changer le logo > téléverser > parcourir les fichiers de votre ordinateur pour sélectionner votre création
• Recadrez votre logo et validez
• De retour dans l’interface de personnalisation, agissez sur le sélecteur de taille “largeur de logo” pour obtenir les dimensions que vous souhaitez

Pour ma part, je vais modifier légèrement la couleur du thème (dans Design) pour la faire correspondre à celle de mon logo

J’obtiens ce résultat :

• Ajoutez aussi le titre de votre site ainsi que son slogan
• Design > modifiez éventuellement la taille et la couleur des éléments

Vous pouvez aussi définir un favicon (mini logo qui apparaitra sur l’onglet du navigateur

Pour que cela fonctionne, il faut que votre image soit petite et carrée. Idéalement 150 X 150 pixels.

Je ne reprends pas le titre “Mediast9ph” dans ce favicon (il serait de toute manière illisible). C’est pour la même raison que je déconseille de placer le slogan dans votre logo.

Le favicon permet de repérer facilement vos onglets et constitue un plus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

1-3 | Fil d’Ariane

Le fil d’Ariane, inspiré de celui du labyrinthe de la mythologie (voir l’article sur Wikipédia) est, sur un site web, un développement du plan en ligne afin que le visiteur puisse comprendre à quel niveau il se situe et puisse remonter facilement l’arborescence de votre blog.

Accueil » 🛠️ création de sites » WordPress

Ci dessus, un fil d’Ariane inséré dans cet article avec le bloc “fil d’Ariane Yoast“. Il permet au lecteur de visualiser à quel niveau il se situe sur le blog St9ph et de revenir facilement à l’accueil. Il concourt aussi au maillage interne, important pour votre bon référencement.

• Thème > Astra > personnaliser >Fil d’Ariane
• Définir si vous le voulez en entête (en choisissant “à l’intérieur“

C’est le plus simple. Ainsi, le fil d’Ariane est toujours visible au même endroit sans que vous ayez besoin de l’insérer dans vous différentes articles et pages comme je l’ai fait pour cet article quelques lignes plus haut

• Définissez le type de séparateur de niveau

Le 4ème [/] vous permet de personnaliser avec le symbole de votre choix

• Choisissez avec les boutons radions à quels endroits de votre blog le fil d’ariane doit apparaitre automatiquement.

C’est quoi une page 404 ?

C’est une page de remplacement quand le lien de rebond d’une page de votre site conduit vers une page qui n’existe plus ou qui ne fonctionne pas. En général, elle indique que la page demandée est introuvable, propose des excuses et donne un lien pour revenir à l’accueil du site. Son nom vient du code erreur informatique correspondant à cette situation.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

1-4 | Blog

Vous paramétrez ici l’apparence générale du site, surtout en termes de gabarit. Parcourez les onglets pour les détails

• Archive
• Publication seule

Il faut comprendre par archive la vue globale avant que le visiteur ait choisi un de vos articles

• Définissez les différentes options d’apparence du conteneur (cadre de vos éléments affichés) en observant les effets sur l’aperçu à droite. Vous pouvez régler :
  • la mise en page du conteneur (attention : “étroit” et “pleine largeur” suppriment l’affichage de la colonne latérale
  • les styles (la différence entre “ouvert” et “encadré” n’est pas flagrante si vous n’avez pas un Design très contrasté)
  • la mise en page de la colonne latérale (à maitriser pour l’examen)

C’est en effet ici que vous devrez sans doute choisir de l’afficher ou de la basculer de l’autre coté. Rappelez-vous que si vous avez un conteneur réglé sur “étroit” ou “pleine largeur”, ce réglage sera inopérant !

• la mise en page du blog (comment seront vignettés vos listes d’articles quand un visiteur les aura choisi dans une catégorie depuis votre menu)
• Les éléments de publication (ce qui apparait dans vos contenus) comme, par exemple, d’afficher l’extrait ou le contenu intégral d’un article dans la page qui les liste tous.
• Les métas, c’est-à-dire les éléments complémentaires qui renseignement sur vos contenus (date, auteur, mots clés associés …)
• Réglez également les éléments de Design si besoin

Ce sont les réglages de disposition une fois que le visiteur a choisi un article ou une page.

A observer principalement :

• publications similaires qui propose d’autres articles ressemblant en rebond en fin de lecture (basé sur les mots clés communs)
• L4affichage ou non des commentaires
• les options de conteneur comme dans l’onglet précédent, mais, cette fois, pour la page ou l’article lui-même

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

1-7 | Pied de page

C’est ici que vous pourrez insérer vos éléments de footer. (à maitriser)

Il ne s’agit pas d’une règle mais plutôt d’une coutume : On place souvent en footer des informations légales (cgu, politique de confidentialité, auteur et moyens de le contacter, ainsi que la barre de réseaux sociaux)

Sur ce blog, le footer propose tous ces éléments.

.

En cliquant sur le + d’une des zones du footer, vous pouvez insérer des blocs ou des liens à votre convenance

Astra vous facilite les choses en vous proposant de rappeler un menu secondaire que vous auriez préparé à cet effet ou les icones de vos réseaux sociaux

Vous pouvez même personnaliser le message mais pensez bien alors à afficher le libellé.

1-8 | Menus

Il faut avoir au préalable construit vos catégories.

Ce sont vos catégories qui contiennent vos articles. En insérant vos catégories dans vos menus vous permettez ainsi à vos lecteurs de choisir les contenus qu’ils préfèrent parmi vos créations. Il s’agit en fait d’un filtre !

• Cliquez sur “créer un nouveau menu“
• Donnez lui un nom
• Cochez “menu principal“
• Cliquez sur Suivant
• Cliquez sur “Ajouter des éléments“, un bandeau se développe
• Développez “Catégories“
• Cochez toutes vos catégories et cliquez sur “Ajouter“
• Cliquez sur “organiser“
• Mettez vos rubriques dans l’ordre souhaité avec les flèches verticales (la plus à gauche du menu en haut de la liste)
• Décalez à droite les sous catégories avec la flèche droite afin d’indiquer que ce sont des sous-menus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Vous serez surement obligé(e) de relooker l’apparence de ce menu. Par défaut le thème est gris claire sur fond blanc pour les sous rubriques :

• Cliquez sur le petit crayon au dessus du menu (visible si vous pointez dessus).

• Cliquez sur l’onglet Design de Personnalisation > menu principal
• Modifiez la palette des éléments de texte Normal – au Survol – actif jusqu’à obtenir quelque chose de lisible.

Vous pouvez aussi vous aider à rendre le texte plus lisible en jouant avec l’arrière plan.

👀 j’ai voulu ce tour d’horizon le plus bref possible mais j’ai bien conscience qu’il y’a déjà beaucoup de choses à retenir.

N’hésitez pas à revenir au plan dans le bandeau latéral 👉 et focalisez vous sur les éléments un par un. C’est par la pratique que vous deviendrez coutumier(e) de ce thème un peu délicat à dompter.

2️⃣| Le panneau d’aperçu

👉 C’est lui qui va vous sauver pour retrouver les choses. On ne va pas revenir sur le détail des rubriques vues dans le chapitre précédent mais juste la manière d’agir plus visuellement. On en profitera aussi pour apprendre à manipuler certains widgets.

2-1 | ⩸ menu de bas de page

• Cliquer sur le pinceau du Footer
• ,Cliquer sur le ⁜ pour choisir ses widgets
• Choisir “Footer Menu“

• Dans Apparence > Menu > sélectionnez le menu à mettre en pied de page (ou créez-en un !)
• Cochez “Menu de pied de page“
• 🟦 Enregistrer le menu

👉 Notez que vous pouvez à la fois cocher Menu principal et menu secondaire (si vous voulez que ce soit le même bien que je ne vois pas trop l’intérêt -> autant en faire un plus léger avec seulement les options principales).

2-2 | Réseaux sociaux

• Cliquer sur le pinceau du Footer
• ,Cliquer sur le ⁜ pour choisir ses widgets
• Choisir “social“

➡️ Pour chacun de vos liens vers vos réseaux sociaux :

• Conservez ou modifier le “label“
• Conservez l’icone ou choisissez un icone dans la bibliothèque en cliquant sur le le logo

👈 Utilisez la zone de texte pour taper les premières lettres du réseau social dont vous souhaitez trouver l’icone parce la liste est longue.

• renseignez l’url de votre page

• Supprimez ceux que vous ne souhaitez pas conserver en cliquant sur la croix |X|
• Ajoutez éventuellement d’autres réseaux en cliquant sur + Add Icon
• Dans l’onglet Design, vous pouvez aussi modifiez la couleur de l’icone ou activer le bouton radio “officiel” qui affectera automatiquement les codes couleurs de la charte du réseau.
• 🟦 Publier

👉 A remarquer aussi :

Le bouton radio “activer au survol” permet d’afficher le code couleur quand on pointe sur l’icone

2-3 | <> Html personnalisé

🖥️ Hors programme épreuve E5 B

🙀 Qu’est que c’est que cette bête là ? Le HTML est tout simplement le code principal de vos pages web ! Il est contenu dans des balises <début> contenu </fin>

Par exemple : 👆 le titre ci-dessus est en réalité lu par le navigateur ainsi :

<H3> 2-3 | <>Html personnalisé</H3> (H3 = titre de 3ème niveau)

➡️ Un autre exemple plus complexe d’intégration de Google Maps personnalisé dans cet article du blog pour ceux que cela passionne.

Nous resterons simples en intégrant juste un petit texte défilant comme celui-ci :

🌼Je me lance moi-même des fleurs en attendant d’en recevoir

👉 En réalité, c’est juste une balise MARQUEE qui s’écrit ainsi :

• Cliquer sur le pinceau du Footer
• ,Cliquer sur le ⁜ pour choisir ses widgets
• Choisir “HTML 1“
• Cliquer sur le bouton HTML 1 qui est apparu dans la barre du footer

• ✍️ Ecrivez votre code html (dans l’onglet code)
• Réglez éventuellement les options de police et d’alignement.(dans l’onglet visuel)
• Vous pouvez même ajouter des liens hypertexte si le cœur vous en dit :

• 🟦 Publier

🖥️ Bien sur, tout cela n’est pas au programme de l’épreuve E5 et il faut préciser que la balise marquee ne fonctionnera pas forcement selon les navigateurs et les “frames” dans lesquelles elle est écrite.

🖥️ Vers l’épreuve E5B

L’ensemble des manipulations ci-dessus, sauf l’installation d’Astra et la partie HTML sont à connaitre pour l’épreuve technique.

📚 Sources

• 🖥️ plug-in Astra – thème builder
• 🖥️ Free Logo Design – constructeur de logos
• Astra et WordPress – aperçus d’écrans

🧑‍🎓 NDRC

🟦 Cet article est à visée de l’épreuve écrite E5B.

• savoir personnaliser le thème Astra
• savoir intégrer des éléments aux Header, Sidebar et Footer

👉 Attention à la profusion des menus. C’est par la pratique que vous allez acquérir des habitudes et des réflexes

📘 Glossaire

• Header : entête du site
• Body :Corps (partie centrale, variable) du site
• Footer : pied de page du site
• sidebar :barre latérale du site
• ID : identificateurs uniques
• Favicon : icone (petite image) présent dans l’onglet du navigateur
• Fil d’Ariane : ligne de liens vers les différents niveaux du site
• Widget :”brique” de construction dans un espace du site
• bouton radio : bouton alternatif à deux statuts (oui /non, ouvert / fermé, avec / sans …)
• Balise Marquee : champs HTML défilant

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que...

Lire la suite

WordPress | trucs et astuces pour embellir vos articles

15 décembre 2025 Aucun commentaire

WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️...

Lire la suite

WordPress | un article en partant de zéro ?

4 décembre 2025 Aucun commentaire

WordPress | un article en partant de 0️⃣? 👉🏻 C’est le pire scénario qui puisse...

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou...

Lire la suite

WordPress | Blocs Spectra remarquables

30 décembre 2024 Aucun commentaire

Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)....

Lire la suite

WordPress | Fenêtres “surgissantes” de Spectra

26 décembre 2024 Aucun commentaire

WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)...

Lire la suite

St9ph

Webmaster

Je suis Formateur depuis 1997 et j'ai commencé ma carrière comme technicien en réseaux informatiques. J'ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d'Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d'Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !

L’article WordPress | Dompter Astra est apparu en premier sur st9ph.fr.

WordPress

| Pop Up Spectra

👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension) qui fournit des blocs, des compositions et des outils telles les fenêtres “surgissantes” (pop-up).

Part d’IA /5 dans cet article

♨️ Sources

🖼️ Images

✒️Contenu

voyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie

1

Conception du pop-up

• choisir entre l’infobarre et le pop-up
• manipuler le contenu du pop-up

• Spectra > constructeur de fenêtre surgissante
• cliquer sur créer une nouvelle fenêtre

👉🏻 Vous avez deux choix : L’infobarre comme celle de la boutique pédagogique (voir l’aperçu en illustration 1) ou le Pop-Up (voir l’illustration 2)

illustration 1 – l’infobarre

ℹ️ Idéale pour une info durable, discrète en bas d’écran.

illustration 2 : le pop-up

📸 Idéale pour une info flash, éphémère mais immanquable !

• Saisissez un titre (juste pour vous, il n’est pas visible par vos visiteurs)
• choisissez “Popup“

👆🏻 Un modèle de pop-up vous est proposé avec un icone, un titre, un paragraphe et un CTA

❌ Mais on va virer tout cela pour repartir de Zéro !

• Cliquez sur la composition afin d’afficher la barre d’outils contextuelle.
• Cliquez sur options (le menu hamburger)
• Supprimer

➡️ Il devrait ne vous rester que cela 👇🏻

ℹ️ On peut gérer un pop-up comme un article car il se construit de la même manière. Il accepte tous les blocs de l’éditeur mais il faudra faire plus court que dans un article car c’est un message “flash” (donc,sur un panneau réduit).

📹 Allez, on se fait la suite en vidéo, une fois n’est pas coutume ! 👇🏻

• Cliquer sur “Enregistrer le brouillon” (à faire de temps en temps)

2

Paramétrage du pop-up

• Définir la cible du CTA
• Définir les options d’affichage du pop-up

🔹2.1 |Définir la cible du bouton

➡️ On va envoyer le visiteur qui clique sur le bouton “je vous explique tout 👍🏻” sur la page d’aide à l’adresse : https://st9ph.fr/aide/

• Cliquer sur le bouton CTA du pop-up
• Cliquer sur l’onglet “Général” (mais vous y êtes déjà, normalement)
• Saisir l’url dans la zone “Link” (à la place du #)

ℹ️ En règle générale, on n’active pas le choix “ouvrir dans une nouvelle fenêtre” si le lien est sur le même site.

🔹2.2 |Définir les options d’affichage du pop-up

• Général
• Style
• Avancé

Dans l’onglet général, définissez :

• la largeur (Width) de votre pop-up
• Sa hauteur (Height)
• son alignement (en utilisant les sélecteurs de la grille à 9 carrés)
• l’Overlay (si le visiteur aura la croix pour le fermer ou s’il devra passer par un CTA)
• le caractère modal (incontournable) ou non avec le bouton radio “prevent background interaction” . Par défaut, le pop-up est incontournable.
• le choix et la position de l’icone “fermer“. Par défaut, une croix en haut à droite
• le nombre de répétitons (1 fois par défaut).

👉🏻 Le nombre de répétitions, même conservé à une seule, est défini en fonction des cookies. Donc, si le visiteur change de navigateur, n’accepte par les cookies ou est resté trop longtemps sans visites (le cookie s’est effacé), il retrouvera le pop-up !

Dans l’onglet style vous pouvez définir des opposions d’apparence :

• la couleur ou l’image de fond (background) de manière générale ou au survol / pointage (Overlay)
• le Radius (Rayon), c’est à dire la place minimale que doit laisser le pop-up à l’arrière plan en pixels (en général ou par supports desktop et mobile)
• la taille du bouton de fermeture
• l‘ombrage
• l’espace des éléments fenêtre et bouton

L’onglet avancé permet de définir des choix de présence selon les supports -mobile, tablettes, desktops) ainsi que de définir une ancre (html) ou une classe CSS (code)

➡️ On pourrait éventuellement vous demander durant l’épreuve de ne pas afficher le popup sur smartphone :

• Une fois votre brouillon opérationnel, cliquez sur 🟦 publier.
• Développer le choix “publier : maintenant ” pour afficher le calendrier
• programmez son affichage

➡️ Si vous n’avez pas besoin de le programmer, sautez cette étape.

• Cliquer sur 🟦 Planifier

👇🏻 Une infobox vous confirme la mise en ligne du pop-up :

➡️ Jetez un dernier coup d’oeil aux proportions (pas d’ascenseur sur un pop-up) 👇🏻

☑️ Différentes options :

• Proportions “use fixed height” si vous voulez les figer (dangereux pour les petits écrans)
• Alignement (par défaut, centré mais vous pouvez la polariser ailleurs)
• “Use overlay” (fond grisé ou non)
• “Prevent background interaction” (si vous désactivez, on peut cliquer sur le fond et escamoter le pop-up)

➡️ Définissez aussi le nombre de répétitions

⚠️ En général, c’est une seule fois mais vous faites comme vous voulez si vous voulez énerver vos visiteurs 😡

Cliquer sur 🟦 Enregistrer

👉🏻 Soyez assez modéré(e) dans le recours aux pop-up sur votre site. Cette pratique peut agacer et générer du rebond (départ) si vous l’utilisez trop souvent.

Le résultat 👇🏻

🧑🏻‍💻 Pour info, le pop-up qui surgit sur le blog si vous restez plus de 30 secondes sur la page d’accueil et qui ressemble à celui-là, je l’ai fait avec une autre technologie. La temporisation avec Spectra fait partie de l’option premium.

• Le principe reste le même sauf que le pop-up ne survient que si le visiteur reste longtemps sur la page d’accueil sans cliquer nulle part, signe qu’il est peut-être un peu perdu sur ce qu’il peut faire.
• Il peut aussi décider de ne plus le revoir “ne plus afficher” ou simplement de le fermer s’il veut continuer à se débrouiller tout seul mais sans être certain de ne pas avoir besoin du lien plus tard.

🎈 En marketing, on utilise aussi beaucoup les pop-up basés sur le comportement, comme, par exemple, celui de voir une promo en pop-up si le pointeur se rapproche de la croix pour fermer l’onglet d’une eshop.

🧑🏻‍🎓 | Vers l’épreuve E5B

🖥️ Il vous sera probablement demandé, si votre sujet comporte une question sur la mise en place d’une fenêtre surgissante Spectra, d’y placer un call-to-action qui emmène vers l’une des pages du blog.

• Pour rappel : dans l’onglet “général” du bouton de votre CTA, vous trouverez un champs “link” dans lequel vous devrez inscrire l’Url de la page à atteindre. (le champs où il y’avait le #)

📚 Sources

• ⚙️ plug-in Spectra – extension WordPress du sujet de l’article
• 📹 ClipChamp – vidéo de démo
• 🔊 Voicertool – voix off
• Nano Banana Pro de Google Gemini – personnage d’illustration
• Powerpoint – image mêlant le personnage et les cartes de résumé d’articles qui tournent autour d’elle

🧑‍🎓 NDRC

🟦 Cet article est à visée de l’épreuve écrite E5B.

• savoir construire et afficher un pop-up Spectra
• savoir annexe : bons usages des pop-up dans vos outils digitaux

👉 voir aussi l’article sur les autres contrôles Spectra à maitriser

📘 Glossaire

• plug-in (ou extension) : composant ajouté au logiciel pour lui ajouter des fonctionnalités
• infobarre : petit bandeau présent en haut ou en bas de page d’un site
• pop-up (ou extension) (ou fenêtre surgissante) : panneau qui surgit au dessus de la fenêtre écran du navigateur

éditeur de blocs(ou extension) :panneau lattéral qui permet de choisir les blocs (titre, paragraphe, image …) à insérer dans votre composition

infobox ou infobulle (ou extension) : petit encadré furtif diffusant une information

Hoover : pointer avec le curseur sans cliquer (on parle aussi de “survol”)

CTA : Call to Action (appel à l’action) – élément qui donne envie de cliquer

Tous les articles WordPress :

L’article WordPress | Fenêtres “surgissantes” de Spectra est apparu en premier sur st9ph.fr.

➡️ J’aborderai dans cet article à la fois le volet technique de la mise en place d’une newsletter, mais aussi les points de vigilance légaux et un rappel des bonnes pratiques marketing pour assurer votre réussite.

Vous pouvez aussi télécharger la fiche ressource nommée “Email marketing” en complément de cet article.

1️⃣| Concevoir le formulaire de collecte des mails

Il y’a plusieurs moyens de procéder.

1. S’en remettre à votre CMS qui a surement prévu cette option par défaut dans son installation
   • La collecte est facilitée (vous n’avez rien à faire)
   • l’exploitation des données collectées nécessite dans la plupart des cas l’installation d’une extension.
2. Connecter votre CMS à un logiciel d’Email marketing,
   • IL faut configurer une liaison avec une clé API et maitriser les filtres de la solution tiers car tous les comptes (clients, abonnés, collaborateurs) sont importés sans distinction. Dans cet article, nous connecterons la boutique pédagogique (Prestashop) à MailChimp.
3. Utiliser des plugs-in comme, par exemple, le couple Contact Form 7 + Flamingo dans WordPress (voir les articles correspondant).
   • Ce couple ne traitera d’ailleurs que la collecte.
   • Il vous faudra un troisième plug-in pour la conception et l’envoi de la newsletter elle-même ou revenir à la solution N°2
4. Utiliser une solution tout-en-un que fournissent certains hébergeurs (le mien le fait, il s’agit d’Infomaniak et nous le prendrons en exemple).

1-1 | Utiliser l’outil fourni avec le thème de votre CMS

👉 Cela dépendra évidemment à la fois du CMS et du thème installé. Nous prendrons pour exemple le CMS Prestashop et le thème par défaut (Classic 1.0, celui de l’examen en NDRC).

➡️ Votre formulaire se trouve dans le footer de votre boutique et vous pouvez le paramétrer dans le gestionnaire de modules – section “promotions et marketing“. Il s’appelle “inscription à la newsletter” et vous pouvez le paramétrer en cliquant sur le bouton “configurer“.

1-1-1 | Paramètres de vérification et d’opt-in :

elle vous permet :

• d’envoyer un mail à votre nouvel abonné pour qu‘il confirme son inscription par un lien de vérification (vous évitez les emails invalides et les robots de spam).
• d’envoyer un mail de confirmation ensuite (un peu “too much” à mon gout mais c’est vous qui voyez)
• d’envoyer un code de réduction pour son prochain achat dans la boutique (bref, vous l’achetez !)
• de préciser les CGU car ses données seront collectées (obligation RGPD)

1-1-2 | liste d’inscrits

Vous visualisez l’ensemble des inscrits à votre newsletter

1-1-3 | Export de la liste

➡️ Prestashop vous permet d’exporter cette liste en CSV pour l’utiliser dans un logiciel d’EMailing comme Brevo ou MailChimp par exemple (je cite les deux plus populaires).

👉 Soyons clairs, ce n’est pas très confortable de devoir, à chaque campagne, générer un export de Prestashop puis un import dans un logiciel d’Emailing.

Souvent, d’ailleurs, les formats de champs ne correspondent pas et il faut modifier le CSV entre les deux opérations.😐

1-2 | Se connecter à un SaaS d’Email Marketing

On va ainsi mettre en relation deux SaaS au moyen d’une clé API et chaque inscription dans la boutique créera une double inscription automatique dans Prestashop et dans MailChimp

Côté Prestashop, il faudra installer le module MailChimp disponible gratuitement sur ce lien.

⚠️ Attention, n’allez pas sur le catalogue car, comme d’habitude, Prestashop.com, ce bandit, va essayer de vous refourguer un module payant dont vous n’avez pas besoin et qu’il vend toujours trop cher.

➡️ Une fois le module installé, vous le verrez dans la section “promotion et marketing” :

Dans la configuration, le module vous demandera vos identifiants MailChimp afin de générer la clé API de reconnaissance.

Coté MailChimp, dans le menu latéral, allez dans Intégrations, Gérer, connectez une application. On vous demandera l’URL de votre boutique et vos identifiants Admin.

Dans la gestion des options de votre boutique connectée, vous pourrez utiliser de nombreux outils comme la gestion des paniers abandonnés ou les autres déclencheurs de Retargeting.

➡️ En s’inscrivant à la newsletter, mes visiteurs vont alimenter à la fois ma base de données PrestaShop et celle de MailChimp.👍

A noter que la réception dans MailChimp fait apparaitre le CA généré par le nouvel abonné (s’il est repéré parmi les clients).

👉 Il faudra néanmoins prévenir vos nouveaux abonnés de la collecte des données. Pour ma part, j’ai crée un paragraphe spécial dans les CGU de la boutique.

👉 vous pourrez dorénavant utiliser les inscriptions pour créer des newsletters à partir de MailChimp.

ℹ️ Je vous conseille cet autre article du Blog qui vous explique comment faire (sautez alors l’étape de l’import des données puisque c’est Prestashop qui alimente votre SaaS).

1-3 | Utiliser des plug-in

👉 Les plug-in (extensions) pour WordPress sont nombreux.

Un des mieux notés est Contact Form 7 (CF7) qui permet la création de tous types de formulaires. Ce module ayant été déjà traité dans le blog, je vous renvoie aux articles correspondants :

• Créer des formulaires de collecte de données avec CF7
• Recueillir les données avec Flamingo

La partie collecte est réglée mais le couple CF7 + Flamingo ne conçoit pas vos Newsletters. Il faudra intégrer vos données dans une solution qui le fait.

1-4 | utiliser une solution “tout en un”

Pour ma part, j’ai choisi un hébergeur qui propose un outil intégré de génération de formulaires et de conception de newsletters. Il est suisse, écolo et pas cher puisque pour moins de 7 € par mois, il me permet d’héberger jusqu’à 20 sites assez confortablement. . Il s’appelle Infomaniak.

👉 Dans cette partie 1️⃣ nous verrons le recueil de données par l’intégration de formulaires dans un site et dans la suivante 2️⃣ la conception et l’exploitation d’une newsletter.

👉 Des modèles de formulaires paramétrables sont disponibles et permettent de générer une “liste de diffusion” spécifique (dans l’exemple : “AboSt9ph”).

ℹ️ Pour info, c’est le formulaire que j’utilise sur ce site et vous devez le voir dans le bandeau de gauche si vous remontez avec l’ascenseur. Je ne collecte que le mail (ce qui m’empêche de personnaliser ma newsletter mais qui m’évite d’en décourager certains qui veulent rester anonymes).

Infomaniak me propose un code d’intégration (que j’ai mis dans un bloc “HTML personnalisé” du bandeau.

👉 Je peux personnaliser l’Email de validation et la demande de confirmation qui est envoyée automatiquement :

👉 Un tableau de bord me permet même de suivre les inscriptions :

Rappelons que la confirmation est obligatoire (double opt-in) au regard du RGPD.

2️⃣ | La newsletter

2-1 | Dans MailChimp

➡️ MailChimp est un SaaS Shareware qui permet d’envoyer gratuitement un millier de mails par mois (5000 avec le plan à 13 € soit 0,2 centimes le mail).

👉 La gestion se fait par campagne.

On a vu plus haut que les destinataires peuvent être collectés via des plugins dans vos boutiques en ligne ou vos blogs. Les étapes suivantes sont donc la préparation du mail type et la planification

➡️ L’interface est assez intuitive et permet choisir dans des modèles des blocs Texte, Image, Bouton, séparateur … afin de préparer votre mail type.

👉 Pour rappel, votre premier lien cliquable doit être l’endroit où vous voulez emmener le destinataire (la page de votre produit ou le rayon de la promo ou le formulaire d’inscription …)

Veillez donc à éliminer tout lien vers votre page d’accueil de votre logo (c’est courant) qui risquerait de conduire votre lecteur ailleurs.

⚠️ Dans le plan gratuit, vous ne pourrez pas planifier l’envoi, ce qui vous empêchera de choisir le moment idéal pour accrocher votre cible.

👉 A noter que vous pouvez vous envoyer un mail test qui vous permettra de voir le mail côté destinataire et corriger éventuellement les imperfections.

Un tableau de bord permet de connaitre le taux de délivrabilité, de clic, de conversion. C’est assez complet si votre SaaS est relié à votre boutique (comme moi ici avec Prestashop).

😉 Défense de se moquer des statistiques, c’était juste un exemple test !

2-2 | Avec Infomaniak

➡️ Le système est le même. Si l’interface diffère un peu, les étapes sont toujours les mêmes :

• récupération de la base de donnée
• paramétrage de l’expéditeur et de l’objet
• création du mail type
• planification de l’envoi
• Etude du tableau de bord

👉 On retrouve le même type d’interface de conception :

Le tableau de bord est plus complet :

👉 On peut, notamment, étudier les comportements individuellement (ouvertures, quels liens cliqués …)

⚠️ Cette solution est payante mais fait partie du pack d’outils inclus par mon hébergeur (et, donc, j’en profite !).

2- 3 | Points de vigilance légaux

➡️ Votre communication en B2B doit au moins permettre le désabonnement (opt-out) et indiquer clairement qui vous êtes (enseigne, url du site + adresse du siège si votre domaine n’est pas en .fr)

➡️ En B2C, il faut respecter ces 5 étapes dans le footer du mail :

1 – rappel de l’opt-in (à qui le destinataire a-t-il donné sont consentement préalable ?)

Vous recevez ce mail parce que vous êtes inscrit à la newsletter de notre site.

2 – Opt-out (comment faire pour ne signifier que l’on est plus d’accord ?)

Si vous recevez ce mail par erreur ou si vous ne souhaitez plus recevoir ce type de communication, veuillez nous excuser!!!!!. Vous pouvez vous désinscrire sur ce lien : se désinscrire.

3 – rappel de la loi (le RGPD étant inscrit dans la loi Informatiques et Liberté, ne pas le mentionner n’est pas une faute).

Conformément à l’article 34 de la loi Informatique et Liberté du 6 janvier 1978, vous disposez d’un droit d’accès, de modification, de rectification et de suppression des données vous concernant.

4 – Permettre l’exercice du droit d’accès en communiquant les coordonnées du délégué à la protection des données (DPO) par le même canal (donc son mail).

Si vous souhaitez exercer ce droit, contactez notre DPO à l’adresse dpo@st9ph.fr

5 – identifier la source du mail (enseigne, url du site + adresse du siège si votre domaine n’est pas en .fr) et dater (mois = année) même si le mail est horodaté, l’archive papier conservée au greffe fera foi en cas de litige)

La boutique St9ph – https://shop.st9ph.fr/presta/ – Mars 2023

2-4 | Bonnes pratiques

✅ Une communication mail réussie est courte.

Evitez les expressions “paillasson” comme “Je me permets de vous contactez aujourd’hui …”. Parlez au présent, valorisez votre offre par des phrases courtes. Soignez votre objet en évitant les mots que les serveurs mail vont filtrer “offre, réduction, bonne affaire, promo …” et en un minimum de mots (moins de 6 dans l’idéal).

✅ Une fréquence raisonnable

Ne bombardez pas les boites mail de vos correspondants qui vont vous filtrer à force. Attendez d’avoir vraiment de la nouveauté et des avantages à leurs proposer. Scorez vos fichiers pour établir des cohortes, ciblez des communications différentes pour chacun de vos Buyer persona.

✅ Soignez vos CTA

L’appât du gain, la personnalisation, la peur de manquer et l’appel à la curiosité sont les 4 ficelles sur lesquelles il faut tirer pour provoquer l’engagement. Posez des questions en introduction de votre mail pour amener votre interlocuteur à se les poser aussi et à cliquer sur votre lien pour obtenir des réponses.

🧑🏻‍🎓 | vers l’épreuve E5

➡️ A l’écrit, la composition d’un mail commercial ou la démarche de constitution d’une campagne mail sont des exercices qui tombent souvent.

👉 Il ne faut pas oublier, non plus que l’étude d’un tableau de bord d’une campagne mail fournie en annexe peut aussi faire l’objet d’une analyse de votre part. Il faut donc maitriser les KPI en rapport.

➡️ Durant l’épreuve technique, il n’est pas demandé de maitriser les plugins de collecte de données ni même l’élaboration d’un formulaire de collecte de données.

👉 En revanche, vous pouvez être amené(e) à rediriger vers ce formulaire depuis un article, une page ou un menu de WordPress. Idem dans Prestashop, depuis une page, un bloc personnalisé du footer ou le menu principal

ℹ️ Les lead qui se donnent la peine de s’abonner ou de remplir des formulaires pour que vous collectiez leurs données attendent de vous, en toute confiance, des communications en rapport avec leur démarche.

😌 Ne perdez jamais de vue le contexte dans lequel vous les avez recueillies si vous ne voulez pas trahir la confiance qu’ils vous donnent.

3D Builder | Textures et images

1 septembre 2023 Aucun commentaire

Afin de décorer ou de donner un aspect plus réel à vos objets, vous pouvez…

Lire la suite

3D Builder | Grouper, fusionner, découper

6 août 2023 Aucun commentaire

Ce tuto, niveau débutant, va vous montrer comment manipuler les objets existants pour les arranger…

Lire la suite

Tidio | un outil de Chatbot dans votre Eshop

19 juillet 2023 Aucun commentaire

Tidio, un outil de Chatbot dans votre eshop, en alternative (ou en complément ?) de…

Lire la suite

Excel | Le Solveur

27 octobre 2022 Un commentaire

Un exemple pas à pas avec classeur exemple d’utilisation du solveur Excel qui permet de…

Lire la suite

WordPress | Formulaires Contact Form 7

31 janvier 2021 6 commentaires

Contact Forms 7 dans WordPress avec gestion d’objet en listes déroulantes et case d’opt-in

Lire la suite

WAMP | Serveur local d’entrainement

16 janvier 2021 Aucun commentaire

Installer WAMP et une base de données dédiées à vos blogs et vos boutiques, installer…

Lire la suite

St9ph

Webmaster

Je suis Formateur depuis 1997 et j’ai commencé ma carrière comme technicien en réseaux informatiques. J’ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d’Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d’Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !

L’article CRM | la Newsletter est apparu en premier sur st9ph.fr.

Dans l’aperçu ci-dessous, Feedly (l’une de ces plateformes) m’a permis d’intégrer le flux RSS de mon blog dans une catégorie “Education” et met en lumière les derniers articles parus sur le web des webzines que je suis.

Ne nous voilons pas la face, cet outil est surtout utilisé par les professionnels (com, marketeurs, managers) et peu par le grand public. En B2C, personne ne suit de boutique en ligne via son flux RSS et c’est pourquoi il faut surtout le travailler pour vos blogs.

Nous prendrons donc pour exemple WordPress comme source de flux et Feedly comme agrégateur (c’est l’un des deux plus populaires avec Netvibes).

C’est quoi un flux RSS ?

RSS veut dire Really Simple Syndication ou Rich Site Summary. On pourrait le traduire en français par “Recensement des contenus“. C’est en fait un fichier texte contenu dans un répertoire nommé Feed à la racine de votre site. Il fournit les titres, meta et liens de vos pages et articles ainsi que la date de la parution, élément important pour les agrégateurs afin qu’ils ne proposent pas à leurs lecteurs des flux qu’ils ont déjà lus !

Dans WordPress, il est généré et mis à jour automatiquement. Il n’y a donc rien à faire.

Par exemple, pour ce blog, il suffit d’ajouter /feed à l’url de base pour obtenir le flux RSS (donc : https://st9ph.fr/feed ).

Pour tester, vous pouvez insérer un bloc widget flux RSS dans un de vos articles brouillon et essayer ce lien

Vous obtiendrez ce résultat :

• ⏺️Omnicanal | Donner des sens au digital
• E5A | Sujet Avril 2026
• 🎓TP – Légalité de l’action digitale
• E5A | Sujet mars 2026
• 🎓TP-OP Com

La listes des articles évoluera dans le temps. Si vous revenez sur cette page dans les semaines qui viennent, il y’a des chances que d’autres articles plus récents aient remplacé ceux-ci.

Vous disposez par ailleurs d’options dans le panneau latéral du bloc :

• Le nombre d’articles à afficher (par défaut, les 5 plus récents)
• Afficher l’auteur (désactivé par défaut)
• Afficher la date de parution (désactivé par défaut)
• Afficher un extrait (désactivé par défaut)

On peut regretter qu’on ne puisse pas afficher la 1ere image d’illustration, comme dans un agrégateur, car cela incite aussi à cliquer.

Comment le diffuser ?

Le plus simple est de proposer un widget semblable à celui des réseaux sociaux et de le mettre dans le footer ou le bandeau latéral de votre site comme celui-ci :

• Flux RSS

En cliquant dessus (sous Chrome), vous ouvrirez un onglet vous proposant d‘enregistrer le flux.

Remarquez que Feedly figure dans la liste des agrégateurs proposés (contrairement à Netvibes) et c’est pourquoi je l’ai choisi. Il vous faudra bien évidemment en amont avoir créé votre compte Feedly car en cliquant sur “s’abonner maintenant“, vous serez redirigé(e) vers lui.

Vers l’épreuve NDRC E5

Durant l’épreuve technique sous Wordpress, vous pouvez être amené(e) à :

• Insérer un flux RSS dans un article ou une page et le paramètrer (nombre de liens, date, extrait …). On vous donnera l’url du flux en /feed
• Insérer un icone RSS dans la liste des icones réseaux sociaux.

Durant l’épreuve écrite, il sera apprécié que vous puissiez indiquer l’utilité d’un flux RSS dans votre stratégie de visibilité. Il peut s’agir d’un icone présent sur un screenshot dans une question d’analyse de site web ou sur une question en rapport avec la conquête en B2B (un peu aussi en fidélisation client).

Dans la même catégorie :

Prestashop | OP Com dans la Eshop

17 février 2026 Aucun commentaire

PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour … vider les…

Lire la suite

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que…

Lire la suite

Prestashop | Le Service Après Vente

24 janvier 2026 Aucun commentaire

SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

Lire la suite

Prestashop | Manipuler la boutique

22 janvier 2026 2 commentaires

PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d’évaluation de l’épreuve technique, les manipulations…

Lire la suite

Prestashop | La Fiche Produit par l’exemple

16 janvier 2026 Aucun commentaire

PrestaShop | La Fiche Produit 🎧 Ecouter l’introduction audio 👉🏻 1er bloc d’évaluation de l’épreuve…

Lire la suite

Prestashop | les retours produits

18 décembre 2025 Un commentaire

restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront…

Lire la suite

L’article Flux RSS | L’agrégateur de votre actualité est apparu en premier sur st9ph.fr.

Installer Flamingo

• en backoffice, aller sur “extensions” puis sur ajouter
• Dans le moteur de recherche, tapez “Flamingo“
• Vérifiez qu’il s’agit bien de celle de Takayuki Miyoshi et cliquez sur “installer“

• Une fois l’installation terminée, cliquez sur “activer“

votre tableau de bord s’enrichit d’un nouvel item dans le menu. Flamingo offre deux rubriques : le carnet d’adresses et les messages entrants.

Mode d’emploi

Le carnet d’adresses

Le carnet d’adresses répertorie automatiquement tous les mails de votre CRM (utilisateurs et mails collectés par vos formulaires). Idéal comme source pour vos newsletters !

Attention toutefois à l’opt-in et à ne pas mélanger les données recueillies. Il faut, de toute manière, segmenter vos sources de données à chaque communication et Flamingo vous y aide en vous donnant la possibilité de filtrer votre table.

Il est donc prudent de créer un formulaire Contact Form 7 par type de communication afin de pouvoir filtrer les destinataires par consentements et cibles et de les nommer correctement, contrairement à moi dans l’aperçu ci-dessus : Contact Form 7 (1) n’apporte aucune information. Vous pouvez aussi renseigner les mots clés pour vous aider à mieux filtrer vos mailing lists.

Les messages entrants

la section “champs” liste les valeurs retournées par les formulaires complétés par vos visiteurs.

Idem, dans la construction de vos formulaires Contact Form 7, ne laissez pas les noms par défaut. Ci-dessus “checkbox-12” n’est pas très parlant. “objet-de-la-demande” serait plus adapté pour une consultation confortable des réponses.

La section “Meta” liste les informations techniques du “post” (envoi).

• remote ip indique l’IpV6 du poste émetteur. Cela sert surtout à repérer les réponses multiples (double envoi ou ruleskit de robots de spam)
• user-agent tente de vous donner l’OS et le navigateur utilisé pour l’envoi. C’est utilise surtout quand on utilise des technologies ou des langages dont la compatibilité n’est pas universelle (CF7 est universel)
• Url : si votre formulaire est présent sur plusieurs hot points, vous serez lequel le répondant a utilisé.

En résumé, c’est surtout en amont, dans la conception de vos formulaires CF7 que vous devrez veiller à un nommage parlant de vos titres et de vos champs afin que Flamingo, qui n’est qu’un registre de recueil, en fait, puisse vous donner des résultats parlants.

Vers l’épreuve E5B

Attention, depuis la directive pour l’épreuve 2025, la gestion de formulaire se fait obligatoirement via Spectra. Cet article n’a donc plus d’intérêt pour l’épreuve mais reste une alternative pour vos créations personnelles

Dans la même catégorie :

WordPress | Dépoussiérons la méthode d’abonnement

12 février 2026 Aucun commentaire

🚣🏻 C’est une telle galère de s’abonner simplement sur un site WordPress par défaut que…

Lire la suite

WordPress | trucs et astuces pour embellir vos articles

15 décembre 2025 Aucun commentaire

WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️…

Lire la suite

WordPress | un article en partant de zéro ?

4 décembre 2025 Aucun commentaire

WordPress | un article en partant de 0️⃣? 👉🏻 C’est le pire scénario qui puisse…

Lire la suite

WordPress | Méthode HABI et Yoast SEO synchronisés

20 novembre 2025 Aucun commentaire

WordPress | Méthode HABI & Yoast Durant l’épreuve E5B, vous serez amenez à concevoir ou…

Lire la suite

WordPress | Blocs Spectra remarquables

30 décembre 2024 Aucun commentaire

Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)….

Lire la suite

WordPress | Dompter Astra

29 décembre 2024 2 commentaires

Astra est un Theme Builder et c’est le thème imposé pour l’examen 🖥️ E5B de…

Lire la suite

L’article WordPress | Flamingo, le complément CRM de Contact Form 7 est apparu en premier sur st9ph.fr.