Tutorials

So erstellst du Tabs auf deiner Wix-Website – Schritt-für-Schritt-Anleitung

Melden

Hier ist ein ausführliches Tutorial, wie du Tabs (Registerkarten) auf deiner Wix-Website erstellen kannst.

Tabs sind eine hervorragende Möglichkeit, viele Informationen auf kleinem Raum übersichtlich zu organisieren. Besucher können zwischen verschiedenen Inhalten wechseln, ohne die Seite neu laden zu müssen.

In Wix gibt es dafür ein spezielles, vorgefertigtes Element.

Schritt 1: Das Tab-Element finden

  1. Öffne deinen Wix Editor.
  2. Klicke in der linken Seitenleiste auf das Plus-Icon (+) für „Elemente hinzufügen“.
  3. Gehe zum Menüpunkt Interaktiv.
  4. Suche dort den Abschnitt Tabs.
  5. Wähle ein Design aus, das dir gefällt, und ziehe es per Drag-and-Drop auf deine Seite.

Schritt 2: Tabs verwalten (Hinzufügen & Umbenennen)

Sobald das Element auf deiner Seite ist, kannst du die einzelnen Registerkarten konfigurieren:

  1. Klicke auf das Tab-Element.
  2. Wähle den Button Tabs verwalten.
  3. In der Liste kannst du:
    • Umbenennen: Klicke auf die drei Punkte (...) neben einem Tab und wähle „Umbenennen“.
    • Hinzufügen: Klicke unten auf „+ Neuen Tab hinzufügen“.
    • Reihenfolge ändern: Ziehe die Tabs einfach an den sechs Punkten in die gewünschte Position.
    • Löschen: Klicke auf die drei Punkte und wähle „Löschen“.

Schritt 3: Inhalte in die Tabs einfügen

Jeder Tab fungiert wie ein kleiner Container.

  1. Klicke auf den Namen eines Tabs im Editor, um ihn zu aktivieren.
  2. Ziehe nun beliebige Elemente (Text, Bilder, Buttons, Videos) direkt in den Bereich unterhalb der Tab-Leiste.
  3. Wichtig: Achte darauf, dass die Meldung „An Tab anhängen“ erscheint, damit der Inhalt auch wirklich nur in diesem speziellen Tab angezeigt wird.
  4. Wiederhole dies für jeden einzelnen Tab.

Schritt 4: Design anpassen

Damit die Tabs perfekt zu deiner Marke passen, kannst du das Aussehen verändern:

  1. Klicke auf das Tab-Element und wähle das Pinsel-Symbol (Design).
  2. Hier kannst du:
    • Füllfarbe & Deckkraft: Hintergrundfarben für den aktiven und inaktiven Zustand festlegen.
    • Rahmen & Ecken: Die Kanten abrunden oder Linien hinzufügen.
    • Textstil: Schriftart, Größe und Farbe der Tab-Titel anpassen.
  3. Über das Layout-Symbol kannst du zudem die Ausrichtung der Tabs (links, rechts, zentriert) und die Abstände einstellen.

Schritt 5: Mobile Ansicht prüfen

Elemente wie Tabs können auf Mobilgeräten manchmal anders wirken.

  1. Wechsel oben im Editor in die Mobile Ansicht (Smartphone-Icon).
  2. Überprüfe, ob die Tabs gut lesbar sind und der Inhalt korrekt angezeigt wird.
  3. Du kannst hier das Layout speziell für die mobile Version anpassen (z. B. die Schriftgröße verringern), ohne das Design der Desktop-Version zu verändern.

Profi-Tipp: Tabs mit Velo (für Fortgeschrittene)

Falls dir die Standard-Tabs nicht ausreichen (z. B. wenn du Tab-Inhalte mit einer Datenbank verknüpfen willst), kannst du eigene Tabs mithilfe von Buttons und Multi-State-Boxen erstellen. Dafür musst du den „Dev Mode“ (Velo) aktivieren. Für die meisten Standard-Anwendungen reicht das oben beschriebene „Interaktiv“-Element jedoch völlig aus.

Zusammenfassung

  1. Hinzufügen über Interaktiv > Tabs.
  2. Inhalt einfügen, indem du Elemente in den Container ziehst.
  3. Design anpassen über das Pinsel-Icon.
  4. Veröffentlichen nicht vergessen!
0