Free Divi Blog Post Layout Pack Will Take Your Builder Powered Articles To The Next Level

8 Quick Ways to Improve the UX of the WordPress Dashboard
June 20, 2016
DIY: Optimize your browser cache
June 20, 2016
Show all

Welcome to Day 21 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-Blog-Post-Layout-01

Ever since the Divi Builder was added to blog posts, creating stunning editorial layouts with it’s easy to arrange modules has been one of the best ways to creatively display your content on a Divi website. But while the act of creating new modules and populating them with your own content is easy in terms of functionality, the aesthetic challenge of creating beautiful article layouts from scratch is considerable. That’s where this layout pack comes in.

In this layout pack we’ve created three gorgeous article layouts that you can use as guides and templates for your own unique Divi Builder powered blog posts.

Downloading & Using the Divi Blog Post Layout Pack

To use the Divi Blog Post Layout Pack on your own Divi site, you’ll first need to download it using the button below. Once the zipped file divi-100-pack-5.zip is downloaded, take a moment to locate it in your downloads folder and unzip it. Then, in your WordPress Admin, navigate to Divi > Divi Library and click on the “Import & Export” button at the top of the page.

When the portability modal pops up, go to the import tab and click the “choose file” button. Within the folder that you unzipped a moment ago, you will find four options: an All.json file to import all three blog post layouts at once and an individual .json file for each separate layout. Choose whichever file you prefer and then click the “Import Divi Builder Layout” button and wait for the import to complete.

Now within the Divi Builder for each blog post you create you will be able to go to “Load From Library” then “Add From Library” and select your new blog post layout(s).

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.

3 Gorgeous Divi Builder Blog Post Layouts

This layout pack comes with three gorgeous article layouts. These layouts are ideal for editorial style blog posts, feature articles, and long-form storytelling. You can use these layouts as they come or you can customize them by mixing and matching sections, adding and deleting modules, and of course adding your own content.

Blog Post Layout 01

This layout features a beautiful full-width custom header, over-hanging images, a clean image grid, and bold block quotes.

Divi-Blog-Post-Layout-02

Divi-Blog-Post-Layout-02-02

Blog Post Layout 02

This layout, in addition to having some of the same amazing features as our first layout, has an amazingly clean custom header including article title, author image, and metadata.

Divi-Blog-Post-Layout-01

Divi-Blog-Post-Layout-01-01

Blog Post Layout 03

The third and final blog post layout has one defining feature: its collage-like overlapping images. These overlapping images will set your post apart from the average article while still maintaining a clean and readable design.

Divi-Blog-Post-Layout-03

Divi-Blog-Post-Layout-03-03

Don’t Miss Tomorrow’s Free Divi Extension

Thank you for joining us again for Day 21 of the Divi 100 Marathon. We’ve got more Divi freebies in store for you this week, so be sure to come back each day.

In tomorrow’s post we will be giving away another free Divi extension by Andy Tran and our development team. See you then!

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

divi-2-6-logo

Divi 100 Day 21

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 Blog Post Layout Pack Will Take Your Builder Powered Articles To The Next Level appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar