Vor einiger Zeit haben wir bereits einen Artikel veröffentlicht über die Möglichkeit ansehnliche Übergänge in Divi mit Hilfe des Teiler Moduls und CSS zu erstellen. Seit dem Update auf Version 3.0.101 ist in den Optionen der Sektionen mit den Shape Dividers eine tolle Möglichkeit für die optisch Gestaltung von Übergängen direkt integriert. So lässt sich z.B. folgender Übergang auf unserer Startseite sehr einfach und schnell erstellen …

Einstellungen für die Übergangsgestaltung

Diese hilfreichen Einstellungen finden sich in den Optionen der Sektionen (engl. section), die im Divi Builder in Blau gekennzeichnet werden.

Dort gibt es im Reiter „Design“ den Abschnitt „Dividers“. Die vielfältigen Einstellungsmöglichkeiten erscheinen erst, wenn ein Trennlinienstil ausgewählt wurde.

Die einzelnen Einstellungsmöglichkeiten

Zunächst wählst Du aus, ob Du den Übergang der Sektion oben oder unten beeinflussen willst. Du kannst zwischen diesen beiden Optionen umschalten und die jeweils getroffenen Einstellungen bleiben erhalten, so dass sich problemlos sowohl oben als auch unten ein Übergang gestalten lässt.

Trennlinienstil

Dann wählst du den gewünschten Trennlinienstil (engl. Divider Style) aus. Insgesamt stehen 26 individuelle Übergangsgestaltungen zur Verfügung:

Divider Color

Der Divi Builder übernimmt dabei schon automatisch die Farben der anliegenden Sektionen. Mit der Einstellung „Divider Color“ lässt sich allerdings auch eine andere Farbe auswählen.

Divider Hight & Divider Horizontal Repeat

Nun kann noch über die „Divider Hight“ die Höhe des Übergangsbereiches beeinflusst werden.

Achtung: Dabei ändert sich die Höhe der Sektion nicht, sondern nur wie weit der Übergangsbereich in die Sektion hineinragt. Das kann leicht dazu führen, dass der gestaltete Übergangsbereich in andere Elemente wie Text, Bilder, etc. hineinragt. Dies lässt sich leicht wieder ausgleichen, indem Du weiter unten in den Einstellungen im Bereich „Zwischenraum“ einen „Benutzerdefinierten Abstand“ setzt. Für den unteren Übergangsbereich natürlich für „Unten“ und für den oberen Übergangsbereich für „Oben“. 100 ist ein guter Start von dem Du Dich an die passende Höhe heranarbeiten kannst. Du solltest später nochmal überprüfen, ob es angebracht ist über das kleine Handysymbol rechts neben diesen Einstellungen andere Abstände für die Tablet oder Smartphoneansicht einzutragen, damit in diesen Ansichten die Abstände nicht zu groß wirken.

Über „Divider Horizontal Repeat“ kannst Du auswählen wie oft die gewählte Form wiederholt werden soll.

Divider Flip & Divider Arrangement

Mit Hilfe von „Divider Flip“ kann die Form des Übergangs ganz einfach entweder horizontal oder vertikal gespiegelt werden.

Über „Divider Arrangement“ kannst Du auswählen, ob der Übergang unter Deinen Inhalten erscheinen soll (das ist die Voreinstellung) oder Deine Inhalte überdecken soll.

Shape Dividers: Vielfältige Gestaltungsmöglichkeiten

Mit der Shape Dividers Funktion bietet das Divi Theme vielfältige Gestaltungsmöglichkeiten für Übergänge zwischen den Sektionen. Falls Du die in dem Artikel zu dem Update dargestellten tollen Beispiele aus dem Elegant Themes Blog nutzen möchtest, findest Du dort in einem gesonderten Artikel die genaue Anleitung wie welcher Übergang gestaltet wurde.

Melde Dich gleich zu unserem Divi.world Newsletter an, um stets die neuesten Tipps, Tricks und Neuigkeiten rund um das Divi Theme und Elegant Themes zu erhalten.

Newsletter

Divi Newsletter

Divi Child Theme

Melde Dich zu unserem Divi.world Newsletter an, um stets die neuesten Tipps, Tricks und Infos rund um das Divi Theme und Elegant Themes zu erhalten.

 

Info & Datenschutz

Divi Newsletter

Divi Child Theme

Melde Dich zu unserem Divi.world Newsletter an und wir senden dir neben regelmäßigen Informationen auch das vorbereitete Divi Child Theme als Download zu.

 

Info & Datenschutz

Divi Newsletter

Divi Cyber Monday Aktionsangebot