Trick # 290 | Dieser Beitrag beinhaltet 731 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Besonders Preislisten oder andere Tabellen werden schnell mal unübersichtlich: User können die Zeile «verlieren». Sie können helfen und das Auge beim Lesen «führen». Das geht ganz einfach.
Das Beste: Dieser Trick funktioniert im Divi-Theme, unter WordPress generell aber auch da, wo immer Sie HTML einsetzen. Um ihn umzusetzen, benötigen Sie zunächst eine Liste wie nebenan:
- Artikel #1CHF 7.80
- Artikel #2CHF 9.50
- Artikel #3CHF 2.30
- Artikel #4CHF 4.10
- Artikel #5CHF 8.90
Fügen Sie dafür den folgenden Code in der HTML-Ansicht Ihres Editors ein. Im Divi-Theme können Sie anstelle des Text-Moduls auch ein Code-Modul einsetzen:
<ul>
<li><span>Artikel #1</span><span>CHF 7.80</span></li>
<li><span>Artikel #2</span><span>CHF 9.50</span></li>
<li><span>Artikel #3</span><span>CHF 2.30</span></li>
<li><span>Artikel #4</span><span>CHF 4.10</span></li>
<li><span>Artikel #5</span><span>CHF 8.90</span></li>
</ul>Nun müssen Sie den Tag <ul> noch mit einer Klasse ergänzen. In unserem Beispiel heisst diese dot-leaders.
Ersetzen Sie also das <ul> in obigem Code mit diesem Passus:
<ul class="dot-leaders">Nun folgt etwas CSS-Code. Diesen fügen Sie in das Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:
ul.dot-leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none;
}
ul.dot-leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.dot-leaders span:first-child {
padding-right: 0.33em;
background: white;
}
ul.dot-leaders span + span {
float: right;
padding-left: 0.33em;
background: white;
}Und schon haben Sie aus der obigen unübersichtlichen Liste eine lesefreundliche hergestellt:
Cool! Oder?
- Artikel #1CHF 7.80
- Artikel #2CHF 9.50
- Artikel #3CHF 2.30
- Artikel #4CHF 4.10
- Artikel #5CHF 8.90
Werbung
Werbung
