Free Divi Download: Multipurpose Wireframe UI Kit Vol. 2

JavaScript for WordPress Developers: Loading JavaScript in WordPress
August 11, 2016
WordPress.tv Blog: How to Get 100 Content Ideas in an Hour: Nicole Kohler
August 11, 2016
Show all

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

Today we have the sequel to one of the most popular layout kits of the Divi 100 Marathon. Volume 2 of the Multipurpose Wireframe UI Kit provides a big boost to the variety of high-fidelity wireframes you’re now able to create with Divi.

Downloading & Using The Wireframe UI Kit Vol. 2

To use the Free Divi Multipurpose Wireframe UI Kit Vol. 2 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-2-pack.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 Resume Pages Layout Pack on any builder powered page by going to Load From Library > Add From Library. You can also load the individual sections by using the Load From Library option in the in-line section controls.

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.

The Wireframe Kit Vol. 2

divi-100-wireframe-layout-kit-vol-2-01

As was the case with the first wireframe UI kit, this kit provides both designers and developers with a powerful set of tools for creating interactive prototypes they can show to clients in a fraction of the time someone else might be able to create a static wireframe. And because of how easy Divi and this kit are to use, it’s value goes beyond people creating Divi websites. Even developers creating custom web apps or other types of websites may find that using Divi for the initial prototype is the best (and fastest) way forward.

The Wireframe Kit Vol. 2–Layout Example 01

There are seemingly endless layout possibilities you can create with this kit but we wanted to make sure to show at least one or two. This first layout features some amazing hero sections and calls to action.

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

Divi Wireframe UI Kit Vol. 2–Layout Example 01

The Wireframe Kit Vol. 2–Layout Example 02

In this layout example you’ll notice a few new elements: the new info bar section and the section including the toggle module.

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

Divi Wireframe UI Kit Vol. 2–Layout Example 02

The Wireframe Kit Vol. 2–Individual Sections

inline-add-from-library

One of the great things about these kits is that not only do you get all of the elements in one master layout that you can mix, match, and alter–but you can insert individual sections by themselves into any layout using the inline “Add From Library” control within the builder section settings. This time around we’ve adding more hero sections, calls to action, features sections, and much more.

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

Hero Section 01

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

Hero Section 02

divi-100-wireframe-layout-kit-vol-2-04_infobar

Infobar Section

divi-100-wireframe-layout-kit-vol-2-05_content

Content Section

divi-100-wireframe-layout-kit-vol-2-06_features

Features Section 01

divi-100-wireframe-layout-kit-vol-2-07_features

Features Section 02

divi-100-wireframe-layout-kit-vol-2-08_features

Features Section 03

divi-100-wireframe-layout-kit-vol-2-09_portfolio

Portfolio Section

divi-100-wireframe-layout-kit-vol-2-10_testimonials_and_brands

Testimonials Section

divi-100-wireframe-layout-kit-vol-2-11_team

Team Section

divi-100-wireframe-layout-kit-vol-2-12_pricing_table

Pricing Table Section

divi-100-wireframe-layout-kit-vol-2-13_contact

Contact Section

divi-100-wireframe-layout-kit-vol-2-14_cta

Call to Action Section 01

divi-100-wireframe-layout-kit-vol-2-15_cta

Call to Action Section 02

divi-100-wireframe-layout-kit-vol-2-16_cta

Call to Action Section 03

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

Call to Action Section 04

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

Call to Action Section 05

Tomorrow: Nick Accepts Applications for the Divi 3.0 Beta

In tomorrow’s post Nick will be opening up our Divi 3.0 beta to new applicants. We’d like to add a pretty large chunk of new users to our beta testing group so if you’re interested make sure to check out tomorrow’s blog post and follow the instructions provided to make in into the group. 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 72

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: Multipurpose Wireframe UI Kit Vol. 2 appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar