Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Editor
  3. Elemente hinzufügen und anpassen
  4. Container und Boxen
    5. Wix Editor: Deine Lightbox anpassen

Wix Editor: Deine Lightbox anpassen

7 Min. Lesezeit
Passe deine Lightbox ganz an deine Wünsche und Bedürfnisse an. Du kannst eine Überlagerung auswählen, um die Seite um die Lightbox herum abzudecken, die Position der Lightbox festlegen und den Hintergrund ändern, um ein Design zu erstellen, das einzigartig für deine Marke ist.
Erfahre mehr über folgende Themen:
Screenshot einer benutzerdefinierten Lightbox auf einer Live-Website von Wix

Das Layout einer Lightbox anpassen

Lege fest, wo die Lightbox auf deiner Seite angezeigt wird. Du kannst eine Ecke der Seite auswählen, in der sie angezeigt werden soll, und den Abstand der Lightbox von den Rändern des Bildschirms (Versatz) anpassen.

Um das Layout deiner Lightbox auszuwählen:

  1. Öffne die entsprechende Lightbox aus dem Menüs & Seiten-Panel.
  2. Klicke auf die Lightbox.
  3. Klicke auf das Symbol für Layout .
  4. Wähle, wie du das Layout anpassen möchtest:
    • Position festlegen: Wähle die Position deiner Lightbox auf der Seite.
    • Horizontaler Abstand: Bewege das Feld nach links oder rechts auf dem Bildschirm.
    • Vertikaler Abstand: Bewege die Box auf dem Bildschirm nach oben oder unten.
Das Layout-Panel der Lightbox. Der Cursor fährt über die Option, um die Lightbox in der Mitte zu positionieren.

Die Lightbox-Überlagerung ändern

Deine Überlagerung ist der Bereich um die Lightbox herum, der den Rest deiner Website ausblendet. Das hilft Besuchern, sich auf die Botschaft deiner Lightbox zu konzentrieren. Du kannst eine Farbe, ein Bild oder einen Videohintergrund für die Überlagerung auswählen und nach Bedarf anpassen.

Um die Überlagerung zu ändern:

  1. Öffne die entsprechende Lightbox aus dem Menüs & Seiten-Panel.
  2. Klicke auf die Überlagerung (den Bereich um deine Lightbox).
  3. Klicke auf Überlagerungshintergrund ändern.
  4. Wähle die Art der Überlagerung, die du für deine Lightbox verwenden möchtest:
  5. (Optional) Klicke auf Einstellungen, um die Überlagerung nach deinen Wünschen anzupassen.
Tipp:
Wir empfehlen, dass du deine Überlagerung leicht transparent gestaltest, damit deine Besucher die Seite hinter der Lightbox sehen können, aber verstehen, dass sie blockiert ist.
Das Überlagerungshintergrund-Panel. Der Cursor bewegt sich über den „Einstellungen“-Button.
Hinweise:
  • Du kannst deine Lightbox-Überlagerung auf der mobilen Version deiner Website nicht bearbeiten.
  • Wenn du eine Farb- oder Bildüberlagerung auf dem Desktop hinzufügst, wird diese automatisch auf deine Mobile-Website angewendet. Wenn du jedoch eine Video-Überlagerung hinzufügst, wird diese in ein Standbild aus dem Video auf der mobilen Version deiner Website umgewandelt.

Den Hintergrund der Lightbox festlegen

Wähle zwischen einem Farb-, Bild- oder Videohintergrund für deine Lightbox. Je nach gewähltem Typ kannst du auch Einstellungen wie Sichtbarkeit und Skalierung anpassen.

Um einen Hintergrund für deine Lightbox auszuwählen:

  1. Öffne die entsprechende Lightbox aus dem Menüs & Seiten-Panel.
  2. Klicke auf die Lightbox.
  3. Klicke auf das Symbol für Design .
  4. Klicke auf den gewünschten Hintergrund für deine Lightbox:
    • Farbe oder Farbverlauf: Klicke auf Farbe, um eine Farbe aus der Farbauswahl auszuwählen, oder einen atemberaubenden Farbverlauf hinzuzufügen und anzupassen.
    • Bild: Wähle dein eigenes Bild oder eines von Wix oder von Shutterstock.
    • Video: Wähle ein kostenloses Video von Wix oder lade dein eigenes Video hoch.
  5. (Optional) Klicke auf Einstellungen, um die Überlagerung nach deinen Wünschen anzupassen.
Der Hintergrund der Lightbox im Editor. Der Cursor schwebt über der Option „Farbe“.

Den „Schließen“-Button der Lightbox anpassen

