BTS NDRC, épreuve E5B : tutoriel WordPress

Créer une fenêtre surgissante (pop-up) avec Spectra

Une fenêtre surgissante, ou pop-up, s'ouvre par-dessus la page pour porter un seul message : une offre de lancement, une invitation à un salon, l'inscription à la lettre d'information. Bien réglée, elle attire l'attention du client et lui propose une action simple ; mal réglée, elle le gêne et le fait partir. Pour l'entreprise, c'est un moyen rapide de mettre en avant une offre ou un événement.

Dans la circulaire

Famille « Contenu » de la liste WordPress : « Créer un pop up via Spectra Pop Up Builder (Constructeur de fenêtre surgissante) » (annexe VI-3 de la circulaire nationale d'organisation, session 2026).

Critères de la grille d'évaluation concernés : 1. « la qualité et la pertinence des contenus publiés » ; 6. « la pertinence des choix et des actions menées pour développer les ventes et créer de la valeur » ; 7. « la qualité de l'assistance et la prise en compte des risques et de la réglementation ».

Où le trouver

La liste des fenêtres : Spectra Legacy › Constructeur de fenêtre surgissante, appelé « Popup Builder » dans la documentation de Spectra.

Une nouvelle fenêtre : bouton Créer une nouvelle fenêtre surgissante, en haut de la liste.

Les étapes

Ouvrir Spectra Legacy > Constructeur de fenêtre surgissante. La liste montre les fenêtres existantes avec leur titre, leur type, leur auteur et une colonne « Activer/désactiver » ; sur le modèle, elle est vide (« Aucune fenêtre surgissante trouvée »).
Capture 1. Spectra Legacy > Constructeur de fenêtre surgissante : encadrés, le menu, le bouton « Créer une nouvelle fenêtre surgissante » et la colonne « Activer/désactiver » :
Voir la capture en grand
Cliquer sur Créer une nouvelle fenêtre surgissante, puis choisir le type : « Popup », une fenêtre par-dessus la page, ou « Info Bar », une barre d'information.
Donner un titre à la fenêtre, qui sert à la retrouver dans la liste, puis la composer avec des blocs, comme une page : un titre, une phrase, un bouton (voir le tutoriel sur les blocs).
Régler la fenêtre dans le panneau de réglages (interface en anglais) : dimensions (« Popup Width & Height »), voile derrière la fenêtre (« Overlay »), fermeture : « Dismissible » (le visiteur peut la fermer), « Close on Overlay Click » (fermeture par un clic à côté de la fenêtre), icône de fermeture et sa position. Pour la répétition, « Repetition per Browser » limite le nombre d'affichages dans un même navigateur, quand « Repeat Infinitely » montre la fenêtre à chaque fois.
Cliquer sur Publier.
Revenir à la liste : l'interrupteur de la colonne Activer/désactiver met la fenêtre en service ou l'arrête, aussitôt, sans autre enregistrement. Une fenêtre désactivée ne s'affiche pas sur le site.
Contrôler sur le site, de préférence dans une fenêtre de navigation privée : avec une répétition limitée, un navigateur qui a déjà montré la fenêtre ne la montre plus.

Attention

Le choix des pages où la fenêtre s'affiche et de son déclencheur (au chargement de la page, quand le visiteur s'apprête à partir, au clic sur un élément) fait partie de Spectra Pro, que le modèle n'a pas : son menu propose « Obtenir Spectra Pro ». Ne pas promettre ces réglages dans une réponse.

Captures réalisées sur le site modèle Alia Nature (WordPress 7.0.2, thème Astra 4.13, extension Spectra) : selon la version installée le jour de l'épreuve, un libellé peut changer.

Bien concevoir une fenêtre surgissante

Une bonne fenêtre surgissante porte un seul message, propose une seule action et se ferme facilement. Exemple avec une offre d'Alia Nature :

Exemple : une fenêtre surgissante pour Alia Nature
Élément	Réussi	À éviter
Message	« -15 % sur les infusions d'hiver jusqu'au 31 décembre » : une offre, une date	Un long texte de présentation de la marque
Bouton	« Je découvre les infusions », vers la page « Nos produits »	Plusieurs boutons, ou un bouton sans lien
Fermeture	Une croix visible et la fermeture par un clic à côté	Une fenêtre que le client ne sait pas fermer
Répétition	« Repetition per Browser » : la fenêtre ne revient pas sans cesse	« Repeat Infinitely » : elle réapparaît à chaque fois
Inscription	Une case de consentement et un lien vers la politique de confidentialité	Une adresse e-mail demandée sans dire à quoi elle servira

Un seul message et une seule action par fenêtre.
Un texte court, lisible sur mobile sans faire défiler.
Un bouton dont le lien est testé sur le site.

Sur le modèle, aucune fenêtre surgissante n'existe encore (capture 1) : tout est à créer. Avant de commencer, fixer le message, l'action attendue et la page vers laquelle mènera le bouton ; une fenêtre improvisée tourne vite au texte de présentation que le client ferme sans le lire.

À l'épreuve

Exemple de consigne

Alia Nature lance ses infusions d'hiver. Créez une fenêtre surgissante qui annonce l'offre de lancement (-15 % jusqu'au 31 décembre), avec un bouton vers la page « Nos produits ». Le visiteur doit pouvoir la fermer facilement et ne la voir qu'une fois. Activez-la, puis vérifiez-la sur le site.

Ce que l'examinateur vérifie

Une fenêtre publiée et activée dans la liste.
Un message court, exact et sans faute, et un bouton qui mène à la bonne page.
Une fermeture facile (croix, clic à côté) et une répétition limitée.
Un contrôle sur le site.

Les erreurs fréquentes

Publier la fenêtre sans l'activer dans la liste.
Laisser « Repeat Infinitely » : la fenêtre revient sans cesse.
Oublier le lien du bouton.
Chercher le choix des pages ou du déclencheur, réservé à Spectra Pro.
Croire la fenêtre en panne parce qu'elle ne s'affiche plus : la tester dans une fenêtre de navigation privée.

L'essentiel à retenir

Spectra Legacy > Constructeur de fenêtre surgissante, « Créer une nouvelle fenêtre surgissante » : type Popup ou Info Bar, contenu en blocs.
Réglages : dimensions, fermeture (« Dismissible », « Close on Overlay Click »), répétition (« Repetition per Browser ») ; puis « Publier ».
Interrupteur « Activer/désactiver » dans la liste, puis contrôle sur le site en navigation privée.

Voir aussi

Dans la série des tutoriels WordPress :

Dans le tutoriel WordPress complet :

Les blocs Spectra et la fenêtre surgissante

Documentation officielle de Spectra, en anglais : créer une fenêtre surgissante.

Tous les tutoriels WordPress