Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
Vertical Timeline Blog Module Free Divi Layout.
This free Divi layout uses the native Divi blog module with horizontal individual posts using the published date element to show a vertical timeline with colour change on hover.
View the demo and download this free layout plus 24 other awesome free Divi resources by subscribing below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Hi Michelle,
Is it possible to change “Older Entries” and “Next Entries” links? I need this entries to be written in Norwegian. I tried to change language of WordPress but it did not help. Language change actually helped me with names of months in date attribute.
Kind regards,
Danijel
Try this: https://divisoup.com/change-the-read-more-text-and-other-elements-in-divi/
Hi
Thanks for the free stuff. I want to use the Vertical Timeline Blog Module but don’t know where to start after download and there doesn’t appear to be a Read Me file.
Please help.
Thanks
Mark
Read me file is in the zip download and links to here: https://support.divisoup.com/support/solutions/folders/29000052997
Hi Michelle,
Is there a way to show only the year and month instead of the month and day on the arrow?
The date format is defined in the blog module, so you can change that to whatever you want.
hi
thanx for your grat work
I winder how to add or use these functionalities in my divi website?
is there any guide how to use this module after download?
Yep, just click the READ ME file in the donwload package
Is is possible to change the color of the content and entry title as well? I’ve been trying to add the hover effect on
post-content p and entry-title a, but no luck.
For the title you would need to use the selectors: .et_pb_post h2 a, .et_pb_post .entry-title a
For the content, it would be: .et_pb_blog .et_pb_post .post-content
Hi MIchelle,
thank you for this layout. I always wanted to use a vertical timeline…
I tested this layoput and modified it a little bit. I added a small graphic instead of the vertical line.
This all works great on a page without sidebar, see here at my testing-site:
https://rohrpostkreuzung.de/layout/divisoup-vertical-timeline-blog-2/
but when I transfer the layout to a productive page where I need a sidebar, everything looks awful
I choose “standardtemplate” instead of “blank page”, see here: https://www.haekelverbrechen.de/vertikalerblog/
the featured images differ, the excerpt-title sits above the excerpt with no background etc., and I do not know why…
do you have any idea?
You can amend the existing CSS to reflect the following changes:
.ds-advent-9 .et_pb_post .entry-title {
background: transparent !important;
}
.ds-advent-9 .et_pb_post .published {
left: 0;
}
.ds-advent-9 .et_pb_post .published::before {
left: 37%;
}
And then you have this somewhere in your CSS, you need to set the bottom padding to 0.
.page .et_pb_post {
margin-bottom: 90px;
padding-bottom: 120px;
}
If you can find it you should be able to override it like this:
.page .ds-advent-9 .et_pb_post {
padding-bottom: 0;
}
Thank you so much, I really like your support and your ideas are great!
I added some round corners and played with the background-colours and more and more it develops into a great blog layout…
Thanks again,
Connie