Jour 17 – WordPress : Créer un pop-up et une info bar avec Spectra
Cet article fait partie d’une série de 30 exercices quotidiens pour réviser l’épreuve E5B (Relation client à distance et digitalisation) du BTS NDRC – session 2026.
Chaque jour, tu travailles sur un sujet concret, construit à partir des attendus réels de l’épreuve : un rappel de cours, un cas pratique et une correction détaillée.
Tu peux t’entraîner directement sur notre plateforme BTS NDRC Studalya WEB ou depuis n’importe quelle autre plateforme.
Compétences du jour :
Dans cet exercice, tu travailles les compétences suivantes issues de la circulaire BTS NDRC 2026 :
- Créer un pop-up ou une info bar via Spectra Pop Up Builder (Constructeur de fenêtre surgissante)
Tu peux retrouver l’ensemble des compétences mobilisables sur la circulaire 2026 du BTS NDRC.
Dans cet article
📚 Rappel de cours
Spectra Pop Up Builder permet de créer des fenêtres surgissantes (pop-ups) et des barres d’information (info bar) sans code. Ces éléments sont utiles pour capter l’attention, promouvoir une offre ou informer les visiteurs. Un pop-up peut être déclenché par différents événements : chargement de page, scroll, clic, intention de sortie… Une info bar est une bande fixe en haut ou en bas de l’écran.
Erreurs classiques :
- créer un pop-up sans définir ses conditions d’affichage
- ne pas vérifier le rendu en frontoffice
- laisser un pop-up avec un contenu vide ou générique.
🎯 SUJET DU JOUR — Jour 17 / 30
🏢 Contexte entreprise
Tu utilise notre plateforme BTS NDRC Studalya WEB :
Tu travailles pour Sucré’ative, une confiserie artisanale spécialisée dans la création de bonbons personnalisés.
Tu trouveras plus d’informations sur l’univers de la marque ici : Sucré’ative
ℹ️ Pense à d’abord te familiariser avec l’environnement Sucré’ative si ça n’est pas déjà en regardant comment sont construits les sites WordPress et PrestaShop.
L’objectif de Sucré’ative est aujourd’hui de développer sa présence en ligne pour toucher davantage une clientèle B2B (entreprises, événements, agences).
L’entreprise souhaite afficher un pop-up pour promouvoir son offre B2B et une barre d’information annoncer une promo de la semaine.
Ta mission : faire afficher le pop-up
Tu n’utilise pas Studalya WEB :
Tu travailles pour Harmonia Instruments, une entreprise spécialisée dans la vente d’instruments de musique pour les particuliers et les professionnels.
L’entreprise propose :
- guitares, pianos, batteries
- accessoires et équipements
- services d’accompagnement pour musiciens
Jusqu’à présent, Harmonia était principalement positionnée sur une clientèle B2C.
Aujourd’hui, elle souhaite se développer sur un marché B2B : écoles de musique, studios, associations, événements.
Un pop-up d’accueil doit informer les écoles de musique de l’offre tarifaire spéciale et une info bar doit afficher les horaires d’ouverture.
Ta mission : faire afficher le pop-up
ℹ️ Ce contexte sera utilisé tout au long des 30 jours de révision.
📝 Travail demandé
Question 1
Crée un pop-up via Spectra Pop Up Builder avec un titre accrocheur, un texte de présentation de l’offre et un bouton d’appel à l’action.
🧠 Méthode
Dans le backoffice WordPress, cherche Spectra > Pop Up Builder (ou constructeur de fenêtre surgissante). Créer un nouveau pop-up, ajouter les blocs de contenu.
💡 Indice :
Le Pop Up Builder de Spectra utilise le même éditeur Gutenberg — tu peux utiliser tous les blocs habituels à l’intérieur du pop-up.
Question 2
Configure le déclencheur du pop-up pour qu’il s’affiche automatiquement 3 secondes après le chargement de la page.
🧠 Méthode
Dans les paramètres du pop-up > section Déclencheur ou Trigger > sélectionner « Délai après chargement » > saisir 3 (secondes).
💡 Indice :
Un pop-up trop immédiat (0 seconde) est intrusif. 3 secondes est un bon compromis.
Question 3
Définis les conditions d’affichage pour que le pop-up ne s’affiche que sur la page d’accueil.
🧠 Méthode
Dans les paramètres du pop-up > section Conditions d’affichage > choisir « Page spécifique » > sélectionner la page d’accueil.
💡 Indice :
Sans condition d’affichage, le pop-up s’affiche sur toutes les pages — ce qui peut nuire à l’expérience utilisateur.
Question 4
Crée une info bar (barre d’information) en haut de toutes les pages avec un texte court lié au contexte.
🧠 Méthode
Spectra > Pop Up Builder > Nouveau > Type : Info Bar. Choisir la position (haut ou bas). Ajouter le contenu texte.
💡 Indice :
L’info bar reste visible pendant toute la navigation de l’utilisateur — le contenu doit donc être court et pertinent.
Question 5
Vérifie en frontoffice que le pop-up et l’info bar s’affichent correctement selon les conditions définies.
🧠 Méthode
Ouvrir une fenêtre de navigation privée (pour éviter le cache et les cookies) > aller sur la page d’accueil > attendre 3 secondes > vérifier le pop-up > naviguer sur d’autres pages > vérifier l’info bar.
💡 Indice :
Utiliser une fenêtre privée est essentiel car le pop-up peut être configuré pour ne s’afficher qu’une fois par session.
✅ CORRECTION
Question 1
Spectra (dans le menu du backoffice) > Pop Up Builder > Ajouter nouveau. Dans l’éditeur Gutenberg : ajouter un bloc Titre (accrocheur), un bloc Paragraphe (présentation de l’offre), un bloc Bouton (appel à l’action avec lien). Sauvegarder.
❌ erreurs fréquentes :
ne pas ajouter de bouton d’action — un pop-up sans CTA n’a pas d’objectif commercial.
Question 2
Dans les paramètres du pop-up (onglet Paramètres ou Settings) > Déclencheur : sélectionner « Délai » > saisir 3 dans le champ secondes > Enregistrer.
❌ erreurs fréquentes :
confondre le déclencheur (quand le pop-up s’affiche) avec les conditions (où il s’affiche).
Question 3
Dans le même onglet Paramètres > Conditions d’affichage > Ajouter une condition > Type : Page > sélectionner la page d’accueil. Enregistrer.
❌ erreurs fréquentes :
laisser « Toutes les pages » sélectionné quand la question demande une page spécifique.
Question 4
Spectra > Pop Up Builder > Ajouter nouveau > dans les options de type, sélectionner « Info Bar » au lieu de « Pop-up ». Choisir Position : Haut. Ajouter un bloc Paragraphe avec le texte court (ex : « Offre spéciale écoles : -15% sur tout le catalogue cette semaine »). Configurer les conditions pour toutes les pages. Publier.
❌ erreurs fréquentes :
créer un pop-up standard au lieu d’une info bar.
Question 5
Ouvrir une fenêtre privée (Ctrl+Maj+N ou Ctrl+Maj+P selon le navigateur). Aller sur la page d’accueil. Attendre 3 secondes — le pop-up doit apparaître. Vérifier le contenu du pop-up. Fermer le pop-up. Naviguer vers une autre page — l’info bar doit rester visible.
❌ erreurs fréquentes :
tester sans fenêtre privée et avoir un pop-up déjà vu donc non affiché.
🔁 Demain — Jour 18
PrestaShop : Gérer clients, groupes et transporteurs
— L’équipe Studalya