Sélectionner une page


Avant de commencer ce tutoriel, montrons d’abord quelques exemples de belles galeries créées avec le module de galerie DIVI:

Niveaux de gris à la galerie de divi de couleurs

Galerie Divi pleine largeur

Sellerie personnalisée Divi Gallery

Galerie Divi Bordure Personnalisée

Avez-vous eu une expérience de clients souhaitant personnaliser la mise en page du module Divi Gallery en fonction de leurs spécifications? Ou souhaitez-vous rendre votre page de galerie plus attrayante?

Galerie ennuyeuse

Nous avons récemment reçu une demande d’un client pour le faire, nous avons donc joué avec le module Galerie et avons décidé de créer un extrait pour celui-ci.

Via le module Divi Gallery

Le module Divi Gallery de Divi Page Builder est un widget pour créer de superbes et belles galeries sur votre site Web. L’élément de conception le plus remarquable est la possibilité d’organiser vos images dans une disposition en grille et de créer un espacement de grille. Basé sur Documentation officielle de la Divi GalleryIl comprend au moins 30 options de conception telles que le CSS personnalisé, la couleur de la bordure, le texte de la légende et des tonnes d’animations.

Commençons
Par défaut, le module de la galerie Divi ressemble à ceci:

Galerie ennuyeuse

C’est dans le format standard que tout le monde utilise, ce qui est ennuyeux. Parfois, nous avons besoin de designs complexes ou de quelque chose qui se démarque des autres galeries. Comme ceux-ci:

Style de galerie 1

Galerie-Page-1


Style de galerie 2
Galerie-Page-2

Style de galerie 3

Style de galerie 4

Galerie-Page-4

Une autre alternative à cela consiste à utiliser des colonnes de générateur de page. Cependant, il y a quelques inconvénients:

  1. La fonction précédente et suivante de la boîte à lumière ne fonctionne pas.
  2. Vous devrez faire plus d’efforts pour personnaliser le CSS et jouer avec les pads et les bordures pour l’adapter exactement.
  3. Vous devrez peut-être ajuster toutes les images pour obtenir des tailles exactes.
  4. Le module Divi Gallery est plus simple à utiliser.

Manuel

Dans ce didacticiel, nous allons créer les conceptions ci-dessus à l’aide de styles CSS. Nous avons créé un extrait que vous pouvez copier et coller dans vos sites Web DIVI. Assez facile!

ÉTAPE 1: Préparez vos photos et éléments de conception

Dans cette étape, vous devez choisir le design que vous souhaitez et préparer vos photos. Les 4 exemples de mise en page contiennent un nombre différent d’images.

  • Pour la galerie 1, vous avez besoin d’un multiple de 5 images
  • Pour la galerie 2, vous avez besoin d’un multiple de 8 images
  • Pour la galerie 3, vous avez besoin d’un multiple de 8 images
  • Pour la galerie 4, vous avez besoin d’un multiple de 8 images

ÉTAPE 2: Créez votre galerie

1. Créez votre Divi Gallery en accédant à votre page et en activant Visual Builder.

2. Cliquez sur le module «Galerie».

Galerie-nouveau

3. Sélectionnez les photos dans la médiathèque et entrez le nombre de photos que vous souhaitez afficher.

Paramètres-Contenu-1

4. Organisez les images selon vos spécifications et cochez la case (en bas à droite).

ÉTAPE 3: utilisez les paramètres corrects

Nous allons modifier l’onglet Contenu et conception.

Paramètres-Contenu-1

Voici les paramètres:

A. Paramètres de colonne:

1. Onglet Conception

  • Utilisez la largeur de gouttière personnalisée: OUI
  • Largeur de gouttière: 1

Colonne1

B. Paramètres de la galerie:
1. Onglet « Contenu »

  • Afficher le titre et la légende: NON
  • Afficher la pagination: NON

2. Onglet Conception

  • disposition: LA GRILLE
  • La vignette: Paysage

REMARQUE:

Vous pouvez jouer avec les paramètres tels que la couleur et l’icône du survol

ÉTAPE 4: Copiez et collez ce code dans votre CSS

.et_pb_gallery_image.landscape img { width: 100%; }
/******************************************/
.et_pb_gallery_item:nth-child(n+1):nth-child(odd) {
float: left;
}
.et_pb_gallery_item:nth-child(n+1):nth-child(even) {
float: right;
}
.et_pb_gallery_item:nth-child(5n+1) {
width: 50%!important;
}
.et_pb_gallery_item {
clear: inherit!important;
}
.et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden;
position: relative;
}
.et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

