Guide de compréhension et d’utilisation des emplacements fixes dans Divi

Un attribut de position fixe est un type de position clé pour apprendre à l’utiliser correctement. Les éléments fixes sont importants pour améliorer l’expérience utilisateur sur le site. Les titres fixes sont toujours visibles lors du défilement de la page, ce qui facilite la navigation sur le site. Les barres latérales fixes rendent visibles les principales options de Dec et de courriel, ce qui augmente le taux de conversion. Il en va de même pour les barres de notification fixes, les fenêtres contextuelles, etc. Une fois que nous aurons compris comment fonctionne la position fixe et comment l’utiliser correctement dans Divi, nous aurons un outil de conception puissant pour élever notre site Divi à un nouveau niveau.
Dans cet article, nous présentons: les quatre types de positionnement de Divi aperçu de la position fixe comment utiliser l’option de position fixe dans l’invite Divi pour \
Parents Les éléments placés relativement ressemblent un peu à des éléments statiques parce qu’ils suivent un flux de page normal
Sans objet. La principale différence est que vous pouvez utiliser les attributs haut, bas, gauche et droite pour localiser les éléments relativement ancrés. De plus, contrairement aux éléments statiques, ils peuvent également être localisés en utilisant l’attribut index Z. Pour en savoir plus, consultez notre guide pour connaître et utiliser votre emplacement dans Divi. Complètement. Un élément absolument placé quitte le flux normal de documents, de sorte qu’aucun espace de page réel n’est créé pour cet élément. Nous pouvons le considérer comme un élément flottant sur d’autres éléments de la page qui occupent l’espace réel. Il sera placé par rapport au conteneur parent le plus proche.
Pour en savoir plus, consultez notre guide pour connaître et utiliser les positions absolues dans Divi. Fixe Comme pour les emplacements absolus, les éléments avec des emplacements fixes quitteront le flux de page normal et n’auront pas d’espace réellement créé dans la page. La différence clé entre absolu et fixe est que la position fixe est relative à la fenêtre du Navigateur ou au viewport. En d’autres termes, peu importe où le projet est dans le flux de page normal, une fois qu’un emplacement fixe est spécifié, son emplacement est maintenant directement lié à la fenêtre du navigateur. Nous pouvons utiliser les attributs haut, bas, gauche et droite pour placer les éléments dans la fenêtre. Étant donné que les éléments fixes sont habituellement suspendus derrière ou devant d’autres éléments de la page, l’index Z vous aidera à trier les éléments fixes sur d’autres éléments.
Note: il existe un autre type de placement dans CSS appelé collant. Avant de défiler vers son conteneur (à un point déterminé par la valeur limite supérieure), les éléments placés en permanence sont représentés comme des éléments relativement positionnés. L’élément est ensuite fixé (ou verrouillé) jusqu’à ce que l’utilisateur défile vers
Conteneur Cependant, la position visqueuse peut être un peu imprévisible, car d’autres facteurs peuvent inhiber la fonction. Le positionnement visqueux sera intégré dans Divi dans un avenir proche. Comment placer un élément dans Divi tel que décrit dans l’aperçu, le type de position fixe est similaire à la position absolue parce que l’élément quitte le flux normal du document (HTML dans la page). Interrompre le flux de documents signifie que l’article ne conservera pas l’espace réel sur la page. Voici une illustration d’un module dont la position relative a été changée en position fixe. Notez que la zone précédemment créée \/ occupée dans la colonne a maintenant disparu et que le module est maintenant fixé dans le coin supérieur gauche de la fenêtre du navigateur. La plus grande différence entre fixe et absolu est que, contrairement à sa position absolue par rapport à son conteneur parent, fixe par rapport à la fenêtre du Navigateur ou au viewport. C’est pourquoi, lorsque l’utilisateur fait défiler la page vers le bas, les éléments fixes sont affichés dans la vue, tandis que les éléments absolus peuvent ne pas être affichés dans la vue. Voici un exemple de la façon dont les trois positions (relatives, absolues et fixes) fonctionnent lorsque vous faites défiler la page. Notez que le module fixe reste en place (positionné par rapport au navigateur) Lorsque l’utilisateur défile.
En utilisant l’option de position fixe dans Divi dans Divi, vous pouvez assigner une position fixe à n’importe quel projet en sélectionnant l’option de position fixe dans le Groupe d’options de position sur l’onglet avancé. Lorsque la position relative est sélectionnée, d’autres options de position fixe (position, décalage, index z) sont également trouvées. Après avoir réglé la position de référence de la position fixe pour sélectionner la position fixe, vous pouvez utiliser l’interface visuelle de la position pour sélectionner la position de référence. Une seconde.
La fixation est logique pour le Bureau, mais pas sur l’écran du téléphone. Pour basculer, vous pouvez régler l’option position dans Divi à relative sur votre tablette et votre téléphone. Cela le ramènera à son emplacement d’origine dans le flux de documents. Créez de l’espace pour les éléments fixes parce que les emplacements fixes placent les éléments à l’extérieur du flux de documents, qui sont au – dessus du contenu de la page. Par conséquent, si vous ne voulez pas que les éléments fixes cachent le contenu, vous devez créer de l’espace pour les éléments fixes. Cela peut se faire de plusieurs façons, mais souvent en ajoutant des remblais ou des marges à la mise en page. Un bon exemple est la barre latérale fixe. Si vous ajoutez une barre latérale fixe à un 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. Ainsi, si vous utilisez une section pour créer une barre latérale, vous pouvez spécifier une position fixe, une hauteur de 100% et une largeur de 300 Px pour cette section. Ensuite, vous devez fournir une marge de gauche de 300 Px pour l’autre partie qui contient le module de contenu Post (la zone de contenu principale de la page) pour tenir compte de la largeur de la barre latérale gauche de la page. Utilisez un index z plus élevé pour un élément fixe qui chevauche le reste de la page à moins qu’il n’y ait suffisamment d’espace sur la page. Dans la plupart des cas, vous voulez que les éléments fixes restent visibles (en haut) en cas de conflit avec d’autres éléments de la page au fur et à mesure qu’ils défilent. Pour ce faire, vous pouvez ajouter un index z plus élevé à l’élément fixe pour vous assurer qu’il est au – dessus de tout le reste dans l’espace Z. si vous ne savez pas quelle valeur donner, vous pouvez ajouter un nombre jusqu’à 9999. 6 Utilisations en position fixe # 1 I