Un guide pour comprendre et utiliser la position fixe dans Divi

La propriété de position fixe est un type de position crucial pour apprendre à l'utiliser correctement. Les éléments fixes sont importants pour améliorer l'expérience utilisateur sur votre site Web. Les en-têtes fixes restent visibles lors du défilement d'une page Web, ce qui facilite la navigation des utilisateurs sur le site. Les barres latérales fixes gardent les CTA et les options d'e-mail importants visibles, augmentant ainsi les conversions. Et il en va de même pour les barres de notification fixes, les fenêtres contextuelles et bien d'autres. Une fois que nous aurons compris comment fonctionne la position fixe et comment l'utiliser correctement dans Divi, nous disposerons d'un outil de conception puissant pour faire passer nos sites Divi au niveau supérieur.

Dans cet article, nous couvrirons :

• Un aperçu des quatre types de positionnement de Divi
• Comment la position fixe « positionne » un élément dans Divi
• Utiliser les options de position fixe dans Divi
• Conseils à garder à l'esprit lors de l'utilisation de la position fixe
• 6 façons utiles d'utiliser la position fixe dans Divi

Vérifiez-le!

Présentation des quatre types de positionnement de Divi

La position fixe est l'un des quatre types de position disponibles dans les options de position de Divi. Voici un bref aperçu de chacun ci-dessous.

Statique (par défaut)

Techniquement, les éléments statiques ne sont pas « positionnés » car ils restent dans le flux ou l'ordre normal des éléments sur la page, et ils ne répondent pas aux propriétés haut, droite, bas et gauche comme les autres éléments positionnés (c'est pourquoi aucun les décalages sont disponibles dans Divi pour les éléments en position statique/par défaut). Dans Divi, lorsque nous choisissons la position par défaut d'un module, nous choisissons la position statique. Il convient également de mentionner que certains éléments de Divi (comme les lignes et les sections) auront une position relative par défaut (pas la position statique).

Relatif

Les éléments relativement positionnés sont un peu comme des éléments statiques en ce sens qu'ils suivent le flux normal de la page. La principale différence est que les éléments relativement positionnés peuvent être positionnés à l'aide des propriétés top, bottom, left et right. De plus, contrairement aux éléments statiques, ils peuvent également être positionnés à l'aide de la propriété Z Index.

Pour en savoir plus, consultez notre guide pour comprendre et utiliser la position relative dans Divi.

Absolu

Un élément positionné de manière absolue sort du flux de documents normal et, par conséquent, aucun espace réel n'est créé sur la page pour l'élément. Nous pouvons le considérer comme un élément flottant au-dessus des autres éléments de la page qui occupent de l'espace réel. Il sera positionné par rapport au conteneur parent positionné le plus proche.

Pour en savoir plus, consultez notre guide pour comprendre et utiliser la position absolue dans Divi.

Fixé

Comme la position absolue, les éléments avec la position fixe sortiront du flux normal de la page et n'auront pas d'espace réel créé dans la page. le différence clé entre absolu et fixe est que la position fixe est relative à la fenêtre du navigateur ou à la fenêtre d'affichage. En d'autres termes, peu importe où se trouve l'élément dans le flux normal de la page, une fois qu'on lui a attribué une position fixe, sa position sera désormais directement liée à la fenêtre du navigateur. Nous pouvons utiliser les propriétés top, bottom, left et right pour positionner l'élément dans la fenêtre. Étant donné que les éléments fixes survoleront souvent derrière ou devant d'autres éléments de la page, l'index Z aidera à ordonner les éléments fixes au-dessus des autres.

REMARQUE : Il existe un autre type de positionnement en CSS appelé collant. Un élément positionné collant se comporte comme un élément positionné relativement jusqu'à ce que nous fassions défiler jusqu'à son conteneur (à un moment déterminé par la valeur supérieure). Ensuite, l'élément devient fixe (ou bloqué) jusqu'à ce que l'utilisateur défile jusqu'à la fin du conteneur. Cependant, la position collante peut être un peu imprévisible car d'autres facteurs peuvent inhiber la fonctionnalité. Le positionnement collant sera intégré à Divi dans un futur proche.

Comment la position fixe « positionne » un élément dans Divi

Comme mentionné dans l'aperçu, le type de position fixe est similaire à la position absolue car l'élément sort du flux normal du document (le HTML sur la page). Sortir du flux du document signifie que l'élément ne laissera pas derrière lui l'espace réel où il se trouvait à l'origine sur la page. Voici une illustration d'un module avec une position relative changée en une position fixe. Remarquez comment la zone qu'il a initialement créée/occupée dans la colonne a maintenant disparu et le module est maintenant fixé en haut à gauche de la fenêtre du navigateur.

La grande différence entre fixe et absolu est que, contrairement à la position absolue qui est relative à son conteneur parent, la position fixe est relative à la fenêtre du navigateur ou à la fenêtre d'affichage. C'est pourquoi les éléments fixes indiquent en vue lorsque l'utilisateur fait défiler une page vers le bas et les éléments positionnés de manière absolue ne le peuvent pas.

Voici une illustration du fonctionnement des trois positions (relative, absolue et fixe) lors du défilement vers le bas de la page. Notez que le module fixe reste en place (positionné par rapport au navigateur) pendant que l'utilisateur fait défiler.

Utiliser les options de position fixe dans Divi

Dans Divi, vous pouvez donner à n'importe quel élément une position fixe en sélectionnant l'option position fixe dans le groupe d'options Position bascule sous l'onglet Avancé. Vous trouverez également les options supplémentaires de position fixe (localisation, décalages, indice z) une fois la position relative sélectionnée.

Ajustement de l'emplacement de base de la position fixe

Une fois que vous avez sélectionné la position fixe, vous pouvez choisir un emplacement de base à l'aide de l'interface de localisation visuelle. Selon l'emplacement de base que vous sélectionnez, de nouvelles commandes de décalage X et Y deviendront disponibles.

Utilisation de décalages avec la position fixe

Les commandes de décalage vertical et horizontal vous permettent d'ajuster davantage l'emplacement de base de votre élément fixe sur son axe d'emplacement.