Passe das Aussehen und Layout des Buttons an, auf den Besucher klicken, um deine Lightbox zu schließen. Du kannst den Text auswählen, die Ausrichtung des Buttontexts festlegen und das Design für die Standard- und Mouseover-Ansicht anpassen, um ihn hervorzuheben.

Um den Buttontext zu bearbeiten und auszurichten:

  1. Öffne die entsprechende Lightbox aus dem Menüs & Seiten-Panel.
  2. Klicke auf den Button.
  3. Ändere den Text, der auf dem Button angezeigt wird:
    1. Klicke Text ändern.
    2. Gib den Text in das Feld ein.
    3. Drücke die Enter-Taste auf deiner Tastatur.
  1. Passe die Textausrichtung auf dem Button an:
    1. Klicke auf das Symbol für Layout .
    2. Wähle, wie der Text ausgerichtet wird; links, mittig oder rechts vom Button.
Das Layout-Panel des „Schließen“-Buttons. Der Cursor befindet sich über der Option, den Text mittig auszurichten.

Um den „Schließen“-Button der Lightbox zu gestalten:

  1. Öffne die entsprechende Lightbox aus dem Menüs & Seiten-Panel.
  2. Klicke auf den Button.
  3. Klicke auf das Symbol für Design .
  4. Wähle ein Design aus und klicke auf Design anpassen, um weitere Design-Änderungen vorzunehmen.
  5. Klicke oben auf eine Voreinstellung.
  6. Wähle aus, für welchen Status du das Design anpassen möchtest:
    • Standard: So sieht der Button aus, bevor ein Besucher damit interagiert.
    • Mouseover: Wie der Button aussieht, wenn Besucher mit der Maus darüber fahren.
  7. Wähle, was du anpassen möchtest:
  • Füllfarbe & Deckkraft : Wähle eine Hintergrundfarbe für den Button und passe die Sichtbarkeit an.
  • Rand undefined: Füge dem Button Ränder hinzu, um einen Kontrast zu deiner Lightbox zu schaffen. Wähle eine Farbe und stelle die Breite so ein, wie du es benötigst.
  • Ecken undefined: Wähle aus, wie die Ecken deines Buttons aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger gestalten.
  • Schatten undefined: Füge deinem Button einen Schatten hinzu, um einen tollen 3D-Effekt zu erzielen. Du kannst die Größe, Sichtbarkeit, den Winkel und vieles mehr festlegen, um eine bessere Wirkung zu erzielen.
  • Text undefined Passe den Text deines Buttons mit Einstellungen wie Schriftart, Größe und Abstand an. Du kannst auch Formatierungen wie Fett und Kursiv hinzufügen und die Farbe auswählen.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von folgenden Faktoren ab:
  • Die von dir gewählte Designvoreinstellung
  • Status, für den du das Design auswählen möchtest (normal oder Mouseover)
Das Design-Panel für das „Schließen“-Symbol. Der Cursor befindet sich über dem Tab Text, der geöffnet ist.

Das „X“-Symbol anpassen

Wenn du ein „X“-Symbol (Lightbox schließen) aktiviert hast, passe das Aussehen an deine Lightbox und die Ästhetik deiner Überlagerung an. Wähle aus einer Reihe von Designs und passe Farbe, Sichtbarkeit und Rand an.

Um das „X“-Symbol anzupassen:

  1. Öffne die entsprechende Lightbox über das Panel Menüs & Seiten.
  2. Klicke auf das Symbol Lightbox schließen (X).
  3. Klicke auf das Symbol für Design .
  4. Wähle, wie du dein „X“-Symbol anpassen möchtest:
    • Ein neues Design auswählen: Klicke auf eine Voreinstellung im Panel, um ein neues Design für das Symbol festzulegen.
    • Symbol anpassen: Klicke auf Design anpassen und bearbeite das Symbol wie gewünscht:
      • Füllfarbe & Deckkraft: Wähle die Farbe des Symbols aus der Farbauswahl und verwende den Schieberegler, um es mehr oder weniger sichtbar zu machen.
      • Rand: Wähle eine Farbe für den Rand des Symbols und lege die Breite (in Pixel) fest.
Das Design-Panel des „X“-Symbols. Der Cursor befindet sich über dem Schieberegler für die Randbreite.

War das hilfreich?

|
In diesem Artikel
  • Das Layout einer Lightbox anpassen
  • Die Lightbox-Überlagerung ändern
  • Den Hintergrund der Lightbox festlegen
  • Den „Schließen“-Button der Lightbox anpassen
  • Das „X“-Symbol anpassen