Introduction
L’esthétique sur le web ne se limite pas aux belles images ; l’harmonie vient de la précision. Imaginez pouvoir aligner parfaitement chaque élément de votre site, créant ainsi une symphonie visuelle qui capte et retient l’attention dès le premier clic. C’est là qu’intervient l’art de l’alignement vertical dans Divi, un secret peu connu mais fondamental pour concevoir des sites web qui sortent du lot.
Vous vous demandez comment transformer votre site en une œuvre d’art ? Ce guide est votre premier pas vers la maîtrise pour centrer verticalement votre contenu sur Divi. Nous allons décomposer le processus, rendant chaque étape claire et accessible, peu importe votre expérience préalable. Car oui, même les détails apparemment minimes peuvent avoir un impact monumental sur l’expérience de vos visiteurs.
Prêt à plonger dans l’univers de l’alignement parfait ? Suivez-nous dans ce tutoriel complet. Ensemble, découvrons comment aligner verticalement le contenu sous Divi peut non seulement embellir votre site, mais aussi améliorer significativement l’engagement utilisateur. C’est l’heure de transformer votre site en un chef-d’œuvre visuel.
L’Impact de l’alignement vertical sur l’expérience utilisateur et le design
Premièrement, l’alignement vertical joue un rôle crucial dans la conception de sites web. Il assure une présentation harmonieuse et ordonnée. Les éléments alignés verticalement guident l’œil avec aisance. Cela améliore donc grandement l’expérience utilisateur.
En effet, un site bien structuré retient l’attention. Les visiteurs naviguent avec facilité, car l’information se révèle de façon intuitive. L’alignement vertical contribue à cette clarté. Et la lisibilité s’en trouve renforcée. Les textes et les images apparaissent plus nettement, ouvrant la voie à une meilleure compréhension.
De plus, l’esthétique d’un site bénéficie directement d’un alignement soigné. Un design équilibré est agréable à l’œil. Il évoque le professionnalisme et la qualité. Ces perceptions impactent la réputation en ligne. Un bon renom attire davantage de visiteurs.
Toutefois, il est important de noter que l’alignement vertical ne se limite pas à l’esthétique. Il influence aussi le comportement des utilisateurs. Un site agréable incite à la découverte. Les utilisateurs sont donc plus enclins à explorer, à interagir. Cela peut mener à une augmentation des conversions, objectif ultime de tout site e-commerce ou vitrine.
Finalement, un alignement vertical correct est indispensable. Il assure une expérience utilisateur optimale. Il embellit le design du site. Aussi, il favorise l’engagement et la conversion. En somme, c’est un pilier du succès en ligne.
Prérequis avant de Commencer
Tout d’abord, avant de commencer à centrer notre contenu sur notre site Divi, nous allons procéder à quelques vérifications essentielles pour bien suivre ce tutoriel.
- Avoir les accès pour modifier votre site : Vous devez avoir accès au tableau de bord de votre site internet et suffisamment de droits pour modifier votre site. Assurez-vous donc de pouvoir utiliser divi builder.
- Avant toute modification, il est recommandé d’effectuer une sauvegarde de votre site internet. Souvent, votre hébergeur vous propose des sauvegardes automatiques et régulières. C’est le cas chez Hostinger. Vous pouvez également utiliser une extension pour vos sauvegardes. Nous avons justement écrit un guide pas à pas pour vous apprendre à comment sauvegarder votre site internet WordPress.
- Enfin, il faut que vous ayez un minimum de connaissance sur Divi et le fonctionnement de son visual builder. À quoi correspond une section, une ligne, une colonne, un module. Pour cela, suivez notre guide Divi pour débutants !
Guide étape par étape pour aligner verticalement vos colonnes sur Divi
L’astuce pour centrer verticalement votre contenu sur Divi est de le faire directement au sein de la colonne. C’est la colonne qui va être centrée verticalement, et donc à fortiori, son contenu. Nous allons commencer par modifier les paramètres de la ligne, et ensuite venir rajouter une règle CSS à la colonne que l’on souhaite centrer.
Étape 1 : Ajout de la propriété CSS flex à notre ligne
La première étape pour centrer verticalement notre contenu consiste à appliquer à notre ligne la propriété flex. Mais au fait, qu’est-ce que flex ? les flexbox ? Voici une petite explication :
Flexbox, officiellement connu sous le nom de Flexible Box Layout, est un modèle de disposition CSS3 conçu pour permettre à des éléments de conteneur d’afficher leurs enfants de manière prédictive et efficace dans des dispositions flexibles, soit en ligne soit en colonne. Cet outil est particulièrement utile pour créer des interfaces utilisateur adaptatives et complexes, où l’espace entre les éléments et leur alignement doivent s’ajuster automatiquement en fonction de la taille du conteneur.
Flex Container : En appliquant la propriété display: flex; à un élément, vous le déclarez comme un conteneur Flex. Ce conteneur devient la base pour une disposition flexible, dans laquelle ses enfants directs sont traités comme des éléments flexibles.
Flex Items : Les éléments enfants directs d’un conteneur Flex sont automatiquement considérés comme des items flex. Ils peuvent être manipulés à l’aide de diverses propriétés Flexbox pour ajuster leur taille, leur ordre et leur alignement par rapport à leurs frères et sœurs et au conteneur lui-même.
Flexbox facilite la création de dispositions réactives sans avoir recours à des hacks de positionnement ou à des calculs complexes de largeur et de hauteur. Il gère de manière intuitive les espaces, les alignements et les distributions, rendant le développement d’interfaces utilisateur modernes plus accessible et moins sujet aux erreurs.
Si vous avez suivi, notre Flex Container sera notre ligne, et nos Flex Items vont être nos colonnes.
Comme présenté sur la capture d’écran ci-dessus, entrez dans les paramètres de votre ligne puis dans l’onglet « Style » (1°), ouvrez le panneau « Dimensionnement » (2°) et activez la case « Harmoniser les hauteurs des colonnes » (3°).
Cette option va rajouter la classe CSS « et_pb_equal_columns » à notre ligne. Cette classe va ajouter la propriété flex à notre ligne comme vous pouvez le voir ci-dessous :
@media (min-width: 981px) {
.et_pb_row.et_pb_equal_columns {
display: flex;
}
}Étape 2 : Centrer verticalement chaque colonne
La seconde étape consiste à aligner verticalement les colonnes de votre ligne. Comme expliqué plus haut, les colonnes jouent le rôle de « Flex Items« . Mais nous allons rester dans les paramètres de notre ligne et ajouter une propriété CSS qui va centrer automatiquement le contenu de nos colonnes.
Rendez-vous désormais dans les paramètres avancées de la ligne (1°), puis dans « Personnaliser CSS » et sélectionnez « Éléments du module ». Enfin, dans la partie « Élément principal » vous pouvez rentrer le code CSS suivant :
align-items: center;Cette propriété CSS vise à centrer verticalement les items (colonnes) de votre ligne.
Le résultat
Et c’est terminé ! Nous allons vous présenter avec quelques détails la dernière section de nos pages (celle avant le footer où il faut cliquer pour nous contacter 😉).
Comme vous pouvez le voir ci-dessus, il s’agit d’une ligne à 2 colonnes. Le contenu de la deuxième colonne s’est aligné automatiquement en fonction de la hauteur de la première colonne (celle qui est la plus grande). L’écart représenté par les deux flèches est donc identique.
On peut remarquer que, même en supprimant un module dans la colonne de droite, le texte va s’aligner automatiquement.
Conclusion
Nous avons vu qu’il était très simple de centrer verticalement du contenu sur Divi. Il suffit d’harmoniser la hauteur des colonnes dans les paramètres de style de la ligne, puis d’ajouter une ligne CSS et le tour est joué. Si vous souhaitez aller plus loin, vous pouvez faire appel à notre service de conception de site web, nous serions ravi de pouvoir vous aider.