REMARQUE:: Ce CSS est uniquement pour la galerie 1 et a une classe standard. Donc, si vous souhaitez utiliser l’autre style auquel une « classe » ou un « ID » personnalisé pour le module de galerie a été attribuée, ajoutez la classe ou l’ID au CSS spécifié.

Vous avez 2 options:

1. Collez-le dans la page CSS personnalisée

2. Collez-le dans les options de conception DIVI ou le style CSS.

NOTE IMPORTANTE: Vous devez ajouter un identifiant spécifique à votre galerie afin que toutes les galeries de l’ensemble du site Web ne soient pas affectées.

Ajouter # Nourriture de la galerie Par example:
CSS pour la galerie 1

#gallery-foods .et_pb_gallery_image.landscape img {
width: 100%;
}
/******************************************/
#gallery-foods .et_pb_gallery_item:nth-child(n+1):nth-child(odd) {
float: left;
}
#gallery-foods .et_pb_gallery_item:nth-child(n+1):nth-child(even) {
float: right;
}
#gallery-foods .et_pb_gallery_item:nth-child(5n+1) {
width: 50%!important;
}
#gallery-foods .et_pb_gallery_item {
clear: inherit!important;
}
#gallery-foods .et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden;
position: relative;
}
#gallery-foods .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

Ajouter # Galerie-Nourriture-2 Par example:
CSS pour la galerie 2

#gallery-foods-2 .et_pb_gallery_image.landscape img {
width: 100%;
}
/******************************************/
#gallery-foods-2 .et_pb_gallery_item:nth-child(10n+1) {
width: 50%!important;
}
#gallery-foods-2 .et_pb_gallery_item:nth-child(10n+2) {
width: 50%!important;
}
#gallery-foods-2 .et_pb_gallery_item {
clear: inherit!important;
}
#gallery-foods-2 .et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden; position: relative;
}

#gallery-foods-2 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

Ajouter # Galerie-Nourriture-3 Par example:
CSS pour la galerie 3

#gallery-foods-3 .et_pb_gallery_image.landscape img {
width: 100%;
}
/******************************************/
#gallery-foods-3 .et_pb_gallery_item:nth-child(8n+1) {
width: 75%!important;
}
#gallery-foods-3 .et_pb_gallery_item:nth-child(n+6):nth-child(odd) {
float: right;
}
#gallery-foods-3 .et_pb_gallery_item:nth-child(n+6):nth-child(even) {
float: right;
}
#gallery-foods-3 .et_pb_gallery_item:nth-child(17n+17) {
float: left!important;
}
#gallery-foods-3 .et_pb_gallery_item {
clear: inherit!important;
}
#gallery-foods-3 .et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden; position: relative;
}

#gallery-foods-3 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

Ajouter # Galerie-Nourriture-4 Par example:
CSS pour la galerie 4

#gallery-foods-4 .et_pb_gallery_image.landscape img {
width: 100%;
}

/******************************************/
#gallery-foods-4 .et_pb_gallery_item:nth-child(8n+1) {
width: 75%!important;
}
#gallery-foods-4 .et_pb_gallery_item:nth-child(n+6):nth-child(odd) {
/*float: right; */
}
#gallery-foods-4 .et_pb_gallery_item:nth-child(n+6):nth-child(even) {
/*float: right; */
}
#gallery-foods-4 .et_pb_gallery_item {
clear: inherit!important;
}
#gallery-foods-4 .et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden; position: relative;
}

#gallery-foods-4 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

ÉTAPE 5: Copiez et collez cette fonctionnalité pour afficher une photo plus grande

Cela supprime la taille par défaut des vignettes dans votre galerie.

function my_et_pb_gallery_image_size( $size ) {
return 603;
}
add_filter( ‘et_pb_gallery_image_width’, ‘my_et_pb_gallery_image_size’ );

function my_et_pb_gallery_image_size_height( $size ) {
return 603;
}
add_filter( ‘et_pb_gallery_image_height’, ‘my_et_pb_gallery_image_size_height’ );

function my_et_theme_image_sizes( $sizes ) {
$sizes[‘603x603’] = ‘my-et-pb-post-main-image’;
return $sizes;
}
add_filter( ‘et_theme_image_sizes’, ‘my_et_theme_image_sizes’ );

Interroger?
Si vous avez des problèmes ou des questions, n’hésitez pas à les signaler dans la zone de commentaires ci-dessous.





Source link

Recent Posts