Comment créer une mise en page de grille pour les modules Divi avec CSS

Blair Jersyer Divi Tutorials Apr 28, 2021

Connaissez-vous la création de sites Web magnifiques en utilisant Divi? Vous devez probablement savoir que la disposition de la grille est une caractéristique centrale du constructeur Divi. Habituellement, vous commencez par créer une ligne et choisissez de créer plusieurs colonnes pour cette ligne. Avec la colonne en place, c’est là que vous allez ajouter des modules. Nous pouvons faire avancer les choses, en ajoutant plus de grilles pour ces modules.

Tout au long de ce tutoriel, nous explorerons comment étendre la mise en page de la grille de Divi en créant des mises en page de grille CSS pour les modules Divi avec une seule colonne. La grille CSS est (en utilisant CSS Flex) est très populaire pour créer des grilles réactives pour le contenu avec seulement quelques lignes CSS. Nous pouvons ensuite organiser tous nos modules pour être réactifs. Considérez cela comme une mise en page supplémentaire pour les modules que vous pouvez ajouter à une colonne Divi. Le bon point ici est que tous nos modules imbriqués auront la même hauteur et largeur sans avoir besoin de fixer des valeurs de rembourrage et de hauteur.

Aperçu du résultat final

Avant de commencer, voyons ce que vous serez en mesure d’atteindre d’ici la fin de ce tutoriel.

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

Partie 1 : Ajout des modules à une colonne Divi

Une des premières choses que nous devons faire, est d’organiser nos modules en dispositions de grille. Nous ajouterons tous les modules que nous voulons utiliser à notre colonne. Commençons par créer une nouvelle ligne d’une colonne à la section régulière par défaut.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Création des modules

Dans les colonnes, w e’ll ajouter le module texte. Nous modifierons ensuite les paramètres de contenu comme suit :

  1. Ajouter un titre H2 au-dessus du texte du paragraphe
  2. Couleur de fond: #444444

Nous mettrons également à jour les paramètres de conception comme suit :

  1. Police textuelle: Poppins
  2. Couleur du texte: Lumière
  3. Sélectionnez l’onglet H2 sous rubrique Texte
  4. Cap 2 Font Style: TT
  5. Rembourrage: 10% en haut, 10% en bas, 10% à gauche 10% à droite

REMARQUE: Pour être très simple, nous allons continuer à utiliser plusieurs modules de texte avec différentes couleurs de fond pour montrer une distinction entre chaque module.

Passez à la vue couches et créez le module texte suivant comme suit :

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

Vous pouvez répéter ce processus pour créer le troisième module de texte comme suit :

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

Nous répéterons le processus une fois de plus pour créer le quatrième module de texte comme suit :

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

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

Partie 2 : Créons la mise en page de la grille CSSPour les modules

Maintenant que tous nos modules sont ajoutés, créons une grille pour ceux-ci.

Paramètres de la ligne

Par exemple, nous utilisons une disposition d’une colonne afin que nous puissions afficher notre grille de module dans une mise en page pleine largeur. Maintenant, nous aurons besoin de mettre à jour les paramètres de la ligne pour s’assurer que la ligne prend toute la largeur de la page. Nous aurons également besoin de sortir 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 la ligne et mettez à jour les éléments suivants :

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

Ajout de la grille CSS à la colonne pour construire la mise en page de grille pour les modules

Il s’agit d’une étape importante dans le tutoriel qui crée la mise en page pour les modules en utilisant la propriété CSS Grid.

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

Ouvrez les paramètres de la colonne et, sous l’onglet avancé, coller le CSS suivant à l’intérieur de l’élément principal :

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

La première ligne de CSS dispose du contenu (ou modules) selon le Module grille CSS.

Affichage: grille

Sur la deuxième ligne du CSS, nous définirons le modèle de colonne de la grille. Dans ce cas, notre grille aura quatre colonnes qui ont 25% de largeur.

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

La troisième ligne mentionne les lignes qui seront générées automatiquement. Cela signifie que la hauteur de chaque ligne sera déterminée par la hauteur verticale du contenu (ou des modules) dans la rangée.

Grid-auto-rows: auto

Adjust Grid Layout on Mobile

Maintenant, nous aurons également besoin d’ajuster la disposition du réseau sur les appareils mobiles au besoin.

Pour ce faire, nous aurons juste besoin d’ajouter un peu de CSS à la fois tablette et mobile qui modifie le nombre de colonnes et la largeur de chaque colonne.

Dans cet exemple, nous allons changer la disposition de la grille pour les modules sur les tablettes pour être deux colonnes qui sont chacun de 50% de largeur.

Ouvrons les options réactives et sélectionnons l’onglet tablette sous l’élément principal et coller le CSS suivant :

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

Pour l’affichage du téléphone, nous voulons une mise en page à colonne unique. Pour créer ceci, coller le CSS suivant sous l’élément principal d’onglet de téléphone :

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

Partie 3 : Apporter des modifications aux modules de grille

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

Maintenant que nous avons chaque module à la grille, si nous ajoutons plus de modules, l’autre sera poussé vers la droite et de nouvelles lignes seront créées. Puisque nous avons besoin d’un module de plus pour cette mise en page de toute façon, dupliquer le premier module texte pour voir comment les autres modules s’ajustent dans la grille.

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

