Sélectionner une page


Cet article concerne le style du module Divi Gallery. Par défaut, la Divi Gallery comporte 4 colonnes sur le bureau et 1 colonne sur le téléphone mobile. Cependant, ce tutoriel montre 5 colonnes sur le bureau et 2 sur le téléphone.

Nous y parviendrons en utilisant du code CSS personnalisé.

La première chose à faire est de créer votre galerie. Créez une nouvelle page Divi, ajoutez une nouvelle section, une ligne et un module de galerie. Ensuite, ajoutez au moins 10 images à votre galerie (afin que nous ayons au moins 2 lignes d’images).

Module Galerie Divi

Ajoutez ensuite une largeur de colonne de classe CSS personnalisée à votre module de galerie.

Classe CSS de la galerie

Et ci-dessous est le code que vous devez utiliser si vous voulez que votre galerie ait 5 colonnes sur le bureau. Vous devez soit ajouter ce code au CSS personnalisé qui est stocké dans les options générales du thème Divi. Ou vous pouvez simplement le coller dans le champ de code CSS personnalisé de chaque page.

@media (min-width: 981px){
	.et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {
		clear: none; 
	}
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 20%;
	}
}
@media (max-width: 980px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 25%;
	}
}
@media (max-width: 479px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 50%;
	}
}

Champ CSS personnalisé Divi

Comme vous pouvez le voir dans le code CSS ci-dessus, il existe un code pour chaque largeur d’écran. Les écrans de bureau font généralement plus de 980 pixels, tandis que les téléphones portables font moins de 480 pixels.

Nous avons également le code pour les tablettes là-bas, avec lequel la galerie a 4 colonnes sur ces appareils.

Si vous êtes intéressé par un moyen plus simple de faire de votre galerie Divi 5 colonnes quelle que soit la taille de l’écran, lisez cet autre tutoriel.

Si vous ne souhaitez pas d’espace entre les images de la galerie, accédez aux paramètres de votre ligne et activez les options «Créer cette ligne en pleine largeur», «Utiliser une largeur de gouttière personnalisée» et définissez la largeur de la gouttière sur 1. Cela crée les images de la galerie pour s’étendre sur toute la largeur de votre page et pour ne pas avoir d’espace entre les éléments de la galerie.

Options de taille pour la galerie

Ici, vous pouvez voir à quoi ressemble une galerie Divi sur le bureau avec ces paramètres (elle a 5 colonnes):

Galerie 5 colonnes

Et ci-dessous, vous pouvez voir à quoi cela ressemble sur le téléphone (2 colonnes):

Galerie 2 colonnes

Et vous avez terminé.


Thomas Walker



Source link

Recent Posts