Créer un pop-up avec Spectra sur WordPress

Points clés de la vidéo Créer un Pop-Up avec Spectra

Dans cette démonstration, tu apprends à concevoir une fenêtre surgissante avec Spectra : création, ajout de contenu (titre, texte, bouton), style, options générales (taille, alignement, répétition), publication et test. Idéal pour mettre en avant une offre, un formulaire ou une annonce d’événement.

Introduction

Dans l’épreuve E5B du BTS NDRC, on attend de toi que tu saches attirer l’attention au bon moment sans gêner la navigation. La fenêtre modale (aussi appelée pop-up) permet d’afficher un message court avec un appel à l’action (ex. “Contactez-nous”, “S’inscrire”). L’objectif : informer, convertir, tout en restant pertinent et agréable pour l’utilisateur.

1. Accéder au constructeur

Depuis le back-office, ouvre Spectra > Constructeur de fenêtres surgissantes puis clique sur Créer une nouvelle fenêtre. Donne un titre clair (ex. “Pop-up EP Studly”) pour la retrouver facilement.

2. Générer la fenêtre de base

Clique sur l’onglet de la fenêtre : Spectra crée automatiquement un gabarit. Tu peux déjà la déplacer dans la page de prévisualisation et vérifier son comportement.

3. Ajouter le contenu (titre, texte, bouton)

• Ajoute un titre court et direct (ex. “Besoin d’aide ?”).
• Saisis une description concise (1–2 phrases).
• Ajoute un bouton (ex. “Contactez-nous”). Objectif : être compris en 2 secondes.

4. Relier le bouton à une page

Sélectionne le bouton > Call to Action > Link > colle l’URL (ex. page Contact).

Astuce : coche “Ouvrir dans un nouvel onglet” uniquement pour des liens externes.

5. Personnaliser le style (lisibilité d’abord)

Dans l’onglet Style :

• Couleurs du titre, du texte, des icônes et du bouton.
• Bordures et espacements pour aérer.
• Vérifie le contraste (accessibilité) et la taille des textes pour mobile.

6. Régler les options générales

Dans Général :

• Largeur/hauteur adaptées au message (évite les fenêtres trop grandes).
• Alignement (centré recommandé).
• Répétition :
• Repeat infinitely désactivé dans la plupart des cas pour ne pas agacer.
• Sinon, définis un nombre de réapparitions précis si demandé dans le sujet E5B.

7. Publier et tester

Clique sur Publier, puis vérifie en front :

• L’affichage sur PC, tablette, mobile.
• Le fonctionnement du bouton.
• L’absence de conflit avec d’autres éléments (barre de cookies, en-tête collant, etc.).

Conclusion

Bien configurée, la fenêtre surgissante devient un levier d’engagement : elle met en avant l’information utile au bon moment. Pour l’E5B, explique pourquoi tu l’utilises (objectif métier) et comment tu as garanti lisibilité, pertinence et confort de navigation.

FAQ – Pop-up Spectra sous WordPress

Cette FAQ répond aux questions les plus fréquentes pour intégrer une fenêtre modale efficace, sans alourdir l’expérience.

1) À quoi sert une pop-up ?

À promouvoir une action prioritaire (inscription, prise de contact, offre limitée) sans modifier la structure de la page. Utilisée avec parcimonie, elle améliore la conversion.

2) Quand l’afficher : au chargement, au clic, ou à la sortie ?

Pour une offre générale : au chargement après un léger délai (1–2 s).
Pour une aide contextuelle : au clic sur un bouton d’assistance.
Pour récupérer un abandon : à la sortie (si l’option existe via extension).

3) Dois-je activer la répétition en boucle de la pop-up ?

Rarement. Préfère une apparition limitée (1 fois par session ou un nombre précis) afin d’éviter l’irritation et la baisse de performance.

4) Quelles bonnes pratiques de contenu pour une pop-up ?

Un titre court, un bénéfice explicite, un CTA unique. Évite les pavés de texte : la modale sert à décider, pas à tout expliquer.

5) Le SEO est-il impacté par une pop-up ?

Indirectement : une modale trop intrusive peut augmenter le taux de rebond. Garde-la légère, non bloquante et accessible sur mobile.

Conseils pour l’examen (E5B)

• Justifie l’usage : “collecter des leads”, “mettre en avant une promo”, “orienter vers Contact”.
• Montre les réglages clés (lien du bouton, répétition limitée, responsive).
• Soigne la lisibilité : contraste, tailles de police, espacement.

Erreurs à éviter

• Répétition infinie non justifiée.
• Bouton sans lien ou lien erroné.
• Texte trop long, fenêtre trop grande, contraste faible.
• Modale qui masque la navigation sans possibilité de fermeture claire.

Checklist révision rapide

• Publication + tests desktop/mobile effectués.
• Fenêtre créée dans Spectra et nommée clairement.
• Titre, description et CTA ajoutés.
• Lien du CTA vérifié.

📚 Envie d’aller plus loin ? Découvrez notre guide complet BTS NDRC E5B 2025-2026 – Formation WordPress BTS NDRC 2025 pour maîtriser toutes les compétences de l’épreuve !

🎥 Retrouvez tous nos tutos en vidéo sur la playlist YouTube dédiée !