Brauchen Sie eine Möglichkeit, einen Bildlaufeffekt zu erzeugen? Elementor ? In diesem Artikel zeigen wir Ihnen, wie Sie mit Elementor einen Bildlaufeffekt auf Ihren Webseiten erstellen.
Mit dem Bildlaufeffekt können Sie das vollständige Bild anzeigen, wenn der Benutzer mit der Maus über die Bilder fährt. Wenn Sie eine Website besuchen, die Website-Vorlagen verkauft, können Sie die vollständige Vorschau der Vorlagen mit Bildlaufeffektfunktionen sehen.
Mit diesen Funktionen können Sie Ihren Benutzern auf kleinem Raum ganz einfach die vollständige Ansicht der Website zeigen. Wenn Sie ein vollständiges Bild einer Website anzeigen möchten, nimmt dieses normalerweise viel Platz auf Ihren Webseiten ein. Darüber hinaus wirkt es sich auf das Design Ihrer Website aus.
Aber mit dem Bildlaufeffekt können Sie auf attraktive Weise weitere Bilder hinzufügen, die leicht die Aufmerksamkeit des Publikums erregen.
Erstellen Sie einen Bildlaufeffekt in Elementor
Elementor bietet kein Widget zum Hinzufügen eines Bildlaufeffekts. Sie müssen den Effekt also mit benutzerdefiniertem CSS hinzufügen. Die benutzerdefinierte CSS-Funktion ist nur mit verfügbar Elementor Profi. Stellen Sie also sicher, dass Sie ein Upgrade durchgeführt haben Elementor Pro.
Öffnen Sie nun eine Seite mit dem Elementor-Editor und klicken Sie auf das Plus-Symbol, um einen Abschnitt hinzuzufügen.
Jetzt müssen Sie die Spalte für Ihren Abschnitt auswählen. Hier wählen wir den einspaltigen Abschnitt aus.
Klicken Sie nun auf das Abschnittsbearbeitungssymbol und stellen Sie im Layout-Tab die Mindesthöhe auf 500 ein.
Fügen Sie nun über das Block-Widget den inneren Abschnittsblock zu Ihrem erstellten Abschnitt hinzu und entfernen Sie die Standardspalte. Klicken Sie mit der rechten Maustaste auf das Spaltenbearbeitungssymbol und klicken Sie auf die Option „Löschen“, um die Hauptspalte zu löschen.
Gehen Sie erneut zur Bearbeitungsoption des inneren Abschnitts und stellen Sie auf der Registerkarte „Layout“ die Mindesthöhe auf 500 ein, wie wir zuvor gezeigt haben.
Wechseln Sie nun zur Registerkarte „Stil“ des inneren Abschnitts und stellen Sie in der Hintergrundoption den Hintergrund auf „Klassisch“ ein. Als nächstes müssen Sie Ihr Hintergrundbild hinzufügen. Legen Sie mit der Option „Bildposition“ die Position des Bildes fest Oben in der Mitte. Legen Sie in der Wiederholungsoption die Option fest Nicht wiederholen und die Größe gefällt Abdeckung.
Wechseln Sie nun zur Registerkarte fortgeschritten um benutzerdefiniertes CSS hinzuzufügen. Fügen Sie im Feld „Benutzerdefiniertes CSS“ den folgenden Code hinzu:
selector{ -webkit-transition: easy-in-out 3s !important; Übergang: Easy-in-out 3s !important; } selector:hover{ Hintergrundposition: Mitte unten !important; }
Sie können den Übergangswert ändern, um den Bildlaufeffekt von Bildern zu ändern. Wenn Sie mehrere Bilder mit demselben Effekt hinzufügen möchten, können Sie die Spalte duplizieren und dann das Hintergrundbild ändern.
Zusammenfassung
Wenn Sie den Vorgang befolgen, können Sie mithilfe des Seitenerstellers einen Bildlaufeffekt zu Ihrer Website hinzufügen Elementor. Weitere Informationen finden Sie in unseren anderen Artikeln:
- Wie verwende ich Elementor-Blöcke im Gutenberg-Editor?
- Elementor vs. Divi vs. SeedProd – Was ist besser?
- So verwenden Sie den Verlauf, um Aktionen in Elementor rückgängig zu machen und wiederherzustellen
- So erstellen Sie eine Elementor-Website superschnell
- So erstellen Sie einen interaktiven Kreis in Elementor
Wir hoffen, dass dieser Artikel für Sie nützlich sein wird. Wenn Ihnen dieser Artikel gefällt, liken Sie bitte unsere Facebook-Seite, um in Verbindung zu bleiben.
