Abstände bearbeiten
Mit dem Abstände-Editor kannst du präzise Innen- oder Außenabstände für Blöcke und Elemente festlegen. Du kannst für jede Seite (oben, unten, links, rechts) individuelle Werte in Pixeln eingeben. Das ermöglicht dir eine pixelgenaue Kontrolle über das Layout deiner Website.
Voraussetzungen
- Ein Block oder Element muss ausgewählt sein
- Der Abstände-Editor muss in den Block-Einstellungen verfügbar sein
Aufbau des Abstände-Editors
Der Editor besteht aus vier Zahlenfeldern, die jeweils eine Seite des Elements repräsentieren:
Zahlenfeld "Oben" Bestimmt den Abstand zur oberen Kante. Das Feld zeigt ein Pfeil-nach-oben-Symbol.
Zahlenfeld "Unten" Legt den Abstand zur unteren Kante fest. Das Feld zeigt ein Pfeil-nach-unten-Symbol.
Zahlenfeld "Links" Kontrolliert den Abstand zur linken Kante. Das Feld zeigt ein Pfeil-nach-links-Symbol.
Zahlenfeld "Rechts" Bestimmt den Abstand zur rechten Kante. Das Feld zeigt ein Pfeil-nach-rechts-Symbol.
Anordnung der Felder
Die Felder sind in einem 2x2-Raster angeordnet:
Obere Reihe: Oben (links) und Unten (rechts) Untere Reihe: Links (links) und Rechts (rechts)
Jedes Feld nimmt die Hälfte der verfügbaren Breite ein (CSS-Klasse "col-6").
So verwendest du den Abstände-Editor
Werte eingeben: Trage in jedes Feld den gewünschten Abstand in Pixeln ein
Symmetrische Abstände: Für gleichmäßige Abstände verwende die gleichen Werte für gegenüberliegende Seiten
Asymmetrische Gestaltung: Verwende unterschiedliche Werte für kreative Layout-Effekte
Null-Werte: Trage 0 ein, um Abstände komplett zu entfernen
Automatische Speicherung: Änderungen werden automatisch übernommen und in der Vorschau angezeigt
Arten von Abständen
Innenabstände (Padding) Abstand zwischen dem Rand eines Elements und seinem Inhalt. Vergrößert das Element nach innen.
Außenabstände (Margin) Abstand zwischen einem Element und anderen Elementen. Schafft Freiraum um das Element herum.
Praktische Anwendungen
Text-Blöcke
- Oben/Unten: 20-40px für Abstand zu anderen Blöcken
- Links/Rechts: 15-30px für bessere Lesbarkeit
Bild-Blöcke
- Gleichmäßige Abstände für zentrierte Darstellung
- Asymmetrische Abstände für kreative Layouts
Button-Bereiche
- Größere Abstände für bessere Klickbarkeit
- Ausreichend Freiraum um wichtige Aktions-Elemente
Container-Blöcke
- Innenabstände für Inhalt-Gruppierung
- Außenabstände für Abgrenzung zu anderen Bereichen
Responsive Verhalten
Automatische Anpassung Abstände passen sich automatisch an verschiedene Bildschirmgrößen an.
Proportionale Skalierung Auf kleineren Bildschirmen werden Abstände proportional reduziert.
Mobile Optimierung Zu große Abstände werden auf mobilen Geräten automatisch angepasst.
Einheiten und Werte
Pixel-Werte Alle Eingaben werden als Pixel-Werte interpretiert (px).
Positive Werte Nur positive Zahlen sind erlaubt (Minimum: 0).
Ganze Zahlen Verwende ganze Zahlen für konsistente Darstellung.
Visuelle Hilfsmittel
Richtungs-Symbole Jedes Feld zeigt ein Pfeil-Symbol in die entsprechende Richtung.
Beschriftung Klare deutsche Beschriftung für jede Richtung.
Gruppierung Felder sind logisch in einem Raster angeordnet.
Häufige Abstände-Werte
Kleine Abstände: 5-10px für feine Anpassungen Mittlere Abstände: 15-30px für Standard-Layouts Große Abstände: 40-80px für deutliche Trennung Extra große Abstände: 100px+ für besondere Design-Effekte
Tipps und Hinweise
- Konsistenz: Verwende einheitliche Abstände für ein professionelles Erscheinungsbild
- Hierarchie: Größere Abstände schaffen visuelle Hierarchie
- Lesbarkeit: Ausreichende Abstände verbessern die Lesbarkeit
- Mobile Ansicht: Teste Abstände auch auf mobilen Geräten
- Weniger ist mehr: Zu viele verschiedene Abstände wirken unruhig