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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| /*—- DIVI TIMELINE / DOTS LIST —–*/.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.
1
2
3
4
5
| <ol><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></ol> |
3 – In the text modules custom CSS tab add dots-list into the CSS Class field
