Wix Editor: Deine Lightbox anpassen
8 min
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.
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:
- Öffne deinen Editor.
- Klicke auf der linken Seite des Editors auf Seiten & Menü .
- Klicke auf Lightboxes.
- Klicke auf die entsprechende Lightbox, um sie zu öffnen.
- Wähle die Lightbox im Editor aus.
- Klicke auf das Symbol für Layout .
- Wähle, wie du das Layout anpassen möchtest:
- Position festlegen: Klicke auf ein Rechteck im Raster, um die Position deiner Lightbox auf der Seite festzulegen.
- Horizontaler Abstand: Bewege das Feld nach links oder rechts auf dem Bildschirm.
- Vertikaler Abstand: Bewege die Box auf dem Bildschirm nach oben oder unten.
.
.
Die Lightbox-Überlagerung einrichten
Die Überlagerung ist der Bereich um die Lightbox herum, der den Rest deiner Website ausblendet. So können sich Besucher auf die Botschaft deiner Lightbox konzentrieren. Wähle, ob Website-Besucher auf die Überlagerung klicken können, um die Lightbox zu schließen.
Um die Überlagerung einzurichten:
- Öffne deinen Editor.
- Klicke auf der linken Seite des Editors auf Seiten & Menü .
- Klicke auf Lightboxes.
- Klicke auf die entsprechende Lightbox, um sie zu öffnen.
- Klicke auf eine beliebige Stelle außerhalb der Lightbox, um diesen Bereich auszuwählen.
- Wähle aus, was du als nächstes tun möchtest:
- Entscheide, ob Besucher auf die Überlagerung klicken können, um die Lightbox zu schließen:
- Klicke auf Hintergrundüberlagerung aktivieren.
- Aktiviere oder deaktiviere den Schieberegler Lightbox durch Anklicken schließen.
Hinweis: Wenn du diese Option deaktivierst, stelle sicher, dass du entweder ein „X“-Symbol oder einen „Schließen“-Button auf deiner Lightbox hast.
- Die Überlagerung gestalten:
- Klicke auf Überlagerungshintergrund ändern.
- Wähle zwischen einer Farbe, einem Bild oder einem Videohintergrund.
- (Optional) Klicke auf Einstellungen, um die Überlagerung anzupassen.
Tipp: Du kannst die Deckkraft von Farbe und Bildhintergrund anpassen. Wir empfehlen, die Überlagerung leicht transparent zu gestalten, damit deine Besucher die Seite hinter der Lightbox sehen können, aber verstehen, dass sie blockiert ist.
- Entscheide, ob Besucher auf die Überlagerung klicken können, um die Lightbox zu schließen:
Überlagerungen auf deiner mobilfreundlichen Website:
- Du kannst deine Lightbox-Überlagerung für die mobile 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:
- Öffne deinen Editor.
- Klicke auf der linken Seite des Editors auf Seiten & Menü .
- Klicke auf Lightboxes.
- Klicke auf die entsprechende Lightbox, um sie zu öffnen.
- Wähle die Lightbox im Editor aus.
- Klicke auf das Symbol für Design .
- Klicke auf den gewünschten Hintergrund für deine Lightbox:
- Farbe: Wähle über die Farbauswahl eine Farbe aus oder füge einen Farbverlauf hinzu und passe ihn an.
- 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.
- (Optional) Klicke auf Einstellungen, um den Hintergrund nach deinen Wünschen anzupassen.
.
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 „Schließen“-Button anzupassen:
- Öffne deinen Editor.
- Klicke auf der linken Seite des Editors auf Seiten & Menü .
- Klicke auf Lightboxes.
- Klicke auf die entsprechende Lightbox, um sie zu öffnen.
- Wähle die Lightbox im Editor aus.
- Klicke auf den Button Schließen.
- Wähle, wie du den Button anpassen möchtest:
Den Text des Buttons ändern
Die Textausrichtung auf dem Button anpassen
.
Den Button gestalten
.
: Wähle eine Hintergrundfarbe für den Button und passe die Sichtbarkeit an.
: Füge dem Button Ränder hinzu, um einen Kontrast zu deiner Lightbox zu schaffen. Wähle eine Farbe und lege die Breite fest. Mach sie so groß oder klein, wie du möchtest.
:Wähle aus, wie die Ecken deines Buttons aussehen sollen. Du kannst jede Ecke getrennt anpassen und sie runder oder eckiger gestalten.
: Füge deinem Button Schatten hinzu, um einen 3D-Effekt zu erzielen. Du kannst Größe, Sichtbarkeit, Winkel und vieles mehr festlegen, um eine bessere Wirkung zu erzielen.
: 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.
Das „X“-Symbol anpassen
Wenn du im Einstellungen-Panel der Lightbox ein „X“-Symbol (Lightbox schließen) aktiviert hast, kannst du sein Aussehen an dein Website-Design anpassen. Wähle aus eines der vielen Designs und passe Farbe, Sichtbarkeit und Rand an.
Um das „X“-Symbol anzupassen:
- Öffne deinen Editor.
- Klicke auf der linken Seite des Editors auf Seiten & Menü .
- Öffne die entsprechende Lightbox.
- Klicke im Editor auf die Lightbox.
- Klicke auf das Symbol für Lightbox schließen („X“-Symbol).
- Klicke auf das Symbol für Design .
- 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.
