Modification du nombre de colonnes dans le module Divi Gallery à différents points d'arrêt

Le module Divi Gallery vous permet de créer une belle galerie d'images dans une disposition en grille réactive. La galerie est considérée comme responsive car elle adaptera la taille de vos images et ajustera le nombre de colonnes de la grille en fonction des différentes largeurs de navigateur.

Par défaut, le module de galerie a trois points d'arrêt (points où le style change à certaines largeurs de navigateur) qui ajustent le nombre de colonnes dans la grille. Il affichera votre galerie d'images en quatre colonnes sur le bureau, puis se divisera en trois colonnes sur tablette, deux colonnes sur petites tablettes (et grands téléphones) et une colonne sur téléphones.

Cette configuration par défaut fonctionnera généralement dans la plupart des cas, mais vous aurez parfois besoin de plus de contrôle sur le nombre de colonnes affichées sur certaines largeurs de navigateur. C'est pourquoi dans ce tutoriel, je vais vous montrer comment avoir terminé le nombre de colonnes affichées dans le module Divi Gallery non seulement pour le bureau, mais également pour trois points d'arrêt de navigateur supplémentaires.

Aperçu

Voici un aperçu de ce que nous allons construire dans ce tutoriel. Notez le nombre différent de colonnes pour la galerie d'images sur différentes largeurs de navigateur.

Préparation de vos éléments de conception

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, vous aurez besoin du thème Divi installé et actif. Vous aurez également besoin de 12 images ajoutées à votre médiathèque pour être utilisées pour la construction de la galerie d'images. Pour un module de galerie Divi utilisant une disposition en grille, la taille de vos images doit être d'environ 1500px par 800px si vous prévoyez que vos images s'ouvrent en affichage lightbox afin qu'elles remplissent bien l'écran sur la plupart des ordinateurs de bureau.

Implémentation de l'espacement personnalisé pour le module Divi Gallery

Configuration d'une nouvelle page

Pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez le Divi Builder. Sélectionnez l'option « Créer à partir de zéro », puis publiez votre page. Cliquez ensuite pour construire sur le front-end.

Création de la galerie d'images

Avec le Divi Builder déployé, allez-y et créez une nouvelle section régulière avec une ligne à une colonne et ajoutez un module Divi Gallery à la ligne.

Divi remplira le module de galerie avec quelques images de votre galerie multimédia dans un affichage en grille comme le suivant :

Dans les paramètres du module de galerie, cliquez sur l'icône grise plus pour ajouter 12 images à la galerie.

Mettez ensuite à jour les paramètres du module Divi Gallery comme suit :

Nombre d'images : 12
Afficher le titre et la légende : NON
Afficher la pagination : NON

Ajustez les paramètres de ligne pour créer une galerie pleine largeur sans largeur de gouttière

Pour que notre nouvelle structure de colonnes fonctionne, la principale chose que nous devons faire est de supprimer l'espacement/la marge par défaut qui existe entre nos images dans la galerie. Pour ce faire, il suffit de définir la largeur de la gouttière sur 1. De plus, en option, vous pouvez faire la ligne en pleine largeur afin que la galerie d'images s'étende sur toute la largeur du navigateur. Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Faire cette ligne pleine largeur : OUI
Largeur de gouttière : 1

Si vous souhaitez ajouter un espacement entre les images de la galerie, je vous suggère d'utiliser cette méthode car nous devons conserver la largeur de la gouttière définie sur 1.

Comment la galerie répond aux différentes largeurs de navigateur par défaut

Comme mentionné précédemment, par défaut, le module de galerie Divi affichera votre galerie d'images en quatre colonnes sur le bureau, puis se divisera en trois colonnes sur tablette, deux colonnes sur petites tablettes (et grands téléphones) et une colonne sur téléphones.

Cependant, nous allons modifier cela pour inclure un nombre personnalisé de colonnes à certains points d'arrêt en utilisant quelques extraits de CSS personnalisés.

Définir un nombre spécifique de colonnes pour toutes les tailles de navigateur

Si vous souhaitez modifier le nombre de colonnes affichées dans la galerie afin que le nombre de colonnes reste le même sur toutes les tailles de navigateur, il existe un moyen simple de le faire. Cela peut être utile si vous souhaitez afficher votre galerie uniquement sur une colonne, deux colonnes ou trois colonnes. De cette façon, vous pouvez avoir de très grandes images sur le bureau et des images plus petites sur mobile tout en gardant le même numéro de colonne. Avoir quatre colonnes ou plus ne fonctionnera probablement pas car les images seront trop petites pour les écrans de téléphone.

