Free Divi Article Layout & Customizer Settings: Improve Site-wide Settings In A Single Click

7 Courses That Turn WordPress Users into Developers (Free and Paid Options)
July 4, 2016
How to Add a Printer Friendly Option to Your WordPress Posts
July 5, 2016
Show all

Welcome to Day 35 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-customizer-pack-mockup

So far in the Divi 100 Marathon we’ve given away several layout packs that exclusively use our Divi Library’s import/export functionality. In today’s post, for the first time, we’re sharing a customizer settings file that will improve the visual appeal of all your posts and pages, site-wide. We will also be giving away a single article layout that you can import in the same way as all of Divi 100’s previous layout packs.

Free Divi Article Layout

For the first part of today’s giveaway we have this bold article layout that is perfect for posts or pages where you want to make a big visual statement.

Divi-Customizer-Pack-02

In a process that is likely familiar now for those of you who have been following along with the series so far, you’ll want to import this layout via the Divi Library.

The first step of course is using the button below to download the layout’s zipped folder. Locate that zipped file 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 file from the unzipped folder called “Article Page (Simple Divi Layout).json” and then click the blue “Import Divi Builder Layout” button.

When the import is complete you will now be able to use the above layout on any post or page by selecting it from Load From Library > Add From Library within the Divi 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.

Learn to Import Customizer Settings With Our First Customizer Settings Pack

So far in the Divi 100 series we’ve only used the Import & Export functionality in the Divi Library. But there are a few other places within Divi where settings can be imported or exported. One of those areas is the Theme Customizer.

customizer-import-icon

By using the customizer pack we’ve provided via the download button below you will be able to make site-wide changes to your fonts, rows, gutters, and more in just a few clicks. To see this change take place just as you see it in the graphic below, follow these precise instructions. Warning: When importing customizer settings, all of your current settings will be lost and will be replaced with the settings being imported. We suggest following along with this tutorial using a test site rather than editing a live website. You can also always download a backup of your current customizer settings to be imported at a later time.

Divi-Customizer-Pack-01

First, use the button below to download the file divi-100-customizer-settings-pack.zip. Locate that file in your downloads folder and unzip it.

Next, in your WordPress admin navigate to Divi > Divi Library and click the “Import & Export” button. Go to the import tab and import the file 1 Article Page (Before) Divi Library Import.json. Then, go to Pages > Add New. You won’t need to publish this page, it’s just so that you can see how the customizer settings will change a specific layout, so simply title the page Before Customizer. In the Divi Builder go to Load From Library > Add From Library and load the layout “Article Page (Before Customizer)”. Save draft and click the preview button.

front-end-before

On the front-end you should now see a page preview that looks like the image above. This is where we apply the customizer settings. Navigate to the top of the page, to the WP admin bar where it states the name of your website, and in the drop-down menu choose “Theme Customizer”.

theme-customizer-dropdown-option

customizer-page

You should now see the page you were just working on from within the customizer view. Now, click on the import and export symbol at the top of the customizer sidebar.

customizer-import-icon

When the portability modal pops up, go to the import tab.

Before moving forward you should check the box next to “Download backup before importing” because this will change your site-wide customizer settings. If you do not like these changes you will be able to revert to your previous settings by re-importing the file this generates.

customizer-settings-portability-modal

After checking the box next to “Download backup before importing” click the “choose file” button. Select the file from the download we provided called 2 Article Page (After) Customizer Import.json and click the blue “Import Divi Customizer Settings” button.

front-end-after

When the import is complete you will notice that your article layout has been updated with the new customizer settings. These settings will have also been applied to other posts and pages across your entire site. If you do not like these changes, you can revert to your previous settings by re-importing the file you generated by checking the box next to “Download backup before importing”. You can also revert all the way back to Divi’s default settings by using the other customizer file in the download we provided called Reset Divi Customizer Settings to Default.json.

Download The Customizer Settings 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.

Tomorrow: Melissa Love Shares Her Responsive Design Process

In tomorrow’s post we will be getting a behind the scenes glimpse at how one of our community’s most talented web designers creates seamlessly responsive websites for her clients using Divi. 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 35

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

The post Free Divi Article Layout & Customizer Settings: Improve Site-wide Settings In A Single Click appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar