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!

---

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

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.

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.

Step 1: Edit Section #1

Section Settings:

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

Image Module Settings:

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

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.

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

<p><img class="size-full wp-image-25761" style="float: left; margin-right: 36px;" src="IMAGE LINK TO 03.JPG" alt="02" width="178" height="60"></p><p style="margin-top: 2%;">WATCH A DEMO</p>

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.

Step 2: Edit Section #2

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)

Text Module Settings:

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

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.

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

Step 3: Edit Section #3

Image Module Settings:

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

Divider Module Settings:

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

All Text Module Settings:

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

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.

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

<p><img class=" size-full wp-image-25874" style="float: left; margin-top: 10px; margin-right: 33px; margin-bottom: 20px;" src="http://www.divitests.dev/wp-content/uploads/2016/08/06-3.png" alt="03" width="70" height="70"></p><div><p style="padding-bottom: 0px;">Feature two</p><p style="margin-top: 16px; font-size: 18px;">Integer elementum massa at nulla placera. Suspendisse in libero risus, in massa.</p></div>

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.

Step 4: Edit Section #4

Image Module Settings:

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

Divider Module Settings:

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

Text Module Settings:

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

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.

Step 5: Edit Section #5

Section Settings:

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

Divider Module Settings:

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

Text Module Settings:

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

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.

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

<p><img class="aligncenter size-full wp-image-27020" style="margin-top: 26px; margin-bottom: 6px;" src="http://www.divitests.dev/wp-content/uploads/2016/08/08-2.png" alt="11" width="100" height="100"></p><p style="text-align: center;"><strong>Aubert Y.</strong><br> <span style="font-size: 16px;">New York, NY</span></p>

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.

Step 6: Edit Section #6

Divider Module Settings:

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

Text Module Settings:

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

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.

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

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.

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!