🧱 Einheiten im Webdesign – Teil 2: Abstände, Bilder & Layouts
Nachdem wir im ersten Teil die Schriftgrössen behandelt haben, geht es hier um die richtigen Einheiten für Abstände, Bildgrößen und Layouts. Wer moderne und responsive Webseiten erstellt, sollte auch hier gezielt zu relativen Einheiten greifen – besonders in DIVI.
🔲 1. Abstände (Padding & Margin)
Innen- und Außenabstände beeinflussen die Lesbarkeit und das Layout deiner Website enorm.
| Einheit | Bedeutung | Beispiel | Anmerkung |
|---|---|---|---|
px |
Fester Wert | 20px |
Gute Kontrolle, aber wenig flexibel |
em |
Relativ zur Schriftgröße | 2em |
Skaliert mit Text – ideal für Buttons |
rem |
Relativ zur Basis-Schriftgröße | 1.5rem |
Konsistente Layout-Abstände |
% |
Relativ zum Container | 10% |
Vorsicht bei verschachtelten Layouts |
vw / vh |
Viewport-Größe | 5vw |
Für große Hero-Abschnitte |
Empfehlung: Nutze rem oder em für responsive Abstände. px nur für präzise, kleine Anpassungen.
🖼️ 2. Bilder & Mediengrößen
Damit Bilder sich schön anpassen, brauchst du flexible Einheiten – besonders für Breiten.
width: 100%– Bild passt sich dem Container anheight: auto– behält das Seitenverhältnismax-width: 100%– verhindert, dass Bilder überlaufenvw,vh– gut für große Hintergrundbilder
Tipp für DIVI: Setze im Bildmodul „max-width“ auf 100 %, lasse die Höhe auf „automatisch“ und arbeite lieber mit Abständen als mit festen Pixelwerten.
🧭 3. Layouts (Flexbox, Grid, Spaltenbreiten)
DIVI verwendet intern Flexbox – doch du kannst auch gezielt eigene Layout-Strategien mit CSS definieren.
| Einheit | Anwendung | Beispiel | Anmerkung |
|---|---|---|---|
fr |
Grid-Anteil | 1fr 2fr |
1/3 zu 2/3 Spaltenaufteilung |
% |
Spaltenbreite | 33.33% |
Ideal für 2–4 Spalten |
auto |
Größe nach Inhalt | width: auto |
Flexibel, gut für Navigation oder Texte |
vw / vh |
Volle Viewport-Größe | height: 100vh |
Vollbild-Abschnitte („Hero“-Bereiche) |
🔧 Umsetzung in DIVI
- Abstände: Im Design-Tab kannst du rem, rem oder % angeben.
- Bilder: Nutze
max-width: 100%, kein px . - Layouts: Arbeite mit Spaltenbreiten in Prozent oder setze eigene CSS-Klassen mit fr – oder vw-basierten Layouts.
Wenn Du bei Bildern, Abständen und Layouts auf rem, rem, % und fr setzt, bekommst Du saubere und flexible Webseiten. Besonders in DIVI helfen dir diese Einheiten, deine Gestaltung auf allen Geräten konsistent und professionell wirken zu lassen.
0 Kommentare