Free Divi Download: The New Multipurpose Wireframe Kit, Vol. 1

Are You Addicted to WordPress Porn?
August 4, 2016
How to Send Email to All Registered Users in WordPress
August 4, 2016
Show all

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


divi-100-wireframe-layout-kit-vol-1-00_mockup

In this post we’ve got a fantastic new tool and resource to give to the community. It’s a multipurpose wireframe layout kit that you can use to create high-fidelity wireframe prototypes with Divi. This will allow your clients to get a better idea of what their final website will look like even before all of their content is in.

Once they’ve signed off on the design and their content is in then all you’ll have to do is add their content directly to the layout as it is, change the colors and other styles, and you’ll be well on your way to a final client site!

This kit can even be useful to designers and developers not using Divi for their final product. With this high-fidelity layout kit you can still take advantage of Divi’s incredible speed and ease of use to build out prototypes that your clients can view and give feedback on before diving into your custom work.

Check it out!

Downloading & Using The Multipurpose Wireframe Kit, Vol. 1

To use the Free Divi Multipurpose Wireframe Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-wireframe-kit-volume-1.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.

When the portability modal pops up go to the import tab. Click the “choose file” button and select the All.json file or any of the individual layouts you want. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.

Once the import has finished you will now have the ability to load your new Divi Wireframe Kit on any builder powered page by going to Load From Library > Add From Library or the inline “Load From Library” option next to the new section options within the builder.

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.

What’s In The Kit?

This kit, which is the first of its kind with more on the way, consists of three files: The full kit, which is called “Wireframe Kit – Vol. 1.json”. This file contains all of the kit elements in one master layout; making it easy to mix, match, edit, and delete to get new custom designs. The file “Wireframe Kit – Landing page Layout Example.json” is meant to show you what kind results this can achieve. Then we have the “Single Sections (2).json” file which imports the entire kit as individual sections for you to load independently from the in-line new section controls within the Divi Builder. And finally, we have the “All (12).json” file which uploads everything in one import.

divi-100-wireframe-layout-kit-vol-1-00_how_preview_works

Each file will come with all of the builder elements collapsed. This is so that it’s easy to scroll through your options and quickly preview each section using the right-click preview control.

The Wireframe Kit — Vol. 1

The Wireframe kit itself is pretty massive, but don’t let that intimidate you. With a bit of experimentation, utilization of the preview technique shown above, and a good idea of what you’re going for in the end you will quickly be able to create beautiful high-fidelity wireframes for yourself or your clients.

divi-100-wireframe-layout-kit-vol-1-00_mockup

divi-100-wireframe-layout-kit-vol-1-00_layout_example

Individual Sections

divi-100-wireframe-layout-kit-vol-1-inline-add-from-library

divi-100-wireframe-layout-kit-vol-1-individual-sections

If you don’t want to start out with a whole master layout you can always use the in-line “Add From Library” control to insert one section at a time. As you can see from the gif and individual images below, the possible combinations are endless.

divi-100-wireframe-layout-kit-vol-1-00

divi-100-wireframe-layout-kit-vol-1-01_hero_section

hero section 01

divi-100-wireframe-layout-kit-vol-1-02_hero_section

hero section 02

divi-100-wireframe-layout-kit-vol-1-03_hero_section

hero section 03

divi-100-wireframe-layout-kit-vol-1-04_hero_section

hero section 04

divi-100-wireframe-layout-kit-vol-1-05_hero_section

hero section 05

divi-100-wireframe-layout-kit-vol-1-06_content

content section 01

divi-100-wireframe-layout-kit-vol-1-07_content

content section 02

divi-100-wireframe-layout-kit-vol-1-08_content

content section 03

divi-100-wireframe-layout-kit-vol-1-09_slideshow

slideshow section 01

divi-100-wireframe-layout-kit-vol-1-10_slideshow

slideshow section 02

features_section_01

features section 01

features_section_02

features section 02

divi-100-wireframe-layout-kit-vol-1-13_features

features section 03

divi-100-wireframe-layout-kit-vol-1-14_features

features section 04

divi-100-wireframe-layout-kit-vol-1-15_gallery

gallery section 01

divi-100-wireframe-layout-kit-vol-1-16_gallery

gallery section 02

divi-100-wireframe-layout-kit-vol-1-17_cta

call to action section 01

divi-100-wireframe-layout-kit-vol-1-18_cta

call to action section 02

divi-100-wireframe-layout-kit-vol-1-19_cta

call to action section 03

divi-100-wireframe-layout-kit-vol-1-20_cta

call to action section 04

divi-100-wireframe-layout-kit-vol-1-21_cta

call to action section 05

divi-100-wireframe-layout-kit-vol-1-22_team

team section 01

divi-100-wireframe-layout-kit-vol-1-23_team

team section 02

divi-100-wireframe-layout-kit-vol-1-24_testimonials

testimonial section 01

divi-100-wireframe-layout-kit-vol-1-25_testimonials

testimonial section 02

divi-100-wireframe-layout-kit-vol-1-26_products

products section

divi-100-wireframe-layout-kit-vol-1-27_single_product

single product section

divi-100-wireframe-layout-kit-vol-1-28_pricing_table

pricing table section

divi-100-wireframe-layout-kit-vol-1-29_contact

contact section 01

divi-100-wireframe-layout-kit-vol-1-30_contact

contact section 02

Tomorrow: A New Sneak Peek at Divi 3.0

Tomorrow we’ve got another big day in the Divi 100 Marathon. Nick is going to be presenting another sneak peek at the progress of Divi 3.0–you won’t want to miss it!

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 65

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 Free Divi Download: The New Multipurpose Wireframe Kit, Vol. 1 appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar