Comment créer une disposition de grille CSS pour les modules Divi

Pour ceux qui sont déjà familiarisés avec la création de sites Web dans Divi, la création de mises en page de grille personnalisées est un aspect essentiel de Divi Builder. Créez simplement une ligne et choisissez parmi plusieurs dispositions de colonnes intégrées pour cette ligne. Une fois la disposition des colonnes en place, nous ajoutons simplement le contenu/les modules que nous voulons à l'intérieur de chaque colonne. Mais, et si nous voulions une disposition de grille supplémentaire pour ces modules ?

Dans ce tutoriel, nous allons explorer comment développer les dispositions de grille de Divi en créant des dispositions de grille CSS pour les modules Divi dans une seule colonne. La propriété CSS Grid (avec CSS Flex) est un moyen populaire de créer des mises en page de grille prévisibles et réactives pour le contenu avec seulement quelques lignes de CSS. Avec lui, nous pouvons organiser tous les modules d'une colonne dans une grille entièrement réactive. Considérez-le comme une disposition de grille supplémentaire pour les modules que vous pouvez ajouter à n'importe quelle colonne Divi. Mais l'une des meilleures choses à propos de cette technique est que chaque module adjacent aura la même hauteur et la même largeur sans avoir à essayer de le faire en utilisant un remplissage personnalisé ou des valeurs de hauteur sur chaque module.

Peut-être est-il préférable que nous intervenions et vous montrions comment cela fonctionne.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Et voici un aperçu de la même technique en utilisant différents modules et conceptions du pack de mise en page Fitness Gym.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Création d'une disposition de grille CSS personnalisée pour les modules Divi

Partie 1 : Ajouter les modules à une colonne Divi

Avant d'organiser nos modules dans une disposition en grille, ajoutons d'abord tous les modules que nous voulons utiliser à notre colonne.

Pour commencer, créez une nouvelle ligne à une colonne dans la section régulière par défaut du Divi Builder.

Création des modules

Dans la colonne de la ligne, ajoutez un nouveau module de texte. Mettez ensuite à jour les paramètres de contenu du module comme suit :

1. Ajoutez un titre H2 au-dessus du texte du paragraphe du contenu du corps par défaut
2. Couleur d'arrière-plan : #333333

Mettez ensuite à jour les paramètres de conception comme suit :

1. Police de texte : Poppins
2. Couleur du texte : clair
3. Sélectionnez l'onglet H2 sous Titre du texte
4. Titre 2 Style de police : TT
5. Rembourrage : 10 % haut, 10 % bas, 10 % gauche 10 % droite

REMARQUE : Par souci de simplicité, nous allons nous en tenir à l'utilisation de plusieurs modules de texte avec différentes couleurs d'arrière-plan pour montrer une distinction entre chaque module. Mais, comme je l'expliquerai plus tard, vous pouvez utiliser n'importe quelle combinaison de modules que vous souhaitez (modules de présentation, modules d'appel à l'action, modules de formulaire de contact, etc.).

Ouvrez la vue des calques (facultatif) et créez le prochain module de texte comme suit :

1. Dupliquez le module de texte.
2. Ouvrez les paramètres de texte pour le module en double.
3. Mettre à jour la couleur d'arrière-plan
   • Couleur de fond : #4c6085

Répétez ce processus pour créer le troisième module de texte comme suit :

1. Dupliquez le module de texte précédent.
2. Ouvrez les paramètres de texte pour le module en double.
3. Mettre à jour la couleur d'arrière-plan
   • Couleur de fond : #39a0ed

Répétez ce processus une fois de plus pour créer le quatrième module de texte comme suit :

1. Dupliquez le module de texte précédent.
2. Ouvrez les paramètres de texte pour le module en double.
3. Mettre à jour la couleur d'arrière-plan
   • Couleur de fond : #13c4a3

Pour créer les quatre modules suivants, utilisez la fonction de sélection multiple pour sélectionner les quatre modules. Ensuite, copiez et collez les modules dans la même colonne pour créer un total de huit modules de texte.

Partie 2 : Création de la disposition de la grille CSS pour les modules

Maintenant que nos modules sont en place, nous sommes prêts à créer notre grille CSS pour ces modules.

Paramètres de ligne

Pour cet exemple, nous utilisons une disposition à une colonne afin de pouvoir afficher notre grille de modules dans une disposition pleine largeur. Nous devrons donc mettre à jour les paramètres de ligne pour nous assurer que la ligne s'étend sur toute la largeur de la page. Nous devons également supprimer la largeur de gouttière par défaut afin qu'aucune marge supplémentaire ne soit ajoutée à nos modules.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ajout d'une grille CSS à la colonne pour créer la disposition de la grille pour les modules

