Quelle: http://www.elegantthemes.com/blog/divi-resources/creative-ways-to-use-divis-built-in-margin-and-gutter-controls
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 Diagramm
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

2. Geschlossenes Bildgitter

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.

 

Wir nutzen Cookies um deine Nutzererfahrung auf unserer Website zu verbessern. Mehr Infos

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