Comment fixer un élément au scroll avec Divi ?

Fév 2021 | Astuces, Divi | 0 commentaires

Les dernières version du thème Divi vous permettent de fixer n’importe quel élément sur votre page sans utiliser d’extension. Cette manipulation est très simple et s’effectue en quelques minutes 😺

Le fait de fixer un élément va lui permettre de défiler en même temps que votre page et donc de rester en permanence dans le champ de vision de l’utilisateur.

1. Concevoir l’élément à fixer.

Dans une premier temps, vous aller devoir créer votre élément. Logique isn’t it ? Pour illustrer ce cas pratique, j’ai décidé de créer une barre promotionnelle sur une page en particulier que je souhaite fixer juste en dessous de mon en-tête.

L’objectif est de mettre en valeur le message suivant : “20% de réduction sur nos abonnements jusqu’au 01/03/2021 🔥“.

Fixer un élément au scroll Divi
Voici le résultat recherché.

Je vais donc commencer par créer mon élément sur ma page donc j’active mon éditeur visuel. Dans mon cas, j’ai ajouté une nouvelle section qui comporte une colonne. Ensuite, j’ai ajouté un élément texte au sein de ma colonne puis j’ai rédigé le message souhaité.

Egalement, pour rendre cette barre plus attractive visuellement, j’ai choisi d’appliquer un fond en dégradé. Une fois l’apparence et le contenu définis, je vais pouvoir fixer cet élément sur ma page.

2. Fixer l’élément avec Sticky Position

Dans cet exemple, je souhaite fixer sur ma page l’intégralité de la barre promotionnelle. Toujours avec l’éditeur visuel activé, je me rends dans les réglages de la section de la section que je souhaite fixer :

Paramètres section Divi à fixer
En mode “affichage filaire”, je clique sur “Réglages de la section”.

La fenêtre contenant les paramètres de la section s’affiche alors. Rendez-vous dans le troisième onglet nommé “Avancé” puis cliquez sur l’option “Scroll Effects“.

Recherchez la ligne “Sticky Position“. Cette dernière est par défaut réglée sur “Do Not Stick”. Cliquez dessus puis choisissez l’option qui vous intéresse, soit “Stick to Top” pour fixer l’élément en haut de la page dans notre cas.

Pour information, vous avez quatre options disponibles :

  • Première option : Do not Stick : ne pas fixer l’élément.
  • Deuxième option Stick to Top : fixer l’élément en haut.
  • Troisième option Stick to Bottom : fixer l’élément en bas.
  • Quatrième option Stick to Top and Bottom : fixer l’élément en haut et en bas.
Option Sticky Position Divi
Choisir Sticky to Top pour fixer l’élément en haut de la page.

Enfin, validez avec le bouton ✔️ situé en bas à droite de la fenêtre.

3. Sauvegarder votre page et tester.

Pour terminer, sauvegarder l’intégralité de votre page avec le bouton “Sauvegarder” en bas à droite de votre page. Enfin, rendez-vous sur votre page et vérifiez que votre élément est fixé là où vous l’avez souhaité.

Sauvegarder page Divi
On sauvegarde avec le bouton du même nom 😼

Faîtes toujours attention à ne pas encombrer l’espace visuel de votre utilisateur lorsque vous fixer un élément au scroll. L’objectif est de mettre en valeur un élément précis mais pas au détriment des autres informations de votre page.

Si vous avez régulièrement ce genre de besoins mais que vous n’avez pas le temps de vous en préoccuper, nous le faisons pour vous si vous êtes abonnés à un de nos packs de maintenance.

À bientôt 👋

Par Samy Bentemam

Entrepreneur et rédacteur d’articles passionnants, je serais ravi d’échanger avec vous de votre futur projet. Au plaisir de partager de nouvelles connaissances tous ensemble 😸

Confiez votre projet web à des professionnels compétents

Tu veux recevoir du contenu exclusif ?

Tu veux recevoir du contenu exclusif ?

Alors rejoins gratuitement la communauté Altefkat et bénéficie de nombreux avantages. Garanti sans spam, ni colorants, ni conservateurs !

Bienvenue dans la communauté Altefkat ! Nous te remercions pour ton inscription et ta confiance.

Hey, on s'occupe de votre maintenance WordPress ?

Remplissez le formulaire ci-dessous et notre équipe vous enverra une proposition gratuitement dans 48h. 

Votre message a été transmis 😺

Share This