Free Divi Download: The Divi Header UI Kit

JavaScript for WordPress Developers: Learning the Basics
July 20, 2016
WPTavern: Downtime Expected for Some WP Engine Customers as Linode Patches A Critical Security Vulnerability
July 20, 2016
Show all

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


For today’s Divi Layout Kit we’ve created something quite unique. We’ve created a kit that includes ten different headers made from Divi Builder sections. So before anyone asks in the comments, these are only intended to be used with the “blank” page template and are not ideal in every circumstance. But for those they do work for, they’re fantastic. You can use these menus on small sites with just a few pages or on certain pages where you want that page’s menu to be unique from the rest of your site.

header_kit

Downloading & Using The Divi Header UI Kit

To use the Free Divi Header Layout Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-header-ui-kit.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 Header Divi Kit.json file. 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 header UI kit on any builder powered page by going to Load From Library > Add From Library. Be sure to use the blank page template with this particular layout pack!

Download The Layout 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 Header UI Kit

As I mentioned above, this kit does not use the actual Divi header module or the built-in header/navigation. Instead these are customized headers that you can save as individual sections or as global elements to use with the blank page template.

divi-header-kit-01_image

Tomorrow: Vote On Who Should Win The Divi Showcase Competition

We received thousands of entries for this years big Divi Showcase Competition and we’ve narrowed them down to just 20 finalist. Tomorrow will be your chance to see if your entry made the cut, and vote on who should win out of the top 20. 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 51

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 Divi Header UI Kit appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar