Was sind eigentlich Innen- und Außenabstände in Divi?

Eine tolle Möglichkeit bei dem Theme DIVI* ist die Designanpassung eines jeden Moduls, einer jeden Zeile und Sektion. Eine Anpassungsmöglichkeit, die ich selber häufig verwende und daher auch gerne in meinen Kursen zeige, ist der „Zwischenraum“. Du findest diese Einstellung unter den jeweiligen „Moduleinstellungen“ (das Zahnrad), „Design“ und „Zwischenraum“.

Der Zwischenraum bestimmt die Innen- und Außenabstände in DIVI (Margin und  Padding).

Für mich ist diese Einstellungsmöglichkeit total hilfreich und wichtig.

Daher möchte ich dir heute noch einmal bildlich zeigen, was genau du damit definieren kannst. Denn ich erinnere mich noch sehr gut an meine Anfangszeit mit DIVI. Wie oft bin ich genau hier verzweifelt, weil ich nicht mehr wusste, welche Eingaben man an welcher Stelle machen muss und welche Auswirkungen das jeweils hat…! Damit dir das nicht passiert, erläutere ich dir in diesem Beitrag die Unterschiede und gebe dir zusätzlich noch ein paar Tipps mit auf den Weg.

​Hol dir ​die Canva-Vorlage für dein Instagram​​-Design!

​Ich habe 7 ​Vorlagen erstellt, die du ganz leicht mit deinem Design anpassen kannst. 

Trage dich hier in meine Liste ein. Als Dankeschön erhältst du gratis ​die Canva-Vorlagen für ​Instagram-Posts. Keine Sorge, Spam mag ich genauso wenig wie du. :-) Wenn dir meine Mails nicht gefallen, ​kannst du dich jederzeit abmelden. ​Es gilt die Datenschutzerklärung.

Was sind noch einmal die Innen- und was die Außenabstände?

Innen- und Außenabstände in DIVI

Die Außenabstände definieren den Abstand rund um ein Modul im Außen und die Innenabstände definieren den Abstand innerhalb des Moduls zu dem Inhalt.

Ok, ich weiß selber, dass das kryptisch klingt und dir an der Stelle noch nicht wirklich weiterhilft. Daher demonstriere ich es anhand von Beispielen:

 

 

1. Der Außenabstand

Innen-und-außenabstaende-in-DIVI

Erläuterung:

Ich habe in diesem Beispiel zwei Textfelder angelegt. Beide haben zur besseren Erkennbarkeit einen gelben Hintergrund. Die grauen Hintergründe sind nur dafür da, um die Sektion zu kennzeichnen.

Im oberen Textfeld habe ich keinerlei Design-Einstellungen vorgenommen. Die Abstände innerhalb des Textfeldes, d.h. vom gelben Kasten zum Text hin sowie die Außenabstände, (d.h. der Abstand rund um den gelben Kasten) sind standardmäßig vorgegeben.

In dem unteren Textfeld habe ich zum Vergleich unter den Einstellungen „Design“ – „Zwischenraum“ jeweils 30 px Außenabstand (Margin) angegeben.

Was passiert?

Der Abstand rund um das gelbe Feld vergrößert sich. Das ist der Außenabstand links und rechts (s. Grafik oben). So wird das gelbe Feld also schmaler und der Text bricht anders um. Außerdem vergrößert sich der Platz innerhalb der Sektion, also nach oben und unten, entsprechend.

2. Der Innenabstand:

Erläuterung:

In diesem Beispiel habe ich darunter ein weiteres Textfeld eingefügt. Hier ist nun der Innenabstand auf jeweils 30 px eingestellt. Der Außenabstand wurde zurückgesetzt.

Was passiert?

Der Abstand innerhalb des Textmodules, also rund um den Text, wurde vergrößert. Man kann sich das so vorstellen, dass sich der Innenabstand wie eine Art Polsterung (= Padding) auswirkt. So plustert sich das Modul um den Text wie ein Polster auf, und zwar um 30 px zu allen Rändern. Auf diese Weise kann man schöne, farbige Textboxen gestalten, an denen der Text nicht direkt an den Außenrändern klebt, wie in der obersten Variante.

Hier noch einmal alle drei Varianten in der Übersicht:

Oben: Standardeinstellungen
Mitte: Alle Außenabstände auf 30 px
Unten: Alle Innenabstände auf 30 px

innen- und außenabstaende in divi

Zwei kreative Gestaltungsbeispiele:

Treppe:

Hier habe ich eine Zeile mit 3 Spalten eingefügt. In jeder Spalte ist ein Bild. Im mittleren Bildmodul ist der Außenabstand oben auf 70 px gesetzt.

Überlappende Bilder:

Ergänzend zu der Treppe habe ich bei jedem Bild-Modul zusätzlich den Außenabstand rechts auf -100 px. gesetzt. Das ist also ein negativer Abstand. Dadurch verringert sich der Abstand des Bildes zum jeweils rechten Bild um -100 px. So schafft man ein Überlappungseffekt.

Ich hoffe, dass es nun etwas deutlicher ist, wofür man die Innen- und Außenabstände in Divi nutzen kann. Probiere doch auch einmal aus, was alles mglich ist! Ich erstelle mir dafür immer eine „Bastelseite“, die ich nicht veröffentliche.

Kennst du eigentlich schon meine Facebook-Gruppe „Für selbstständige Frauen: Webdesign, Grafik & Marketing leicht gemacht!“?

Wenn nicht, schau doch mal vorbei. Hier kannst du mir gerne Fragen stellen oder dich mit anderen selbstständigen Frauen austauschen! Du könntest hier auch gerne mal deine Bastel-Ergebnisse einstellen. 🙂

 

* Affiliate-Link

Und, falls du mich noch nicht kennst: ich bin Sarah.

Als Business-Start-Mentorin, Webdesignerin & Mutter von drei Kindern zeige ich dir, wie du als Mutter in deine Selbstständigkeit starten kannst.

Ich helfe dir Schritt für Schritt dein Online-Business aufzubauen!

Dafür habe ich einen Plan entwickelt, mit dem ich dich durch den Dschungel an Aufgaben und Möglichkeiten lotse.

rise & shine

In meinem neuen Gruppen-Programm „rise & shine“ (Start: November 2020) stellst du dich super für dein persönliches Online-Business auf. Ich bringe dich genau an den Punkt, an dem du „strahlend“ durchstarten kannst.

Bei mir findest du:
Klarheit – Leichtigkeit – Intuition – Flexibilität – Mut – Technik- und Marketing-Know-how sowie eine tolle und starke Community unter Frauen.

Ich freu mich auf dich!

Sarah