Wix Hilfe-Center
    Start
  1. Studio, Partner von Wix & Enterprise
  2. Wix Studio
  3. Den Studio Editor verwenden
  4. Im Studio Editor Elemente hinzufügen
    5. Studio Editor: Lightboxen verwenden

Studio Editor: Lightboxen verwenden

6 Min. Lesezeit
Eine Lightbox ist ein Pop-up, das du an deine Bedürfnisse anpassen kannst. Gestalte das Pop-up-Fenster und füge die gewünschten Elemente hinzu und lege anschließend fest, wann es für Website-Besucher angezeigt wird.
Du kannst auch Elemente wie Text, Buttons oder Bilder verlinken, sodass durch Anklicken die Lightbox öffnet. Das ist eine großartige Möglichkeit, die Reichweite für zeitkritische Informationen, Angebote oder Werbeaktionen zu erhöhen.
Ein Beispiel für eine Lightbox, die verwendet wird, um mehr Abonnenten für den Newsletter des Kunden zu gewinnen
Erfahre mehr über folgende Themen:

Eine Lightbox hinzufügen

Füge deiner Website ein Lightbox-Pop-up hinzu, um spannende Ankündigungen für die Website-Besucher einzurichten.

Um eine Lightbox hinzuzufügen:

  1. Klicke links im Editor auf Elemente hinzufügen .
  2. Klicke auf Layout-Tools.
  3. Klicke auf Lightboxen.
  4. Wähle die Lightbox aus, die du hinzufügen möchtest. 

Eine Lightbox anpassen

Passe die Lightbox an das Design deiner Website an. Füge bei Bedarf Elemente hinzu und ändere die Hintergrundfarbe sowie die Deckkraft.

Um eine Lightbox anzupassen:

  1. Klicke auf der linken Seite des Editors auf Seiten .
  2. Wähle unter Lightboxen die entsprechende Lightbox aus.
  3. Klicke in deinem Editor auf die Lightbox.
  4. Wähle, wie du die Lightbox anpassen möchtest:
    • Elemente hinzufügen:  
      1. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
      2. Ziehe das entsprechende Element per Drag-and-Drop. 
    • Deinen Hintergrund gestalten: 
      1. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
      2. Scrolle nach unten zu Design.
      3. Wähle eine Farbe und lege unter Hintergrund die Deckkraft des Hintergrunds fest.
  5. Wenn du fertig bist, klicke unten auf Okay, um den Bearbeitungsmodus zu verlassen. 
Screenshot des Bearbeitungsmodus für die Lightbox, bei dem du eine Hintergrundfarbe im Inspektor wählst
Wie geht es weiter?
Zeige eine Vorschau der Website an, um die Lightbox in Aktion zu sehen.

Auslöser für eine Lightbox festlegen

Wähle, wie und wann die Lightbox angezeigt wird. Du kannst sie so einstellen, dass sie automatisch auf bestimmten Seiten deiner Website angezeigt wird oder mit einem Element verlinkt wird (z. B Text, Bild). Du kannst auch entscheiden, wie Besucher die Lightbox schließen, nachdem sie sie angesehen haben.
Hinweis:
Die Lightbox wird einmal pro Besucher auf der ersten festgelegten Seite angezeigt, die sie sehen (falls sie auf mehreren Seiten angezeigt wird).

Um Auslöser einzurichten:

  1. Klicke auf der linken Seite des Editors auf Seiten .
  2. Wähle unter Lightboxen die entsprechende Lightbox aus.
  3. Klicke auf die Lightbox auf der Arbeitsfläche.
  4. Klicke auf Auslöser festlegen.
  5. Wähle unter Lightbox automatisch anzeigen die entsprechende Option aus.
    • Ja: Die Lightbox wird automatisch angezeigt, wenn Besucher die entsprechenden Seiten aufrufen.
      1. Klicke auf das Feld Auf welcher Seite soll sie erscheinen?, um die entsprechende(n) Seite(n) auszuwählen.
      2. Ziehe den Schieberegler Verzögerung, um festzulegen, wie lange es dauert (in Sekunden), bis die Lightbox nach dem Laden der Seite angezeigt wird.
    • Nein: Die Lightbox wird nicht automatisch angezeigt, wenn Besucher eine Seite aufrufen. Stattdessen wird sie durch einen Button oder einen Link ausgelöst, den du auswählst.
  6. Aktiviere den/die entsprechenden Schalter unter Lightbox schließen.
    Hinweis: Wenn du sowohl das „X“-Symbol als auch den „Schließen“-Button deaktivierst, können Besucher außerhalb der Lightbox klicken, um sie zu schließen.
  7. Wenn du fertig bist, klicke auf Okay, um den Bearbeitungsmodus zu verlassen.
Das Auslöser-Panel, das neben einer Lightbox geöffnet wird und so eingestellt ist, dass es auf der Startseite automatisch geöffnet wird

Eine Planung für eine Lightbox einrichten

Lege fest, wann Besucher die Lightbox sehen sollen. Wenn du zum Beispiel ein zeitlich begrenztes Angebot bewirbst, wird dadurch sichergestellt, dass die Lightbox nur im entsprechenden Zeitraum angezeigt wird.

Um den Zeitplan der Lightbox festzulegen:

  1. Klicke auf der linken Seite des Editors auf Seiten .
  2. Wähle unter Lightboxen die entsprechende Lightbox aus.
  3. Klicke auf die Lightbox auf der Arbeitsfläche.
  4. Klicke auf Auslöser festlegen.
  5. Scrolle nach unten zu Lightbox-Planung und klicke auf + Planung einrichten.
  6. Lege das Startdatum und die Startzeit sowie das Enddatum und die Endzeit fest.
    Tipp: Achte darauf, dass die richtige Zeitzone eingestellt ist. Gegebenenfalls kannst du diese ändern.
Die Lightbox-Planung im Studio Editor einrichten

Elemente mit einer Lightbox verlinken

Verlinke Elemente auf der Website zum Öffnen einer Lightbox, damit Besucher keine Ankündigung verpassen. Du kannst Elemente wie Text, Bilder, Videos und Buttons verlinken.

Um ein Element mit einer Lightbox zu verlinken:

  1. Klicke in deinem Editor auf das entsprechende Element.
  2. Klicke auf das Symbol für Link  .
  3. Wähle links Lightbox aus.
  4. Klicke auf das Aufklappmenü Welche Lightbox? und wähle die entsprechende Lightbox aus.
  5. Klicke auf OK.
Ein Textmaskenelement verlinken, um eine Lightbox zu öffnen, wenn Besucher darauf klicken

Eine Lightbox verwalten

Verwalte die Lightboxen deiner Website, um sie im Editor zu organisieren. Du kannst sie umbenennen, damit sie leicht zu finden sind, sie duplizieren, um Zeit zu sparen, und veraltete Lightboxen löschen.

Um eine Lightbox zu verwalten:

  1. Klicke auf der linken Seite des Editors auf Seiten .
  2. Klicke neben der entsprechen Lightbox auf das Symbol für Weitere Aktionen .
  3. Wähle aus, was du als nächstes tun möchtest:
Eine Lightbox im Seiten-Panel, die die verfügbaren Verwaltungsoptionen anzeigt

War das hilfreich?

|

In diesem Artikel

  • Eine Lightbox hinzufügen
  • Eine Lightbox anpassen
  • Auslöser für eine Lightbox festlegen
  • Eine Planung für eine Lightbox einrichten
  • Elemente mit einer Lightbox verlinken
  • Eine Lightbox verwalten