Trick # 175 | Dieser Beitrag beinhaltet 674 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Im Divi-Theme ist ein schönes Tab-Modul (auf deutsch «Registerkarte») enthalten, mit welchem Sie Informationen übersichtlich aufbereiten können. Wenn die Tabs (die Reiter) jedoch sehr unterschiedliche Textumfänge haben, kann das auch mal weniger hübsch aussehen. Ein wenig CSS und das Problem ist gelöst.
Ein Beispiel: Sie haben das Tabs-Modul im Einsatz und verwenden unterschiedlich lange Beschriftungen. Dann kann das schon mal auf diese Art aussehen:
hier der erste Inhalt
hier der zweite Inhalt
hier der dritte Inhalt
hier der vierte Inhalt
Das geht besser mit ein bisschen CSS-Code. Dazu vergeben Sie dem Tab-Modul zunächst eine CSS-Klasse:
- Öffnen Sie das Tab-Modul
- Klicken Sie auf den Button «Erweitert» (oder «Advanced»)
- Nun öffnen Sie die «CSS-ID & Klassen»
- Vergeben Sie im Feld «CSS-Klasse» einen passenden Klassennamen. Jener in unserem Code heisst beispielsweise «tab-breite». Wenn Sie einen anderen Klassennamen verwenden, müssten Sie diesen im CSS-Code gleich zu Beginn der Zeilen 1 und 6 ebenso vermerken.
Nun wechseln Sie ins CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) und platzieren dort folgenden Code:
.tab-breite .et_pb_tabs_controls li {
width: 25%; /*Ändern Sie die Breite entsprechend Ihrer Tabanzahl. 25% entsprechen 4 Tabs - bei 5 Tabs wären es 20% etc.*/
text-align: center;
}
@media screen and (max-width: 981px){
.tab-breite .et_pb_tabs_controls li {
width: 100%;
text-align: center;
}
}Das Tab-Modul von weiter oben auf dieser Seite sieht nun so aus:
hier der erste Inhalt
hier der zweite Inhalt
hier der dritte Inhalt
hier der vierte Inhalt
Schon ein ganzes Stück ansprechender. Nicht?
Werbung
Werbung