L'origine du décalage et les valeurs de décalage fonctionneront ensemble pour positionner notre élément n'importe où dans la fenêtre du navigateur. Dans cet exemple, nous avons un module qui a une position fixe, une origine de décalage en haut à gauche, un décalage vertical de 50px et un décalage horizontal de 50px. Remarquez comment les valeurs de décalage éloigneront l'élément de l'origine du décalage horizontalement et/ou verticalement (en s'éloignant du coin supérieur gauche du navigateur).

Lorsque vous utilisez des valeurs de décalage horizontal et vertical dans Divi (comme les propriétés top, bottom, left et right dans CSS) pour un élément fixe, il est important de se rappeler que ces valeurs positionneront l'élément par rapport à la fenêtre du navigateur. La propriété Index Z est également utile avec un élément fixe. Parce que la plupart du temps, vous voulez que ces éléments fixes restent devant les autres éléments de la page, vous devrez lui donner une valeur d'index Z élevée (comme 9999).

Utilisez des ancres déplaçables pour repositionner des éléments fixes sur la page

Lorsque vous modifiez la position d'un élément sur Fixe, une ancre déplaçable apparaît lorsque vous survolez l'élément. Cela vous permet de faire glisser l'élément pour changer sa position. Lorsque vous repositionnez l'élément, son décalage X et Y est ajusté dans les paramètres du module.

Quelques conseils pour utiliser le positionnement fixe

Ajuster les éléments fixes pour mobile

N'oubliez pas que vous pouvez définir différentes positions et décalages sur différents écrans d'appareils pour des conceptions réactives. Par exemple, vous voudrez peut-être un en-tête fixe sur le bureau, mais pas sur le mobile. Et les barres latérales fixes ont du sens pour le bureau, mais ne sont pas vraiment possibles sur un écran de téléphone portable. Pour effectuer le changement, vous pouvez ajuster l'option de position dans Divi à Relative sur tablette et téléphone. Cela le ramènera à sa position d'origine dans le flux du document.

Créer de l'espace pour les éléments fixes

Étant donné que la position fixe place les éléments en dehors du flux de documents, ils se trouvent au-dessus du contenu de la page. Donc, si vous ne voulez pas que l'élément fixe masque le contenu, vous devrez créer de l'espace pour l'élément fixe. Cela peut être fait de plusieurs manières, mais est généralement accompli en ajoutant un remplissage ou une marge à la mise en page.

Un bon exemple est une barre latérale fixe. Si vous souhaitez ajouter une barre latérale fixe à votre modèle de page dans Divi, vous devez d'abord vous assurer que la largeur de la zone de contenu principale est réduite pour créer l'espace nécessaire pour la barre latérale fixe. Donc, si vous utilisez une section pour créer la barre latérale, vous pouvez donner à la section une position fixe, une hauteur de 100 % et une largeur de 300 pixels.

Ensuite, vous devrez donner à l'autre section contenant le module de contenu de publication (la zone de contenu principale de la page) une marge gauche de 300 pixels pour accueillir la largeur de la barre latérale sur le côté gauche de la page.

Utiliser un index Z plus élevé pour les éléments fixes

À moins que l'élément fixe ne dispose d'un espace suffisant sur votre page, il chevauchera l'autre contenu de la page. Dans la plupart des cas, vous souhaiterez que l'élément fixe reste visible (en haut) car il entre en collision avec d'autres éléments de la page lors du défilement. Pour ce faire, vous pouvez ajouter un index Z plus élevé à votre élément fixe pour vous assurer qu'il reste au-dessus de tout autre contenu dans l'espace Z. Si vous ne savez pas quelle valeur donner, vous pouvez ajouter un grand nombre comme 9999.

6 façons d'utiliser la position fixe

#1 En-têtes fixes

L'une des meilleures utilisations des nouvelles options de position fixe est la création d'en-têtes fixes. En utilisant Divi Theme Builder, vous pouvez créer un en-tête entièrement personnalisé et corriger toute la section.

Comment publier

Voici un article sur la façon de créer un en-tête fixe dans Divi :

• Comment créer un en-tête fixe avec les options de position de Divi

#2 Barres de pied de page fixes

Tout comme les en-têtes fixes, certains sites Web bénéficient également de pieds de page ou de barres de pied de page fixes. Cela permet aux utilisateurs de garder les informations importantes au premier plan dans un endroit plus subtil. Les barres de pied de page fixes sont idéales pour les téléphones mobiles car elles sont très proches de ces pouces qui démangent de cliquer sur un bouton.

Articles pratiques

Voici quelques articles sur la façon de créer une barre de pied de page fixe dans Divi :

• Comment créer une barre de pied de page fixe pour votre thème Divi
• Comment créer des barres de pied de page mobiles fixes avec Divi
• Comment créer une barre de contact mobile (fixe) dans Divi

#3 Barres latérales fixes/Menus verticaux

Les barres latérales fixes gardent des éléments tels que les menus, les inscriptions par e-mail et les CTA facilement accessibles aux visiteurs lorsqu'ils naviguent sur votre site. Et si vous le souhaitez, vous pouvez ajouter un défilement de débordement à la barre latérale fixe pour avoir une belle barre latérale fixe défilante avec des tonnes de contenu.

Articles pratiques

Voici un article sur la façon de créer une barre latérale fixe dans Divi :

• Comment créer une barre latérale fixe réactive avec des liens d'ancrage à défilement fluide avec Divi
• Comment créer un menu de navigation vertical (fixe) pour votre site Web Divi

#4 Boutons de retour en haut fixes

Les boutons de retour en haut sont généralement fixés en bas à droite d'un site Web, toujours disponibles pour que les utilisateurs cliquent afin de les renvoyer en haut de la page.

Voici un article sur la façon de créer des boutons de retour en haut fixes dans Divi :

• Comment créer des designs personnalisés (fixes) de retour en haut avec Divi

#5 Menus Fixes

La plupart des menus qui glissent ou s'ouvrent ont une position fixe. Ils sont également parfaits pour les mobiles.

Voici un article sur la façon de construire un menu fixe dans Divi :

• Comment créer un menu coulissant réactif avec le générateur de thème de Divi

#6 Boîtes de notification fixes, appels à l'action, inscriptions par e-mail, etc.

Voici un article sur la façon de créer une boîte de notification fixe dans Divi :

• Comment ajouter un appel à l'action coulissant fermable à n'importe quel coin de votre modèle de page dans Divi

Dernières pensées

Vous n'irez pas très loin dans le développement Web avant de rencontrer le besoin d'utiliser la position fixe. Il est utilisé dans de nombreux éléments clés qui composent un site Web. Dans Divi, la position fixe n'est qu'à un clic, mais il est important de comprendre comment cela fonctionne pour bien l'utiliser. Espérons que cet article vous a aidé à comprendre comment mieux utiliser la position fixe dans Divi afin que vous puissiez porter votre prochain projet vers de nouveaux sommets.

Quelle a été votre expérience avec le type de poste fixe?

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

À votre santé!