Comment changer le nombre de colonnes dans le module Divi Blog

Le module de blog de Divi peut afficher les articles de blog dans une mise en page pleine largeur ou en grille. Si vous choisissez la disposition en grille, le nombre maximum de colonnes que vous pouvez avoir est de trois. Dans ce didacticiel, nous allons explorer la combinaison de la puissance de CSS Grid avec le module Divi Blog pour créer le nombre de colonnes que vous souhaitez. Avec seulement quelques extraits de CSS, votre blog se transformera en une belle mise en page de grille multi-colonnes. De plus, les colonnes seront fluides et réactives avec toutes les tailles de navigateur, vous n'avez donc pas à vous soucier de la mise à jour de ces requêtes multimédias ou de ces paramètres réactifs. Après la magie CSS Grid, vous aurez toujours les paramètres du module de blog intégré pour concevoir le blog visuellement sans plus de CSS personnalisé. Donc, si vous cherchez plus de colonnes pour votre blog Divi, cela fera l'affaire et plus encore.

Aperçu

Voici un bref aperçu de la conception que nous allons créer dans ce didacticiel.

Et voici un codepen démontrant la disposition de la grille CSS que nous ajouterons au module de blog.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur le design du module de blog de ce tutoriel, vous devrez d'abord le télécharger à l'aide du 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis ! 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éabonné" ou ne recevrez pas 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 de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous 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 !

Abonnez-vous à notre chaîne Youtube

Pour importer la disposition 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 d'importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, d'accord ?

Comment changer le nombre de colonnes dans le module Divi Blog à l'aide de CSS Grid

Pourquoi CSS Grid ?

Il existe de nombreuses façons de créer des dispositions de colonnes pour le module de blog à l'aide de CSS. Mais pour cette instance, il est plus logique d'utiliser CSS Grid. La propriété CSS Grid 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 toutes les cartes du module de blog dans une grille entièrement réactive. En bref, il offre une solution simple et complète pour ajouter n'importe quelle disposition de colonne que vous souhaitez pour votre blog Divi. En fait, nous l'avons également utilisé pour créer une disposition en grille pour les modules Divi.

Maintenant, tournons notre attention vers le module blog.

Configuration d'un module de blog avec une mise en page pleine largeur

Le module Divi Blog peut être utilisé pour ajouter un blog n'importe où sur votre site Web. Cela rend très facile la création d'une page de blog dans Divi. Tout ce que vous avez à faire est d'ajouter un module de blog à la page à l'aide du Divi Builder.

Pour ce didacticiel, nous allons utiliser un modèle de page de blog prédéfini de l'un de nos packs de mise en page gratuits qui contient déjà un module de blog avec un style de base. Pour charger la mise en page de page de blog prédéfinie sur votre page, ouvrez le menu des paramètres en bas et ouvrez la fenêtre contextuelle Ajouter à partir de la bibliothèque. À partir de là, recherchez et trouvez la mise en page de la page du blog Fashion Design et chargez-la sur la page.

Une fois la mise en page chargée, recherchez le module de blog utilisé pour afficher les articles de blog et ouvrez les paramètres du module de blog.

Définir le nombre de publications

