Tu web en tres pasos
Tres opciones claras, sin letra pequeña.
Colores, logo y dominio en dos minutos.
Tu web en línea con un solo botón.
Étapes avec téléphone fixe au défilement
Au défilement, le texte de chaque étape passe tandis qu'un téléphone à gauche reste fixe et change d'écran.
Réglages
Code
<div class="uv-tss"><div class="sc" tabindex="0" aria-label="Ton site en trois étapes"><div class="gr"><div class="vs" aria-hidden="true"><div class="ph"><span class="fc on" style="--c:#6366f1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2.5"/><path d="M8 10h8M8 14h5"/></svg></span><span class="fc" style="--c:#ec4899"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="currentColor"/><circle cx="14.5" cy="9" r="1.2" fill="currentColor"/><circle cx="15.5" cy="14" r="1.2" fill="currentColor"/></svg></span><span class="fc" style="--c:#10b981"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c3 2.5 4.5 5.5 4.5 9l-2 3h-5l-2-3c0-3.5 1.5-6.5 4.5-9zM9.5 15l-2.5 4M14.5 15l2.5 4M12 9.5v.01"/></svg></span><i class="bar"></i></div></div><div class="ls"><h3>Ton site en trois étapes</h3><section class="on"><span>01</span><b>Choisis ton offre</b><p>Trois options claires, sans petits caractères.</p></section><section><span>02</span><b>Personnalise</b><p>Couleurs, logo et domaine en deux minutes.</p></section><section><span>03</span><b>Publie</b><p>Ton site en ligne d'un seul bouton.</p></section><div class="end"></div></div></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Défiler</span></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Une mise en page de scrollytelling classique pour un onboarding ou une visite produit. Un téléphone reste dans une colonne fixe et passe d'un écran coloré à l'autre avec des icônes, pendant que les étapes défilent à droite. L'étape au centre est mise en avant et les autres s'estompent, pour garder l'attention sur une idée à la fois.
Le script compare chaque étape au centre du conteneur et bascule une classe, et le CSS gère les transitions d'écran. Modifie les titres, descriptions, couleurs et icônes des étapes pour présenter ton propre parcours.