Reiterbreite im Divi-Tabmodul festlegen

6. November 2022 | CSS-Stylesheet, Divi-Theme |

Geschätzte Lesezeit für diesen Beitrag: 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:

  1. Öffnen Sie das Tab-Modul
  2. Klicken Sie auf den Button «Erweitert» (oder «Advanced»)
  3. Nun öffnen Sie die «CSS-ID & Klassen»
  4. 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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This