Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy Lifetime Membership
×
Divi blog timeline

Aug 27, 2021 | Divi Resources

How to Easily Design a Divi Blog Timeline Layout


Divi Extended recently released the 1.9.0 version of the multipurpose plugin Divi Plus. And in this tutorial, we’re going to discuss one of its parts — the Blog Timeline module. Using this module, you can easily create vertical timelines for blog pages with different options. Like, show featured images, ignore sticky posts, change blog timeline layout, and more.

For Divi designers, archive or blog pages with significant change other than the native look helps a lot to bring uniqueness to the site. And with the help of this new blog module, it’s easy to achieve.

Without any delay, let’s check out this new blog layout module and its features.

Things To Do First



The Blog Timeline module is part of the premium Divi Plus plugin. Therefore, to create a blog page with posts lied in a vertical timeline we need to get this plugin. Divi Plus is a multipurpose plugin with over 50+ modules that allows Divi designers to achieve creative and complex designs easily.

Divi Plus

In addition, it also includes multiple extensions, free child themes, starter templates, and over 250+ design blocks. So, without spending extra time even with Divi Plus intuitive modules, you can easily create highly engaging and beautiful websites. It’s available on both Divi Extended store and Divi Marketplace; as per your convenience, you can get it from you like.

Furthermore, after getting this plugin, you need to install and activate it just like a regular plugin. Then, after activation, go to the Settings on your WordPress Dashboard → Divi Plus.

Opening Divi Plus settings

It will open the plugin’s module panel. Here you need to enable the Blog Timeline module and then click the Save Changes button.

Enabling Divi blog timeline module

Now, we’re all set to create our beautiful blog timeline in Divi.

Insert Divi Plus Blog Timeline Module



Create a new page or edit an existing one. Deploy Divi Builder and add a new row and insert the DP Blog Timeline module.

Divi Plus blog timeline module

As soon as you insert the blog timeline module on your Divi Builder canvas, it opens the module’s Content tab plus blog timeline with its default layout.

Divi Plus blog timeline module and its first look

Let’s explore the Content settings in detail; what are the options and how you can utilize them on your Divi blog timeline page.

Blog Timeline Content Customizations



In the Content tab of the module, the following additional settings are available.

Content tab settings of Divi Plus blog timeline module

Each contains further options to apply to the post’s timeline and its different elements. Like the featured image, meta description, and more. These options will enable you to enhance the functionality of your post timeline even more and allow users to interact with them more profoundly.

Content Settings

In the Content settings of the Content tab, you get numerous options to define the quantity, category, and sequence of the posts in the timeline. To improve content accessibility, these options are the perfect fit for your blog page.

Divi Plus blog timeline module and its content settings
  • Number of Posts – Under this option, you can define how many posts you want to display on the blog post timeline.
  • Post Offset Number – It enables you to hide starting ‘N’ number of posts. For instance, if you set this to 3, then the first three posts will be hidden.
  • Order – It provides you with the option to order blogs posts in the timeline in Ascending and Descending order.
  • Order by – To further simplify your blog posts order in the timeline, the Order by option provides you with multiple choices to sort the order. The order by choices are Date, Modified Date, Title, Slug, ID, Random, Relevance, and None.

Category, date format, excerpt length and more in the blog timeline
  • Select Categories – What category post you want to display under this option you can decide that. If none are selected, then the module will display posts from all the categories.
  • Post Date Format – Based on the WordPress Date and Time Formatting, you can choose to change the date format of your posts in the timeline.
  • Content – If you want to display full content, then you can use Show Content. Otherwise, the default setting will display an excerpt of the post.
  • Excerpt Length – It allows you to set the length of the post excerpt easily.

In the following screenshot of the blog post timeline, I’ve set 5 as the number of posts in ascending order. Ordered by title having date format as l, F jS, Y and excerpt length at 150 characters.

Timeline blog in Divi with 5 posts

Elements Settings

To show more information and make your post timelines informative, the Element settings are what you need to go for. It includes multiple toggles to simply allow you easily turn ON and OFF particular elements on the post of blog timeline. The options are as follows,

Blog timeline with elements options
  • Ignore Sticky Posts – If you’ve assigned sticky posts but don’t want to display them as sticky in the timeline, then using this option, you can do that easily.
  • Show Featured Image – Whether you want to display the featured image or not, it allows you to define your choices.
  • Featured Image Size – If you choose to display a featured image, you can define the rendering dimensions of the image using this option. It allows you to render featured images of Medium, Large and Full size.

Blog timeline with elements more options
  • Display Author – By default, when you insert the Blog Timeline module, it displays the author name on the post. However, you can hide that using the Show Author option. Simply check it to NO. And switch it back to YES to start displaying the author’s name again.
  • Display Date – Likewise, Show Author option, you can choose to display or hide the date on the post using the Show Date option.
  • Show Categories/Terms – It allows you to hide or display category/terms on the post.
  • Show Comment Count – It allows you to hide or display comment count on the post.
  • Display Read More – If you want to display the Read More button on your blog timeline posts, you can do that using the Show Read More option.
  • Read More Text – It allows you to set custom text for your read more button.

Those were the options available in the Content tab of the module that allows you to make blog post timelines more informative as well as accessible. However, the way it’s crucial to make archive pages informative and accessible, the same way it’s essential to make them appealing. Therefore, to improve blog timelines style, the module hosts design options. And the next segment, we’ll explore those options to improve our blog post timelines look and feel.

