Gridy Masonry Gallery Layouts For Divi

This Divi masonry gallery is created by customizing the default Divi Gallery module by Css and Jquery Script. You can easily edit the images, adjust the number of columns, and modify the masonry layout to fit your design needs. You don’t any need coding knowledge to customize these masonry gallery layouts.

Note: Thumbnails in these masonry galleries may appear blurry or pixelated because the Gallery module crops images to a fixed size of 400x284px. Learn how to fix blurry thumbnails.

Gridy Masonry Gallery Layouts.zip

Download this file from your Elegant Theme’s Account. After extracting Gridy Masonry Gallery Layouts.zip file you will find 2 folders and a license.txt file.

Name of these 2 folders are:

1. Divi Masonry Galleries – Static Designs: This folder includes 4 static masonry gallery layout files with 4, 5, 6, and 7 columns. You can customize the design and the number of columns to suit your needs.
2. Divi Masonry Galleries – Dynamic Designs: This folder contains 4 dynamic masonry gallery layout files with 4, 5, 6, and 7 columns. You can change the number of columns as needed. These dynamic galleries display a new random layout each time the page is refreshed.

Importing Divi Masonry Gallery Layouts into Divi Library

Step 1: Go to your WordPress Dashboard → Divi Library and click to Import & Export Button.

Step 2: On Import & Export Layout popup select any divi masonry gallery that you want to import.

Note: Make sure you also tick Import Presets check box.

Step 3: Now click to Import Divi Builder Layouts button.

Great! You have imported divi masonry gallery layout into divi library.

Repeat same steps to import all layouts.

Importing a Divi Masonry Gallery into Your Page

Step 1: Enable the visual builder on your page where you want to import a divi masonry gallery.

Step 2: Hover over section and click to Blue + Add New Section Button.

Step 3: On the Insert Section popup, switch to Add From Library tab.

Step 4: Choose the divi masonry gallery you want to use on your website.

That’s it.

Change The Images of Masonry Gallery

Step 1: Switch to wireframe view.

Step 2: Click to Setting Icon on divi gallery module.

Step 3: Now choose the images from media library that you want to display on your website and click to Save Changes.

Divi Gallery Module Settings: You can also change the no of images that you want to display on your website.

Note: Title, captions, and pagination features are disabled in this version. They will be added in the next update.

Change The No of Columns of Masonry Gallery

Its pretty simple to change the number of columns of any divi masonry gallery layout.

Step 1: Switch to wireframe view.

Step 2: Under Divi Masonry Gallery section click to Setting Icon of Css Style Code Module. See the image below.

grid-template-columns: repeat(5, 1fr) !important; line represent the num of columns. So, if the value is repeat(5, 1fr) it means there are 5 columns. If you change it to repeat(4, 1fr) it means there will be 4 columns. If you change it to repeat(6, 1fr) there will be 6 columns of masonry gallery and so on so…

You can change the num of columns for Desktop, Tablet and Mobile.

Change Masonry Gallery Design

1. Divi Masonry Galleries – Dynamic Designs: The layouts in this folder automatically generate a new masonry design each time the page is refreshed, so there’s no need to manually change the layout.
2. Divi Masonry Galleries – Static Designs: The layouts in this folder have a static masonry design, which you can customize as needed.

Customizing Divi Masonry Galleries – Dynamic Designs

Step 1: Switch to wireframe view and click to Setting Icon of Javascript / Jquery Code Module under Divi Masonry Gallery Section.

Step 2: Here, you’ll find an array of columns and rows. Changing the values of columns and rows allow you to customize the design of the masonry galleries.

See the marked part of bellow screen-shot. These values represent columns and rows for each image.

{ col: 1, row: 1 }, means the 1^st image of masonry gallery will occupy 1 column and 1 row.

{ col: 1, row: 2 }, means the 2^nd image of masonry gallery will occupy 1 column and 2 rows.

{ col: 2, row: 1 }, means third image of masonry gallery will occupy 2 columns and 1 row.

And it will be repeated for rest of the gallery images. For example:

{ col: 1, row: 1 }, will impact 4^th image. And it will occupy 1 column and 1 row.

{ col: 1, row: 2 }, will impact 5^th image. And it will occupy 1 column and 2 rows.

{ col: 2, row: 1 }, will impact 6^th image. And it will occupy 2 columns and 1 row.

And so, on so…

By adjusting the column and row values, you can customize the design of the masonry galleries.

Fix The Blurry Thumbnails of Masonry Gallery

You may encounter blurry thumbnails in these masonry galleries.
Reason: Images in the Divi Gallery Module are cropped to a fixed size of 400x284px to ensure consistent display, regardless of the original image dimensions—especially when using the Grid layout.

Additionally, WordPress generates multiple sized versions of each uploaded image to optimize their use across different areas of your site.

There are 2 ways to fix cropped or blurry thumbnails:

1. Using Child Theme
2. Using Code Snippet Plugin

Fix Blurry Thumbnails Using a Child Theme

1. Use you Hosting File Manager App of use Advance File Manager plugin and navigate to wp-content/theme/your-child-theme folder.
2. Open Functions.php file
3. Add the following code:

function custom_image_width($width) {
  return '9999';
}
function custom_image_height($height) {
  return '9999';
}
add_image_size( 'custom-image-size', 9999, 9999, array( 'center', 'center' ) );
add_filter( 'et_pb_gallery_image_width', 'custom_image_width' );
add_filter( 'et_pb_gallery_image_height', 'custom_image_height' );

Fix Blurry Thumbnails Issue Using Code Snippet Plugin

1. In you WordPress Dashboard go to Plugins → Add New Plugin
2. Search for Code Snippet plugin
3. Install and activate Code Snippet plugin
4. Now there will be a new tab Snippets. Click to Snippets and Add a New PHP Snippet.
5. Name this snippet and add the following code is functions(php) tab.
6. Click to Save Changes and Activate Button
7. Make sure your snippet is activated.

function custom_image_width($width) {
  return '9999';
}
function custom_image_height($height) {
  return '9999';
}
add_image_size( 'custom-image-size', 9999, 9999, array( 'center', 'center' ) );
add_filter( 'et_pb_gallery_image_width', 'custom_image_width' );
add_filter( 'et_pb_gallery_image_height', 'custom_image_height' );

If you need more details on how to fix cropped/blurry thumbnails of divi gallery module read full guide on: https://help.elegantthemes.com/en/articles/2415397-how-to-prevent-gallery-images-from-being-cropped

If you have any questions, feel free to contact the author.