Download The Ultimate & Free Divi Landing Page Layout Kit

How to Add the Divi Builder to Custom Post Types and Third Party Plugins – Divi Nation Short
June 6, 2016
How to Rename the Uncategorized Category in WordPress
June 6, 2016
Show all

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


mockup

We have created a new Divi Layout pack that will help you to build landing pages more quickly and easily than ever before. It’s called “The Divi Landing Page Layout Kit,” and it’s the first layout pack for Divi to be based on a modular section approach that allows you to create the perfect page by combining various components. Simply mix and match pre-made Divi sections from your Divi Library to create a variety of designs that can be used for different projects.

The Divi Landing Page Layout Kit contains 23 components, each of which has been designed in a unique and cohesive style that takes full advantage of Divi’s vast array of design settings. We have done all of the hard design work for you, which means you can save time on your next project and just focus on adding the content you need. You wont believe how easy it is to build new websites when you have a layout pack this good, all available inside of your Divi Library!

Downloading & Using Layout Pack

Click the link below to download the layout pack. Once you have downloaded the divi-landing-page-kit.zip file, double click the .zip file to extract the contents. This will reveal the layout pack in the form of a LandingPageKit.json file. This file can be imported into your Divi Library using the Import system as outlined in this tutorial. Simply log in to your WordPress website and navigate to the Divi > Divi Library page. Look for the “Import and Export” button at the top of the page and import the .json file using the Import tab.

Once the layout pack has been installed, you will notice that all 23 components have been added to your Divi Library. These components can be added to your new page by clicking the “Add From Library” button below each section on your page. Simply mix and match the pre-made sections to create your desired landing page!

add-from-library

Not only is the layout pack available in the form of 23 individual sections, it has also been combined into a single “master layout.” This single layout contains all 23 components, each of which can be enabled or disabled to your liking. The master layout can be added using the “Add From Library” button at the top of the Divi Builder interface.

Download The Divi UI Kit

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.

The Divi Landing Page Kit Master Layout

As mentioned above, the layout kit is available in two forms. Each component can be accessed in the form of a pre-made Divi section, or you can access all 23 components at once using the master layout. You can add the master layout to your page using the Add From Library button at the top of the builder. Look for the “Landing Page Kit” layout inside the Add From Library tab. Once the master layout has been added to your page, you will notice that all 23 sections have been added to the page. However, most of them are disabled by default using Divi’s Right Click > Disable feature. Once the master layout has been added, you can scroll through and Right Click > Enable each component that you would like to use on the particular page you are building. It’s that easy!

landing_page_layout

23 Modular Divi Library Components

Start building your landing page immediately with any of the 23 beautifully designed components. Each of these components is available in the form of a Divi section inside your Divi Library. These components can be added to a fresh page by clicking the “Add From Library” link below each Divi section on your page. Find the component you need among: Headers, Call to Actions, Galleries, Pricing Tables, Team Members, Testimonials and more. Below is a full list of available components. After you install the layout kit, you will see each of these available in the “Add From Library” tab when adding a new section.

add-from-library

Header 1

01

Header 2

03

Header 3

05

Header 4

02

Header 5

04

The Product

06

Mobile App

07

Technology

08

Collections Grid

09

Clients

10

Testimonials

11

Social Links

12

Numbers

13

Step by Step

14

Testimonial Slider

15

Features

16

Simple Pricing

17

Limited Offer

18

Collections

19

Gallery

20

Contact

21

General CTA

22

Filled With Beautiful Imagery

Unlike the Divi pre-made layouts that come installed with the theme, these pre-made layouts come packaged with supporting imagery. In fact, thanks to the new Divi Portability System, images have been encoded right into the layout pack’s .json file and will be automatically imported into your WordPress Media Library during installation.

img_unsplash_02

The First Of Its Kind, But Certainly Not The Last

In case you couldn’t tell, we think that Divi Layout Packs have a ton of potential. That’s why we spent the time to make something that really showcases the power of Divi, and how the builder’s design settings, custom CSS and vast array of modules can be customized to create just about anything. The way we see it, these Divi layout packs are much like child themes, except much easier to create and even easier to use. The Divi Landing Page Layout Kit is just the beginning. In fact, throughout Divi 100 you can expect a brand new layout pack from us every single week!

Stay tuned 😉

divi-2-6-logo

Divi 100 Day 2

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; text-decoration: none; }
hr { border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB; }

The post Download The Ultimate & Free Divi Landing Page Layout Kit appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar