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.

Les codes d’accès à la boutique en ligne en mode commercial et ceux du Tchat en mode support sont dans les espaces réservés (lien “Drive & réseaux sociaux”)

L’article Book Prestashop est apparu en premier sur st9ph.fr.

L’article Book WordPress est apparu en premier sur st9ph.fr.