Trick # 428 | Dieser Beitrag beinhaltet 731 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Die Reiter im Tab- oder Registerkarten-Modul des Divi-Themes lassen sich mit einer zweiten Zeile versehen, die etwas mehr über den Inhalt breisgeben. Wie das geht, zeigen wir im heutigen Hack.
Üblicherweise sieht das Tab-Modul des Divi-Themes so aus wie nebenan:
Die Reiter haben Platz für eine Zeile und nicht mehr.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Doch da liegt mehr drin. Vergeben Sie Ihrem Registerkarten-Modul zunächst eine CSS-Klasse. Unser Vorschlag: «description-tabs». Diese Klasse tragen Sie im Bearbeitungsmodus in den Tab «Erweitert» und «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» ein.
Nun benötigen Sie noch den passenden CSS-Code. Er folgt unten und Sie können ihn in das CSS-Stylesheet Ihrer Website kopieren – unter Design/Customizer/Zusätzliches CSS:
.description-tabs .et_pb_tab_0 a:after {
content: 'Dies ist die erste Beschreibung';
font-size: 15px;
padding-top: 10px;
display: block;
}
.description-tabs .et_pb_tab_1 a:after {
content: 'Und dies die zweite';
font-size: 15px;
padding-top: 10px;
display: block;
}
.description-tabs .et_pb_tab_content a:after {
content: '' !important; }Empfehlenswerte Anpassungen: Die jeweiligen Beschreibungstexte in den Zeilen 2 und 9 sowie die anzuzeigende Fontgrösse in den Zeilen 3 und 10.
Mit obigem Code zeigt sich nun das Registerkarten-Modul so wie nebenan:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Werbung
Werbung
