Steuere den Abstand und die Höhe deines Website-Headers, um sie an deine Design-Vorstellungen anzupassen.
​

Der Header-Abstand steuert den Raum über und unter deinem Header-Inhalt. Ihn anzupassen ändert, wie viel Platz eure Namen, euer Logo und euer Hochzeitsdatum haben, und beeinflusst den Gesamtlook deiner Website!
​

Abstand ist der Raum zwischen deinem Header-Inhalt (Namen oder Logo, Hochzeitsdatum und Rückmeldungs-Button) und den Rändern des Header-Bereichs. Dein Navigationsmenü und dein Header-Bild liegen außerhalb dieses Bereichs und sind nicht betroffen.
​

Abstand oben: Raum über deinem Header-Inhalt
​

Abstand unten: Raum unter deinem Header-Inhalt
​

Mehr Abstand = größerer, geräumigerer Header
Weniger Abstand = kompakter, schlanker Header
​

Visuelle Balance. Manche Header wirken gedrängt, andere zu weitläufig.
​

Passend zu deinem Stil. Elegante Hochzeiten möchten vielleicht mehr Raum, lockere Hochzeiten weniger.
​

Mobile Optimierung. Der Abstand skaliert mit der Bildschirmbreite und ist auf Smartphones daher automatisch kleiner.
​

Logogröße. Wenn du ein Logo hast, gibt mehr Abstand ihm Raum zum Atmen.
​

Persönliche Vorliebe. Vielleicht gefällt dir einfach, wie ein bestimmter Abstand aussieht!
​

Der Header-Abstand aktualisiert sich sofort!
​

Der Abstand wird als Prozentsatz der Bildschirmbreite festgelegt, nicht in Pixeln. Jeder Regler bewegt sich in 12 Stufen, von keinem Abstand bei Weniger bis zu etwa 30 % der Bildschirmbreite bei Mehr.
​

Nahe Weniger: Kompakt, minimal
​

Mitte: Angenehm, standard
​

Nahe Mehr: Geräumig, ein dramatischer Header mit Wirkung
​

Oben und unten werden separat eingestellt, sodass du unterschiedliche Werte verwenden kannst:
​

Mehr oben, weniger unten: Schiebt den Inhalt vom oberen Rand nach unten
​

Mehr unten, weniger oben: Schafft Raum, bevor dein Seiteninhalt beginnt
​

Gleich: Zentrierter, ausgewogener Look
​

Unterschiedlich: Asymmetrisch, kann interessante Effekte erzeugen
​

Experimentiere, um zu sehen, was am besten aussieht!
​

Große Logos: Gib ihnen Raum zum Wirken
​

Minimalistisches Design: Zusätzlicher Weißraum wirkt elegant
​

Desktop-Ansichten: Größere Bildschirme vertragen mehr Abstand
​

Ein Statement setzen: Viel Abstand erzeugt einen kühnen, selbstbewussten Look
​

Mobilgeräte: Spare Bildschirmplatz auf kleinen Bildschirmen
​

Inhaltslastige Websites: Komme schneller zu deinem Inhalt
​

Minimalistische Themes: Manche Themes sind mit minimalem Abstand gestaltet
​

Nach dem Anpassen:
​

Es gibt keine separate Einstellung für Mobilgeräte. Da der Abstand ein Prozentsatz der Bildschirmbreite ist, ergibt dieselbe Einstellung automatisch einen geräumigen Header auf Computern und einen kleineren auf Smartphones.
​

Dein Header-Bild liegt über dem Header-Bereich mit Abstand, daher ändert der Abstand seine Größe nicht. Wenn du einen Header-Hintergrund hinzugefügt hast, füllt er den Bereich mit Abstand aus, sodass mehr Abstand mehr vom Hintergrund rund um eure Namen zeigt.
​

Dein Navigationsmenü ist vom Header getrennt, daher ändert der Header-Abstand es nicht.
​

Der Header-Abstand ist in jedem Theme responsiv: Er ist ein Prozentsatz der Bildschirmbreite und passt sich daher automatisch an die Bildschirmgröße an.
​

Der Abstand beeinflusst, wie „schwer" dein Header wirkt:
​

Mehr Abstand = leichter, luftiger
​

Weniger Abstand = dichter, kompakter
​

Passe ihn an das Gefühl an, das Gäste beim Besuch deiner Website haben sollen!
​

Abstand wirkt zusammen mit der Ausrichtung für den Look deines Headers:
​

Zentrierter Inhalt + viel Abstand: Elegant, formell
​

Linksbündiger Inhalt + minimaler Abstand: Modern, klar
​

Zentriert + minimaler Abstand: Kompakt, effizient
​

Zu viel: Der Header nimmt den halben Bildschirm ein, bevor Gäste Inhalte sehen
​

Zu wenig: Der Header wirkt gedrängt und schwer lesbar
​

Unausgewogen: Abstand oben und unten unterscheiden sich ohne Grund stark
​

Mobil nicht getestet: Sieht auf dem Desktop toll aus, auf Smartphones schrecklich
​

Die Regler zeigen keine Einheit an. Im Hintergrund ist der Abstand ein Prozentsatz (%) der Bildschirmbreite, weshalb er auf kleineren Bildschirmen skaliert.
​

Padding: Raum innerhalb des Headers (rund um den Inhalt)
​

Margin: Raum außerhalb des Headers (zwischen Header und anderen Elementen)
​

Diese Regler passen das Padding an, also den Raum innerhalb des Headers. Es gibt keine Einstellung für einen Header-Margin.
​

Wenn du unsicher bist:
​

Beginne mit der aktuellen Einstellung
​

Passe schrittweise an (ein oder zwei Reglerstufen auf einmal)
​

Merke dir, wo die Regler standen, da es keinen Button zum Zurücksetzen gibt
​

Der Header-Abstand bleibt gleich, während Gäste scrollen.
​

Der Abstand ändert nicht die Größe von Buttons oder Links, daher wird nichts schwerer antippbar
​

Zu viel Abstand schiebt deinen Inhalt weiter nach unten, sodass Gäste auf Smartphones mehr scrollen müssen
​

Bringe Ästhetik und Benutzerfreundlichkeit in Einklang!
​

Header-Abstand ist ein subtiles Detail, das einen großen Unterschied darin macht, wie poliert und professionell deine Website wirkt. Es lohnt sich, ein paar Minuten zu investieren, um es genau richtig zu machen!
​