Blog Timeline Design Customizations



To improve the look and feel of the blog post timeline, the module contains the following options. By utilizing these options, you could easily enhance the look of your post timeline and engage users better.

Divi Plus blog timeline design settings

Timeline Layout

By default, the Blog Timeline module display posts under Layout 1 with its Alternate version. But in general, it includes two timeline layouts that further offers multiple variations. Using the Timeline Layout settings in the Design tab, you can easily change the view of your Divi blog timeline.

Blog post timeline layouts option

Layout 1 under Alternate version showcases posts at the right and left sides with the date at the top. Then, followed by featured image, title, meta description, content (excerpt), and read more button in the last.

Blog timeline layout 1 alternate version

When you select Layout 2 under the Alternate version, it also showcases posts side by side, but the date would be placed sideways to the featured image. Look at the below screenshot to understand it better.

Layout 2 alternate version of timeline module for blog

Other than the Alternate variation, both the layouts include two more options to help you achieve distinction. The additional variations module include are Content Right and Content Left. And this is how they look when applied to the timeline of posts.

Timeline for blog layout 1 under content left variation

Layout 1 Content Left Variation

Timeline for blog layout 1 under content right variation

Layout 1 Content Right Variation

In Layout 2 with Content Right and Left variation, the post date gets attached with the timeline stem and its icon. And the other elements shift a little much to the opposing side based on the variation. This is how Layout 2 look with other variation than Alternate.

Layout 2 with content left variation of blog timeline

Layout 2 Content Left Variation

Layout 2 with content right variation of blog timeline

Layout 2 Content Right Variation

Timeline Icon Styling

Under Timeline Icon Styling settings of the Design tab, you can improvise the look of your timeline’s icon. It provides you with the option to change icon, its color for both scroll and no scroll. Plus, adjust its size with the application of icon shape. The available icon shapes are Circle and Square.

When you choose to apply shape on the icon. It further opens additional settings to apply shape background color when the timeline’s still and scrolling. But that’s not all, you get one more feature you can apply to the timeline icon is the shape border. That contains the option to adjust border size and background color.

Timeline for blog stem icon shape

Timeline Stem Styling

Under this particular setting, you get the option to change the timeline’s stem width size. Simply move the slider or input the value in the Timeline Stem Width. And your timeline stem will change its thickness.

In addition to that, you get options to change the stem’s color when the user scrolls the timeline and doesn’t. The way it changes color feels like it’s filling the stem as a liquid, creating a nice animation that increases engagement while interacting with the timeline.

Timeline Post Styling

With the Timeline Post Styling setting, you can adjust the background of post tiles with color, gradient, and image. Add custom padding for the post area. Plus, change the featured image’s alignment to the Left, Right, and Center.

Apart from these options, using the post styling setting, you can increase or decrease the post’s featured image size. Just move the slider or input the value in the Featured Image Size field.

Blog timeline and post tiles border radius option

With that, the Border Radius option enables you to add rounded corners to the post tiles. Thus, making it possible to customize your blog timeline and its element at a high level.

Post Heading, Content, Date and Meta

To enhance the appearance of the blog timeline’s post text such as Title, Date, Meta description, and Content, you need the text customization options. Therefore, using the Post Heading, Content, Date, and Meta settings available in the Design tab, it’s easily achievable.

Timeline post heading, content, date and meta settings

Each setting includes all the necessary text customization options using which you can change the appearance of text on the post. For instance, Post Heading includes the Title Heading Level to change the title’s heading tag type. The Post Content setting contains the options for different content types such as links, bullets, numbers, and blockquote.

Read More Button

Post’s read more button has a simple default look. However, you can choose to change it if you like. And to do that, you need to go to the Read More Button settings and check Use Custom Styles for Read More Button as YES. It will open further options to enhance the look of your post read more button.

Blog timeline read more button custom styling

Under these options, you can easily change the button’s text size and color. Adjust button background with color, gradient, and image. Use a thick border for button of different colors. And there are more options you can apply to the post read more button to make it look more engaging and interactive.

Additionally, the default feature the Read More Button setting provides is to change the button’s alignment to Left, Right, and Center with ease.

Box Shadow

The final additional setting we get with the Blog Timeline module in the Design tab is to apply box-shadow to post titles.

Box shadow for the posts of blog timeline

You simply need to go to the Box Shadow settings and in the Single Post field select your desired box-shadow. And it will be applied to all the posts effortlessly. Having box-shadow on posts adds a new look that makes the blog timeline elegant as well as modern.

Blog timeline with post box shadow

Ending Thoughts


The above, we explored the new module of Divi Plus and the way to create blog pages of a new design. The purpose of this module is to help you establish uniqueness on your site when it comes to archive pages. And when you get the Divi Plus plugin, you also receive some other blog modules. So, with the combination of those modules, you can even design something new altogether.

We hope this post has helped you understand the new Divi Plus Blog Timeline module and how it works. If you want to create a beautiful Divi blog timeliness easily, then go and get this multipurpose plugin today. And let’s know what your experience was.

Divi Extended Cyber Monday Sale
Posted By:
Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 13 years experience in the WordPress development industry.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Extended Cyber Monday Sale
Cyber Monday Popup