Timeline for Divi using CSS

After reading the latest blog post at Elegant Themes, titled, 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds*, i was a bit disappointed to see that No. 6, Add Connected Bullet Lists, wasn’t working for me after pasting the CSS into my ePanel.

So, after a little playing around i managed to get the code to work and added a couple of little changes to get to the demo you see below.

  1. 01/04/2016This is a timeline created by adapting the code from Elegant Themes blog post.
  2. 01/04/2016You will need to copy the CSS code into your ePanel custom CSS box
  3. 01/04/2016You will need to add a text module and give is a CSS class of dots-list in the custom CSS tab.
  4. 01/04/2016You will then need to set up an ordered list (ol) with list elements (li)and also add a span class for the date

How to add the timeline

To add this timeline to your Divi website you will need to;

1 – Add the following CSS into your ePanel custom CSS box.

.dots-list {
width: 100%;
.dots-list ol {
padding-left: 150px;
position: relative;
margin-bottom: 20px;
list-style: none !important;
.dots-list ol li {
position: relative;
margin-top: 0em;
margin-bottom: 20px;
.dots-list ol li .date {
position: absolute;
left: -115px;
font-weight: bold;
font-size: 1em;
top: -2px;
.dots-list ol li:before {
content: "";
background: #35a6cb; /*edit line colour*/
position: absolute;
width: 2px;
top: 5px;
bottom: -25px;
left: -24px;
.dots-list ol li:after {
content: "";
background: #c7d8dd;  /*edit circle colour*/
position: absolute;
width: 13px;
height: 13px;
border-radius: 100%;
border:2px solid #35a6cb; /*edit circle border colour*/
top: 5px;
left: -31px;
.dots-list ol li:last-child:before {
content: "";
background: rgba(0, 0, 0, 0);

2 – Add a text module into your page and then add the following HTML using the text view.

<li><span class="date">01/04/2016</span>This is your list item content. </li>
<li><span class="date">01/04/2016</span>This is your list item content. </li>
<li><span class="date">01/04/2016</span>This is your list item content. </li>

3 – In the text modules custom CSS tab add dots-list into the CSS Class field

0 0 vote
Article Rating
Would love your thoughts, please comment.x

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.