5 kreative Ideen zu Divi´s Margin und Gutter Elementen

5 kreative Ideen zu Divi´s Margin und Gutter Elementen

l
Marcel Pohl
23. Juni 2016
Wenn Sie Divi noch nicht kennen, es ist ein sensationelles WordPress Theme aus der Schmiede von Elegant Themes. Es ist mehr als nur ein Theme, denn es bietet neben dem visuellen Editor zur Gestaltung von Seiten und Beiträgen, auch die Möglichkeit Landingpages zu erstellen. Auch ein Splittesting ist bereits in das Theme integriert. Mit den beiden Plugins Monarch und Bloom werden alle für einen Internetmarketer  benötigten Tools zur Neukundengewinnung bereit gestellt. (nicht inkludiert ist eine E-Mail Marketing Software wie Klick-Tipp).
Jedes Element in Divi besitzt erweiterte Designoptionen, je nach Element unterschiedlicher Art. Wenn man es versteht mit den Einstellungen von Margin, Padding und Gutter richtig umzugehen, kann man immer wieder neue erstaunliche Effekte erzielen.

Zuerst wollen wir uns Margin und Padding ansehen. Padding (=Polsterung) beschreibt den Innenabstand eines Elementes, während Margin (=Rand) den Außenabstand darstellt.

margin padding diagram
Die beiden unteren Bilder stellen schön den Unterschied zwischen Padding und Margin dar. Das erste Bild zeigt einen Button mit 20 px Padding nach allen Seiten, es erhöht somit den Raum nach allen Seiten. Das zweite Beispiel stellt den gleichen Button dar, wiederum mit 20 px jedoch diesmal als Margin. Dies beeinflusst den Rand außerhalb des Buttons.
Beispiel padding button
Beispiel 20 px padding button
Beispiel margin button
Beispiel 20 px margin button
Gutter (Rinne, Steg, Abstand) ist das gleiche wie Margin, doch wird dieser Begriff dazu verwendet, den Abstand zwischen Spalten (columns) zu definieren. Wenn man also im visuellen Designer von Divi eine Row (Zeile) mit mehreren Spalten erstellt, so nennt man den Abstand zwischen diesen Spalten (columns) =Gutter (Rinne, Steg, Abstand). Unter Einstellungen der Zeile (Row) kann diese Rinne (Gutter) verändert werden.
Illustration von Gutter (Rinne, Steg, Abstand)
Gutter (Rinne, Steg, Abstand) sind die Abstände zwischen den Spalten.

5 kreative Ideen zu Divi´s Margin und Gutter Elementen

1. Gestaffelte Elemente

1. Gestaffelte Elemente
Um diesen gestaffelten Bildeffekt zu erreichen, navigiert man zu den „Erweiterten Designoptionen“ bei jedem Bildmodul. Beim 1. und 3. Bild wird beim „Benutzerdefinierter Abstand“ unten 70 px eingestellt. Beim mittleren Bild wird der Abstand oben auf 70 px eingestellt.

2. Geschlossenes Bildgitter

5 kreative Ideen zu Divi´s Margin und Gutter Elementen
Um diesen Effekt zu erzielen, benötigt man 2 Zeilen (Rows) mit jeweils 3 Spalten (Columns) und insgesamt 6 Bildelementen. Nun öffnet man die Einstellungen der Row (grünes Element, öffnen der Einstellungen über die „3 Striche“) und unter den allgemeinen Einstellungen stellt man bei „Verwenden Sie Benutzerdefinierte Breite Rinne“ den Schalter auf „Ja“. Dabei erscheint eine weitere Einstellung zum „Spaltenabstand“, den man auf den Wert „0“ setzt, dies bei beiden Rows!

3. überlappende Bilder

3. überlappende Bilder
Dazu benötigen wir eine Row (Zeile) mit 2 Columns (Spalten) und je Column 1 Bildelement. Zuerst wählen wir die erweiterten Einstellungen des linke Bildes und stellen dort den Wert des rechten Randes (Benutzerdefinierte Begrenzung rechts) auf 175 px (Negativwert!). Nun zum rechten Bild und dort wird der obere Rand auf 125 px eingestellt. Diese Einstellungen der px-Werte ist von Ihren Bildgrößen abhängig.

4. überlappender Text

4. überlappender Text
Um diesen Effekt zu erzielen benötigen wir 2 Rows, eine mit einer Column und eine mit 2 Columns. (siehe Bild unten)
überlappender Text benötigt 2 Rows
Der überlappende Effekt entsteht dadurch, indem wir bei den erweiterten Einstellungen des Textfeldes der 2. Row einen negativen Wert des oberen Randes (Benutzerdefinierte Begrenzung) einstellen, z. B.40 px und den linken Rand auf 120 px. Die Abstände sind abhängig von der verwendeten Schriftart und Größe.

5. Bild überlappt einen Bereich

5. Bild überlappt einen Bereich
Als Voraussetzung benötigen wir ein Bild mit transparentem Hintergrund. Hier sind ein paar Beispiele von Elegantthemes zum Download, um diesen Effekt nachzubilden. Module siehe Abbildung unten.
überlappendes Bild
Der überlappende Effekt entsteht dadurch, indem wir bei den erweiterten Einstellungen des Bildes einen negativen Wert des unteren Randes (Benutzerdefinierte Begrenzung) einstellen, z. B.235 px.

Zusammenfassung:

Divi ist ein sensationelles WordPress-Theme mit dem einzigartige Effekte auf einfachste Art (also ohne Codezeile) erstellt werden können. Mit den erweiterten Designoptionen ermöglichen Sich weitere creative Ideen, wie in diesem Blogartikel dargestellt.

War dieser Artikel für Sie hilfreich? Dann teilen Sie diesen gerne mit Ihrer Community und schauen für ein nächstes Tutorial bei mir vorbei.

 

Das könnte Sie auch interessieren?

Hier finden Sie weitere Inhalte zum Thema.

Account Based Marketing mit LinkedIn

Account Based Marketing mit LinkedIn

Account-Based Marketing (ABM) ist eine Strategie, bei der Unternehmen ihre Marketingaktivitäten auf spezifische Zielaccounts fokussieren, anstatt sich auf eine breite Zielgruppe zu konzentrieren. LinkedIn, als eine der größten beruflichen Social-Media-Plattformen,...

LinkedIn Sales Navigator – die Erweiterte Suche

LinkedIn Sales Navigator – die Erweiterte Suche

Als Vertriebsprofi kann die Erweiterung Ihrer Suchmöglichkeiten bei der Suche nach potenziellen Kunden den Unterschied zwischen Erfolg und Misserfolg ausmachen. Der LinkedIn Sales Navigator bietet eine erweiterte Suchfunktion, mit der Sie gezieltere Ergebnisse...

Wie man mit dem LinkedIn Sales Navigator den Umsatz steigern kann

Wie man mit dem LinkedIn Sales Navigator den Umsatz steigern kann

Sind Sie ein Vertriebsprofi, der Schwierigkeiten hat, die richtigen Leads zu finden und in Kunden umzuwandeln? Dann sollten Sie sich den LinkedIn Sales Navigator genauer ansehen. Dieses leistungsstarke Tool kann Ihnen dabei helfen, potenzielle Kunden zu identifizieren...