Comment rendre n'importe quel élément de page Divi collant

Savoir comment rendre n'importe quel élément de page Divi collant (ou fixe) est l'une de ces compétences pratiques que les concepteurs de sites Web peuvent utiliser de plusieurs manières. Si vous n'êtes pas familier avec le terme « collant », il fait simplement référence à un élément d'une page Web qui reste « fixe » lorsque l'utilisateur fait défiler la page. Un exemple populaire d'élément collant est un menu de navigation fixe. Divi a une fonctionnalité de navigation fixe (ou collante) disponible par défaut. Ainsi, lorsque l'utilisateur fait défiler la page vers le bas, une version fixe du menu reste bloquée en haut de la page pendant que l'utilisateur fait défiler. Mais les éléments collants peuvent être utilisés pour à peu près n'importe quoi et c'est un excellent moyen d'attirer l'attention sur votre appel à l'action souhaité sur une page donnée.

Dans ce didacticiel, je vais vous montrer un moyen simple de rendre n'importe quel élément de votre page collant en utilisant le plugin appelé Sticky Menu (ou Anything !) sur Scroll. Quelques instants suffisent pour configurer les paramètres du plugin. Ensuite, tout ce que vous avez à faire est d'ajouter un identifiant CSS personnalisé à votre élément. C'est si facile.

Entrons-y !

Ce dont vous avez besoin pour ce tutoriel

Pour ce tutoriel, vous aurez besoin des éléments suivants :

• Thème Divi
• Le Sticky Menu (ou n'importe quoi !) sur le plugin Scroll
• La mise en page du blog du comptable (disponible depuis le Divi Builder)

Comment rendre n'importe quel élément de page Divi collant

Abonnez-vous à notre chaîne Youtube

Configuration des paramètres du plugin

Une fois que vous avez installé et activé le plugin Sticky Menu (ou Anything !) on Scroll sur votre thème Divi, dirigez-vous vers le tableau de bord WordPress et accédez à Paramètres > Sticky Menu (ou Anything !).

Sous l'onglet Paramètres de base, mettez à jour les options comme suit :

Tout d'abord, vous devrez ajouter un identifiant unique pour votre élément collant. Il peut s'agir d'un identifiant ou d'une classe CSS. Nous ajouterons ensuite cet identifiant à notre élément dans Divi plus tard. Pour faciliter la mémorisation, je vais ajouter l'ID CSS "#sticky".

Élément collant : #collant

Ensuite, vous devez ajouter la valeur en pixels pour l'espace entre le haut de la page et l'élément collant. Étant donné que la barre de navigation fixe de Divi a une hauteur de 54 pixels par défaut, nous souhaitons ajouter au moins 54 pixels pour cette option afin que notre élément collant ne chevauche pas la navigation fixe.

Espace entre haut de page et élément collant : 54 pixels

C'est aussi une bonne idée de désactiver l'élément collant sur mobile. Pour ce faire, nous devons configurer le plugin pour ne pas coller l'élément lorsque l'écran est inférieur à 980px.

Ne pas coller l'élément lorsque l'écran est inférieur à : 980 pixels

Enregistrez vos paramètres, puis accédez à l'onglet Paramètres avancés et mettez à jour les éléments suivants :

Pour l'option z-index, nous voulons nous assurer que notre élément est empilé au-dessus de tous les autres éléments de la page, surtout si nous prévoyons que notre élément chevauche d'autres éléments lors du défilement. Pour vous assurer que cela se produise, définissez le z-index sur 99998.

Indice Z : 99998

Pour vous donner une idée de la façon dont les éléments sont ordonnés dans Divi, les sections ont un z-index de 2, les colonnes ont un z-index de 9, et l'en-tête/la barre de navigation a un z-index de 99999. Donc, en gros, nous sommes vouloir que notre élément collant soit 1 nombre inférieur au z-index pour la navigation dans l'en-tête. Cela garantira que l'élément collant se trouve au-dessus de tout le reste de la page, à l'exception de la navigation. Cela vous sera utile chaque fois que vous voudrez arrêter votre élément et le pousser vers le haut de la page afin que l'élément collant ne reste pas au-dessus de la navigation lorsque vous faites défiler (il a l'air désordonné et cassé).

Ensuite, nous pouvons ajouter un identifiant d'élément "push up". Vous pouvez considérer cela comme un bouchon pour notre élément collant. Il s'agit généralement d'un élément de pied de page. Fondamentalement, cela identifie l'élément qui arrêtera l'élément collant lors du défilement vers le bas de la page, permettant à l'élément collant d'être poussé vers le haut avec le reste de la page. Pour cet exemple, je vais définir l'identifiant avec l'ID CSS « #stop ».

Élément push-up : #stop

Enregistrer les paramètres.

Nous sommes maintenant équipés de la puissance dont nous avons besoin pour fabriquer un élément collant !

Rendre un élément de page Divi collant

Pour vous montrer comment rendre un élément Divi collant, je vais utiliser la page du blog du comptable de Divi du pack de mise en page du comptable. Pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez le Visual Builder. Sélectionnez ensuite l'option « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, sélectionnez le pack de mise en page comptable et choisissez la page Blog.

Cette page présente un formulaire d'abonnement par e-mail dans la barre latérale droite d'une section spécialisée. Afin d'attirer davantage l'attention sur ce formulaire, nous pouvons le faire devenir collant une fois que l'utilisateur fait défiler la page. Ensuite, nous pouvons arrêter (ou pousser) l'élément chaque fois qu'il atteint la section suivante de la page afin qu'il ne se chevauche pas.

Comment faire une colonne collante

À ce stade, cependant, nous devons décider quel élément spécifique nous voulons rendre collant. Nous pourrions simplement rendre le module Option de courrier électronique persistant, mais cela ne tiendrait pas compte du module de suivi des médias sociaux situé directement sous le formulaire, que nous souhaitons également rendre persistant. Et, nous pouvons donner à ces deux modules le même identifiant car ils deviendraient tous les deux collants à la même position, provoquant un chevauchement. La meilleure façon de le faire est de rendre toute la colonne (colonne 2) collante.

Pour rendre la colonne 2 persistante, ouvrez les paramètres de ligne de la ligne contenant la colonne que nous voulons cibler. Ensuite, sous l'onglet Avancé, ajoutez l'ID CSS « collant ». Cela correspond à l'identifiant unique de l'élément collant que nous avons ajouté dans les paramètres de notre plugin.

Identifiant CSS : persistant

(REMARQUE : ne placez pas le symbole hashtag (ou dièse) avant l'ID ici. Assurez-vous également de l'ajouter à l'ID CSS et non à la classe CSS)

Enregistrez les paramètres et prévisualisez la version en direct de la page. Si vous faites défiler vers le bas, vous remarquerez que la colonne 2 (avec les deux modules) deviendra collante une fois qu'elle aura atteint 54 pixels du haut de la fenêtre et restera à cette position pendant que vous continuez à faire défiler.

Arrêter l'élément collant à une section

Comme vous pouvez le voir, l'élément reste collant de sorte qu'il chevauche le contenu des autres sections ci-dessous. Pour empêcher que cela ne se produise, nous pouvons utiliser notre identifiant « push up » (#stop) que nous avons ajouté dans les paramètres du plugin.

Pour arrêter l'élément collant sur la section ci-dessous, nous devons ouvrir les paramètres de la section et ajouter l'ID CSS « stop ».

Identifiant CSS : arrêter

Allez maintenant prévisualiser la version en direct de la page. Remarquez comment l'élément collant s'arrête à la section que vous avez identifiée.

Plutôt cool non ?

Comment faire un module collant

Pour rendre un seul module collant, vous devrez effectuer un ajustement dans Divi pour vous assurer que votre élément a le bon z-index afin qu'il se trouve au-dessus des autres éléments de la page lors du défilement. Comme je l'ai mentionné précédemment, Divi attribue un z-index de 2 à toutes les sections. Et le plugin applique le z-index de 99998 à l'élément collant. Mais puisqu'un module ne peut pas être ordonné (ou indexé) au-dessus de son élément parent (la section), le module restera toujours derrière d'autres modules sur la page. Pour résoudre ce problème, nous devons nous assurer et donner à la section contenant notre module collant un z-index de 99998 manuellement.

Pour illustrer cela, je vais utiliser la même mise en page de blog de comptable que nous avons utilisée plus tôt. Avant d'ajouter notre identifiant CSS à un module, nous devons d'abord retirer l'identifiant CSS (collant) que nous avons défini pour la colonne 2. Ensuite, retirer l'identifiant CSS (arrêt) que nous avons défini pour la section en dessous. Après cela, ouvrez les paramètres du module de suivi des médias sociaux et ajoutez l'ID CSS « collant » au module.

Si vous affichez la page en direct, vous remarquerez que l'élément collant est masqué lorsqu'il chevauche les autres modules dans les sections ci-dessous lorsque vous faites défiler.

Pour résoudre ce problème, ouvrez les paramètres de la section contenant l'élément persistant du module de suivi des médias sociaux. Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :

z-index: 99998;

Vérifiez maintenant la page en direct. Remarquez comment les icônes des médias sociaux resteront en haut de la page (54 pixels à partir du haut), juste en dessous de la navigation fixe, puis resteront au-dessus des autres modules lorsque vous faites défiler.

Rendre une section collante

Pour rendre une section entière collante, vous suivriez le même processus d'ajout de l'ID CSS "collant" à la section de votre choix. Pas besoin de mettre à jour le z-index à l'aide de css personnalisé puisque le plugin le fait automatiquement pour vous.

Les effets de survol peuvent provoquer le glitch des éléments collants

Si vous avez des effets de survol actifs sur votre page ou sur votre élément collant, vous pouvez rencontrer des problèmes. Si cela se produit, vous devrez peut-être désactiver les effets de survol des éléments collants.

Un seul élément collant par page

Le plugin n'autorise qu'un seul élément collant par page, donc si vous souhaitez ajouter plusieurs éléments collants, vous aurez besoin d'une solution plus avancée (ou d'un autre plugin qui le prend en charge).

Dernières pensées

J'espère que cet article a été utile en fournissant un moyen simple et rafraîchissant de rendre n'importe quel élément de page Divi collant. Utilisez-le pour créer des sous-menus collants, des CTA collants, des offres promotionnelles collantes et à peu près tout ce à quoi vous pouvez penser. Amusez-vous à explorer les possibilités!

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!