Modifier le nombre de colonnes à différents points d’arrêt dans le module Divi Gallery

Le module Divi Gallery vous permet de créer de belles galeries d’images dans une mise en page en grille rapide. La galerie est considérée comme réactive car elle Redimensionne l’image et ajuste le nombre de colonnes dans la grille en fonction de la largeur du navigateur. Par défaut, le module bibliothèque a trois points d’arrêt (points où le style change à une largeur de navigateur spécifique) qui contrôlent le nombre de colonnes dans la grille. Il affichera votre galerie d’images dans quatre colonnes sur votre bureau, puis dans trois colonnes sur votre tablette, deux colonnes sur votre petite tablette (et votre grand téléphone) et une colonne sur votre téléphone.
Cette configuration par défaut s’applique généralement à la plupart des situations, mais parfois vous pouvez avoir besoin de plus de contrôle sur le nombre de colonnes affichées sur une largeur de navigateur spécifique. C’est pourquoi, dans ce tutoriel, je vais vous montrer comment compléter le nombre de colonnes affichées dans le module Divi Gallery, non seulement pour le Bureau, mais aussi pour trois points d’arrêt supplémentaires du navigateur. Voici un aperçu de ce que nous allons construire dans ce tutoriel. Notez que le nombre de colonnes de la Bibliothèque d’images varie selon la largeur du navigateur. Préparation des éléments de conception
Pour ce tutoriel, vous devez installer et activer le thème Divi. Vous devez également ajouter 12 images à la Médiathèque pour créer la médiathèque. Pour le module Divi Gallery qui utilise la mise en page de la grille, si vous souhaitez ouvrir l’image dans l’affichage Lightbox, la taille de l’image devrait être d’environ 1500 Px 800 Px afin de remplir complètement l’écran sur la plupart des bureaux. Implémenter un espacement personnalisé pour le module galerie Divi configurer de nouvelles pages pour démarrer, créer de nouvelles pages, et
Et distribuer Divi Builder. Sélectionnez l’option créer à partir de zéro et Publiez la page. Puis cliquez pour construire à l’avant.
Avec Divi Builder distribué, continuez à créer une nouvelle section générale, ajoutez des lignes aux colonnes et ajoutez le module Divi Gallery aux lignes. Divi remplit les modules de la bibliothèque avec quelques images de la médiathèque dans la vue de la grille comme suit: Dans les paramètres du module bibliothèque, cliquez sur l’icône la plus grise pour ajouter 12 images à la bibliothèque. Puis mettre à jour les paramètres du module Divi Gallery comme suit: nombre d’images: 12 afficher le titre et le titre: ne pas afficher la mise en page: Non Ajuster les paramètres de ligne pour créer une bibliothèque pleine largeur sans largeur de gouttière afin que la nouvelle structure de colonne fonctionne correctement, la principale chose que nous devons faire est de supprimer l’espacement \/ marge par défaut qui existe entre les images dans la bibliothèque. Pour ce faire, il suffit de régler la largeur de la marge intérieure à 1. De plus, comme option, vous pouvez définir la ligne à pleine largeur de sorte que la Bibliothèque d’images occupe toute la largeur du navigateur. Pour ce faire, ouvrez les paramètres de ligne et mettez à jour ce qui suit:
Faire cette ligne pleine largeur: s largeur de fente: 1 Si vous voulez ajouter de l’espace entre les images de la bibliothèque, je vous recommande cette méthode parce que nous devons définir la largeur de la gouttière à 1. Comment Gallery répond aux différentes largeurs de navigateur décrites ci – dessus, par défaut, le module Gallery Divi affichera votre galerie d’images en quatre colonnes sur votre bureau, puis en trois colonnes sur votre tablette, deux colonnes sur votre petite tablette (et votre grand téléphone) et une colonne sur votre téléphone. Cependant, nous l’avons changé en incl.
Fournissez une classe CSS personnalisée pour notre module galerie afin que nous puissions faire référence à cette classe spécifique dans CSS. Cela garantit que notre CSS ne s’applique qu’aux modules spécifiques à cette bibliothèque. Pour ce faire, ouvrez les paramètres du module galerie et ajoutez les classes CSS suivantes dans l’onglet avancé:
Classe CSS: largeur de colonne Si vous avez ajouté un CSS personnalisé, n’oubliez pas d’extraire le CSS personnalisé ajouté au projet Gallery dans la section précédente de cet article. Ensuite, sauvegardez les paramètres. Lorsque la classe CSS est prête, vous pouvez ajouter un CSS personnalisé à la configuration de la page. Cliquez sur l’icône Gear dans la barre de configuration de la page au bas de la page pour ouvrir la configuration de la page (vous pouvez également utiliser le raccourci clavier « O »). Ensuite, ajoutez les CSS personnalisés suivants dans l’onglet avancé.
Bureau
Média (largeur minimale: 981px)
– Oui. Largeur de colonne. Et _ pb Gallery Project
Largeur: 16,66%! Important \/ * Six colonnes * \/
Clair: aucun! Important
}
}
Tablette
Médias (largeur maximale: 980px)
– Oui. Largeur de colonne. Et _ pb Gallery Project
Largeur: 25%! Important \/ * Quatre colonnes * \/
Clair: aucun! Important
}
}
Petites tablettes et téléphones portables
Média (largeur maximale: 767px)
– Oui. Largeur de colonne. Et _ pb Gallery Project
Largeur: 33,33%! Important \/ * Trois colonnes * \/
Clair: aucun! Important
}
}
Téléphone
Média (largeur maximale: 479px)
– Oui. Largeur de colonne. Et _ pb Gallery Project
Largeur: 50%! Important \/ * Deux colonnes * \/
Clair: aucun! Important
}
}

Ce CSS ajoutera un nombre personnalisé de colonnes à certains points d’arrêt comme suit: Bureau: 6 colonnes tableau: 4 colonnes petite table et grand Téléphone: 3 colonnes Téléphone: 2 colonnes comprendre et ajuster CSS afficher CSS, et vous remarquerez qu’il est divisé en quatre requêtes médias distinctes. La requête principale ajoute un style au navigateur de bureau