Welcome to Day 56 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!
In this free Divi Layout Pack we’ve created a set of five portfolio style home pages. They’re perfect for photographers, illustrators, or anyone else looking to put the focus on their body of creative work right away.
Downloading & Using The Homepage Portfolio Layout Pack
To use the Free Divi Homepage Portfolio Layout Pack on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-homepage-porfolio-layout-pack.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.
When the portability modal pops up go to the import tab. Click the “choose file” button and select the All.json file or any one of the individual portfolio layouts you would like. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.
Once the import has finished you will now have the ability to load your new Divi Homepage Portfolio Layout(s) on any builder powered page by going to Load From Library > Add From Library.
Subscribe To Download For Free
The Homepage Portfolio Layouts
The layouts within the Divi Homepage Portfolio Layout Pack do not use the portfolio module or projects custom post type. Instead they take an alternate approach by repurposing the standard image and text modules to create beautiful, self-contained portfolios. These layouts can live on their own or you can choose to link the images to full projects–the choice is yours!
You may also notice that in the images below, we have paired these layouts with the “blank” page template and creative “header” or “menu” created with text modules. You can choose to do likewise or place the layouts within standard pages as you see fit.
Homepage Portfolio Layout 01
Layout 01 is intended to be very clean and minimal. It’s been paired with the “blank” page template and a white minimal text module “menu” up top (as well as something similar for the footer). This limits the amount of elements on the page and keeps the focus on the images we’re trying to showcase.
Homepage Portfolio Layout 02
In Layout 02 we go from clean white to dark black. As is the case with all of these layouts, the images still take center stage. This time with no gutters and a close grid/collage style applied.
Homepage Portfolio Layout 03
In Layout 03 the images in our grid dominate the page while also conforming to an appealing “staggered” column aesthetic. A very striking look.
Homepage Portfolio Layout 04
In Layout 04 we have a lovely header and three, two column rows with their gutters removed. This is a nice twist on the “closed grid” that we explored in a few of the other layouts where we let things breathe a bit–but not too much.
Homepage Portfolio Layout 05
In Layout 05 we’ve created a “loose” or “open” collage. The complete opposite of the tight, closed grids above. This layout lets each image stand surrounded by whitespace with irregular (but ultimately balanced) positions relative to the other images.
Tomorrow: Learn how to use the Divi CTA Module to Create a Responsive Image Grid
Tomorrow we will be sharing another tutorial by community member and blog contributor Melissa Love. In this tutorial she will be showing you how to use the Call to Action Module to create a responsive image grid with overlaid buttons. See you then!
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!