How 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.
- 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:
Unsplash Photo Credits:
Thanks for reading. If you have a tutorial you would like me to write, just let me know.