How I Got That Look | Two Column Grid Layout

eileen corrigan and michael murphy | saline high schoolHow to create a two column grid layout with the Divi Page Builder

I have always loved photography.  Even back in high school, I was a photographer for the school yearbook.  Here I am with my devilishly handsome partner Mike Murphy, who you may know as Michael the Tech Guy.  All these years later Michael is still an awesome friend / resource / collaborator!

Back in the day we were both probably most interested in capturing our friends (all of whom had much better hairstyles than mine), but alongside Mike I learned a lot about page composition and how to look at images with an editorial eye.

With web design, good images totally make a project.  Monica Higgins and I discussed this the other day when she was sharing some of the behind the scenes on what made the website Popla Bellingen so beautiful.

I love grid layouts and wanted to give you a tutorial on how to make one.  I thought a two column, grid layout with gutterless rows would be a pretty example.  I sourced all of my images from Unsplash and give creative credit to the photographers at the end of the post.  I also uploaded the section to the Divi Cloud Community Layouts and will provide you with the JSON file (no need to reinvent the wheel).

Here is how your wireframe view will appear.

image gallery with divi

The Process:

  • Add a standard section
  • Select two columns
  • Section Module Settings
    • Scroll down in the General Settigns and set each Custom Padding option to 0
  • Row Module Settings begin with General Settings
    • Make this row Full Width YES
    • Use Custom Gutter Width YES – gutter width 1
    • Custom Padding – set each field to 0
  • Row Module Settings toggle to Advanced Design Settings
    • Select YES to Equalize Column Heights
    • Add your column one background image
  • Add a text module in the left hand column
  • Right hand column add the Gallery module General Settings
    • Select your gallery images (for this example I only have 2 images)
    • Layout set to Grid
    • Images Number (for this example 2)
    • Thumbnail Orientation (for this example Landscape)
  • Gallery Module Advanced Design Settings
    • Set your zoom icon color & hover overlay color, set your captions if appropriate.
    • I didn’t use borders, but if you are a Monica Higgins groupie you see she uses borders really nicely, you can set borders here.  Fun option to play with.

Follow along with the video:

To learn more about the Divi Cloud and membership options, please click here.  To download the JSON file click here.

Unsplash Photo Credits:

Photo by Samuel Zeller on Unsplash, Photo by Annie Spratt on Unsplash, Photo by lydia harper on Unsplash, Photo by Luca Bravo on Unsplash, Photo by pawel blazewicz on Unsplash

Thanks for reading.  If you have a tutorial you would like me to write, just let me know.

SaveSave

A little about the author, Eileen Lonergan

Eileen Lonergan is a WordPress website designer and internet marketing specialist. She is the founder and Community Manager of the Divi Theme User Group on Facebook. Eileen's focus is on web design, content marketing and search engine optimization.

1 Comment

  1. David Leger

    Cool Layout, I like it. Appreciate all the stuff you share, it’s why I love DIVI so much… There’s such a community behind it and not a single day goes by that I don’t learn something new from that community.

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items. Please be aware that you will need an amount of experience in WordPress to take advantage of our themes and plugins. Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads. We do not offer refunds under any circumstances. If you feel that there is an issue with a product please get in touch with the developer of the product through their contact details which can be found within the plugins Dashboard, themes and documents we sell on their behalf. Rudeness to our developers or support staff will not be tolerated and support may be refused. By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - we send out around two emails a week to keep you informed of product updates, WordPress News and Developer advice. You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email. (Amended. February 6th 2018)

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest