Mit Hilfe des Divi Page Builder lassen sich problemlos Bereiche farblich voneinander trennen – allerdings nicht mit diagonalen Linien. Möchte man nun verschiedene Bereiche nicht mehr nur mit einer langweiligen horizontalen Linie voneinander trennen, gibt es viele weitere Möglichkeiten. Allerdings benötigt man bisher ein wenig Handarbeit, damit es klappt.

Diesmal zeigen wir wie man eine diagonale Trennlinie mit Schatten erzeugt.

Ein Bereich der vorher so aussah …

Divi Theme: Sektion Horizontal

Soll später folgendermaßen dargestellt werden …

Diagonale Linien

Divi Theme Tutorial: Diagonale Linien zwischen Sektionen erzeugen

1. Im Divi Builder die Sektions Einstellungen (Section Settings) der Sektion öffnen über der der diagonale Abschnitt erscheinen soll.

Divi Theme: Sektions Einstellungen

2. Dort im Bereich „Benutzerdefinierte CSS“ die CSS Klasse „diagonal-shadow“ vergeben und speichern.

Divi Theme: CSS-Klasse

3. Jetzt benötigen wir ein wenig CSS-Code an der richtigen Stelle.

Falls du bereits mit einem Child Theme arbeitest, kann du dort im Editor (oder per FTP) dein Stylesheet (style.css im Child Theme Ordner) bearbeiten. Falls du bisher kein Child Theme verwendest, wäre jetzt eine gute Gelegenheit eines anzulegen (siehe WordPress Child Theme anlegen).

Es gibt allerdings auch die Möglichkeit den CSS-Code in den Divi Theme Einstellungen zu speichern. Dazu gehst du im Backend in den Divi Einstellungsbereich und dort unter „Theme-Optionen“ im Reiter „Allgemein“ relativ weit unten das Feld zum Eintragen von benutzerdefiniertem CSS.

Divi Theme Optionen: Benutzerdefiniertes CSS

Gleichgültig an welches Stelle du es tust, dies ist der einzufügende CSS-Code, den der Entwickler Quiroz.co freundlicherweise bereit gestellt hat:

Und sofort, wenn die style.css oder die Divi Theme-Optionen gespeichert sind, erscheint der gewünschte diagonale Trenner:

Divi Theme: Sektion diagonal

Falls du auf der gleichen Hompage weitere Sektionen mit diesem diagonalen Trenner versehen willst, brauchst du dort nur noch Schritt 1. und 2. durchzuführen. Ein erneutes Einfügen des CSS-Codes ist nicht mehr nötig.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen