Tutorial

Tutorial: So fügst du einen Banner-Header in deine Wix-Website ein

Melden

Hier ist ein detailliertes Tutorial, wie du einen professionellen Banner-Header (auch „Hero-Section“ genannt) in deine Wix-Website einfügst.

Ein attraktiver Banner-Header ist das Erste, was Besucher auf deiner Website sehen. Er vermittelt deine Botschaft und animiert zum Handeln. In dieser Anleitung lernst du Schritt für Schritt, wie du einen Banner mit Text und Buttons erstellst.

Schritt 1: Den Wix Editor öffnen

  1. Logge dich in dein Wix-Konto ein.
  2. Wähle die Website aus, die du bearbeiten möchtest.
  3. Klicke auf „Website bearbeiten“, um den Wix Editor zu öffnen.

Schritt 2: Einen „Streifen“ (Strip) hinzufügen

Die beste Methode für einen Banner in Wix ist die Verwendung eines Streifens. Streifen passen sich automatisch der Bildschirmbreite an.

  1. Klicke auf das „+“ (Hinzufügen) Symbol in der linken Werkzeugleiste.
  2. Wähle den Punkt „Streifen“.
  3. Suche dir eine Vorlage aus (z. B. „Klassisch“, „Über uns“ oder einen leeren Streifen) und ziehe ihn an die gewünschte Stelle ganz oben auf deine Seite (direkt unter das Menü).

Schritt 3: Den Hintergrund anpassen

Jetzt verleihst du deinem Banner den passenden Look:

  1. Klicke auf den Streifen, den du gerade hinzugefügt hast.
  2. Wähle den Button „Streifenhintergrund ändern“.
  3. Hier hast du drei Optionen:
    • Farbe: Wähle eine schlichte Hintergrundfarbe.
    • Bild: Lade ein eigenes hochauflösendes Foto hoch oder wähle eines aus der Wix-Datenbank.
    • Video: Füge ein kurzes Hintergrundvideo hinzu, um die Seite dynamischer zu machen.
  4. Klicke auf „Einstellungen“ innerhalb des Hintergrund-Menüs, um die Deckkraft (Transparenz) anzupassen oder einen Overlay-Filter hinzuzufügen, damit Text später besser lesbar ist.

Schritt 4: Text und Inhalte hinzufügen

Ein Banner braucht eine klare Aussage (Headline).

  1. Klicke erneut auf das „+“ (Hinzufügen) Symbol.
  2. Wähle „Text“ -> „Überschrift 1“ (für SEO wichtig).
  3. Ziehe den Textkasten auf deinen Streifen. Wichtig: Achte darauf, dass die Meldung „An Streifen anheften“ erscheint, damit der Text fest mit dem Banner verbunden bleibt.
  4. Doppelklicke auf den Text, um ihn zu bearbeiten, die Schriftart zu ändern oder die Farbe anzupassen.

Schritt 5: Einen Call-to-Action (Button) einfügen

Damit Besucher wissen, was sie tun sollen, füge einen Button hinzu:

  1. Klicke auf das „+“ (Hinzufügen) Symbol -> „Button“.
  2. Wähle ein Design aus und ziehe es in deinen Banner-Streifen.
  3. Klicke auf den Button und dann auf das Link-Symbol, um festzulegen, wohin der Button führen soll (z. B. zu einer Kontaktseite oder einem Shop).

Schritt 6: Layout und Ausrichtung

  1. Klicke auf den Streifen und wähle das Symbol „Layouts“.
  2. Hier kannst du einstellen, ob der Inhalt zentriert, links- oder rechtsbündig ausgerichtet sein soll.
  3. Du kannst auch die Höhe des Banners anpassen, indem du den unteren Rand des Streifens mit der Maus nach oben oder unten ziehst.

Schritt 7: Mobile Ansicht prüfen (Wichtig!)

Wix-Websites sehen auf dem Handy oft anders aus.

  1. Klicke in der oberen Leiste des Editors auf das Handy-Symbol, um zur mobilen Ansicht zu wechseln.
  2. Überprüfe, ob der Text im Banner gut lesbar ist und die Größe des Bildes passt.
  3. Hier kannst du die Schriftgröße speziell für Mobilgeräte anpassen, ohne dass es die Desktop-Ansicht verändert.

Schritt 8: Speichern und Veröffentlichen

  1. Wenn du zufrieden bist, klicke oben rechts auf „Speichern“.
  2. Klicke auf „Veröffentlichen“, damit dein neuer Banner-Header für alle Besucher sichtbar ist.

Pro-Tipp: Wenn du möchtest, dass dein Header beim Scrollen einen coolen Effekt hat, klicke auf den Streifen -> „Hintergrundeffekte“ und wähle „Parallax“ oder „Fixiert“. Das lässt deine Website sofort professioneller wirken!

0