Trick # 554 | Dieser Beitrag beinhaltet 1520 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.
Das Divi-Theme hat ein übersichtlicher Registermodul an Bord, mit dem sich Inhalte schön strukturieren lassen. Allerdings bietet das Modul von Haus aus nur eine horizontale Navigation – bzw. Tab-Auswahl. Eine horizontale Anordnung fehlt. Das lässt sich natürlich leicht anpassen.
So wie nebenan zeigt sich das Register-Modul von Divi «out of the box»:
Die einzelnen Tabs werden horizontal angezeigt.
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. 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.
Wenn Sie die Tabs lieber seitwärts und vertikal platzieren möchten, funktioniert das mit einem CSS-Code. Dem Register-Modul müssen Sie hierfür eine CSS-Klasse zuweisen: «vertical-tabs-left». Dies erledigen Sie im «Advanced-Tab» des Register-Moduls, dort unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse».
Nun kopieren Sie den folgenden Code und fügen ihn in Ihr CSS-Stylesheet ein. Sie finden es im Backend unter Design/Customizer/Zusätzliches CSS:
.vertical-tabs-left ul.et_pb_tabs_controls {
float: left;
width: 30%;
margin-right: 3%;
background: transparent;
}.vertical-tabs-left .et_pb_tab_active {
background: #ffffff !important;
}.vertical-tabs-left ul.et_pb_tabs_controls:after {
content: none;
}.vertical-tabs-left .et_pb_tabs_controls li {
width: 100%;
border-right: none !important;
border-left: 5px solid transparent;
background: #f4f4f4;
}.vertical-tabs-left .et_pb_tab {
padding: 0;
}.vertical-tabs-left .et_pb_tab_content {
display: flex;
flex-wrap: wrap;
padding-right: 5px;
}@media(max-width:767px) {
.vertical-tabs-left ul.et_pb_tabs_controls {
width: 100%;
margin-bottom: 30px;
margin-right: 0;
}
.vertical-tabs-left .et_pb_tabs_controls li {
border-bottom: none;
}
.vertical-tabs-left .et_pb_tab {
padding: 0;
}
.vertical-tabs-left .et_pb_tab_content {
display: block;
}
}Das Register-Modul von oben präsentiert sich nun 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.
No sea takimata sanctus est Lorem ipsum dolor sit amet. 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.
Option: Tabs vertikal rechts anzeigen
Natürlich lassen sich die Tabs auch rechts platzieren. Dies geschieht mit dem folgenden CSS-Code in Ihrem Stylesheet – unter Design/Customizer/Zusätzliches CSS:
.vertical-tabs-right ul.et_pb_tabs_controls {
float: right;
width: 30%;
margin-left: 3%;
background: transparent;
}.vertical-tabs-right .et_pb_tab_active {
background: #ffffff !important;
}.vertical-tabs-right ul.et_pb_tabs_controls:after {
content: none;
}.vertical-tabs-right .et_pb_tabs_controls li {
width: 100%;
border-right: none !important;
border-right: 5px solid transparent;
background: #f4f4f4;
}.vertical-tabs-right .et_pb_tab {
padding: 0;
}.vertical-tabs-right .et_pb_tab_content {
display: flex;
flex-wrap: wrap;
padding-left: 5px;
}@media(max-width:767px) {
.vertical-tabs-right ul.et_pb_tabs_controls {
width: 100%;
margin-bottom: 30px;
margin-right: 0;
}
.vertical-tabs-right .et_pb_tabs_controls li {
border-bottom: none;
}
.vertical-tabs-right .et_pb_tab {
padding: 0;
}
.vertical-tabs-right .et_pb_tab_content {
display: block;
}
}Die CSS-Klasse «vertical-tabs-right» vermerken Sie im Register-Modul im Tab «Advanced» und dort unter «CSS-ID und Klassen» im Textfeld «CSS-Klassen».
Dies ist das Ergebnis:
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.
No sea takimata sanctus est Lorem ipsum dolor sit amet. 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
