Sélectionner une page


La possibilité d’orienter verticalement le contenu lors de la création d’un site avec Divi peut être un ajout pratique à votre ceinture d’outils de conception. Parfois, une mise en page particulière nécessite que le contenu soit orienté verticalement de différentes manières (centre, bas, haut). Le plus souvent, votre contenu doit être centré verticalement. Il offre une merveilleuse touche d’espacement symétrique, ce qui est particulièrement utile si vous avez plusieurs dispositions de colonnes pour votre contenu. En outre, le contenu centré verticalement reste centré sur différentes largeurs de navigateur, ce qui facilite l’application de remplissages ou de bordures personnalisés pour une réactivité similaire.

Dans ce tutoriel, je vais vous montrer comment ajouter quelques petits extraits de CSS à chaque colonne pour rendre le contenu vertical. Je vais utiliser certaines des mises en page prédéfinies de Divi comme exemples de cela. Si vous ne savez pas grand-chose sur CSS, il n’y a rien à craindre. C’est assez facile à appliquer à vos propres mises en page en quelques secondes.

Comprendre Flex et Divi

La propriété CSS Flex (ou Flexbox) est simplement un moyen de positionner des éléments dans des piles horizontales et / ou verticales (similaire à un tableau). Contrairement aux tables traditionnelles, la propriété Flex vous permet de créer des champs «flexibles» à la taille du contenu.

Divi utilise la propriété Flex chaque fois que vous sélectionnez «Égaliser les hauteurs de colonne» comme paramètre de ligne. Cela garantit simplement que vos colonnes sont dimensionnées pour s’adapter à la taille de la colonne avec le plus de contenu. Et puisque « Equalize Column Heights » active la flexibilité pour le conteneur de lignes, vous pouvez facilement en profiter en ajoutant du CSS à vos colonnes pour personnaliser le contenu de chaque colonne (ou champ).

Par exemple, si vous ajoutez « margin: auto » à une colonne sur une ligne, le contenu de cette colonne (qu’il s’agisse d’un ou plusieurs modules) sera centré verticalement.

De plus, si vous ajoutez « Aligner les éléments: Centrer », votre ligne centrera toutes vos colonnes (et leur contenu) verticalement.

Bien sûr, il y a beaucoup plus d’utilisations pour la propriété flex dans la conception Web, ainsi que des CSS plus avancés que vous pouvez appliquer à votre thème. Mais pour ce tutoriel, je voulais garder les choses simples.

Est-ce vraiment nécessaire?

Techniquement, non. Vous pouvez aligner verticalement votre contenu / modules dans une colonne en utilisant un espacement personnalisé (espacement et marge). Par exemple, vous pouvez utiliser les options d’espacement de Divi pour donner à une colonne le même espacement haut et bas afin de centrer les modules verticalement dans la colonne. Vous pouvez également ajouter juste un espacement supérieur à une colonne pour aligner le contenu en bas. Cependant, vous devrez peut-être ajuster l’espacement lorsque vous mettez à jour votre page avec plus de contenu. Il peut également être difficile de maintenir cet alignement sur les largeurs de navigateur.

Donc, si vous recherchez une solution pour aligner verticalement le contenu sans avoir à penser à l’espacement personnalisé, vous trouverez cela utile.

Commençons!

Chargez la mise en page prédéfinie sur votre page

Pour commencer, j’utiliserai la mise en page du portefeuille de la société de design d’intérieur. Créez une nouvelle page pour apporter cette mise en page à votre page. Donnez ensuite un titre à votre page. Cliquez sur «Utiliser Divi Builder» puis sur «Utiliser Visual Builder». Sélectionnez ensuite l’option «Choisir une mise en page prédéfinie». Sélectionnez ensuite le pack de mise en page de l’entreprise de design d’intérieur dans la fenêtre contextuelle «Charger à partir de la bibliothèque». Enfin, sélectionnez la page Portfolio dans la liste des mises en page et cliquez sur «Utiliser cette mise en page».

Aligner le contenu verticalement

Une fois la mise en page chargée sur votre page, vous êtes prêt à partir.

Méthode 1: aligner le contenu verticalement à l’aide de Flex et Auto Margin

Ouvrez les paramètres de ligne pour la deuxième ligne de la page (celle juste en dessous de la ligne avec le titre de la page). Sous « Paramètres de conception », ouvrez le groupe d’options « Taille » et notez que « Ajuster la hauteur des colonnes » est déjà actif. Cela signifie que la propriété flex (« display: flex; ») a maintenant été ajoutée à la ligne.

Aligner le contenu verticalement

Allez maintenant dans les paramètres de l’onglet « Avancé » pour la même ligne et ajoutez l’extrait de code CSS suivant sous le champ de saisie « Élément principal de la colonne 2 ».

margin: auto;

Aligner le contenu verticalement

Maintenant, le contenu de la deuxième colonne s’est déplacé pour être centré verticalement.

Alignez le contenu ci-dessous

Si vous souhaitez aligner votre contenu ci-dessous afin que tous les modules soient empilés au bas de votre colonne, voici comment ajuster la valeur de la marge:

margin: auto auto 0;

Aligner le contenu verticalement

Alignez le contenu verticalement pour toutes les colonnes de votre ligne

Au lieu d’ajouter « margin: auto » à chaque colonne individuellement, vous pouvez également centrer verticalement le contenu de toutes les colonnes de votre ligne en ajoutant l’extrait suivant à l’élément principal de vos paramètres de ligne.

align-items: center;

Aligner le contenu verticalement

Si vous souhaitez que tout le contenu de vos colonnes soit aligné en bas, vous pouvez ajouter cet extrait:

