Slider homepage : 12 alternatives qui convertissent mieux en 2026 (avec code)
Sur les 47 audits homepage menés pour des annonceurs LFDN depuis dix-huit mois, le slider hero arrive encore en deuxième position des éléments présents (43 % des sites audités). Et dans 9 cas sur 10, c’est le bloc le moins regardé, le moins cliqué, et le plus lourd en perf. Le carrousel d’images en haut de page, c’est l’illusion confortable : “on n’a pas su trancher, alors on met les trois messages en rotation”. Sauf que personne ne lit le slide 2, encore moins le slide 3. Voici 12 alternatives qu’on a vues fonctionner, classées avec leur score de conversion estimé, leur effort dev, et pour cinq d’entre elles, le code HTML/CSS prêt à coller.
Pourquoi le slider classique a perdu
Quelques chiffres tirés de nos audits 2025-26 (12 sites passés en heatmap + session replay + A/B test) :
- Slide 1 vu par 100 % des visiteurs. Slide 2 vu (réellement affiché plus de 2 s) par 9 %. Slide 3 par 2 %.
- Taux de clic sur le CTA du slide 1 : 1,4 %. Sur slide 2 : 0,2 %. Sur slide 3 : 0,05 %.
- Poids moyen d’un slider 3 slides full-width : 1,2 Mo (3 images en 1920 × 900). Sur Lighthouse mobile, ça pèse 0,5 à 0,8 s de LCP.
- Taux d’interaction (clic sur les flèches ou les dots) : 1,1 %. C’est-à-dire que 98,9 % des visiteurs ne pilotent jamais le slider, ils subissent l’autoplay ou voient juste le slide 1.
En clair : vous payez 1,2 Mo de bande passante et 0,5 s de LCP pour montrer un slide à 9 % des gens et déclencher un clic à 0,2 % d’entre eux. La page d’accueil est l’endroit le plus précieux du site. Le slider est probablement le pattern qui le gâche le plus.
[Capture : heatmap d’un slider 3 slides, dégradé d’attention slide 1 → slide 3]
Les 12 alternatives
1. Hero statique haute conversion
Une image (ou une illustration), un titre clair, un sous-titre court, un CTA primaire. Point. C’est ennuyeux à lire ? C’est ce qui convertit le mieux dans 70 % des cas.
- Delta conversion estimé : +8 à +18 % vs slider
- Effort dev : 2 h
- Secteurs gagnants : SaaS B2B, services pro, finance
2. Hero vidéo background
Vidéo silencieuse en boucle, courte (8-15 s), couvrant 50 à 70 % de la fold. Texte par-dessus avec un calque sombre pour lisibilité. À réserver si vous avez une bande montrable.
- Delta conversion estimé : +5 à +14 % (mais -5 à -10 % si bande médiocre)
- Effort dev : 3 h + production vidéo
- Secteurs gagnants : hôtellerie, voyage, mode, immobilier prestige
3. Hero animation Lottie
Animation vectorielle légère (JSON, ~30 à 80 Ko) qui anime un schéma produit, un personnage, un parcours. Performant sur mobile, modernise sans casser la perf.
- Delta conversion estimé : +6 à +12 %
- Effort dev : 4 h + production motion (1 à 3 jours d’illustrateur)
- Secteurs gagnants : SaaS, fintech, edtech, healthtech
4. Hero produit unique (un produit, une USP)
Une seule image produit en hero, gros plan stylé, USP en titre, prix visible si pertinent, CTA “Voir le produit” ou “L’ajouter au panier”. Pratique e-commerce DTC avec un produit phare ou une nouveauté.
- Delta conversion estimé : +9 à +18 % sur fiche produit phare
- Effort dev : 2 h
- Secteurs gagnants : e-commerce DTC, marques mono-produit
5. Hero tabs (3 audiences cliquables)
Trois onglets en haut de hero : “Je suis particulier / Je suis pro / Je suis investisseur” (ou équivalent métier). Chaque onglet révèle un hero spécifique. Versus slider : c’est l’utilisateur qui choisit, pas une rotation aveugle.
- Delta conversion estimé : +10 à +16 % (sur sites multi-audiences)
- Effort dev : 5 h
- Secteurs gagnants : assurance, banque, énergie, multi-segment
6. Hero quiz interactif
“En 3 questions, on vous oriente vers la bonne offre”. Le hero devient un mini-quiz. Engagement très fort, mais demande un travail d’arborescence sérieux derrière.
- Delta conversion estimé : +12 à +22 % (mais -3 % si quiz mal calibré ou trop long)
- Effort dev : 12 h
- Secteurs gagnants : assurance, mutuelle, formation, beauté DTC
7. Hero search bar
Une barre de recherche centrale, large, focus auto sur desktop, suggestions au-dessous. Modèle Airbnb, Booking, marketplaces. À réserver aux sites où la recherche est le point d’entrée logique.
- Delta conversion estimé : +15 à +25 % sur marketplaces et annuaires
- Effort dev : 6 h + back search
- Secteurs gagnants : marketplaces, annuaires, e-commerce catalogue large
8. Hero stats live
Trois ou quatre chiffres clés actualisés (clients servis, montant économisé, projets livrés, satisfaction). Compteurs animés au scroll-in. Crédibilise immédiatement.
- Delta conversion estimé : +4 à +9 %
- Effort dev : 3 h
- Secteurs gagnants : conseil, SaaS B2B, fintech
9. Hero proof social (logos clients)
Bandeau de logos clients en hero, juste sous le titre. À réserver à ceux qui peuvent aligner du lourd (CAC 40, références reconnues du secteur).
- Delta conversion estimé : +5 à +11 %
- Effort dev : 1 h
- Secteurs gagnants : B2B enterprise, conseil, agences
10. Hero comparatif (vous vs concurrent générique)
Tableau side-by-side : “Solutions classiques” vs “Nous”. 4 lignes max. Ton direct, sans nommer les concurrents.
- Delta conversion estimé : +7 à +13 %
- Effort dev : 2 h
- Secteurs gagnants : SaaS challengers, fintech, services pros disruptifs
11. Hero before / after
Slider horizontal (le bon usage du slider !) qui montre un avant/après produit ou service. Pratique pour beauté, rénovation, dentisterie, formation.
- Delta conversion estimé : +8 à +15 %
- Effort dev : 4 h
- Secteurs gagnants : beauté, rénovation, photographie, fitness
12. Hero AR / 3D (e-commerce premium)
Modèle 3D du produit pivotable au scroll ou au drag, voire viewer AR sur mobile. Lourd techniquement, mais luxe et meuble en font une signature.
- Delta conversion estimé : +6 à +14 % (et -2 à -8 % si perf mal gérée)
- Effort dev : 20 h + assets 3D
- Secteurs gagnants : luxe, mobilier, lunetterie, sneakers premium
Tableau récap
| # | Pattern | Delta conv. estimé | Effort dev | Secteur gagnant |
|---|---|---|---|---|
| 1 | Hero statique | +8 à +18 % | 2 h | SaaS B2B, services pros |
| 2 | Hero vidéo bg | +5 à +14 % | 3 h + prod | Hôtellerie, mode |
| 3 | Hero Lottie | +6 à +12 % | 4 h + motion | SaaS, fintech, edtech |
| 4 | Hero produit unique | +9 à +18 % | 2 h | E-commerce DTC |
| 5 | Hero tabs | +10 à +16 % | 5 h | Assurance, banque |
| 6 | Hero quiz | +12 à +22 % | 12 h | Assurance, formation, beauté |
| 7 | Hero search bar | +15 à +25 % | 6 h + back | Marketplaces |
| 8 | Hero stats live | +4 à +9 % | 3 h | Conseil, SaaS B2B |
| 9 | Hero proof logos | +5 à +11 % | 1 h | B2B enterprise |
| 10 | Hero comparatif | +7 à +13 % | 2 h | SaaS challenger |
| 11 | Hero before/after | +8 à +15 % | 4 h | Beauté, rénovation |
| 12 | Hero AR/3D | +6 à +14 % | 20 h | Luxe, mobilier |
| – | Slider classique (référence) | 0 % | – | – |
[Schéma : matrice impact / effort des 12 alternatives positionnées en quadrants]
Code copy-paste pour 5 alternatives
Hero statique haute conversion
<section class="hero-static">
<div class="hero-static__inner">
<p class="eyebrow">SaaS facturation B2B</p>
<h1>Encaissez vos factures 12 jours plus tôt en moyenne</h1>
<p class="subtitle">
Relance automatique, multi-canal, sans effort manuel.
Essai gratuit 14 jours, sans carte bancaire.
</p>
<div class="cta-row">
<a class="cta-primary" href="/inscription">Démarrer mon essai gratuit</a>
<a class="cta-secondary" href="/demo">Voir une démo (2 min)</a>
</div>
<p class="trust">Plus de 1 200 PME nous font confiance.</p>
</div>
<div class="hero-static__visual">
<img src="/hero/dashboard.webp" alt="Tableau de bord facturation" width="800" height="600" loading="eager" fetchpriority="high">
</div>
</section>.hero-static {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
max-width: 1200px; margin: 0 auto; padding: 80px 24px;
}
.hero-static__inner .eyebrow {
font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
color: #2563eb; font-weight: 600; margin: 0 0 12px;
}
.hero-static h1 {
font-size: clamp(32px, 4vw, 52px); line-height: 1.1; margin: 0 0 16px;
font-weight: 700; color: #0f172a;
}
.hero-static .subtitle {
font-size: 18px; line-height: 1.5; color: #475569; margin: 0 0 24px;
}
.cta-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cta-primary {
background: #0f172a; color: #fff; padding: 14px 24px; border-radius: 10px;
font-weight: 600; text-decoration: none;
}
.cta-secondary {
padding: 14px 24px; border-radius: 10px; text-decoration: none; color: #0f172a;
border: 1px solid #cbd5e1; font-weight: 600;
}
.trust { font-size: 13px; color: #64748b; }
.hero-static__visual img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(2,6,23,.18); }
@media (max-width: 900px) { .hero-static { grid-template-columns: 1fr; padding: 48px 16px; } }Hero vidéo background
<section class="hero-video">
<video class="hero-video__bg" autoplay muted loop playsinline poster="/hero/poster.webp">
<source src="/hero/loop.webm" type="video/webm">
<source src="/hero/loop.mp4" type="video/mp4">
</video>
<div class="hero-video__overlay"></div>
<div class="hero-video__content">
<h1>L'hôtel que vous n'oublierez pas</h1>
<p>Suites face mer, restaurant étoilé, spa Cinq Mondes. À 1 h de Paris.</p>
<a class="cta-primary" href="/reserver">Vérifier les disponibilités</a>
</div>
</section>.hero-video { position: relative; height: 88vh; min-height: 560px; overflow: hidden; color: #fff; }
.hero-video__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-video__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
z-index: 1;
}
.hero-video__content {
position: relative; z-index: 2; max-width: 720px;
padding: 0 24px; height: 100%; display: flex; flex-direction: column;
justify-content: center; gap: 20px;
}
.hero-video__content h1 { font-size: clamp(40px, 6vw, 72px); margin: 0; font-weight: 700; }
.hero-video__content p { font-size: 18px; opacity: .92; max-width: 540px; }
.hero-video .cta-primary { display: inline-block; background: #fff; color: #111; }
@media (prefers-reduced-motion: reduce) {
.hero-video__bg { display: none; }
.hero-video { background: url('/hero/poster.webp') center/cover no-repeat; }
}Hero animation Lottie
<section class="hero-lottie">
<div class="hero-lottie__copy">
<h1>Comprenez où passe votre cash en 30 secondes</h1>
<p>Connecte vos comptes, catégorise tout, vous suivez le pouls de votre boîte sans Excel.</p>
<a class="cta-primary" href="/essai">Connecter mes comptes</a>
</div>
<div class="hero-lottie__viz">
<dotlottie-player
src="/hero/cash-flow.lottie"
autoplay loop speed="1"
style="width: 100%; height: auto;">
</dotlottie-player>
</div>
</section>
<script src="https://unpkg.com/@dotlottie/player-component@2/dist/dotlottie-player.mjs" type="module"></script>.hero-lottie {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
max-width: 1200px; margin: 0 auto; padding: 80px 24px;
}
.hero-lottie h1 { font-size: clamp(32px, 4vw, 52px); margin: 0 0 16px; }
.hero-lottie p { font-size: 18px; color: #475569; margin: 0 0 24px; }
.hero-lottie__viz { background: #f8fafc; border-radius: 24px; padding: 24px; }
@media (max-width: 900px) { .hero-lottie { grid-template-columns: 1fr; padding: 48px 16px; } }Hero tabs (3 audiences)
<section class="hero-tabs">
<nav class="tabs" role="tablist">
<button role="tab" aria-selected="true" data-target="part">Particulier</button>
<button role="tab" aria-selected="false" data-target="pro">Professionnel</button>
<button role="tab" aria-selected="false" data-target="invest">Investisseur</button>
</nav>
<div class="tab-panels">
<div class="panel active" id="part">
<h1>Investissez à partir de 50 €</h1>
<p>Premier compte ouvert en 3 minutes, sans frais d'entrée.</p>
<a class="cta-primary" href="/particulier">Ouvrir mon compte</a>
</div>
<div class="panel" id="pro" hidden>
<h1>Placez la trésorerie de votre PME</h1>
<p>Rendement net jusqu'à 3,8 %, capital garanti à 100 %.</p>
<a class="cta-primary" href="/pro">Demander un devis</a>
</div>
<div class="panel" id="invest" hidden>
<h1>Diversifiez sur des actifs premium</h1>
<p>Private equity, immobilier locatif premium, dette privée.</p>
<a class="cta-primary" href="/invest">Prendre rendez-vous</a>
</div>
</div>
</section>
<script>
const tabs = document.querySelectorAll('.tabs button');
const panels = document.querySelectorAll('.panel');
tabs.forEach(tab => tab.addEventListener('click', () => {
tabs.forEach(t => t.setAttribute('aria-selected', t === tab));
panels.forEach(p => p.hidden = p.id !== tab.dataset.target);
}));
</script>.hero-tabs { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
.tabs { display: flex; gap: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 32px; }
.tabs button {
background: transparent; border: 0; padding: 14px 18px; font-size: 15px;
font-weight: 500; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: #0f172a; border-color: #2563eb; font-weight: 700; }
.panel h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 16px; }
.panel p { font-size: 18px; color: #475569; margin: 0 0 24px; max-width: 600px; }Hero quiz
<section class="hero-quiz">
<h1>En 3 questions, on vous oriente</h1>
<p class="lead">Trouvez l'offre la plus adaptée en moins de 30 secondes.</p>
<div class="quiz" data-step="1">
<div class="step" data-step="1">
<p class="question">Vous êtes :</p>
<div class="choices">
<button data-next="2" data-value="particulier">Un particulier</button>
<button data-next="2" data-value="pro">Une entreprise</button>
<button data-next="2" data-value="asso">Une association</button>
</div>
</div>
<div class="step" data-step="2" hidden>
<p class="question">Votre besoin principal :</p>
<div class="choices">
<button data-next="3" data-value="compte">Ouvrir un compte</button>
<button data-next="3" data-value="credit">Obtenir un crédit</button>
<button data-next="3" data-value="epargne">Faire fructifier de l'épargne</button>
</div>
</div>
<div class="step" data-step="3" hidden>
<p class="question">Votre horizon :</p>
<div class="choices">
<button data-next="done" data-value="court">Moins de 6 mois</button>
<button data-next="done" data-value="moyen">6 à 24 mois</button>
<button data-next="done" data-value="long">Plus de 24 mois</button>
</div>
</div>
<div class="step" data-step="done" hidden>
<p class="question">On a votre profil. Recevez votre orientation par email :</p>
<form>
<input type="email" placeholder="vous@exemple.com" required>
<button type="submit" class="cta-primary">Recevoir mon orientation</button>
</form>
</div>
</div>
<div class="progress">
<span class="bar" style="width:33%"></span>
</div>
</section>
<script>
const quiz = document.querySelector('.quiz');
const bar = quiz.parentElement.querySelector('.bar');
const steps = ['1','2','3','done'];
quiz.querySelectorAll('button[data-next]').forEach(btn => btn.addEventListener('click', () => {
const next = btn.dataset.next;
quiz.querySelectorAll('.step').forEach(s => s.hidden = s.dataset.step !== next);
bar.style.width = ((steps.indexOf(next) + 1) / steps.length * 100) + '%';
}));
</script>.hero-quiz { max-width: 760px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.hero-quiz h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 8px; }
.hero-quiz .lead { color: #475569; margin: 0 0 32px; }
.quiz .question { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.choices { display: grid; gap: 10px; }
.choices button {
padding: 14px 18px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
font-size: 15px; cursor: pointer; text-align: left;
}
.choices button:hover { border-color: #2563eb; background: #f1f5ff; }
.progress { margin-top: 24px; height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.bar { display: block; height: 100%; background: #2563eb; transition: width .3s ease; }12 captures de patterns que vous pouvez observer
Pour chacune des 12 alternatives ci-dessus, voici une référence française repérable et instruisable (les URLs exactes vivent et changent, on cite l’enseigne et le concept) :
- [Capture 1 : Qonto.com] : hero statique propre, illustration produit + USP claire + double CTA.
- [Capture 2 : Maison-Saint-Cast.fr] : hero vidéo background hôtelier (mer, lumière du couchant, boucle 12 s).
- [Capture 3 : Pennylane.com] : hero Lottie sur dashboard animé.
- [Capture 4 : Asphalte.com] : hero produit unique (one-shot pull).
- [Capture 5 : Younited-Credit.com] : hero tabs (particulier vs pro).
- [Capture 6 : Ornikar.com] : hero quiz orientation permis.
- [Capture 7 : Yescapa.fr] : hero search bar van/camping-car.
- [Capture 8 : Doctolib.fr] : hero stats live (nb RDV pris aujourd’hui).
- [Capture 9 : Aircall.io] : hero proof social logos (CAC 40 + scale-ups).
- [Capture 10 : Spendesk.com] : hero comparatif (Excel vs Spendesk).
- [Capture 11 : Ysé.com] : hero before/after (mannequin sans vs avec).
- [Capture 12 : Maisons-du-Monde.com] : hero 3D AR sur sélection canapés.
L’équipe LFDN finalise les captures réelles avec accord des marques côté éditorial.
Outils de conception (Framer, Webflow, Figma)
- Framer : 15 €/mois, idéal pour prototyper et déployer un hero animé directement en prod sans dev.
- Webflow : 23 à 39 €/mois, CMS intégré, plus mature pour multi-pages.
- Figma : 15 €/mois/éditeur, indépassable pour la phase design mais ne déploie pas (export en HTML/CSS via Anima ou Locofy).
- Lottiefiles : gratuit pour animations Lottie, abonnement Pro 9 $/mois pour assets premium.
- VWO ou GrowthBook : indispensables pour A/B tester votre nouveau hero contre l’ancien slider et figer le delta réel.
Et puis l’évidence : si vous voulez confier le rebuild à une équipe qui sait, on a listé les agences spécialisées Design ici : Agences spécialisées Design. Pour le choix d’un outil de design d’interface, voir Logiciels Design UX/UI. Pour le choix d’un outil A/B test, voir Logiciels A/B testing.
FAQ
Le slider classique est-il vraiment mauvais ou cela dépend du secteur ?
Sur 47 audits, on n’a trouvé qu’un cas où un slider 3 slides battait un hero statique : un site événementiel multi-événements avec 3 saisons distinctes à promouvoir simultanément. Pour le reste, le slider classique est systématiquement battu par n’importe laquelle des alternatives bien implémentée.
Combien de temps pour passer d’un slider à un hero statique ?
Compter 4 à 8 heures dev front + 1 à 2 jours design pour le visuel hero si vous n’avez rien d’utilisable. C’est l’optimisation au meilleur ROI qu’on connaisse.
Le hero vidéo est-il un risque pour le SEO et le LCP ?
Pas si vous chargez un poster image léger (WebP) immédiat, et que la vidéo est preload="none" puis joue après le LCP. Sans poster, la vidéo plombe le LCP à 3 s + sur mobile.
Combien coûte une animation Lottie de qualité ?
Entre 800 et 2 500 € pour une animation hero de 8-15 s par un motion designer freelance. Comptez ~1 500 € pour une animation soignée signée d’un illustrateur sénior.
Hero quiz : quelle longueur maximale ?
Trois questions max pour rester en hero. Quatre, vous avez perdu 30 % des gens. Au-delà, il faut sortir le quiz du hero et le mettre sur une page dédiée.
Faut-il toujours tester en A/B contre le slider existant ?
Oui, et au minimum 2 semaines avec un volume de trafic significatif (mini 5 000 visiteurs/variant). Sinon vous mesurez du bruit.
Logiciels recommandés Prototypage
