In diesem Beitrag zeigen wir Euch, wie Ihr mit etwas CSS eine Timeline in Divi umsetzen könnt. Folgende Timeline setzen wir nun in Divi um:
Aufbau der html Struktur für das Timeline Modul auf Deiner Divi Webseite
füge nachfolgenden Code in ein Textmodul und vergib dem Textmodul eine CSS Klasse namens „dots-list“ (ohne Anführungszeichen – Siehe auch Screenshot unter dem Code):
- 1999Ereignis 1
- 2000Ereignis 2
- 2002Ereignis 3
- 2005Ereignis 4
- 2006Ereignis 5
- 2007Ereignis 6
- 2013Ereignis 7
- 2014-2015Ereignis 8
- 2011-2013Ereignis 9
- 2019Ereignis 10
- 2020Ereignis 11
Ein wenig CSS für Deine Timeline
Damit das ganze dann auch hübsch aussieht, füge folgenden CSS Code entweder unter Deinem Child Theme in der Datei, welche Dein Style steuert (gewöhnlich style.css) oder in Deinen Theme Einstellungen ein:
/* DIVI TIMELINE */
.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: #253e95; /* Farbe der Timeline Linie*/
position: absolute;
width: 2px;
top: 5px;
bottom: -25px;
left: -24px;
}
.dots-list ol li:after {
content: "";
background: #c7d8dd; /*Hintergrund der Kreise*/
position: absolute;
width: 13px;
height: 13px;
border-radius: 100%;
border:2px solid #253e95; /*Rahmenfarbe der Kreise*/
top: 5px;
left: -31px;
}
.dots-list ol li:last-child:before {
content: "";
background: rgba(0, 0, 0, 0);
}
Farbliche Anpassung Deiner Timeline
Natürlich musst Du Dich nicht an die Farben und Größen der hier vordefinierten Timeline halten. Um es Dir einfacher zu machen, habe ich Dir den Code kommentiert. Hier einfach Deine passende Farbe auswählen und am Ende hast Du dann Deine fertige Timeline in einem Divi Textmodul einfach und easy umgesetzt. Ich hoffe, Du hast Freue mit diesem QuickTipp.
Viele Grüße, Levent