Dans les paramètres du blog, mettez à jour le contenu pour limiter le nombre de messages à 10. (C'est principalement pour des raisons esthétiques, car notre grille comprendra éventuellement deux lignes de cinq messages de blog sur le bureau.)

• Nombre de messages : 10

Sélectionnez la mise en page pleine largeur

Étant donné que nous allons créer la disposition des colonnes de notre blog à l'aide de CSS Grid, nous devons nous assurer que la disposition du module de blog est pleine largeur (pas de grille). Cela garantira que les articles de blog sont empilés verticalement dans leur ordre normal du document/de la page.

Pour modifier la disposition du module de blog, ouvrez les paramètres du module de blog et, sous l'onglet conception, ouvrez le menu déroulant Disposition et sélectionnez Pleine largeur .

Désormais, chaque article de blog doit s'étendre sur toute la largeur de la colonne (ou du conteneur parent).

Juste pour le plaisir, ajoutons une bordure aux articles de blog afin que nous puissions avoir une meilleure idée de ce à quoi ressemblera notre disposition de grille lorsque nous ajouterons notre CSS. Mettez à jour les options de bordure comme suit :

• Largeur bordure : 1px
• Couleur de bordure : rgba (150,104,70,0.35)

Ajout de la classe CSS personnalisée au module Blog

Afin de cibler efficacement ce module de blog particulier (pas un autre) avec notre CSS, nous devons donner à notre module une classe CSS personnalisée. Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : et-blog-css-grid

Création de la mise en page multi-colonnes avec CSS Grid

Maintenant que notre module de blog est configuré avec une mise en page pleine largeur, nous sommes prêts à ajouter notre CSS personnalisé. Pour l'instant, nous allons utiliser un module de code pour ajouter le CSS à la page. Mais, lorsque nous avons terminé, vous pouvez toujours déplacer le CSS vers votre emplacement préféré (comme le CSS personnalisé dans les options de thème ou le style.css de votre thème enfant).

Ajoutez un nouveau module de code sous le module de blog.

Dans la zone de saisie du code, ajoutez les balises de style nécessaires pour envelopper tout code CSS ajouté à une page.

À l'intérieur des balises de style , collez l'extrait de code CSS suivant :

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

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.

grid-template-columns : répéter (remplissage automatique, minmax (200px, 1fr)) ;

La troisième ligne détermine l'espacement entre les éléments de la grille (comme la largeur de la gouttière).

espace : 20px ;

Fonctionnement des colonnes de la grille CSS

Dans ce cas, la grille ajoutera des colonnes à plusieurs reprises selon les besoins pour remplir l'espace restant du conteneur de grille. Chaque colonne aura une largeur minimale de 200px et une largeur maximale de 1fr (ce qui est exactement la même chose que auto). Cela signifie que lorsque le conteneur parent (le Divi Row/Column) est à sa largeur maximale de 1080px, la grille aura 5 colonnes. Chaque colonne aura une largeur de 200px (la largeur minimale) qui équivaut à 1000px. Ajoutez les 4 espaces de grille de 20px et vous obtenez un total de 1080px. Une fois que la fenêtre d'affichage comprime la grille en dessous de 1080 pixels, la magie de la grille CSS prend le relais et remplit chaque espace disponible avec des articles de blog jusqu'à ce qu'ils atteignent une largeur de 200 pixels. De nouvelles lignes seront créées automatiquement au fur et à mesure qu'elles deviennent nécessaires par défaut.

Pour obtenir plus de colonnes, vous pouvez soit modifier la valeur minmax 200px en quelque chose de plus petit, soit augmenter la largeur maximale de la ligne Divi à quelque chose de plus grand que 1080px.

Voici un codepen démontrant la fonctionnalité CSS Grid Layout que nous avons ajoutée ici.

À ce stade, la grille réactive à cinq colonnes est prête à fonctionner. En fait, vous ne prévoyez pas d'utiliser la pagination ou les bordures pour vos articles de blog, vous pouvez vous arrêter ici.

Voici le résultat jusqu'à présent.

Styliser la carte postale de blog (ou l'élément de grille)

Ensuite, nous pouvons ajouter quelques lignes de CSS qui ciblent les éléments de la grille (ou les cartes postales du blog) afin qu'ils soient alignés en haut de chaque ligne et aient un peu de rembourrage.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Suppression de la pagination de la grille

Actuellement, si vous avez une pagination active sur le module de blog, elle sera traitée comme le dernier élément de grille dans la grille CSS. Pour supprimer complètement la pagination de la grille, nous pouvons lui donner une position absolue et la placer directement sous le module blog. Pour ce faire, ajoutez le CSS suivant :

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

Maintenant, les liens de pagination sont en toute sécurité à l'extérieur de la grille afin qu'ils ne soient pas déplacés sur différentes largeurs de fenêtre.

Voyons le résultat jusqu'à présent !

Astuce bonus : ajustez la taille de toutes les images en vedette (ou vignettes)

À ce stade, vous remarquerez peut-être l'incohérence de la hauteur des images présentées sur chaque carte postale de blog. Si vous voulez qu'ils aient tous la même hauteur, vous pouvez également utiliser du CSS supplémentaire pour le faire.

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Le premier extrait cible le conteneur d'image en vedette et ajoute un pourcentage de rembourrage qui ajuste essentiellement la hauteur du conteneur d'image. Mais le premier extrait ne fonctionne pas tant que nous n'avons pas positionné l'image sélectionnée de manière à ce qu'elle soit parfaitement centrée dans le conteneur d'images. Pour ce faire, nous donnons à l'image une position absolue et utilisons "object-fit:cover" pour que l'image s'étende sur toute la largeur et la hauteur du conteneur.

Avec un rembourrage supérieur de 56,25 %, nous devrions obtenir un rapport hauteur/largeur de 16:9 pour toutes nos images.

N'hésitez pas à ajuster le rembourrage sur le conteneur d'image pour obtenir le rapport d'aspect que vous souhaitez pour votre image.

Résultat final

Voici un autre regard sur l'ensemble du CSS que nous avons ajouté au module de code avec quelques commentaires.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Et voici un dernier aperçu de notre module de blog avec nos nouvelles colonnes et notre grille.

Dernières pensées

Cela me surprend toujours de ce qui peut être accompli avec seulement quelques lignes de CSS en utilisant CSS Grid. Dans ce cas, nous avons pu restructurer l'ensemble du module de blog Divi en une mise en page fluide à cinq colonnes. La meilleure partie est que vous n'avez pas à vous soucier de l'utilisation des requêtes multimédias ! J'espère que cela vous fera gagner du temps et vous donnera plus d'options pour créer de belles pages de blog.

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

Acclamations!