Supposons que vous souhaitiez afficher trois colonnes sur toutes les tailles de navigateur. Pour ce faire, ouvrez les paramètres de votre module de galerie Divi et ajoutez le CSS personnalisé suivant à l'élément de la galerie :

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Désormais, votre galerie conservera la structure à trois colonnes sur toutes les tailles de navigateur.

Si vous vouliez une disposition à 2 colonnes pour toutes les tailles de navigateur, il vous suffit de modifier la valeur de la propriété width à 50 %.

Si vous souhaitez une mise en page à 1 colonne, mettez simplement à jour la largeur à 100 %.

C'est ça.

Mais, si vous souhaitez mieux contrôler le nombre de colonnes à certains points d'arrêt, lisez la suite.

Modification du nombre de colonnes pour des points d'arrêt spécifiques

Si vous souhaitez avoir un contrôle total sur le nombre de colonnes affichées lorsque le navigateur atteint certains points d'arrêt, nous pouvons utiliser quelques extraits de CSS avec des requêtes multimédias qui ciblent certaines largeurs de navigateur.

Ajouter la classe CSS au module Divi Gallery

Avant d'ajouter le CSS personnalisé, nous devons d'abord donner à notre module de galerie une classe CSS personnalisée afin que nous puissions référencer cette classe spécifique dans notre CSS. Cela garantira que notre CSS n'est appliqué qu'à ce module de galerie spécifique. Pour ce faire, ouvrez les paramètres du module de galerie et ajoutez la classe CSS suivante sous l'onglet avancé :

Classe CSS : col-largeur

N'oubliez pas de retirer le css personnalisé ajouté à l'élément de la galerie dans la section précédente de cet article si vous l'avez ajouté.

Après cela, enregistrez vos paramètres.

Ajouter le CSS personnalisé aux paramètres de la page

Avec votre classe CSS en place, vous êtes prêt à ajouter le CSS personnalisé. Ouvrez les paramètres de page en cliquant sur l'icône d'engrenage dans la barre des paramètres de page en bas de la page (ou vous pouvez utiliser le raccourci clavier « o »).

Ajoutez ensuite le CSS personnalisé suivant sous l'onglet avancé.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

Ce CSS ajoutera un nombre personnalisé de colonnes à certains points d'arrêt comme suit :

Bureau : 6 colonnes
Tablette : 4 colonnes
Petite Tablette et Grand Téléphone : 3 colonnes
Téléphone : 2 colonnes

Comprendre et ajuster le CSS

En regardant le CSS, vous remarquerez qu'il est divisé en quatre requêtes média distinctes. La requête média supérieure ajoute un style aux navigateurs de bureau (navigateurs d'une largeur minimale de 981 pixels). La deuxième requête multimédia ajoute un style aux navigateurs autour de la taille de la tablette, et ainsi de suite.

Dans chaque requête média, le CSS le plus important à ne pas prendre en compte est la propriété width. Cela désigne la taille de chaque élément de la galerie et définit également la largeur de la colonne pour la galerie.

Par exemple, la requête média supérieure pour le bureau définit la largeur de l'élément de la galerie sur 16,66 %.

Cela équivaut à un sixième de la largeur totale de son conteneur (ou rangée). Par conséquent, la galerie affichera une mise en page à six colonnes sur le bureau.

Pour ajuster le nombre de colonnes pour le bureau, il vous suffit de modifier la propriété width en une valeur différente. Voici une liste de pourcentages de largeur que vous pouvez essayer.

12 colonnes : 8,33 %
10 colonnes : 10 %
8 colonnes : 12,5%
6 colonnes : 16,66 %
5 colonnes : 20%
4 colonnes : 25 %
3 colonnes : 33,33 %
2 colonnes : 50 %
1 colonne : 100 %

Résultat final

Voici le résultat final sur les différentes largeurs de navigateur.

Bureau (6 colonnes)

Tablette (4 colonnes)

Petite Tablette et Grand Téléphone (3 colonnes)

Téléphone (2 colonnes)

Dernières pensées

J'espère que ce didacticiel a été utile pour ceux d'entre vous qui cherchent à mieux contrôler le nombre de colonnes que votre galerie affiche sur certains appareils ou points d'arrêt. Avec cette configuration, vous pouvez ajouter le nombre de colonnes que vous souhaitez pour n'importe quelle largeur de navigateur afin de créer des affichages de galerie en pensant à l'utilisateur.

Les points d'arrêt que j'ai utilisés dans le CSS personnalisé sont ceux que Divi utilise déjà. N'hésitez pas à consulter notre article sur la façon d'affiner vos conceptions avec des requêtes médiatiques pour plus d'informations sur ce concept.

Jusqu'à la prochaine fois, j'ai hâte de vous entendre dans les commentaires.

À votre santé!