Absolute

L’utilisation de la position absolue dans Divi : un atout pour votre design

La position absolue est un outil puissant qui permet d’affiner et de personnaliser le placement des éléments sur votre site Divi. En comprenant cette propriété et en l’utilisant judicieusement, vous pouvez donner une nouvelle dimension à votre design.

Les types de positionnement disponibles sur Divi

Divi offre quatre types de positionnement principaux que tout designer devrait connaître :

1. Position statique (par défaut)

Les éléments statiques, c’est-à-dire ceux qui possèdent une position par défaut, suivent le flux normal du document. Ils n’acceptent pas les propriétés top, right, bottom ou left, ce qui signifie qu’aucun décalage ne peut être appliqué. En fait, quand vous choisissez cette option pour un module, vous optez pour un positionnement statique, ce qui en fait l’option par défaut pour tout élément CSS.

2. Position relative

Les éléments en position relative, quant à eux, conservent leur place dans le flux du document tout en permettant d’utiliser les propriétés de position. Ils peuvent donc être déplacés légèrement sur l’axe vertical ou horizontal. Cela signifie que vous pouvez utiliser des effets de superposition avec la propriété Z Index.

3. Position absolue

Une position absolue implique que l’élément « sorte » du flux normal. En d’autres termes, nulle place n’est réservée pour cet élément ; il flotte au-dessus des autres contenus, sans occuper d’espace dans la mise en page. Cela signifie qu’il se positionne par rapport au conteneur parent le plus proche qui possède une position autre que statique.

4. Position fixe

Similaire à la position absolue, la position fixe sort aussi du flux normal. Toutefois, elle se reporte directement à la fenêtre du navigateur. Cela signifie que peu importe la position de l’élément dans le flux normal, sa place sera toujours relative à la fenêtre du navigateur. Cela vous permet de le fixer à un certain endroit de l’écran, et de l’utiliser quique façon.

Avantages de la position absolue dans Divi

Outil de design efficace

La position absolue est précieuse pour positionner des éléments sans perturber le design existant. Par exemple, si vous souhaitez ajouter une image ou un bouton sans devoir réorganiser les autres éléments, l’utilisation d’une position absolue est une solution idéale pour garantir un agencement net et soigné.

Alternative aux marges et aux flottants

Avec la position absolue, vous n’avez pas à vous soucier des flottants ou des marges, qui peuvent souvent déboussoler. Utiliser des positions absolues vous permet de contrôler précisément l’emplacement d’un élément, en le plaçant exactement où vous le désirez.

Large compatibilité navigateur

La propriété de position absolue est bien prise en charge sur tous les navigateurs principaux, vous pourrez donc être certain qu’elle fonctionnera comme prévu pour l’ensemble de vos utilisateurs.

Inconvénients de la position absolue

Risque d’isolement

Étant donné que les éléments en position absolue sont retirés du flux normal, il peut être difficile de les positionner en relation avec d’autres éléments voisins. Par exemple, si vous souhaitez placer un bouton sous un module de texte, cela peut nécessiter des ajustements supplémentaires pour garantir que le bouton ait un positionnement correct, ce qui complexifie le processus.

Moins réactif

La position absolue peut également poser des défis en matière de réactivité pour les appareils mobiles. Les développeurs évitent parfois cette propriété en raison des complexités qu’elle engendre lors de l’adaptation de designs pour différents écrans. L’utilisation d’unités de mesure relatives, comme les pourcentages, est donc recommandée afin d’assurer une meilleure adaptabilité.

Positionnement à l’aide des points de localisation

Dans le constructeur Divi, les options de localisation permettent d’appliquer facilement un positionnement absolu en cliquant simplement sur le point de localisation désiré. Par défaut, celui-ci est fixé en haut à gauche, mais vous pouvez ajuster les offsets verticaux et horizontaux selon vos besoins.

En sélectionnant par exemple le point de localisation en bas à droite, les offets verticaux se baseront sur le bas de l’élément et les offsets horizontaux à partir du côté droit. En jouant avec les points de localisation, vous pouvez affiner à la perfection le placement de vos éléments.

Ajustements des éléments centraux

Divi possède également une fonctionnalité pratique pour centrer des éléments de façon très précise. En optant pour une position centrée, vous profiterez de propriétés CSS intelligentes qui garantissent que l’élément est toujours parfaitement centré, quelle que soit la taille. Cela simplifie considérablement le processus et optimise le rendu visuel.

Application pratique de la position absolue

Un exemple pertinent de l’utilisation de la position absolue dans Divi pourrait être le traitement des boutons dans une colonne. Supposons que vous souhaitiez que vos boutons se trouvent toujours en bas de chaque colonne, indépendamment de la hauteur du contenu. Voici comment vous pourriez procéder :

1. Ajoutez une ligne à une colonne dans votre section.
2. Placez un module de texte ou un blurb dans cette colonne, suivi d’un bouton en dessous.
3. Dupliquez la colonne pour créer plusieurs colonnes identiques, avec des contenus différents.
4. Égalisez les hauteurs des colonnes dans les paramètres de ligne pour assurer une cohérence visuelle.
5. Modifiez le contenu des différents modules afin qu’ils aient des hauteurs variées.
6. Sélectionnez chacun de vos boutons et définissez leurs paramètres :
7. Position : Absolue
8. Localisation : Bas à gauche

Cela garantira que tous vos boutons soient positionnés en bas, ce qui facilite l’harmonisation de l’affichage, même lorsque le contenu varie.

Réflexions finales

L’utilisation de la position absolue dans Divi permet d’envisager des designs plus créatifs et plus flexibles. Une fois maîtrisée, cette fonctionnalité devient un allié indéfectible pour tout designer souhaitant obtenir des agencements visuels raffiné. En explorant davantage la position absolue, vous découvrirez peut-être de nouvelles façons d’améliorer l’esthétique et la fonctionnalité de votre site.