Der Leuchtkasteneffekt ist eine sehr praktische Funktion, vor allem wenn es darum gehtVergrößerung des AnzeigebildesElementor bietet eine einfache Möglichkeit, Lightbox-Bilder ohne die Verwendung anderer Plugins zu erstellen. In diesem Artikel sehen wir uns genau an, wie Sie in Elementor einen Leuchtkasten-Effekt hinzufügen können, und erläutern die einzelnen Einrichtungsschritte im Detail.

Was ist der Leuchtkasteneffekt?

Der Leuchtkasten-Effekt bezieht sich auf die Tatsache, dass das Bild in der Mitte des Bildschirms vergrößert angezeigt wird, wenn ein Benutzer auf ein Bild klickt, während der Hintergrund abgedunkelt wird, damit sich der Benutzer auf das angezeigte Bild konzentrieren kann. Dieser Effekt ist bei vielen Websites sehr beliebt, da er ein intensiveres Benutzererlebnis bietet.

Lesen:So fügen Sie eine Diashow in voller Breite in Elementor hinzu

Wie man einen Leuchtkasten-Effekt in Elementor erstellt

Schritt 1: Erstellen oder bearbeiten Sie eine Seite

Zunächst muss eine neue Seite erstellt oder eine bestehende Seite bearbeitet werden, um ihr einen Leuchtkasten-Effekt hinzuzufügen.
Schritte:

1. Gehen Sie zum WordPress-Dashboard und klicken Sie auf "Web-Seite">"Neue Seite hinzufügen", um eine neue Seite zu erstellen, oder gehen Sie zur Liste "Seiten" und wählen Sie die Seite, die Sie bearbeiten möchten.

2. Wenn Sie einen Beitrag bearbeiten möchten, können Sie auf "Schriftstücke">"Neuen Artikel hinzufügen", um einen neuen Beitrag zu erstellen.

Schritt 2: Wechseln Sie zum Elementor Editor

Nachdem Sie eine Seite erstellt oder ausgewählt haben, klicken Sie auf "Elementor Editor verwenden", um die Elementor-Editoroberfläche zu öffnen. Von hier aus können Sie dieWidgets ziehen und ablegenMöglichkeit, Seiteninhalte zu bearbeiten.

Schritt 3: Bild-Widget hinzufügen

1. Suchen Sie im Elementor-Editor das Feld "BildmaterialWidget" an die Position auf der Seite, an der der Leuchtkasten-Effekt angezeigt werden soll.

2. Nachdem Sie das Bild-Widget auf der Seite platziert haben, können Sie auf die Bildeinstellungen zugreifen.

Schritt 4: Hinzufügen eines Bildes

Nachdem Sie ein Bild-Widget hinzugefügt haben, müssen Sie ein Bild aus der Mediathek auswählen oder ein neues Bild hochladen.
Schritte:

1. Klicken Sie im Bild-Widget auf das Feld "Bild auswählen"Knopf.

2. Wählen Sie die Bilder aus, die Sie in der Mediathek anzeigen möchten, oder laden Sie lokale Bilddateien direkt hoch.

Schritt 5: Konfigurieren Sie den Leuchtkasteneffekt

Als nächstes muss der Leuchtkasten-Effekt für das Bild aktiviert werden.
Schritte:

1. Im Bild-Widget ist die "Link (auf einer Website)" Option, wählen Sie "Mediendatei". Dadurch wird sichergestellt, dass das Bild beim Anklicken vergrößert angezeigt wird.

2. Aktivieren Sie den Leuchtkasteneffekt: in "Leuchtkasten"Ersetzen Sie in den Optionen "Leuchtkasten"Einstellen auf "sein". Sobald dies eingerichtet ist, wird der Leuchtkasten-Effekt ausgelöst, wenn das Bild angeklickt wird, das Bild wird vergrößert dargestellt und der Seitenhintergrund wird abgedunkelt.

Schritt 6: Vorschau und Veröffentlichung der Seite

Nachdem Sie die obigen Schritte ausgeführt haben, sehen Sie sich die Seite in der Vorschau an, um sicherzustellen, dass der Leuchtkasten-Effekt erfolgreich angewendet wurde.

1. Klicken Sie auf das Bild, um zu sehen, ob der Leuchtkasteneffekt normal ist.
2. Wenn die Ergebnisse wie erwartet sind, kann die Seite gespeichert und veröffentlicht werden.

Wenn Sie in der Vorschau auf das Bild klicken, sollte der Leuchtkasteneffekt ausgelöst und das Bild vergrößert angezeigt werden. Wenn der Leuchtpult-Effekt korrekt funktioniert, können Sie die Seite sicher speichern oder veröffentlichen.

Schlussbemerkungen

Die Implementierung von Leuchtkasteneffekten in Elementor ist sehr einfach und erfordert keine zusätzlichen Plugins. Das spart nicht nur Plugin-Ressourcen, sondern verbessert auch die Leistung Ihrer Website. Wenn Ihre Website die Möglichkeit bieten soll, ein Bild zu vergrößern, ist der Lightbox-Effekt eine gute Wahl. Ich hoffe, dass die detaillierten Schritte in diesem Artikel Ihnen helfen werden, diese Funktion erfolgreich zu implementieren.