Welcome to Day 47 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!


So far in the Divi 100 Marathon we’ve given away a lot of Divi Layout Packs that are fully populated with royalty free images and sample text. These have proven to be fantastic resources as they go one step further in helping you envision the site that you’d like to create for yourself.

What this does not mean however, is that the wealth of predefined page layouts that Divi already ships with are no longer valuable. In fact, using them to jumpstart your unique design is a great way to learn and grow as a designer because the lack of completely styled layouts leaves a lot of room for you to make creative decisions.

To illustrate how this process might work for you, we’ve dedicated today’s post to something that is part tutorial and part exercise. We’re going to walk you through a design exercise I did this week where I imagined a business, identified three essential web pages for that business, and then used Divi’s predefined layouts to go from starter content to a final product.

If you take note of my process, or even follow along with it, you should have a better idea of how you can use these predefined layouts for yourself in the future.

Let’s get started!

How to Use Divi’s Predefined Layouts to Their Full Potential: 3 Step-by-Step Examples

Subscribe To Our Youtube Channel

First things first, let’s talk about the concept I’ll be working with in today’s post. I’ve decided to create three web pages for an imaginary baker’s website. Based on some preliminary research I found that many bakery websites have these three pages and so I wanted to make sure I knew how to make them.

I also gathered up some screenshots of my favorite versions of these pages from various bakery websites. Something you can do within your niche as well to make sure that you are looking good compared to the competition.

But this should be where the similarities between you and them stops. The next stages of this design exercise are all about going from gathered inspiration to something unique. So let’s start with top level, broad reaching design decisions and then work our way down into the details of each page.

Beginning with our colors!

Color Palette

Below is the color palette I used to build the website. It also has the corresponding hex codes.

palette

Theme Customizer Settings

Before we start editing the page, we need to change a few settings in the Theme Customizer.

Primary Navigation Setup
Active link color: #F3A902
Background color: transparent
Text color: #FFFFFF
Drop down menu line color: #F3A902
Font: Bitter.
Text size: 16
Letter spacing: 2
Text style: all caps

Theme - navigation setup

Layout Settings
Website content width:1200
Theme accent color: #D6652B

Theme - general settings

Typography Settings
Header text color: #D6652B
Body text color: #4C471E

Logo

Go to Divi Theme Options to upload the logo and then save changes.

Screen Shot 2016-07-14 at 21.00.22

Fixed Navigation Settings
Change the primary menu background color to #311E0 then save and exit.

Theme - fixed navigation settings

These are all great examples of a few site-wide changes I would encourage you to make at the start of each Divi website in order to start shaping the unique look and feel of your website. We can now begin to build our essential pages.

1. Homepage

main-page---AFTER1

In this section I will walk you through the steps I took to transform the predefined homepage layout into something unique and relevant to my imaginary business. You can follow these same steps, if not the exact actions, when creating pages on your own Divi websites.

Remove Unnecessary Sections
For the design I have in mind we don’t need the full width portfolio, testimonial section, map or contact form. So if you’re following along go ahead and delete those.

Full Width Slider

Next, go into the full width slider and click the settings of our company slider. Add a background image and then scroll down to add the description.

Page 1 - slider

Under general settings, add heading text, change the button text and URL. In the advanced settings, make the header text all caps. Use custom styles for the button and use the following settings in the screenshot.

Page 1 - button custom styles

Second Module
Change the background color to #E1E8DD then save and exit.

Page 1 - section module color

Blurb Settings
Change the title and the image, then edit the content and repeat for the other 2 services.

Add Title for the Section
Add a row (one column)
Insert text module
Change the text orientation to centre
In the advanced settings, make the text all caps, change the text size to 44 and letter spacing to 2.
Drag this above the blurbs.

Page 1 - Add title for the section

Adjust Row Module Settings For Gallery
Remove custom padding and make the row full width

Image Module
In the image module settings, remove the custom margin.

Page 1 - Image Module 2

The images have a gap between them like in the example below, so go into the general settings of the row module settings and select ‘Use Custom Gutter Width’ to yes and set the width to 0.

Page 1 - Image Module 1

Before & After

As you can see in the image below, I was able to use Divi’s predefined layout as a quick and easy starting point, but add, subtract, and customize to end with something all my own.

1-main-page---BEFORE-AFTER

2. Place Your Order Page

Place-your-order-AFTER1

The next page I decided to tackle was an order page. For this page, we will use the Sales Page predefined layout.

Remove Unnecessary Sections
For this page, we don’t need the blurb section, the images or the ‘don’t be shy’ section, so go ahead and delete them.

Full Width Slider
Add an image as the background in the full width slider module settings. To see more of the image, add top and bottom padding in the advanced settings of the full width slider module settings.

Change the header text color to #E1E8DD. The text is quite difficult to read, so to solve this use text overlay in the slide settings.

Testimonial Section
Instead of having three, I chose to have one. Add a row with three columns (one quarter, one half, one quarter) and drag the testimonial module into place. Delete or disable the section with three testimonials.

In the testimonial module, go into the advanced design settings and change the dimensions of the image to the setting below and make the text italicized.

FAQ
Change the background color of the section to #4E471E and in the text module settings change the text color to #E1E8DD

Before & After

Once again, with just a few adjustments and my own content I was able to completely transform a page from predefined layout to something that will work quite well for my business.

2Place-order---before-AFTER

3. Contact Page

Contact---AFTER1

Finally, for the contact page, use the predefined “contact page” layout. As you can see below, the map is on the top, covering the text, so we need to move the map all the way to the bottom of the page.

Page 3 - map

Add a full width section and insert the full width post titles. Disable everything except the title and center the text.

Page 3 - full width title

In the advanced settings, the title text should be all caps and then save and exit.

Page 3 - full width title settings

Drag the full width post title to the top. Now add a background image to the section.

Add custom padding to show more of the image. In this example I’ve added 300px to the top and bottom.

In the title settings, change the text size to 48px and make it bold with all caps to make it stand out. Change the color to #E1E8DD and add custom padding to the top.

Finally, edit the address information and the map details to your own.

Page 3 - info

Before & After

This page was a great example of how you will often find all or most of the element to a given page already present in the predefined layout. It’s just a matter of re-arranging them, populating them with your content, and keeping a consistent style to the rest of your website.

contact-before-after

Wrapping Up

To quickly review my process, here is how I would recommend getting the most out of Divi’s predefined layouts when creating your own Divi website(s):

  • First, gather inspiration. You should know in a general sense, if not specifically, what you’d like each page of your site to look like before sitting down to build it.
  • Then, make site-wide changes via the customizer so that you have fewer changes to make on each page to keep things consistent across your site.
  • Finally, load the most relevant predefined layout from the Divi Library to kickstart your design. Guided by your inspiration gathering, make the necessary edits to the predefined layout until you have a page that’s all your own.

Thanks for following along everyone! I hope you found this design exercise helpful. If you have any questions for me please leave them in the comments section below.

Also, be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 47

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post How to Use Divi’s Predefined Layouts to Their Full Potential: 3 Step-by-Step Examples appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply