Download The Free Divi Custom Button Module Design Kit

How to Add a Hello Bar to Your WordPress Site (and Why Everyone is Doing It)
July 13, 2016
How to Add Odd/Even Class to Your Post in WordPress Themes
July 14, 2016
Show all

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


Every website needs buttons. But creating beautiful buttons, even with the advanced design settings Divi offers, can be a challenge for some users. That’s why in today’s post we’re providing over 50 different button styles that you can save to your Divi Library and use over and over again.

divi_components_buttons

Downloading & Using The Free Divi Buttons Kit

To use the Free Divi Button Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-buttons-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 Buttons 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 the buttons kit as a complete layout on any builder powered page or post by going to Load From Library > Add From Library. This kit allows you to quickly and easily preview a wide selection of buttons that you can then save as individual modules to use over and over again on your website to maintain consistency.

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 Buttons Kit

save-buttons

The Divi Buttons Kit provides you with a single layout containing over 50 different button styles. Once you have decided on the buttons you would like to re-use on your site, simply save those buttons to your library as individual modules by going to that module’s settings and clicking the blue “Save & Add to Library” button.

divi_components_buttons-01

Tomorrow: A New Divi Showcase Competition

Tomorrow Nick will be launching a new Divi Design Showcase Competition with big prizes for the best submissions. We’ll be viewing all of the sites the community has submitted to the podcast as well as any new submissions sent during the next week. Check back tomorrow for full submission details and a rundown of potential prizes.

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_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 44

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 Free Divi Custom Button Module Design Kit appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar