Trick # 417 | Dieser Beitrag beinhaltet 788 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Divi-Theme bietet ein Registerkarten-Modul (oder Tab-Modul) an, mit welchem sich Detailinformationen aller Art darstellen lassen. Jedoch hat das Modul in der Standardausführung bloss einen Textlink. Wenn Sie wollen, können Sie auch ein Bild darstellen.
Normalerweise präsentiert sich das Registerkarte-Modul des Divi-Themes so:
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.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Hin und wieder haben DesignerInnen den Wunsch, die Titellinks der Zabs mit einem Bild zu ergänzen. Dies erreichen Sie mit ein wenig CSS-Code.
Zunächst vergeben Sie dem Tab-Modul eine CSS-Klasse. In unserem Beispiel «image-tabs». Diesen Klassennamen können Sie im Bearbeitungsmodus des Tab-Moduls unter «Erweitert», «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» einfügen.
Nun können Sie den nachfolgenden Block in das CSS-Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS) einbinden:
.image-tabs .et_pb_tab_0 a:before {
content: url(https://domain.ch/pfad-zum-bild-1.jpg);
padding-top: 20px;
display: block;
}
.image-tabs .et_pb_tab_1 a:before {
content: url(https://domain.ch/pfad-zum-bild-2.jpg);
padding-top: 20px;
display: block;
}
.image-tabs .et_pb_tab_2 a:before {
content: url(https://domain.ch/pfad-zum-bild-3.jpg);
padding-top: 20px;
display: block;
}
.image-tabs .et_pb_tab_3 a:before {
content: url(https://domain.ch/pfad-zum-bild-4.jpg);
padding-top: 20px;
display: block;
}
.image-tabs .et_pb_tab_content a:before {
content: '' !important;
}Dieses Beispiel geht von vier Tabs aus. Sie können auch mehr oder weniger Tabs definieren. Kopieren oder löschen Sie einfach Blöcke aus dem Code. Die zu verwendenden Bilder werden anstelle der Platzhaltertexte auf den Zeilen 2, 7, 12 und 17 angegeben.
Unser Beispiel von oben präsentiert sich nun so:
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.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Ziemlich einfach. Nicht wahr?
Werbung
Werbung
