Search
Close this search box.

How to Create Masonry Image Gallery in Divi without Plugin

As web designers, sometimes we need to do something new to display our content to the users. If you’re looking for inspiration for displaying images on your site, this article might be helpful for you. This article will show you how to create a masonry image gallery in Divi without the help of any plugins.

Steps to Create Masonry Image Gallery in Divi (Without Plugin)

Step 1: Add the JavaScript Snippet

First, we need to add the JavaScript snippet to your Divi. On your WordPress Dashboard, navigate to Divi -> Theme Options.

Once you enter the Divi Theme Options, please select the Integration tab, then navigate to the Add code to the < head > of your blog section, copy the JavaScript snippet below, and paste it into the field.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
		jQuery(window).load(function() {
			jQuery('#container').masonry({
				"itemSelector": ".item",
				"columnWidth": ".grid-sizer",
			});
		});
</script>

Once you’ve added the code, apply it by clicking the Save Changes button.

Step 2: Add the CSS Snippet

We move to the next step. To create a masonry image gallery, you need to add the CSS snippet to the header file for each content (Pages/ Posts) that you want to display.

Go to your Divi editor; create new content or select the existing one. Next, select Page Settings; it will bring you to the Page/ Post Settings, and then navigate to the Advanced tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the Custom CSS field.

html {
  overflow-y: scroll;
}

body {
  font-family: sans-serif;
  margin: 0; padding: 0;
}

.item {
  float: left;
  position: relative;
  line-height: 1em;
}

.grid-sizer { 
  width: 20%; 
}

.item { 
  width: 20%; 
}

.image{
  max-width: 100%;
  margin: 0;
  display: block;
}

.image:after {
  clear:both;
}

@media screen and (max-width: 1224px) {
  
  /* 10 columns for larger screens */
  .grid-sizer { 
    width: 33.33%;
  }
  
  .item { 
    width: 33.33%; 
  }
  
}

@media screen and (max-width: 720px) {
  
  /* 10 columns for larger screens */
  .grid-sizer { 
    width: 50%; 
  }
  
  .item { 
    width: 50%; 
  }
  
}

@media screen and (max-width: 480px) {
  
  /* 10 columns for larger screens */
  .grid-sizer { 
    width: 100%; 
  }
  
  .item { 
    width: 100%; 
  }
  
}

Step 3: Add the HTML Snippet

Once you add the CSS snippet to your header file, we will add the HTML snippet into the Code module. Alright, insert a Code module, copy the CSS snippet below, and paste it to the Code field.

<div id="container">
		<div class="grid-sizer"></div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Insert Your Image URL" class="image">
		</div>
		<div class="item">
			<img src="Inser Your Image URL" class="image">
		</div>
</div>

Note: When you add the HTML snippet above, please replace “Insert Your Image URL” with the actual URL images.

If you want to add more images to the gallery, you can add more rows and copy the code from “<div class="item">” to “</div>” and then paste it above the last “</div>“.

That’s it. As you can see from the image above, you now have a masonry gallery on your Divi. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows how to create a masonry image gallery in Divi without the help of any plugins. However, we must admit that a masonry image gallery made without plugins is not perfect. It doesn’t look stylish and looking-good and might be complicated for some people, especially those new to Divi.

If you want an easier way to create a masonry image gallery, we recommend you use the help of a plugin. Creating a masonry gallery with a plugin will give you simplicity and flexibility to customize and style up your masonry image gallery. Click here if you want to learn more about how to create a masonry image gallery using the plugin.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.