Exploring Divi 2.4: Building Beautiful Blog Posts With The Divi Builder

Earlier this week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part three of this series, we will talking about how to use the Divi Builder to build beautiful and compelling blog posts.

Learn All About Divi 2.4 Here

Blog Posts Are Changing, For The Better

The story driven post is the start of a blogging revolution. Designers have been doing it for years in print media, where design programs gave them free reign over the page. Creating dynamic articles where typography, shapes and images intertwined to give each page its own personality. As the web has evolved, so have posts, transforming slowly from plain paragraphs into mixed-media masterpieces.

One of the first classes examples of a mixed-media story-driven post is the New York Time’s Snowfall article. Scrolling down this page is more than your average reading experience. Such posts take full advantage of what the computer and the browser has to offer, combining videos, images, text and interacting with visitor behavior (such as scrolling) to create a more dynamic experience.

Since then a lot of similar pieces have popped up, such as the Paul Ford’s recent 38,000 words article “What Is Code?“, which pushed the boundaries even further. These break-out pieces can be a welcomed change for your readers, and the extra time you spend perfecting the design of your articles can lead to increased vitality. This is the future of online publications, and this is how you can stand out from the crowd.

Stories Can Be Told Visually

Stories can be told in different ways. When we read a novel, we rely solely on words and our imagination. This differs greatly from the cinema, where narration has been replaced by be different techniques – a combination of words, sounds and visuals that have been carefully framed, acted and arranged. Blog posts are not dissimilar, in that they are a mixed-media canvas with tools and techniques available to them that often go unused. When you read Pitckfork’s project Glitter In The Dark, each scroll of the mouse wheel is a new frame in online flip book that pulls you forward one image at a time. When you explore Killing Kennedy by National Geographic, you are taken back in time in an surreal online experience.

These types of blog posts are now possible with Divi 2.4, as the builder has now been enabled for all post types! Using the Divi Builder, you can construct some pretty amazing things that were never possible before using the standard TinyMCE editor that ships with WordPress.

The Anatomy Of A Beautiful Divi Blog Post

A good blog post tells a story, and tells it well. To tell a good story on a visual medium such as the web, you need to think about more than just what you are writing, but also how your writing is displayed. Using a good theme with some great base typographic style is a good start, but you still need to make some decision on your own, such as the order and structure of the elements on your page.

1. Don’t Be Afraid To Ditch The Sidebar – Sidebars are becoming increasingly less necessary. Even if you have a sidebar on your entire blog, you might consider removing it from a post or two so that you can take advantage of the full width of the screen (much like the “Snowfall” and “What Is Code?” examples above). If you really want to keep the sidebar widgets on the post, but you still want to go full width, considering adding them to the bottom of your page in a 1 column row using the Sidebar module. This is possible using Divi’s new “Fullwidth” layout option for posts, found within the Divi Theme Settings box.

2. Don’t Get Too Crazy – Sometimes simplicity is your best friends. With all the modules available in Divi, it might be tempting to add a tone of stuff to your post. Consider that even when limiting yourself to basic elements, such as Text and Image modules, you can still create an inspiring post based solely on how those elements are arranged using Divi’s column layouts. The example blog posts below were created almost entirely of text and image modules.

3. Use Photos With Care – Beautiful imagery can make a post look amazing, but bad imagery can also ruin your design. If you use photos on your blog, take care to pick high quality images that have a cohesive style. Finding good photos can be a challenge, so be sure to check out our post on the subject.

Click Here To View The Post

4. Use Columns To Make Content Digestible – Long blog posts can be especially hard to take in when the same format is repeated over and over again (text, image, text, image, text image). It can be difficult to tell what things relate to each other, and you can be easily lost in the post. Using Divi’s column layouts, you have the opportunity to construct a layout that makes sense for the content you are displaying.

5. Be Aware Of Your Space – Going Fullwidth is a great option, but using a Sidebar can look great too. But don’t forget to consider the space available for your content based on the size of your sidebar and your website’s content width. Generally, placing text inside of a 1/4 column row might be difficult to read when you have a sidebar enabled. Try sticking to 1/3 columns and above.

Click Here To View The Post

6. White Space Is Your Friend – Give your images and text some room to breath. With Divi, every module, row and section has custom spacing controls in the Advanced Design Settings tab. Sometimes adding some extra space around your text can make it your article more easy to understand. Don’t worry about things being “above the fold” or you page being too long. A smart man once said, “no page can be too long, only too boring.” An effective story is intriguing, and curiosity will pull your visitors down the page naturally.

7. Marry Your Text And Imagery – In a well crafted blog post design, each piece of content plays a small part in a bigger picture. Each image should be away of the text around it. There are so many opportunities to create compelling layouts by letting your text, images and background colors play together. Notice in the post below, how the bend in the chair gives way for the bar counters to the left of them. Notice in the post above how the detailed steps to creating an especially are accompanied by instructional images to the right.

8. Using Sections Backgrounds To Organize Content – Using Sections to separate larger chunks of content is a great way to make your article more organized, much like chapters in a story.

Click Here To View The Post

Use Divi’s Post Title Module To Give Your Post A Unique Look

Before Divi 2.4, all posts had a uniform layout, including the post title and meta data. With the introduction of the Divi Builder for posts, we wanted to make sure that everything about your post was customizable, including the display of your standard post elements: Post Title, Meta Data and Featured Image. This is now possible using the Post Title Module.

Disabling Standard Post Title Display

When writing a post with Divi, the standard post title display can now be disabled. Once disabled, you are given free reign to use the Divi Builder to construct your entire post, including the post title.

Using The Divi Post Title Module

Once the standard Post Title has been disabled, you can use the Divi Post Title Module to automatically add a customized and beautifully-styled post title to the top of your page.

This module automatically displays important post information, such as your post title, author name, post date, comment count, categories and featured image; all the things you would normally find at the top of your post. These pieces of information can be toggled on and off, and can also re-arranged into different layouts and styles using the Post Title Module settings.

This allows you to create a completely new look for your post blog. For example, on the following post we have disabled the standard post title display in favor of the Divi Post Title Module. We set the module to display the Featured Image as a background, and also added custom text styling for the title and a semi-transparent background to the text. There are a wide array of looks that can be achieved using different combination of post title settings.

Have Fun And Start Experimenting!

I hope this post gives you just a few ideas about how the Divi Builder can be used to help your blog stand out from the crowd by building story-driven, mixed-media articles that are rarely found outside of huge online publications with big development teams. Trying spending some extra time on the design of your next post and see what happens. Trust me, your visitors will be blown away!