Spectra, c’est la nouveauté qui change tout pour l’E5B 2026. Jusqu’ici, les candidats bidouillaient avec Gutenberg natif pour créer des mises en page potables. Résultat : des pages basiques, des colonnes approximatives, pas de design professionnel.
Avec Spectra (anciennement Ultimate Addons for Gutenberg), tu disposes de blocs avancés qui transforment WordPress en véritable outil de création. Sliders, formulaires, FAQ avec schema.org, témoignages, compte à rebours… Le tout sans ligne de code.
Pourquoi Spectra est au programme 2026
Le référentiel mentionne explicitement cette extension comme outil de référence. Pourquoi ? Parce que le marché du travail l’exige. Les entreprises qui recrutent des profils NDRC veulent des gens capables de créer des pages d’atterrissage efficaces, pas des développeurs web.
Spectra répond à ce besoin. En quelques clics, tu crées des sections professionnelles. Le jury évaluera ta capacité à utiliser ces blocs de manière pertinente et esthétique.
Les 8 blocs Spectra indispensables pour l’E5B
Spectra propose plus de 30 blocs. Tu n’as pas besoin de tous les connaître. Voici ceux qui reviennent systématiquement dans les sujets d’examen.
1. Container (le plus important)
Le bloc Container est la base de toute mise en page Spectra. Il remplace le système de colonnes de Gutenberg natif avec bien plus d’options :
- Largeur personnalisable (pleine largeur, boxed, custom)
- Padding et margin responsive
- Couleur de fond, dégradé, image de fond
- Bordures et ombres
- Disposition flex avec alignement
Astuce jury : Commence toujours par un Container avant d’ajouter du contenu. Ça montre que tu structures ta page de manière professionnelle.
2. Info Box
L’Info Box combine icône + titre + texte dans un bloc élégant. Parfait pour présenter des caractéristiques produit, des avantages, des services.
Options clés :
- Position de l’icône (gauche, droite, haut)
- Bibliothèque d’icônes intégrée (Font Awesome)
- Taille et couleur personnalisables
- Lien cliquable sur tout le bloc
3. Call To Action (CTA)
Le bloc CTA crée des sections d’appel à l’action impactantes. Titre + description + bouton, avec un style visuel fort.
Le jury apprécie quand tu utilises un CTA en fin de page ou de section. Ça montre que tu penses conversion, pas juste contenu.
4. Testimonials (Témoignages)
Les témoignages clients renforcent la crédibilité. Le bloc Spectra permet d’afficher :
- Photo du client
- Nom et fonction
- Citation avec guillemets stylisés
- Note en étoiles
- Carrousel si plusieurs témoignages
Utilisation typique E5B : ajouter 2-3 témoignages sur une page de vente ou une landing page.
5. Countdown (Compte à rebours)
Créer l’urgence, c’est une technique de vente classique. Le bloc Countdown affiche un décompte jusqu’à une date/heure précise.
Cas d’usage E5B : promotion limitée, lancement de produit, inscription à un événement.
Attention : le jury peut te demander d’expliquer la dimension psychologique du compte à rebours (FOMO – Fear Of Missing Out).
6. FAQ (avec Schema.org)
Le bloc FAQ Spectra génère automatiquement le balisage Schema.org. Ça signifie que tes questions/réponses peuvent apparaître directement dans les résultats Google.
Double avantage :
- UX améliorée (accordéon cliquable)
- SEO renforcé (rich snippets Google)
Le jury vérifiera que tu comprends le lien entre FAQ et référencement naturel.
7. Image Gallery
Plus flexible que la galerie Gutenberg native. Options supplémentaires :
- Disposition masonry, grid, carousel
- Lightbox intégrée
- Légendes stylisées
- Filtres par catégorie
Utile pour présenter un portfolio produits ou des photos d’événements.
8. Forms (Formulaires)
Spectra Pro inclut un constructeur de formulaires. Tu peux créer des formulaires de contact, de demande de devis, d’inscription newsletter sans plugin supplémentaire.
Champs disponibles : texte, email, téléphone, textarea, checkbox, radio, select, date.
Les données sont envoyées par email ou stockées dans WordPress.
Réglages responsive : la clé de l’évaluation
Chaque bloc Spectra dispose de réglages Desktop / Tablet / Mobile. Le jury testera ta page sur différentes tailles d’écran. Si ta mise en page explose sur mobile, tu perds des points.
| Réglage | Desktop | Tablet | Mobile |
|---|---|---|---|
| Colonnes Container | 3 colonnes | 2 colonnes | 1 colonne (empilées) |
| Padding | 40px | 30px | 20px |
| Taille titre | 32px | 28px | 24px |
| Affichage image | À côté du texte | À côté du texte | Au-dessus du texte |
L’icône responsive dans la barre d’outils Spectra (Desktop/Tablet/Mobile) te permet de basculer entre les vues et d’ajuster chaque paramètre.
Workflow recommandé pour l’épreuve
- Structure d’abord : place tes Containers pour définir les sections
- Contenu ensuite : remplis avec Info Box, textes, images
- Design après : ajuste couleurs, espacements, polices
- Responsive enfin : vérifie Tablet et Mobile
Cette approche évite de perdre du temps à refaire la mise en page. Tu avances de manière méthodique, et le jury voit que tu as une méthode.
Erreurs fréquentes à éviter
Trop de blocs différents : une page avec 10 types de blocs différents, c’est le bazar. Limite-toi à 3-4 blocs récurrents pour une cohérence visuelle.
Oublier les liens : un bouton CTA sans lien, ça ne sert à rien. Vérifie que tous tes éléments cliquables pointent vers une destination.
Ignorer l’accessibilité : texte blanc sur fond clair = illisible. Contraste insuffisant = points en moins.
Sauter le responsive : 60% du trafic web est mobile. Le jury le sait.
Questions fréquentes (FAQ)
Spectra existe en version gratuite avec plus de 25 blocs. La version Pro ajoute des blocs avancés (formulaires, popup, conditions). Pour l’E5B, la version gratuite suffit dans la plupart des cas.
Spectra fonctionne avec Gutenberg natif, pas comme page builder séparé. Il est plus léger et plus rapide qu’Elementor. Pour des mises en page simples à moyennes, Spectra suffit. Pour des designs très complexes, Elementor reste plus puissant.
Installe Spectra sur un WordPress local ou de test. Crée une page vide et teste chaque bloc un par un. La documentation officielle sur wpspectra.com est complète avec des tutoriels vidéo.
