Wordpress | Fenêtres "surgissantes" de 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) au programme dorénavant de l’épreuve technique NDRC E5B.

plan de l’article

Conception
Paramétrage
Publication
Vers l'épreuve E5B

Conception

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

l’interface se présente comme celle d’un article ou d’une page.

Saisissez un titre (juste pour vous, il n’est pas visible par vos visiteurs)
choisissiez le type de fenêtre que vous voulez placer sur votre site

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

illustration 2 : le pop-up

Cliquez sur « pop-up »

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

C’est quoi un CTA, déjà ?

Le CTA (call to action) est un élément réactif, souvent un bouton, qui a pour but de susciter l’engagement (le rebond vers une offre commerciale). Voir la ficher Engager ses Lead du drive.

Je souhaiterais présenter mes vœux de bonne année 2025 à tous mes visiteurs. Une image et un message me suffiront. Supprimons la composition proposée pour repartir de zéro :

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

C’est quoi un menu « hamburger » ?

On appelle menu hamburger ou empilé un menu sous forme de 3 barres ou 3 points superposés verticalement. Popularisés par l’interface mobile, ces menus se généralisent, notamment sur les barres d’outils contextuelles et les blocs de l’éditeur de WordPress n’y échappent pas.

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, très court).

bonne-annee Télécharger

J’ai créé une image d’illustration que vous pouvez télécharger si vous voulez faire comme moi.

Tout parcourir > Media > image
Téléverser

Ajoutons un texte en cliquant sur le + en bas à droite de l’image quand on pointe dessus.
Paragraphe

Enregistrer le brouillon

Paramétrage

Parcourrez les onglets ci-dessous pour découvrir les différents options de comportement:

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 :

Publication

Une fois votre brouillon opérationnel, cliquez sur publier.
Développer le choix « publier : maintenant » pour afficher le calendrier programmer son affichage

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

Cliquer sur publier

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

Le résultat :

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.

Vers l’épreuve E5B

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

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.

150 visites

Autres articles du blog sur WordPress :