En attendant, tous les modules ont la même quantité de contenu, donc nous ne pouvons pas vraiment voir comment la grille va gérer les modules qui ont différentes hauteurs. Pour voir comment cela fonctionne, modifiez la quantité de texte du paragraphe dans chaque module. Notez que les modules resteront de la même hauteur que le module avec la plupart du contenu dans la même rangée. A partir de maintenant, la hauteur de la ligne sera également déterminée par le module avec le plus de contenu (ou de hauteur verticale).

Modification de la position des modules sur la grille

Les éléments de la grille CSS peuvent être positionnés à l’aide du système de numérotation intégré sur le module de grille. Chaque ligne sur la grille représente un nombre. Pour les colonnes, les numéros de ligne commencent à 1 et se poursuivent horizontalement. Chaque numéro de ligne se trouve au début et à la fin de chaque colonne. Ainsi, pour notre structure de colonne, le numéro de ligne commence à partir de 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 pour les lignes commencent à 1 en haut de la première rangée et jusqu’à 4 au bas de la troisième rangée.

Si nous voulons modifier la position d’un module (ou d’un élément de grille) dans CSS Grid, nous pouvons définir où nous voulons qu’un certain module soit placé dans la grille. Cela l’emportera sur le placement par défaut du module dans la grille.

Par exemple, nous déplacerons le premier module de texte vers une position différente. Pour cela, nous avons juste besoin d’ajouter deux lignes de CSS au module.

Ouvrez les paramètres du premier module texte et coller le CSS personnalisé suivant à l’élément principal :

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

La première ligne de CSS définit la position du module horizontalement en disant au module de démarrer sur la ligne 2 de la colonne et de se terminer sur la ligne 4 de la colonne.

Colonne grille: 2/4

La deuxième ligne de CSS définit verticalement la position du module (ou élément de grille) en disant au module de démarrer sur la ligne 2 et de terminer sur la ligne 3.

Ligne de grille: 2/3

Pour l’affichage des tablettes et des téléphones, nous ramèneons le module à l’emplacement d’origine. Ceci est utile pour garder votre en-tête principal en haut de la page.

Donc, pour cela, sélectionnez l’onglet tablette sous l’option réactive pour l’élément principal et coller le CSS suivant:

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

Maintenant, la position du module va revenir à l’original (automatique) flux des éléments de grille.

Allons-y et position de quelques modules supplémentaires (ou éléments de grille) en utilisant cette méthode.

Nous allons maintenant 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 1 de la colonne et se terminera sur la ligne 2 de la colonne et commencera également à la ligne 2 et se terminera sur la ligne 4.

Pour ce faire, ouvrez les paramètres du troisième module texte et coller le CSS personnalisé suivant à l’élément principal :

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

Nous pouvons maintenant changer la position du mobile en ajoutant le CSS suivant pour tablette :

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

Pour notre dernière modification, nous positionnerons le septième module à un nouvel emplacement défini dans la grille. Cette nouvelle position commencera à la ligne 4 de la colonne et se terminera sur la ligne 5 de la colonne et commencera également à la ligne 2 et se terminera sur la ligne 4.

Pour cela, ouvrons les paramètres du septième module texte et coller le CSS personnalisé suivant à l’élément principal :

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

Maintenant coller le CSS suivant pour l’affichage tablette.

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

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

Vous êtes probablement fatigué de l’instruction, mais si nous nous arrêtons ici, nous allons passer à côté d’un moyen utile d’aligner (ou de centrer) notre contenu du module verticalement. Avoir le contenu du module centré verticalement est une caractéristique agréable d’une mise en page de grille, car il rend tout plus symétrique et esthétiquement agréable.

Donc, pour cela, 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. Nous pouvons utiliser multi-sélectionner pour sélectionner tous les modules (ou éléments de grille) qui n’ont pas déjà css personnalisé à l’élément principal (parce que nous ne voulons pas passer outre ces modules avec 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 Advanced, coller le CSS suivant sur l’élément principal :

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

Nous pouvons maintenant revenir à nos trois autres modules (module #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 CSS sous le CSS existant pour ordinateur de bureau et tablette.

Résultat final

Voici à quoi ressemble ce que nous avons fait jusqu’à présent.

Pouvez-vous remarquer comment les modules (ou les éléments de grille) s’ajustent en douceur sur différentes largeurs de navigateur pour une conception agréable et réactive.

Exemple réel utilisant différents modules et conceptions

Si vous voulez voir un exemple réel en utilisant ce système de grille, alors vous pouvez utiliser différents modules. Voici ce que vous pouvez créer en utilisant cette technique. Ceci est disponible sur le pack de mise en page fitness gym.

Dans tous les vôtres maintenant

Dans ce tutoriel, nous avons travaillé sur la création d’une mise en page de grille CSS pour les modules Divi. Bien que le processus ne s’appuient sur certains CSS personnalisés, il n’est étonnamment pas beaucoup, compte tenu des résultats puissants que nous pouvons avoir de lui. Il est agréable de pouvoir contrôler la disposition de tous vos modules au niveau de la colonne en cas de besoin pour des mises en page Divi plus uniques. Si vous êtes un toxicomane CSS et que vous souhaitez plonger en outre, vous devriez consulter Ce guide complet pour envisager plus de possibilités.

Nous serons heureux de voir à quel point vous avez du succès dans la section commentaires.

Divi WordPress Theme