5 kreative Ideen zu Divi´s Margin und Gutter Elementen

[et_pb_section bb_built=“1″ admin_label=“section“][et_pb_row admin_label=“row“ background_position=“top_left“ background_repeat=“repeat“ background_size=“initial“][et_pb_column type=“4_4″][et_pb_text background_position=“top_left“ background_repeat=“repeat“ background_size=“initial“ _builder_version=“3.9″]

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.

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 20 px padding 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.

Gutter (Rinne, Steg, Abstand) sind die Abstände zwischen den Spalten.

5 kreative Ideen zu Divi´s Margin und Gutter Elementen

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

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

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

Um diesen Effekt zu erzielen benötigen wir 2 Rows, eine mit einer Column und eine mit 2 Columns. (siehe Bild unten)

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

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.

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]