Tutorials

So behebst du Header-Abstände und Lücken in Wix (Schritt-für-Schritt)

Melden

Hier ist ein ausführliches Tutorial, wie du unerwünschte Abstände und Lücken im Wix-Header entfernst.

Nichts stört ein professionelles Webdesign mehr als eine ungewollte weiße Lücke zwischen dem Header und dem Rest der Seite oder oberhalb des Logos. In Wix gibt es meist drei Hauptursachen für dieses Problem.

Methode 1: Den Header manuell verkleinern (Der Ziehgriff)

Oft ist der Header einfach "zu groß gezogen", auch wenn keine sichtbaren Elemente darin sind.

  1. Klicke im Wix Editor auf eine leere Stelle im Header.
  2. Bewege die Maus an den unteren Rand des Headers. Es erscheint ein kleiner blauer Kreis mit einem Pfeil (der Ziehgriff).
  3. Klicke und ziehe den Rand nach oben, um den Leerraum zu entfernen.
  4. Hinweis: Wenn sich der Header nicht weiter nach oben schieben lässt, blockiert wahrscheinlich ein unsichtbares Element (siehe Methode 3).

Methode 2: Abstände in den Einstellungen prüfen

Manchmal verursacht die Einstellung "Fixierter Header" oder ein Schatten einen optischen Abstand.

  1. Klicke auf den Header und wähle das Einstellungen-Rädchen (oder das Layout-Symbol).
  2. Prüfe unter Design anpassen, ob ein Schatten aktiviert ist. Ein Schatten nach unten kann wie eine Lücke wirken.
  3. Prüfe die Header-Einstellungen: Wenn "Fixiert" (Freeze) aktiviert ist, kann es beim Scrollen zu Verschiebungen kommen. Teste, ob das Problem auch auftritt, wenn der Header "Mitscrollt".

Methode 3: Versteckte oder überlappende Elemente finden

Dies ist die häufigste Ursache: Ein Textfeld, ein Logo-Container oder eine unsichtbare Box ragt über den Rand hinaus.

  1. Nutze das Ebenen-Panel (unten links im Editor unter "Tools" oder "Ebenen").
  2. Wähle den "Header" aus der Liste aus.
  3. Schau dir alle Elemente an, die im Header liegen.
  4. Klicke jedes Element einzeln an. Siehst du einen blauen Rahmen, der über den sichtbaren Bereich des Headers hinausgeht?
  5. Verkleinere diese Rahmen oder schiebe sie nach oben. Erst wenn alle Elemente innerhalb der Header-Grenzen liegen, lässt sich der Header selbst weiter verkleinern.

Methode 4: Lücke zwischen Header und der ersten Sektion (Body)

Wenn die Lücke unter dem Header zur ersten Sektion (z. B. dem Hero-Bild) besteht:

  1. Klicke auf die erste Sektion unter dem Header.
  2. Prüfe, ob diese Sektion einen Abstand (Margin) nach oben hat.
  3. Ziehe die Sektion mit dem oberen Ziehgriff direkt an den Header heran.
  4. Klicke auf den Header -> Layouts. Stelle sicher, dass der Abstand auf "0" gesetzt ist, falls diese Option in deinem speziellen Header-Design verfügbar ist.

Methode 5: Speziell für Wix Studio / Editor X (Profis)

Falls du Wix Studio oder den Editor X nutzt, liegt es meist an den CSS-Werten:

  1. Wähle den Header aus.
  2. Öffne das Inspektor-Panel (rechts).
  3. Prüfe unter Layout, ob ein "Padding" (Innenabstand) oder "Margin" (Außenabstand) in Pixeln (px) oder Prozent (%) definiert ist.
  4. Setze diese Werte auf 0.

Profi-Tipp: Die "Vorschau" Falle

Manchmal sieht man im Editor eine dünne Linie oder Lücke, die in der Live-Vorschau verschwindet. Veröffentliche die Seite kurz oder nutze den Vorschaumodus, um sicherzugehen, dass du nicht ein Problem jagst, das nur im Bearbeitungsmodus existiert.

Zusammenfassung:

  • Elemente im Header kontrollieren (Ebenen-Panel).
  • Ziehgriff nach oben bewegen.
  • Sektionen direkt aneinander andocken lassen.
0