Il s'agit de l'étape clé du didacticiel qui crée la mise en page des modules à l'aide de la propriété CSS Grid.

Pour ce faire, nous allons ajouter trois lignes de CSS à la Column qui détermineront la disposition de nos modules.

Ouvrez les paramètres de la colonne et, sous l'onglet avancé, collez le CSS suivant dans l'élément principal :

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

La première ligne de CSS présente le contenu (ou les modules) selon le module de grille CSS.

affichage:grille

La deuxième ligne de CSS définit le modèle de colonne de la grille. Dans ce cas, la grille aura quatre colonnes de 25% de largeur chacune (voir capture d'écran ci-dessus).

grille-modèle-colonnes : 25% 25% 25% 25%

La troisième ligne de CSS spécifie que les lignes seront générées automatiquement selon les besoins avec une taille (ou une hauteur) définie sur auto. Cela signifie que la hauteur de chaque ligne sera déterminée par la hauteur verticale du contenu (ou des modules) dans la ligne (voir capture d'écran ci-dessus).

grid-auto-rows: auto

Ajuster la disposition de la grille sur mobile

Nous devrons également ajuster la disposition de la grille sur les appareils mobiles selon les besoins.

Pour cela il suffit d'ajouter du CSS supplémentaire à chaque tablette un mobile qui modifie le nombre de colonnes et la largeur de chaque colonne.

Dans cet exemple, nous allons modifier la disposition de la grille pour les modules sur tablette en deux colonnes de 50 % de largeur chacune.

Ouvrez les options réactives et sélectionnez l'onglet tablette sous l'élément principal et collez le CSS suivant :

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Pour l'affichage du téléphone, nous voulons une disposition à une seule colonne. Pour le créer, collez le CSS suivant sous l'onglet Téléphone Élément principal :

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Partie 3 : Apporter des modifications aux éléments de grille (ou modules)

Ajout d'un nouveau module à la grille et comment il réagit

Maintenant que chaque module est à l'intérieur de la grille CSS, l'ajout d'un nouveau module poussera les autres modules vers la droite et créera automatiquement de nouvelles lignes selon les besoins.

Puisque nous avons de toute façon besoin d'un module de plus pour cette mise en page, dupliquez le premier module de texte pour voir comment les autres modules s'ajustent dans la grille.

Comment Grid répond aux modules avec différentes quantités de contenu

À l'heure actuelle, tous les modules de texte ont la même quantité de contenu, il est donc difficile de voir comment la disposition de la grille gère les modules avec différentes quantités de contenu. Pour voir comment cela fonctionne, modifiez la quantité de texte de paragraphe dans chaque module. Notez que les modules resteront à la même hauteur que le module avec le plus de contenu dans la même ligne. Et la hauteur de ligne sera également déterminée par le module avec le plus de contenu (ou hauteur verticale).

Modification de la position des modules (ou éléments de grille)

Les éléments de grille CSS peuvent être positionnés à l'aide du système de numérotation de ligne intégré du module de grille. Chaque ligne de la grille représente un nombre. Pour les colonnes, les numéros de ligne commencent à 1 et continuent horizontalement. Chaque numéro de ligne se trouve au début et à la fin de chaque colonne. Ainsi, pour notre structure à quatre colonnes, le numéro de ligne commence à 1 à gauche de la première colonne et se termine à 5 à droite de la quatrième colonne. Et, puisque nous avons trois lignes, les numéros de ligne des lignes commencent à 1 en haut de la première ligne et continuent jusqu'à 4 en bas de la troisième ligne.

Pour changer la position d'un module (ou d'un élément de grille) dans CSS Grid, nous pouvons définir l'endroit où nous voulons qu'un certain module soit placé dans la grille. Cela remplacera le placement par défaut du module dans la grille.

Pour cet exemple, nous allons déplacer le premier module de texte vers une position différente. Pour ce faire, nous devons ajouter deux lignes de CSS au module.

Ouvrez les paramètres du premier module de texte et collez le CSS personnalisé suivant dans l'élément principal :

grid-column: 2/4;
grid-row: 2/3;

La première ligne de CSS définit la position du module (ou de l'élément de grille) horizontalement en indiquant au module de commencer sur la ligne de colonne 2 et de se terminer sur la ligne de colonne 4.

colonne-grille : 2/4

La deuxième ligne de CSS définit la position du module (ou de l'élément de grille) verticalement en indiquant au module de commencer à la ligne 2 et de se terminer à la ligne 3.

grille-ligne: 2/3

Pour l'affichage sur tablette et téléphone, nous souhaitons ramener le module à son emplacement d'origine. Ceci est utile pour garder votre en-tête principal en haut de la page.

Pour ce faire, sélectionnez l'onglet tablette sous l'option responsive de l'élément principal et collez le CSS suivant :

grid-column: auto;
grid-row: auto;

Maintenant, la position du module reviendra au flux d'origine (automatique) des éléments de la grille.

Allons de l'avant et positionnons quelques modules supplémentaires (ou éléments de grille) en utilisant cette méthode.

Nous allons positionner le troisième module de texte (maintenant dans la deuxième colonne de la rangée supérieure) à un nouvel emplacement défini dans la grille. Cette nouvelle position commencera à la ligne de colonne 1 et se terminera à la ligne de colonne 2 et commencera également à la ligne de ligne 2 et se terminera à la ligne de ligne 4.

Pour ce faire, ouvrez les paramètres du troisième module de texte et collez le CSS personnalisé suivant dans l'élément principal :

grid-column: 1/2;
grid-row: 2/4;

Nous pouvons maintenant modifier la position sur mobile en ajoutant le CSS suivant pour tablette :

grid-column: auto;
grid-row: auto;

Pour notre dernier placement de grille de module personnalisé, nous allons positionner le septième module de texte (maintenant dans la dernière colonne de la deuxième ligne) à un nouvel emplacement défini dans la grille. Cette nouvelle position commencera à la ligne de colonne 4 et se terminera à la ligne de colonne 5 et commencera également à la ligne de ligne 2 et se terminera à la ligne de ligne 4.

Pour ce faire, ouvrez les paramètres du septième module de texte et collez le CSS personnalisé suivant dans l'élément principal :

grid-column: 4/5;
grid-row: 2/4;

Collez ensuite le CSS suivant pour l'affichage sur tablette comme nous l'avons fait pour les modules précédents.

grid-column: auto;
grid-row: auto;

Alignement du contenu du module (ou de l'élément de grille) au centre

Nous pourrions nous arrêter là, mais nous passerions à côté d'un moyen utile d'aligner (ou de centrer) verticalement le contenu de notre module. Le fait d'avoir un contenu de module (ou d'élément de grille) centré verticalement est une caractéristique pratique d'une disposition en grille, car cela rend tout plus symétrique et plus esthétique.

Pour ce faire, nous pouvons ajouter un extrait de CSS qui utilise la propriété flex CSS pour aligner et justifier le contenu au centre. Nous devons ajouter cet extrait à chacun des modules. Pour ce faire, nous pouvons utiliser la sélection multiple pour sélectionner tous les modules (ou éléments de grille) qui n'ont pas déjà de CSS personnalisé pour l'élément principal (nous ne voulons pas remplacer ces modules par des positions personnalisées). Ouvrez ensuite les paramètres de l'élément en ouvrant les paramètres de l'un des modules sélectionnés. Sous l'onglet Avancé, collez le CSS suivant dans l'élément principal :

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

Nous pouvons maintenant revenir à nos trois autres modules (modules #1, #3 et #7) individuellement et ajouter le même extrait de CSS en plus du CSS qui a été utilisé pour donner au module une position personnalisée sur la grille. Assurez-vous d'ajouter l'extrait de code CSS sous le CSS existant pour le bureau et la tablette.

Ajouter CSS au premier module de texte

Ajouter CSS au troisième module de texte

Ajouter CSS au septième module de texte

Résultat final

Voici le résultat final de notre mise en page de grille CSS personnalisée pour nos modules de texte.

Remarquez comment les modules (ou éléments de grille) s'ajustent en douceur sur différentes largeurs de navigateur pour une belle conception réactive.

Exemple utilisant différents modules et conceptions

Il est difficile de voir tout le potentiel de l'utilisation de la grille CSS pour créer des mises en page de modules en utilisant uniquement des modules de texte. J'ai donc pensé vous montrer un design que j'ai créé en appliquant les mêmes étapes dans ce didacticiel en utilisant différents modules et éléments de conception de notre pack de mise en page Fitness Gym.

C'est ici…

J'ai également inclus cette mise en page avec la mise en page du module de texte avec le téléchargement gratuit présenté au début de cet article.

N'hésitez pas à l'essayer !

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment créer une disposition de grille CSS pour les modules Divi. Bien que le processus repose sur du CSS personnalisé, ce n'est étonnamment pas tant que ça, compte tenu des résultats puissants qu'il peut avoir. Il est agréable de pouvoir contrôler la disposition de tous vos modules au niveau des colonnes lorsque cela est nécessaire pour des dispositions Divi plus uniques. Pour plus d'informations sur la grille CSS, vous devriez consulter ce guide complet pour envisager plus de possibilités.

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

À votre santé!