Welcome to Day 9 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-font-combination-layout-pack-mockup

With the Divi portability system’s ability to encode images and import/export complete layouts in a matter of seconds, it may be easy to forget that focusing on other pre-configured settings–such as font settings–can provide an incredible amount of design value. That’s why in today’s post we’re giving away a unique kind of layout pack. One that focuses on making the best font pairings possible with Divi’s font selection instantly available via the Divi Library.

This layout pack consists of one beautiful new page design rendered in ten different font pairing variations. Each font combination layout provides a style guide for how that font pairing should be used both on the page you’re building and site-wide via the customizer settings in Theme Customizer > General Settings > Typography as well as anywhere else you need to configure font settings.

Downloading & Using The Layout Pack

First, use the button below to download the layout pack. Then, locate the zipped file in your downloads folder and unzip it.

Next, 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 “Choose File” and either select the All.json file to import all of the layouts at once or an individual font combination file if you’d like to upload only the ones you’re interested in one at a time.

When you’ve made your selection, click the “Import Divi Builder Layouts Button” and wait for the upload to complete.

The layouts you’ve just imported will now be available on every page (new or existing) via the Divi Builder when you go to Load From Library > Add From Library.

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 person and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

10 Beautiful Divi Font Combinations

The first layout you see below will be called Font Combination #00 in your Divi Library after you have imported the layout pack above. This is the only layout of the ten provided that will have an image included. It’s intended to show you the potential of these font combinations and the elevated sense of style they can bring to more “finished” content.

divi-font-combination-layout-pack-full-layout

Font Combination #00, Playfair Display + Source Sans Pro

All of the other layouts, named “Font Combination” #01-09, are previewed below. Just as with any layout you can use these to jumpstart your design process while also using them as a style guide for how best to configure Divi’s font settings across your entire website.

divi-font-combination-layout-pack-01

Font Combination #01, Roboto Slab + Roboto

divi-font-combination-layout-pack-02

Font Combination #02, PT Serif + PT Sans

divi-font-combination-layout-pack-03

Font Combination #03, Lato + Lora

divi-font-combination-layout-pack-04

Font Combination #04, Montserrat + Crismon Text

divi-font-combination-layout-pack-05

Font Combination #05, Nunito + Lora

divi-font-combination-layout-pack-06

Font Combination #06, Droid Sans + Droid Serif

divi-font-combination-layout-pack-07

Font Combination #07, Lora + Source Sans Prof

divi-font-combination-layout-pack-08

Font Combination #08, Playfair Display + Open Sans

divi-font-combination-layout-pack-09

Font Combination #09, PT Sans + Open Sans

Get A New (FREE) Layout Pack Every Monday & Wednesday During Divi 100!

Our vision for the ideal user experience is that when you install Divi and use its accompanying resources you will be able to quickly and easily create a beautifully designed website no matter how technically advanced you are.

One of the best ways to facilitate that process is to provide a large number of pre-designed Divi Layouts that anyone can use for any reason–personal or commercial. That’s why every Monday and Wednesday during the Divi 100 series we will be giving away a new, professionally designed, Divi layout pack.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a freebie!

divi-2-6-logo

Divi 100 Day 9

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 Font Combination Layout Pack: 1 Beautiful Layout Design, 10 Ideal Font Pairings appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply