3 Free Beautiful Project Page Layouts (& How to Build More with the Divi Builder)
Welcome to post 3 of 5 in our miniseries How to Create a Simple and Effective Portfolio Website with Divi. In this series we’ll cover everything you need to do in order to create your own portfolio website from scratch. We’ll also go over how to use our A/B testing system Divi Leads to make sure your site is effective at attracting new clients.
In today’s blog post we’re giving away three portfolio project layouts that are great go-to layouts for displaying your work. They also make great starting point for new and re-mixed layouts that you come up with yourself. My goal in including these freebies in this miniseries is to jumpstart the process of figuring out how best to display your work. By giving three different options that you can try right away my hope is that you’ll see what works, what doesn’t, what you like, and what you don’t like.
How to Download, Install, & Use The Project Page Layout Pack
When you download the Divi Project Page Layout Pack the following files are what you will find inside:
- all-project-layouts.json – this is all three layouts in one json file.
- Featured Images Folder – I use the featured image module in each of these layouts. Which means you will need to add the featured images contained in this folder to their corresponding layout for them to show up.
- Project 3 Gallery Images Folder – Gallery modules do not export with all of their images. I have included all of the images used in the layout three gallery module so you can easily add them.
- project-layout-1.json – The first layout below as a single file.
- project-layout-2.json – The second layout below as a single file.
- project-layout-3.json – The third layout below as a single file.
Once you have downloaded the layout pack below to your computer you will need to locate it in your downloads folder and unzip it. Then, navigate to Divi > Divi Library and click the “import & export” button at the top of the page. In the import tab choose whichever layout you’d like (or the “all” file) and import them into your Divi Library.
After that is complete you will be able to add these layouts to new projects using the Divi Builder by going to Load From Library > Add From Library and choosing your preferred project layout. Don’t forget to add the featured images and gallery images separately!
To gain access to the download you will need to subscribe to our Divi Daily email list using the form below. As a new subscriber you will get even more Divi goodness. In addition to being able to download the DiviStar Layout Pack we will also send you The Ultimate Divi Landing Page Layout Pack as well as providing you with an ongoing source of new (and free) Divi resources, tips, tricks, and news.
If you’re already on the list, simply enter your email address below and click download. You will not be subscribed twice.
Download The Layout Pack
Applying Design Principles to Your Page Layouts
Every time I sit down to design a page, post, portfolio layout, or whatever, I try to briefly revisit some basic design principles. There is a great website that I go to called learndesignprinciples.com that provides simple explanations (with easy to understand diagrams) of four basic design principles: Axis, Symmetry, Hierarchy, and Rhythm.
Here is the brief description that Melissa, the creator of learndesignprinciples.com, has written for each of those terms:
Axis: Axis is the most basic and most common organizing principle. Simply stated, axis is an imaginary line that is used to organize a group of elements in a design. In diagrams, axis is represented as a dashed line.
Symmetry: Symmetry is when elements are arranged in the same way on both sides of an axis. Perfect symmetry is when elements are mirrored over the axis and exactly the same on both sides.
Hierarchy: Hierarchy is when an element appears more important in comparison to other elements in a design.
Rhythm: Rhythm is the movement created by a repeated pattern of forms.
Each of these terms has a set of accompanying diagrams on the website I linked above, to help you fully visualize what these terms mean. I highly recommend taking a look.
In the designs below I focused on the first three principles. Each design has an axis that runs straight down the middle. No matter what I put on the page, I focused on creating symmetry by balancing the elements on either side of that invisible central axis. And finally I used the hierarchy principle to communicate the importance of the featured image/project description.
I’m sure if you think about these simple design principles the next time you decide to create a post or page you will find them helpful in organizing your content in an appealing way.
Project Page Layout 1
This first layout is a simple, single column of images that succinctly yet boldly displays your work.
Project Page Layout 2
With the second layout I wanted to get a bit more complex but still maintain my central axis and symmetry to either side.
Project Page Layout 3
In the third layout all I really wanted to do was provide a clean, compact way to display a large body of work. A tiled gallery like we were all shown how to create by Josh Hall in his Gallery Module miniseries was the perfect fit.
Tomorrow: How to Create a Compelling About Page for Your Portfolio Website with Divi
In tomorrow’s post I’ll walk you through creating the final page to our simple and effective portfolio website: the about/contact page! See you there!