Die beiden Divi-Theme-Module «Toggle» (bzw. «Umschalter») und «Accordion» (auch «Akkordeon» genannt) ähneln sich stark – und doch sind beide verschieden. In diesem Beitrag zeigen wir Ihnen den Unterschied zwischen den beiden Modulen und demonstrieren Ihnen eine einfache Lösung, um die Modul-Icons weg vom gewohnten Platz rechts nach links zu verschieben.
Sowohl mit Toggles wie auch mit Accordions lassen sich Inhalte aufbereiten, welche zunächst versteckt sind, welche aber einE UserIn bei Bedarf anzeigen kann. Im Divi-Theme sehen die beiden Elemente praktisch identisch aus – der Unterschied ist denn auch ein feiner:
Toggle- bzw. Umschalter-Modul
Beliebig viele Toggles lassen sich gleichzeitig öffnen und schliessen.
Toggle #1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Toggle #2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Toggle #3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Accordion- bzw. Akkordeon-Modul
In einem Accordion kann immer nur ein einziges Element geöffnet werden.
Accordion #1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Accordion #2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Accordion #3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Accordions sind also eher platzsparender als Toggles; jedoch lassen sich auch immer nur Teilinformationen anzeigen. Letztlich ist es auch eine Präferenzfrage, wo Sie auf Toggles zurückgreifen und wo Accordions die bessere Lösung sind.
Icons von rechts nach links verschieben
Standardmässig haben sowohl Toggles wie Accordions rechts ein kleines Icon angezeigt. Dieses lässt sich im Divi-Theme nicht umplatzieren – mit ein wenig CSS-Code geht das aber dennoch.
Wenn Sie diesen anwenden möchten, empfehlen wir, dem jeweiligen Modul eine Klasse zu vergeben. Etwa wie in unserem Beispiel «toggle-icon-left» für Toggles – respektive (für Accordions) «accordion-icon-left».
Diese Klassen können Sie im gewünschten Modul einfügen: In der Bearbeitungsansicht unter Erweitert/CSS-ID & Klassen ins Feld CSS-Klasse.
Nun kopieren Sie noch den (oder die) folgenden CSS-Blocks ins CSS-Stylesheet Ihres Child-Themes – unter Design/Customizer/Zusätzliches CSS:
CSS-Code für Toggle-Modul
.toggle-icon-left .et_pb_toggle_title:before {
left: 0 !important;
}
.toggle-icon-left .et_pb_toggle_title,
.toggle-icon-left .et_pb_toggle_content {
padding-left: 1em !important
}CSS-Code für Accordion-Modul
.accordion-icon-left .et_pb_toggle_title:before {
left: 0 !important;
}
.accordion-icon-left .et_pb_toggle_title,
.accordion-icon-left .et_pb_toggle_content {
padding-left: 1em !important
}Natürlich können Sie die Abstände jeweils in den Zeilen 2 und 6 anpassen. In unserem Beispiel präsentieren sich nun die Module folgendermassen:
Toggle- bzw. Umschalter-Modul
Accordion- bzw. Akkordeon-Modul
Keine grosse Sache, also.
Vielleicht ist Ihnen übrigens aufgefallen, dass sich unser Accordion-Modul anders verhält als Ihres. Standardmässig ist nämlich im Divi-Theme immer das erste Accordion geöffnet. Wie Sie dies ändern, erfahren Sie im Beitrag «Divi-Accordions per Klick öffnen und schliessen».
Werbung
Werbung
