pixel

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

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This