Trick # 564 | Dieser Beitrag beinhaltet 559 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Erstellen eines Eselsohr-Effekts auf Ihren Elementen der Divi-Website kann eine ansprechende visuelle Note hinzufügen und den Eindruck erwecken, dass eine Ecke der Seite umgeknickt ist. Geht mit Divi und ein wenig CSS ganz einfach.
Nehmen wir an, Sie verwenden ein Text-Modul mit einem farbigen Background. Das könnte etwa so aussehen:
Lorem ipsum dolor sit amet.
Unaufgeregt. Nicht speziell.
Nun haben Sie aber die Möglichkeit, da ein Eselsohr zu platzieren. Das sieht dann aus, als sei eine Ecke abgeknickt. Erreichen können Sie dies mit dem folgenden CSS-Code, den Sie ganz einfach Ihrem Stylesheet (unter Design/Customizer/Zusätzliches CSS) hinzufügen können:
.eselsohr {
--eselsohr-size: 35px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--eselsohr-size)), calc(100% - var(--eselsohr-size)) 100%, 0 100%);
}Der Eselsohr-Effekt ist hier (in Zeile 2) auf 35px gesetzt. Da können Sie jeden anderen Wert verwenden.
Nun vergeben wir dem obigen Text-Modul (es könnten auch andere Divi-Module sein) noch eine CSS-Klasse. Diese heisst ganz einfach «eselsohr» und die fügen Sie im Bearbeitungsmodus unter «Advanced», «CSS-ID und Klassen» im Textfeld «CSS-Klassen» ein.
Das ergibt den folgenden Effekt:
Lorem ipsum dolor sit amet.
Eben: Ein richtig schönes Eselsohr.
Wie erwähnt: Geht auch mit Bild-Modulen …
… und vielen anderen Modulen mehr.
Werbung
Werbung
