How to Use the Divi Wireframe Kit to Create Professional Landing Pages

10 Simple Ways to Convert Casual Visitors into Paying Customers
August 30, 2016
How to Show Total Number of Registered Users in WordPress
August 30, 2016
Show all

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


00_mockup

In today’s post, in addition to giving you a new free Wireframe Landing Page and a finished landing page design, I want to walk you through my process to show you how you too can use our Divi Wireframe Kit to create any number of impressive Divi pages.

I worked together with Nathan to provide a new variation on what has become our standard video/blog post format for these free Divi Layout packs. This time around we’ll be getting into a lot more detail and (hopefully) teaching you a design skill that will prove valuable long into the future.

Check it out!

How to Use the Divi Wireframe Kit to Create Professional Landing Pages (Or Any Type of Page)

In order to follow along on your own Divi website you will first need to use the button below to download the layout pack’s zipped folder: divi-100-from-wireframe-to-landing-page-step-by-step.zip. Unlike our typical packs, which usually just have json files in them, when you unzip this one it will have some extra folders and files in it.

In addition to three json files All.json, Landing Page (Wireframe), and Landing Page (Final Design) there are two preview images of each layout as well as a folder called “tutorial-images”. In that folder you will find all of the images you need to follow the instructions in the above video or the written instructions below.

Download The Layout Pack

All photos courtesy of the generous authors on Unsplash.com via the Unsplash License. Layout Packs are released under the GPL, which means you can use them for free for both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

Summary: How We Used the Divi Wireframe Kit to Create a Landing Page in Six Steps (And You Can Too!)

In the above video and in the step by step instructions below we are going to show you how to get from version “A” to “B”. The download above includes all of the necessary files for you to follow along and make the exact same edits to the Wireframe Landing Page Layout that we do. So strap in, follow along, and learn something that we believe will be a valuable design skill for anyone using Divi.

wirefram-landing-page-before-after-00

Step 0: Import the “All.json” File & Load the Wireframe Layout

In order to follow along with the instructions below and/or the video above, you’ll first need to import the “All.json” file by going to Divi > Divi Library > Import & Export. When the portability modal pops up, go to the import tab, click the black choose file button and select the “All.json” file from the folder you just downloaded and unzipped.

Once you have the layouts imported, you’ll want to create a new page by going to Pages > Add New. I’d recommend calling this page: Landing Page Tutorial. Then click the purple Use Divi Builder button, go to Load From Library > Add To Library and load the layout “Landing Page (Wireframe). When you save and preview it on the front end it should look like the image below.

01

The Wireframe Landing Page

Step 1: Edit Section #1

Section-1-Backend

Section #1 Backend

Section Settings:

  • Open the blue section settings and add the image “01.jpg” from the “tutorial-images” folder as the background of the section.

section-1-settings

Image Module Settings:

  • Add the “02.png” image from the “tutorial-images” folder to the image module under the General Settings Tab.

image-module

Text Module Settings:

  • Under the Advanced Design Settings Tab, change the text color for all of the text modules to #ffffff.
  • In the third text module (bottom) replace the App Store logo image with image file “03.png” from the “tutorial-images” folder.
  • The easiest way to do that is to simply replace the “src” image link in the content area’s text tab. This will preserve the in-line styles already applied to the image.

text-module

If you accidentally delete the inline styles you can copy them from the snippet below:

02

WATCH A DEMO

When you save all of your settings, include the page itself, and preview the results you should now have a top section that looks like this.

final-top-hero-section

Step 2: Edit Section #2

Section-2-Backend

Section #2 Backend

Divider Module Settings:

  • In both the desktop and mobile divider modules add this color code under the General Settings Tab: rgba(48,48,48,0.3)

Divider-Module-color

Text Module Settings:

  • Inside each text module’s Advanced Settings Tab change the text color to #303030.

Text-Module-color

Image Module Settings:

  • Inside the image module change the image to “04.png” from the “tutorial-images” folder and change it’s alignment to center.

Image-Module

When all these settings have been configured and saved, save the page again and preview it on the frontend. It should look like this.

Final-Section-2-Design

Step 3: Edit Section #3

Section-3-Backend

Section #3 Backend

Image Module Settings:

  • Inside the image module replace the image with the file named “05.png” from the “tutorial-images” folder.

image-module

Divider Module Settings:

  • Inside each divider module change the color to this code: rgba(48,48,48,0.3)

divider-module

All Text Module Settings:

  • Inside each text module under the Advanced Design Settings Tab change the text color to #303030.

text-module-color-change

Second & Third Text Module Settings:

  • Inside the second and third text modules (the bottom two) replace the check icon image located inside the content area wth the image file “06.png” from the “tutotial-images” folder.
  • Be sure to use the same technique of replacing the src link that we used above to retail the inline styles.

text-module-image-link

If you accidentally delete the inline styles you can get them from the snippet below.

03

Feature two

Integer elementum massa at nulla placera. Suspendisse in libero risus, in massa.

When all of your settings have been configured and saved, save the page and preview it on the front side. The third section should now look like this.

Final-Section-3-Design-1

Step 4: Edit Section #4

Section-4-Backend

Section #4 Backend

Image Module Settings:

  • Inside the image module add the image file named “07.png” from the “tutorial-images” folder.

image-module

Divider Module Settings:

  • Inside each divider module add this color code: rgba(48,48,48,0.3)

divider-module

Text Module Settings:

  • Inside each text module under the Advanced Design Settings Tab change the text color to #303030.

text-module

When all of your settings have been configured and saved, save the page and preview the result on the front end. It should now look like the image below.

Final-Section-4-Design

Step 5: Edit Section #5

Section-5-Backend

Section #5 Backend

Section Settings:

  • In the section settings under the General Settings Tab change the background color to: #f7f7f7.

section-settings

Divider Module Settings:

  • Inside each divider module add this color code: rgba(48,48,48,0.3)

divider-module

Text Module Settings:

  • Inside the text module under the Advanced Design Settings Tab change the text color to #303030.

text-module

Slider Module Settings:

  • Inside the slider module’s Advanced Design Settings Tab change the text colors to #303030.
  • Inside the slider module’s slide settings, under the Advanced Design Settings Tab, change all the text colors to #303030 and change the Arrows Custom Color as well as the Dot Nav Custom Color to #303030.
  • In the slide’s content section, replace the user’s image with the file named “08.png” from the “tutorial-images” folder. Replace the link only in order to keep the inline settings intact.

slide-content

If you accidentally deleted the other text and inline code you can get it all from the snippet below.

11

Aubert Y.
New York, NY

When you’ve configured all of these settings and saved them, save the page and preview the result on the front end. This section should now look like the image below.

Final-Section-5-Design

Step 6: Edit Section #6

Section-6-Backend

Section #6 Backend

Divider Module Settings:

  • Inside each divider module add this color code: rgba(48,48,48,0.3)

divider-module

Text Module Settings:

  • Inside the text module change the text color to #303030.

text-module

Button Module Settings:

  • Inside the button module change the button background and border colors (as well as the hover button background and border colors) to #41bb99.

button-module

When all of your settings are configured and saved, save the page and preview the section on the front end.

Final-Section-6-Design

The Final Result

By this point you should now have a final design layout converted from our Wireframe Kit to something you can use on a live website. Of course in this case we’re still using example content, but when you do the same process for yourself you’ll be using your own original content or content given to you by a client.

02

The Final Landing Page Design

Tomorrow: Learn How to Export & Share Your Own Divi Layouts, Library Elements, & Customizer Settings

As a sort of follow up to today’s tutorial, tomorrow Nathan will be showing you our recommended best practices for exporting and sharing your own Divi json files for layouts, individual library elements, and customizer settings. See you there!

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-2-6-logo

Divi 100 Day 91

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(https://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 the Divi Wireframe Kit to Create Professional Landing Pages appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar