Have you experienced getting requests from clients to change the layout of the Divi Gallery Module to match their specifications? Or you want to make your gallery page more captivating?

We recently had a request from a client to do this so we play around with Gallery Module and decided to create a snippet for it.

 

Let’s Get Started

By default, the gallery module looks like this:

It has the standard format that everyone uses which is boring. Sometimes we need designs that are complicated or something that stands out from other galleries. Like these:

Gallery Style 1

Gallery Style 2

Gallery Style 3

Gallery Style 4

Another alternative to create this is to use Page builder columns. However, there are some downsides:

  1. The lightbox Previous and Next feature will not work.
  2. You will need more effort to customize CSS and play around with paddings and margins to fit it accurately.
  3. You might need to adjust all images to have exact sizes.
  4. Divi Gallery Module is more easy to use.

 

Instructions

In this tutorial, we’re going to create the above designs using CSS styles. We’ve created snippet that you can copy and paste to your DIVI websites. Pretty easy!

 

STEP 1: Prepare Your Photos and Design Elements

In this step, you need to determine the design you want and prepare your photos. On the 4 example layouts, there are a different number of images to include.

  • For Gallery 1, you need a multiple of 5 images
  • For Gallery 2, you need a multiple of 8 images
  • For Gallery 3, you need a multiple of 8 images
  • For Gallery 4, you need a multiple of 8 images

 

STEP 2: Create your Gallery

1. Create your gallery by going to your Page and enable Visual Builder.

2. Click the “Gallery” module.

3. Select the photos from media library and put the number of photos to display.

4. Arrange the images to your specifications and click the Check icon ( lower right ).

 

STEP 3: Use Proper settings

We are going to edit the Content and Design tab.

Now, here are the settings:

A. Column Settings:

1. Design Tab

  • Use Custom Gutter Width: YES
  • Gutter Width: 1

 

B. Gallery Settings:

1. Content Tab

  • Show Title and Caption: NO
  • Show Pagination: NO

2. Design Tab

  • Layout: GRID
  • Thumbnail Orientation: Landscape

NOTE:
You can play around with the settings like Hover color and icon

 

STEP 4: Copy and paste this code to your 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%;
}

NOTE: This css is for Gallery 1 only and it has a default class, so if you would like to used the other style assigned a custom “class” or “ID” for the gallery module then add the class or ID to the css given.
You have 2 options:

1. Paste it into page Custom CSS

2. Paste it on DIVI theme options or CSS style.

IMPORTANT NOTE: You need to add a specific id to your gallery so not all Galleries are affected throughout the site.

Add #gallery-foods For example:

CSS for the Gallery 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%;
}


Add #gallery-foods-2 For example:

CSS for the Gallery 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%;
}



Add #gallery-foods-3 For example:

CSS for the Gallery 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%;
}


Add #gallery-foods-4 For example:

CSS for the Gallery 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%;
}



 

STEP 5: Copy and Paste this Function to display bigger photo

This is to remove the default thumbnail size on your gallery.

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' );

 

Questions?

If you have any issues or questions, feel free to message in the comments box below.

Pin It on Pinterest

Share This