The Best Free Divi Layout Packs From Around The Web

Getting Started With Contact Form Plugins for WordPress
July 23, 2016
HeroPress: How WordPress Taught Me To Be a Better Developer
July 24, 2016
Show all

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


Over the past month and a half, we have been releasing two free Divi Layout Packs each week as part of the Divi 100 Marathon. We are extremely excited about the potential premade Divi layouts have to speed up development time for our customers, which is why we are putting so much effort into exploring the idea here on our blog. However, Elegant Themes isn’t the only place to find awesome free Divi layouts. In fact, quite a few Divi community members have started creating Divi layouts of their own and giving them away for free on their own websites! It’s exciting to see, and today I am happy to feature some of our favorite free Divi layouts from around the web.

What Are Divi Layout Packs?

If you aren’t familiar with Divi Layout Packs, let me explain a bit about them first. One of the core features of the Divi Builder is the Divi Library. In the Divi Library, you can save things that you have built and re-use them later. You can save custom modules, rows, sections or even entire layouts to the library and then load them onto new pages as you create them. As you begin to fill your library with more and more custom layouts and layout components, starting new websites or client projects becomes so much easier.

In Divi 2.7, we introduced our portability system to the Divi Library, which allows anyone to import and export items from their Divi Library to be shared with the community. These exported layouts are what we call Divi Layout Packs, and once downloaded they can be imported right into your Divi Library and loaded in when you build new pages with Divi. If you find a Divi Layout that you like below, all you have to do is download the file and upload it using the Import/Export button via the Divi > Divi Library page in your WordPress Dashboard.

About Us Layout by Creative Child Themes

Inspired by the Elegant Themes team, this About Us page is sleek and professional. It features some great typography and creative usage of Divi’s margin and padding controls. I love the overlapping sections and text. You can take a look at the live demo here, and you can download the pack for free here.

about-us

Grid Image Layout by Creative Child Themes

Grid Layouts are a great way to add diversity to your page. If you are looking for an easy way to create a fullwidth grid of text and image on your page, then this free layout will give you that grid look in just a few clicks! I love the color coordinated hover colors and social icons, as well as the alternating black and white text backgrounds.

grid

Animated Blurb Cards by Yates Design

This Animated Blurbs layout adds some really cool custom animations to the Divi blurb module. A drop shadow is used to add depth, creating the illusion that the box is lifting up off the page when you hover over it. This is accompanied by a ripple effect that emanates from the blurb’s centered image. What a cool effect!

blurbs

Custom Image Module Hover Effect by Yates Design

If you are looking to apply some custom image hover effects to your Divi image module, then you are going to love this layout pack. Yates Design has adapted a wonderful post from Coddrops and created a custom image module and call to action module combination. It requires a bit of custom CSS, but this can be easily added to your page using the Custom CSS box in your Divi Builder page settings.

image-hover-small

Countdown Timer by Yates Design

This custom Countdown Timer design was inspired by a design on CodePen and adapted by Yates Design as a Divi Builder module. I love the bold text used for the numbers as well as the blue gradient background.

countdown

Oyster Bay Layout by Aspen Grove Studios

The Oyster Bay layout is a perfect example of great minimalistic design. I love the stark black and white elements, the thin lines and the well spaced header. Check out the live demo to see how their team created an entire page, from header to footer, using only Divi Builder modules. You can download this layout for free, or donate to the project using the “name your own price” system during checkout.

oyster-bay

Fitzgerald Layout by Aspen Grove Studios

The Fitzgerald layout features some absolutely lovely design. The typography is elegant, readable and surrounded by plenty of white space. The smooth and subtle color scheme is mirrored in the layout’s images, and each section background makes good use of image overlays to ensure that the text content is easy to see. The layout is available for free, but you can also donate to the project during checkout via their “name your own price” policy.

fitzgerald

Star One Pager by Love Divi

The Star One Pager layout is a great start for a professional business landing page. I can see these colors and the overall style working great for a tech company, and there are certainly no shortage of those starting up these days. Take a look at the live demo to see its custom blurb modules. I love how they used the module’s border, background color and custom CSS options to create a really unique element that you will probably find useful in your own custom layouts as well.

one-pager

Two Cafe by Divi Theme Examples

The Two Cafe layout pack is the perfect start to your next local boutique website. It comes with a great custom menu section for restaurants and an informative about us section at the bottom of the page. Check out the live demo to explore its warm/desaturated color scheme and wonderful floral motifs.

two-cafe

Divi We Miss Any?

I hope you enjoyed this list of free resources. It’s great to see how active and collaborative the Divi community has become, and I am sure you will start to see more and more Divi layout packs being created in the future. Have you created any free packs yourself? Did we miss your favorite free Divi layout pack resource? Be sure to let us know in the comments!

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 54

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 The Best Free Divi Layout Packs From Around The Web appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar