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


After the release of Divi 2.7 and the Divi Portability System, pre-made Divi Layouts have become incredibly powerful. Divi layouts can be quickly imported onto your site, including all custom design and images, and then added to your pages in just a few clicks. You can think of Divi Layout Packs as mini Child Themes for Divi – child themes that are really easy to make and even easier to use!

Today we are happy to release a brand new layout pack created just for you by our lead designer Mario. These layouts are absolutely beautiful, and they are shining examples of just how unique a Divi site can be if you take full advantage of the builder’s vast array of design settings.

This layout pack includes three unique homepage designs. Each has been built using a cohesive style, customized using the Divi Builder’s advanced design settings and custom CSS to create a truly unique appearance. Each homepage variation was built to serve a different niche, although each includes basic elements that might be useful in just about any type of site. These are great starting points for your next client project!

Downloading & Using The Layout Pack

Click the link below to download this layout pack. Once you have downloaded the .zip file, double click the .zip file to extract the contents. This will reveal the layout pack in the form of a .json file. This file can be imported into your Divi Library using the Import system as outlined in this tutorial. Simply log in to your WordPress website and navigate to the Divi > Divi Library page. Look for the “Import/Export” button at the top of the page and import the .json file using the Import tab.

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.

A Homepage For Enterprise Businesses

The first homepage design focuses on enterprise businesses. The colors are a combination of professional and and neutral blues and grays, combined with matching images that imbue that “big city” business vibe. The layout includes an attention-grabbing call to action above the fold, followed by a classic grid of icon/content blocks. Below that you will find the perfect place for an “about us” video, followed by company stats and the ever-present logo reel. No homepage is complete without a little social proof!

01

01-01

A Homepage For Design Agencies

The second layout in the collection focuses on the needs of art studios, photographers and design agencies. This homepage is a bit more fun and vibrant, featuring organic visuals and complimentary colors of pink and green. The call to action at the top of the page includes a contact form so that you can quickly grab leads. Farther down the page you will find a custom gallery built using gutterless/full-width rows. If you have been thinking about re-designing your own web design agency’s website, this might be a good way to kick things off!

02

03-03

A Homepage For Local/Lifestyle Businesses

The third design focuses on local lifestyle businesses. Here you will find warm and welcoming colors of orange and yellow. At the bottom of the page, a map module and custom text modules have been used to create the perfect “about us” section for local businesses. The chances are, if a visitor has stumbled upon a local business’s website, they are probably looking for location/contact details! We have also added a custom FAQ section built using the toggle module.

03

02-02

Stay Tuned for Two New Divi Layout Packs Every Week During Divi 100

If you’ve enjoyed the two layout packs we’ve released in this post series so far then you’re going to love what we have planned for the weeks ahead. Every Monday and Wednesday we will be sharing a new layout pack that I’ve designed just for you. Be sure to subscribe to our email newsletter so that you don’t miss a thing!

divi-2-6-logo

Divi 100 Day 7

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 Layout Pack For Modern Homepages & Single Page Websites appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply