How to Create a Responsive Image Grid with the Divi Page Builder and the Call to Action Module

Posted on July 26, 2016 by in Divi Resources | 100 comments

How to Create a Responsive Image Grid with the Divi Page Builder and the Call to Action Module

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.

divi-call-to-action-responsive-grid

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.

speciality-section

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.

gutter-settings

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.

rows-call-to-action

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.

cta-general

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.

cta-advanced

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;

css

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

divi-call-to-action-responsive-grid

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!

divi-2-6-logo

Divi 100 Day 57

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


Premade Layouts

Check Out These Related Posts

7 Divi Layouts for Musicians

7 Divi Layouts for Musicians

Posted on August 16, 2019 by in Divi Resources

Divi is an excellent theme for musicians and anyone providing musical services. Fortunately, you don’t have to start from scratch when making your music-focused website with Divi. In this article, we’ll look at 7 Divi layouts for musicians to help you get a head start on your next Divi...

View Full Post

100 Comments

  1. This is fantastic! I’m of the same mentality, I’d rather not use a plugin if possible. all those clunky plugin files affecting the performance of the page. This was super helpful, I love how you’re giving insights on how to extend the uses of the Divi modules, without actually adding new modules. I’d love to see more like this, showing us how to use the modules in different ways.

    One thing I’m really interested in now is hover effects on multimedia. For example, I have a client whos a videographer. We’re trying to put together a portfolio of videos, and when you hover over one video in a grid a snippet of the video plays, like a preview. If anyone has insights on how to do this, I’d love to hear it.

    The second thing I’d find interesting is the use of background images across sections, and making sections with diagonal separates. Much like the Hyphen website you features a few articles ago.

    Oliver

  2. Hello, very great for this so detailed explanation .

    What could be great is more maps transformation (having a list of the different point on the map, linking a list below the map to the marker, …)

    I really enjoy your work and feel impatient for the last 43 days

    Tks for all

  3. This is beautiful. Thank you, Elegant Themes, for all the usable and “elegant” tips you provide each day on this 100-day spree. I don’t know how you do it. 🙂

  4. Loving the tutorials guys, so TYVM!

    Any tutorials on databases and how to integrate them into a design would be useful too.

    Keep up the great work! 🙂

  5. Just what I needed, thank you!

  6. Awesom!

  7. Thanks for sharing this layout.

    As a variation, instead of each image linking to a new page, what would it take to make a text box pop up over a dimmed grid upon clicking a CTA button?

    • Great question!

    • I would love to know that as well!

  8. I would like to see more tutorials on floating and overlapping design elements using CSS or Javascript

  9. I cannot import your layout to the library. It says it is not meant to be imported this way. What way shall I use, please?

    • I get the same thing, WP refuses to import the layout.

  10. Getting a “This file should not be imported in this context” message, with the extracted .json file, on two different sites, latest Divi…

    • I have the same error. Looking at some other comments, we are not the only ones.

      • Myself included. Would love to hear back from ET on a quick fix.

  11. This looks amazing Melissa, thank you!

    Quick question (and apologies if I’m being thick) but I when I try to import your ‘Responsive Grid Layout’ json file in the Divi library, I get an error message saying “This file should not be imported in this context.” Any ideas where I’m going wrong?

  12. Super, thanks for this ressource !

  13. Hey everyone. It’s my understanding you have to import it via the Divi Library.

    • Hi Melissa, that’s where we’re trying to import it from (the Divi Library) but it’s just giving us that strange ‘context’ message.

    • I have tried importing through the Divi library and that is where it says ”
      This file should not be imported in this context.”

      • Hi Melissa, seems like many commenters have the same problem. Search for “context” on this page.

  14. Would you please explain the “Child” theme and how to set it up in preparation for Divi 3.0?

  15. Love this! Question…what are the image sizes that should be used in each call to action box?

  16. Very nice. I would like to see some ways to control image sizing. When you add an image to a post to can control the image, but when I place an image in a module there doesn’t seem an easy way to get the same amount of control.

  17. Can you specify what the image size should be for the four sections? Thanks!

    • I have the following in my Divi Cheat Sheets:

      Full Screen / Headers: 1920×1080
      1 column: 1080 pixels
      3/4 column: 795 pixels
      2/3 column: 700 pixels
      1/2 column: 510 pixels
      1/3 column: 320 pixels
      1/4 column: 225 pixels
      Parallax: (Screen Size) 1280px by 768px

      Hope that helps 🙂

  18. Pagespeed image module optimisation/ retina image handling.

  19. Melissa, That is how this one is importing it, the same way as all the other layouts I’ve imported, the .json file extracted from the zip file… There is something wrong with the file, the importer is not recognizing it…

    • Hi John,

      This needs to be imported into a page. Just click the import/export arrows on any page and you can import it there.

      • It doesn’t work that way either.

    • I’ll definitely check it for you, John.

  20. I’d love to see a tutorial on creating a color overlay on a Post Title. The background color around just the text isn’t enough. Sometimes I would like the entire image dimmed behind the text in order for the text to really stand out.

  21. Melissa, Tried importing the file via the Divi Library and get an error mesage saying ” that the file should not be imported in this context” I expected to see a zip file that had to be extracted to us the .json file. Something is wrong with the file as it is not recognized by the importer for some reason. Liked your post, well done…

  22. I get an error importing the JSON file. “this file should not be imported in this format” I did unzip the file

  23. Great idea. Cant seem to replicate follwing your instructions so tried installing the Grid layout but it says “This file should not be imported in this context.” Have any idea how we can resolve this.

  24. “What Other Divi Tutorials Would You Like Us to Cover?”

    >> How to create good looking menu’s for larger sites (80+ pages, products, projects).

    Using standard menu’s it often happens that an item won’t fit on one line. There is no way -as far as I know, and I really searched hard- to adjust the width of an ‘unfolded’ menu (Or is this called a flyout?).

    Mega menu’s are a solution, but not for every site. Let me know if you wish to see an example.

    Divi sometimes feels like it’s built for small sites. I would love to be proven wrong 🙂

    • The menu in DIVI has gotten very little love since the theme release.

      If your menu needs 80+ items it can look great on desktop mode, but then for mobile screens you need a special mobile only menu and the DIVI theme does not allow for that.

  25. For anyone having issues updating this json file via the Divi Library, I’ve added instructions to the post above to help. Simply use the import/export icon in your post or page to add the layout.

    • This works! Thank you Nathan.

      Small warning for others, this also replaces anything you might already have made on the page. Make a backup of it before you import. There is a default option to do so.

    • That worked!! Thanks much

    • I followed your instructions exactly but I still get the error message “this file should not be imported in this context”. I started a new page, clicked on the arrows to import, selected the correct .json file, and still am not successful. What am I doing incorrectly??

      Thank you!

    • ignore my last comment- I finally got it to work. thanks anyway.

    • what post above? my library will not import this

    • i try form the library an the page and don’t work for me. 🙁

    • I finally imported it. However, the image on the left (recipes) is not tall enough to align with the images on the right. Is that due to your image being the wrong size or something else?

    • I created a new page and tried importing via the import/export icon. I get the same error message as many others earlier: “This file should not be imported in this context.”
      What am I doing incorrectly? Thanks!

  26. I do a lot of work with clients who produce podcasts, where each podcast is in its own post (you need this structure for the RSS feed to things like iTunes).

    So a tutorial on how to use the post-slider module, with audio \ video posts would be interesting

  27. Thank’s a lot Melissa. Very simple and practical.

  28. Thank you! I was just trying to figure out how to do this; perfection!

  29. Awesome! Thanks Melissa for this great tutorial.

    I will certainly find a good way to use it. Ideas are already sparkling in my mind 🙂

  30. Why don’t you include the blog features of Extra in Divi .. It would be a complete and powerful solution ..

    • Yes, I have suggested that previously, to have the blog modules available in Extra also available in the Divi Builder Plugin! This would be a huge improvement for those using Divi Builder on a non-Divi theme.

  31. You need to import this layout via the builder import on a page/post

    Once imported, save the page to the library

  32. Designing for mobile vs. desktop. No hover in mobile, so don’t use hover at all anymore? More detailed step by step how to use divi for mobile vs. desktop.

  33. I love divi themes and great tutorial Melissa

  34. I would like to see a post about leveraging Bloom (or alternatively the Divi Builder CTA module) in some way to make a subscription bar floating at the top or bottom of a site which doesn’t use the Divi theme. Some way to replicate what hellobar provides.

    • Speaking of Bloom, I find it annoying that when you use Bloom to download a PDF file, once you do so, the opt in box disappears from the page to be replaced by text that something like, “download the pdf” While I understand the reasoning that once you download it you don’t need to enter your email again the text looks like the site is broken. Other forms simply say something like, “this email has already been used/saved/submitted, etc”

      • Yes, I have the same problem. It would be nice to be able to modify that text and the font.

  35. Melissa, Good job!

    I have downloaded and have aplied this grid but i have a problem: The column of the left is about 6 pixels shorter than the other column despite “Equalize Column Heights” in Section Module Settings has the value “yes”

    Any idea?

    • IMAGE BUTTON #1
      Advanced Design Settings / Custom Padding (Desktop):
      Top: 308px
      Bottom: 308px

      • thank you !

  36. Hi Elegant Themes,

    I would like to know how to customise the SLIDER module so it is mobile responsive without “cropping” the slide.

    Furthermore how can one do more with the slider to make it nifty. I think about what you said about additional plugins and I feel forced to use a plugin like Slider Revolution, because Divi’s Slider is so limited in use. But I’m sure you can come up with some genius and .json files we can optimise its use?

    Thanks!

    • Considering the size of the Slider Revolution plugin and what it can do you will never have 100% functionality of that plugin with just the DIVI slider module.

      I do not mind user super popular plugins like that with DIVI since you know it will get constant updates

  37. “I would like to know how to customise the SLIDER module so it is mobile responsive without “cropping” the slide.”

    I would love that, too. I started rejecting customer wishes for background pictures because I saw complaints about image cuts coming. I have worked with Revolution Slider, but for most customers/sites it is just too big and 90% of it not necessary.

    In order to make my sites look more different on some sites I skip the slideshow and use a background image and CTA instead to have the title aligned left or right.

    Also, more customizing options for the primary menu, like being able to write a text as logo (please!), use icons or make the last link a button would be great.

    Thanks for the tutorial!

  38. My images cut off even though I matched the pixel sizes of the display images. Any suggestions? Thank you

  39. I would love to see how to use CSS or any other method to move, right, left, up and down, the image and text overlay on the Divi slider module and the full width image. There are so many instances where I need to implement this change and end up hiring someone to do it.

  40. Thanks for this awesome post Melissa. I tried this one a new site and it worked like a charm.

    Can’t wait for Divi 3.0 to be released. 🙂

  41. thanks but this is a one page design. How do i apply those GUI Module Settings to Child theme?

  42. Thank you! About to finish a site and was thinking about a nice touch. Perfect timing!

  43. Hi,

    I am new to Divi (used Avada), but I like it a lot and I also like the countdown, it helps me understand Divi better!

    What I can’t find is a modal pop-up, so when you click on a button you get a pop-up screen. I would like to use this with Gravity Forms, so when you click the button the form pops-up.

    And an easy way to change the copyright tekst into your own text and links.

    Many thanks in advance.

  44. thank u for the exciting tips. please share with us how to use the single post seo features in the divi theme. i appreciate what u have given in your divi documentation page but that is not enough for someone who knows very little about wordpress to understand.

  45. Hello, this layout is really great, thank you Melissa !
    I have the same problem as Javier, the left column is too short no matter what I try to fix it… can’t provide a link to the page as I’m building the site locally.
    What are we missing out on the tutorial ?

    • ok you can cancel this 2 comments please, there is already a reply by Quique under the Javier comment but I saw it too late !
      🙂
      Thank you Elegant Themes Team 🙂

  46. Could you make a tutorial on how to have more control over how much text is truncated in the blog module (fullwidth setting) as only 2-3 sentences are shown before the ‘Read More’ link – I need about 4-5 paragraphs shown!

    Also a tutorial on how to insert a Header or Slider background image on a post in addition to having a Featured image on the same post like this site: http://www.nomadicmatt.com/travel-blogs/gay-backpacking-challenges/

  47. This idea is great, i will follow these guidelines to my next project.

  48. HI,

    This is a really amazing helpful article, it will help me to make my site more responsive and user friendly.

  49. I’m building a services directory as part of my site. I’d love to creative ideas for how to use modules to really make the directory useful. I’m looking at the ‘blurb’ module (because I can put a border around the text) and the testimonials module. I’m going to provide a link in each company description that leads to a page to submit a testimonial – had thought about just using the comments module, but think might start to get too long for each business. Am also looking at the filterable portfolio to set up the services – however there are 65 categories, which seems a little unwieldy.

  50. Thanks Melissa for this awesome post .I Really Love To Read It I tried this one a new site and it worked like a charm. Thanks for the Informative tutorial!

    Max B Malone

  51. beautiful

  52. responsive image grid is better for looking in mobile screen thanks for share this info. this info. is really helpful

  53. Hi Melissa

    I would love to see a tutorial in the Divi 100 Marathon about how to customize buddypress/bbpress css – having the great design look of Divi transported to this two of the most used plugins in the WP repository…

    Or could you create some cool skins for this purpose? Anything would really help and being appreciated.

    Cheers, Ro

  54. Great post!
    I would like to see an Optin tutorial. How to create the same optin for the desktop and the smartphone/tablet with the desktop using the horizontal form and the standard vertical form for smartphone and tablet.

  55. Hi
    Great tutorial. How do i center the images in the call to action?

    Cheers
    Ray.

  56. Hi Great Tutorial.

    How do you center the images because i have a problem with an image going to far to the right.

    Can you HELP?????

    Ray.

  57. Great tutorial, great looking gallery, I will try it right away. As for another topic, I’d love to watch a tutorial on the image gallery full width slider. I would like to incorporate a link to other websites from each image. An option for a button would be great also.

  58. I would love a tutorial on how to make the countdown module automatically repeat after it’s counted down all the day.

    For example, if you have an event at 7pm every night, it would be nice if after it hit 0:0:0 it would automatically start counting down again

  59. I would like to learn how to take slider images and link them to a separate text box that describes what that particular image is about while it is shown on the screen. With each newly rotated image the text box changes to show new text describing the new image. The text box should not be an overlay because most artists and photographers dont want something blocking the view of the image. I asked the above how-to over a year ago…. Hopefully someone out there is listening and will help me solve this problem.
    2nd. A tutorial on how to add and change the bottom copyright text would be useful.
    Thanks for all your hard work. The help you give is most appreciated.

  60. That was beautiful, Melissa!

    Thanks a bunch!

  61. It would be lovely if this post from March 5th 2015 here> http://www.elegantthemes.com/blog/tips-tricks/build-your-own-online-marketplace-using-wordpress Could be updated or revisited. It would be awesome if Divi could be used with plugins to create a niche multi-vendor market without having to rely on 3rd party payment processors for example they all use PayPal only which is not regulated in some countries, meaning PayPal can at their whim freeze accounts for silly things as simple as selling a digital product. Many of my clients sell digital products. Woocommerce + Product Vendors is a great choice however with support for only PayPal as an option, this limits industries and products that can be sold. It would be a perfect choice if Stripe were to be included, which it is now with Woo commerce, but it is not with Product Vendors. One of my clients is a therapist who works with other consultants in marriage counselling she wrote a beautiful book about broken relationships and moving forward. PayPal looked upon her product as a dating book, closed her PayPal account with no explanation and wiped her business of the sales map! When developing plugins it would be helpful to niche markets for developers to include at least one other Non PayPal method of payment. This looks like a great plugin that is promoted in the post above, however when clicking on any of the links, they all lead to a warning that this is a known attack site? I was surprised and left a little confused to see this promoted as a suggested in the ET blog, although it was probably reported after the post was published. https://wordpress.org/plugins/wpmarketplace/ apparently from what I’ve read about it in it’s reviews It’s been said that it has unresolved security issues. https://wordpress.org/support/view/plugin-reviews/wpmarketplace Sad because it has great features. I would love the ET post to be updated or even a new post about creating a market place for niche industries or markets specifically with Divi

    • Liz,

      I only use plugins that are up to date and work with the current version of WordPress. Using outdated plugins is a security risk no matter how great the features might be. You probably know this, but thought I’d mention it all the same.

      • Thank you for sharing your thoughts Steven, yes I did know this, and was hoping to find a more updated paragraph or two relating to what can be done with Divi as far as building a Multi-Vendor/Seller market site I’ve wanted to build one for a while for a niche market, not general market, being new to Divi and ET in general by less than a month, I’m just getting used to the builder, I’m used to doing things the hard old fashioned way from scratch.
        I am actually quite blown away and awe struck by the time Divi + Divi builder takes, I’m used to sitting up all hours of the day and night, slaving away over a keyboard! I feel totally point by Divi, as well as almost scared It’s going to vanish into thin air, I think It’s … well I can’t find words…other than amassing, which is quite inadequate because it’s way beyond amazing! I responded here, as I noticed way above in the post to let ET know what tutorials we’d like to see. And My wish is to see a head start as to how to create a multi-seller market website! J

  62. Hello Melissa,

    I love this layout and want to use it on my website. I downloaded your layout file and unzipped it. I then imported it using the Divi Library import function. When I use the Divi builder on a page, the layout isn’t in the library, but if I go to the library, it’s there. I tried categorizing it to no avail.

    I then followed your instructions on building the grid myself, but I still end up with a space top photo in column 2 and the two smaller photos below. I’ve got all the settings the way you suggest in the blog, but I just can’t get rid of the space. It’s like there’s some kind of margin setting that I can’t find. Any thoughts?

  63. Hi, just used the demo download and the grid isnt level, its also showing different in firefox and chrome..

  64. I’m new to Divi this year and loving it. Three requests/questions:

    1. I would love to see an option for the CTA to be directed to a thank you page. Not only is that useful for FB ad tracking but also for adding more information, upsells, etc.

    2. I’m still very confused on how to integrate a paypal button on my site. Is there a tutorial for that?

    3. I’d also love to learn how to put an image behind the button in CTA. I’ve seen the tutorial on doing that in the button module, but not the CTA module.

  65. I’ve followed the instructions to a tee MANY times and am still finding a gap between my two third and the bottom two modules. Can anyone help please. I’ve checked the gutter width etc and still there’s that gap.

  66. How can I make the images fit?

Join To Download Today

Pin It on Pinterest