Referring to the many questions about creating tiled fullwidth gallery in DIVI, we decided to write a simple guide on creating fullwidth gallery using DIVI gallery module. 

For beginning just to visualize better I am talking about this kind of tiled gallery like on following gif:

tiled-gallery

In this example on gif image above, there are 16 images originally. We advise you to set and number of images you need, just make sure that number of images are divisible by 4 as we have 4 images in row in this example, and our goal is nicely filled tiled gallery. If you end for example with 19 images, you will have 4 images in first 4 rows, and in fifth row you will have 3 and one empty space, which is not great looking. As well at the end of the post we will provide you necessary CSS for 3, 5 and 6 images by row gallery grid.

So the first thing you have to do is to load a new section with regular row inside. After that load gallery module and upload images.

Next step is, go to section settings and in custom padding optios set left and right padding to 0 like this:

section-module-settings

Also make sure you have “Keep Custom Padding On Mobile” options set to yes, as you probably want this gallery to have consistent look at mobile version.

Now open your row settings and inside you will have to change few options and put some css as following:

  1. In custom padding options set padding to 0px in left and right field input.
  2. Set “Use custom width” options to yes and set width to 100% like on screenshot bellow:

row-module-settings

3. Now go to custom CSS tab and inside “Main element” input apply this CSS bellow:


width: 100% !important;
max-width: 100% !important;

This way you will override the default DIVI “fullwidth” css that is set to 89%, which would result in leaving white space on left and right side.

And finally you need to go into gallery module settings and inside tweak few things mentioned bellow:

  1. First set layout to grid, and set “Show pagination” and “Show title and caption” to no.

gallery-module-settings

2. Go to Custom CSS tab and enter this CSS bellow inside Gallery item input:

margin: 0 !important;
width: 25% !important;

And finally save & exit and update your WordPress post/page and you should end having gallery looking like this:

gallery-4-images-row_compressed

Want to have 3 images in a row?

If yes, instead of this previous CSS in a Gallery item input you will need to add this CSS:

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

Here we have added clear property and set it to none to preserve grid item floats because by default DIVI clears floats around gallery items so we don’t want that to happen in this case. You should end up with this:

gallery-3-images-row_compressed

If you need 5 images in a row:

Than you need to set this CSS into Gallery item CSS input:

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

And you will end up with this style:

 

5-images-row_compressed

And if you need 6 images in row:

Than you need to set this CSS into Gallery item CSS input:

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

And you will end up with this style:

gallery-6-images-row_compressed

We hope this tutorial was useful to you. Feel free to leave comments bellow and ask questions. Also if you want to read about something specific you can request it trough comment area. Make sure you have subscribed to our newsletter as we are going to do some nice “give aways” and tutorials soon.

 

Share This