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 WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Creating with WordPress?​

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.