Welcome to Day 57 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
Responsive grids are perfect for showcasing a collection of links to content because they look good on every device. The Divi page builder has some fantastic built-in modules which use grid displays, including the Portfolio Grid, the Blog Grid and the Gallery Grid.
But sometimes you might want a visual display of links to selected pages of your site rather than auto-generated content. You can easily use the Divi Image Module, but I like to include a button link, so that visitors understand that the image they can see is also a clickable call to action.
You could use a plugin, like Essential Grid, to achieve an image grid with buttons, but I prefer not to have to add a plugin when I don’t need one. Instead we’re going to be creating the grid below using the Divi Call To Action Module.
How to Create a Responsive Image Grid with the Divi Builder and the Call to Action Module
First, add a Speciality Section to your page. To recreate the grid, choose the one-third / two-third layout.
Start by selecting the Advanced tab of the speciality section and check the Equalize Columns box and set the custom gutter width to 0. Make sure you also do this for each of the yellow subsections too as well as all of the column settings throughout the section and subsections. If you have some unexplained gaps in your finished grid, this will be the reason.
Now, add a second row with two columns to the right hand area. Add your first Call To Action module. We are going to customize this module first and then duplicate it to use in the other module areas.
In the General Settings tab of your new Call To Action module, add a button link, some button text and center your text if you wish, which will also center the button.
In the Advanced Design tab, add your chosen image to the background image area. If you wish to have a space between your grid images, you can use the border tool. Finally, set all margins to 0px and the custom padding to your desired height in the top and bottom boxes. You may need to play around with the height settings until you are happy.
To prevent the background tiling and to vertically center the buttons, add the following CSS to the Custom CSS tab in the areas shown.
background-size: inherit;
padding-bottom: 0px;
At this stage, you should have a single image, styled and ready to duplicate. Copy it across to the right hand column areas, so that you have a Call To Action Module in each. To achieve an even grid, I set the top and bottom padding for the ⅔ section to 150px and for the bottom two squares, set that to 132px.
Sounds like a random number, right? You might find that you need to play around with the padding settings to get a perfectly even grid.
A nice finishing touch is to change the padding settings for tablet and mobile to give the modules a uniform height once the tablet breakpoint kicks in. I found that 220px for tablet and 150px for mobile produced even squares for the mobile versions.
You now have a finished grid!
Download This Grid For Free
Want a shortcut? Download my Responsive Grid Layout to give you a head start. To import this json file, navigate to the Divi > Divi Library page and click the Import/Export button at the top of the screen.
What Other Divi Tutorials Would You Like Us to Cover?
While we’re always coming up with new ideas for Divi tutorials ourselves, no one knows what is needed most like the community using Divi day in and day out for countless purposes. So please tell us in the comments below what you’d like to learn how to do with Divi and we’ll write it up!
And be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!