align-items: flex-end;

Et n’oubliez pas que vous pouvez profiter de la fonctionnalité « Développer les styles » de Divi en faisant un clic droit sur l’élément principal avec votre extrait CSS et en cliquant sur « Développer l’élément principal ».

Aligner le contenu verticalement

Développez ensuite l’élément CSS principal sur toutes les lignes de la page (ou de la section) pour centrer verticalement tout le contenu de chaque colonne de la page.

Aligner le contenu verticalement

Maintenant, tout est centré verticalement.

Aligner le contenu verticalement

Cependant, vous avez peut-être remarqué que la couleur d’arrière-plan de la colonne blanche ne couvre plus toute la hauteur de la ligne. C’est parce que nous avons ajouté « margin: auto » à la colonne. Pour résoudre ce problème, vous pouvez changer la couleur d’arrière-plan de la ligne en blanc et supprimer le remplissage de la ligne. Au lieu de cela, je vais vous montrer un moyen de centrer le contenu de votre colonne sans changer la marge.

Méthode 2: aligner le contenu verticalement en utilisant la direction de flexion de la colonne

Dans la première méthode, nous avons profité de la propriété Flex ajoutée à la ligne. Cela a fait de chacune de nos colonnes une « flexbox » qui peut être alignée verticalement en ajustant simplement la marge.

Mais il y a aussi une possibilité d’aligner le contenu de notre colonne dans le sens du pliage sans perdre l’effet de « égaliser la hauteur de colonne », avec lequel nos colonnes (et arrière-plans de colonnes) restent de la même taille. Pour ce faire, nous ajoutons simplement quelques lignes de CSS à notre colonne afin que tous les modules de la colonne soient empilés verticalement puis centrés.

Revenons à notre ligne dans l’exemple précédent. Ouvrez les paramètres de ligne et supprimez tous les fichiers CSS personnalisés en cliquant avec le bouton droit sur CSS personnalisé, puis en cliquant sur Réinitialiser les styles CSS personnalisés.

Ajoutez ensuite le CSS suivant sous l’élément principal de la colonne 2:

display: flex;
flex-direction: column;
justify-content: center;

Aligner le contenu verticalement

Ou si je veux aligner le contenu ci-dessous, remplacez simplement « Justifier le contenu: milieu » par « Justifier le contenu: flex-end ».

Aligner le contenu verticalement

La grande chose à propos de cette configuration est qu’une fois que je centre mon contenu verticalement et que je fais la ligne pleine largeur, le contenu reste centré.

Aligner le contenu verticalement

Création de présentations avec différentes quantités de texte alignées verticalement

Centrer le contenu de votre colonne verticalement peut également aider avec les présentations. Comme vous le savez, tous les textes de présentation ne contiennent pas la quantité exacte de texte utilisée pour décrire la fonctionnalité ou le service. En centrant ces présentations verticalement, vous pouvez créer un joli design pour votre mise en page.

Dans cet exemple, je vais aligner verticalement les présentations sur la mise en page de la page d’accueil des paiements numériques.

Je vais d’abord ajouter des quantités variables de corps de texte au texte de présentation pour donner une représentation plus réaliste de ce à quoi un site pourrait ressembler.

Aligner le contenu verticalement

Maintenant, je dois aller aux paramètres de ligne et « égaliser les hauteurs de colonne ».

Aligner le contenu verticalement

Je peux maintenant ajouter mes extraits CSS pour aligner mon contenu et modifier la conception.

Dans l’onglet Avancé de vos paramètres de ligne, nous pouvons centrer le contenu de nos colonnes verticalement en ajoutant sous Élément principal:

align-items: center;

Aligner le contenu verticalement

Ou changez-le comme ceci pour les aligner ci-dessous.

align-items: flex-end;

Aligner le contenu verticalement

Vous pouvez également réinitialiser vos styles CSS personnalisés et ajouter les marges personnalisées suivantes pour aligner la première colonne en bas et la troisième colonne en haut.

Colonne 1 élément principal CSS:

margin: auto auto 0;

Colonne 3 élément principal CSS:

margin: 0 auto auto;

Aligner le contenu verticalement

Qu’en est-il des dispositions à une seule colonne?

Techniquement, vous n’avez pas besoin d’un extrait de code CSS ou d’un flex pour centrer le contenu d’une colonne verticalement. Tout ce que vous avez à faire est de vous assurer que vous êtes à égale distance au-dessus et au-dessous de votre contenu (ou modules). Dans la plupart des cas, les utilisateurs ont besoin d’un contenu centré verticalement dans des mises en page à plusieurs colonnes, car ils souhaitent que le contenu adjacent soit parfaitement aligné.

Beaucoup d’utilisations

Il existe de nombreuses applications utiles qui aligneront verticalement votre contenu dans Divi. Ceci est utile pour les en-têtes qui ont une mise en page à deux colonnes avec le texte d’en-tête dans une colonne, et vous voulez vous assurer qu’un CTA (bouton) est centré verticalement dans l’autre colonne. Ceci est également utile pour centrer verticalement des logos dans une mise en page à six colonnes (surtout si les logos sont de dimensions légèrement différentes).

Dernières pensées

Bien que cette méthode soit basée sur quelques petits extraits de CSS personnalisé, je pense qu’elle peut être extrêmement utile si vous recherchez une solution rapide à un processus parfois fastidieux. J’aimerais entendre d’autres exemples où cela pourrait être utile.

N’hésitez pas à partager vos idées et commentaires ci-dessous.

De bas en haut!





Source link

Recent Posts