🎥 Regarde le tuto complet directement ici ⬇️
Introduction
Dans l’épreuve E5B du BTS NDRC, vous devez prouver que vous savez créer des pages claires, attractives et efficaces sous WordPress. Le slider (carrousel d’images avec texte et bouton) est un excellent moyen de mettre en avant une offre, une promo ou une information clé dès l’arrivée sur la page.
👉 Dans ce tutoriel, vous allez apprendre à insérer un slider Spectra, le configurer (hauteur, transitions, navigation), ajouter du contenu (titre, description, bouton), dupliquer des slides, et optimiser le rendu pour un affichage professionnel sur ordinateur et mobile.
1. Insérer le widget Slider sur votre page
Depuis le back-office, ouvrez la page à modifier (ex. Pages > Accueil > Modifier).
Cliquez sur + puis Slider (Spectra) et glissez-déposez le bloc à l’emplacement souhaité.
💡 Placez votre slider au-dessus de la ligne de flottaison (tout en haut de la page) pour maximiser sa visibilité.
2. Régler la structure : hauteur, effets et navigation
Sur la barre latérale droite (réglages du slider) :
- Hauteur : ajustez pour que le slider soit visible sans “écraser” le reste (ex. 60–75% de la hauteur d’écran).
- Transitions : choisissez slide, fade ou flip selon l’ambiance souhaitée.
- Vitesse : par défaut 800 ms pour la transition (fluide et lisible).
- Navigation : activez/désactivez les dots (points) et les flèches.
Astuce UX : gardez flèches + dots pour un repère visuel clair, surtout si vous avez plusieurs slides.
3. Ajouter un arrière-plan (image ou dégradé) et assurer la lisibilité
Pour chaque slide :
- Ouvrez le conteneur de la slide.
- Choisissez Image ou Dégradé comme arrière-plan.
- Change Image > sélectionnez une image nette et légère.
Lisibilité du texte :
- Dans Style > Titre / Description, mettez le texte en blanc (ou couleur contrastée).
- Si nécessaire, ajoutez un overlay (léger voile sombre) pour augmenter le contraste texte/image.
4. Renseigner le contenu : titre, description, bouton (CTA) + lien
Double-cliquez dans la zone texte pour saisir votre titre et votre description.
Pour le bouton (call to action) :
- Modifiez le libellé (ex. Découvrir, Contactez-nous).
- Dans Général > Call to Action > Link, collez l’URL interne (page Service/Contact) ou externe (YouTube, brochure).
Conseil métier : reliez le CTA à l’objectif commercial (ex. Demander un devis, Prendre RDV).
5. Créer plusieurs slides (dupliquer et varier)
Pour ajouter une nouvelle slide :
- Cliquez sur la flèche / commande d’ajout de slide.
- Reprenez la même logique : image de fond, titre, description, bouton.
- Variez légèrement les visuels et le message pour éviter l’effet “répétition”.
Tip productivité : créez une slide modèle, puis dupliquez et remplacez simplement image + texte.
6. (Optionnel) Ajouter des widgets à l’intérieur d’une slide
Vous pouvez insérer d’autres blocs à l’intérieur d’une slide (ex. Compteur, Icône, Badge).
Glissez le widget dans la slide puis positionnez-le proprement.
⚠️ Minimalisme = efficacité. N’ajoutez des widgets qu’avec une vraie intention (ex. Compteur jusqu’à la fin de l’offre).
7. Bonnes pratiques design & performance
- Images : privilégiez WebP ou JPEG optimisé, ≥1600 px de large, < 300 Ko si possible.
- Contraste : texte toujours lisible (overlay, ombre légère, teinte de fond).
- Nombre de slides : 2 à 4 suffisent — au-delà, l’attention chute.
Conclusion
Vous savez désormais créer un slider Spectra complet : ajouter le widget, régler la structure, intégrer vos visuels, rédiger un titre percutant, une description claire, et orienter l’utilisateur avec un CTA pertinent.
Pensez à vérifier le responsive et la lisibilité avant de cliquer sur Publier.
FAQ – Slider Spectra sur WordPress
Le slider WordPress est l’un des éléments visuels les plus regardés d’une page. Bien configuré, il met en avant une offre et oriente l’utilisateur grâce à un bouton d’action. Avec Spectra, vous pouvez créer un slider responsive, performant et lisible en quelques minutes. Voici les réponses aux questions fréquentes pour réussir votre slider.
1) Quelle taille d’image pour un slider lisible et rapide ?
Visez une largeur d’au moins 1600 px (ou 1920 px pour plein écran), poids < 300 Ko, format WebP si possible. Gardez un contraste suffisant entre image et texte.
2) Comment rendre le texte lisible sur l’image ?
Ajoutez un overlay (voile sombre/clair), augmentez la graisse du titre, choisissez une couleur contrastée et limitez la longueur du texte (1 titre + 1 phrase max).
3) Autoplay, vitesse, pause : quelles options choisir ?
Évitez un autoplay trop rapide. 800–1200 ms pour la transition, et 3–5 s de temps d’arrêt par slide. Si possible, pause au survol pour améliorer l’UX.
4) Comment lier le bouton du slider à une page interne/externe ?
Dans Général > Call to Action > Link, collez l’URL interne (Contact, Services) ou externe (YouTube, PDF). Pour un lien externe, vous pouvez l’ouvrir dans un nouvel onglet.
5) Peut-on ajouter d’autres widgets dans une slide ?
Oui, mais avec parcimonie. Ajoutez un compteur (offre limitée), une icône (repère visuel). Évitez de surcharger : lisibilité d’abord.
📌 Conseils pour l’examen (E5B)
- Justifiez vos choix (image, message, CTA).
- Montrez le responsive (desktop/tablette/mobile) et la lisibilité.
- Reliez chaque bouton à une action métier (devis, RDV, contact).
⚠️ Erreurs à éviter
- Texte illisible (pas d’overlay, contraste faible).
- Images lourdes qui ralentissent la page.
- Trop de slides, vitesse trop rapide.
- Oublier de publier ou de tester les liens.
✅ Checklist révision rapide
- Slider inséré au bon endroit
- Hauteur / transitions / navigation réglées
- Image de fond + overlay (lisible)
- Titre + description clairs
- Bouton (CTA) avec lien fonctionnel
- 2–4 slides cohérentes
- Modifications publiées
📚 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 !
