So fügen Sie ein klebriges Floating-Video beim Scrollen auf der Seite in WordPress hinzu

Möchten Sie erfahren, wie Sie ein Sticky-Floating-Video beim Scrollen auf Ihrer WordPress-Site hinzufügen?

Sticky Videos sind eine wirkungsvolle Möglichkeit, Ihr Publikum für Ihre Website zu begeistern. Heutzutage konsumieren die Menschen mehr Videoinhalte als geschriebene Inhalte. Wenn Sie also feststellen, dass Ihre Website-Besucher nicht genug mit Ihrer Website interagieren, kann das Hinzufügen eines Videos dieses Problem lösen.

Wenn Sie nach einer mühelosen Möglichkeit suchen, Ihr Website-Video klebrig zu machen, dann sind Sie bei dem richtigen Artikel gelandet. Denn in diesem Blog erfahren Sie, wie Sie in wenigen Schritten und wenigen Minuten Sticky-Videos zu Elementor-basierten WordPress-Sites hinzufügen.

Also weiterlesen…

Was ist ein Sticky-Video?

Sticky-Videos sind Videos, die auf einer Webseite angeheftet sind und an derselben Stelle in einem Webseitenfenster schweben , selbst wenn ein Benutzer nach oben oder unten scrollt.

Warum Sticky Video auf der Elementor WordPress-Website hinzufügen?

Das Konzept eines Sticky Videos auf einer Website klingt nicht nur cool, sondern hat auch viele Vorteile. Hier sind einige der Vorteile, die Sie nutzen können, indem Sie Ihrer WordPress-Website ein Sticky-Video hinzufügen.

• Erhöht die Benutzerinteraktion: Mit Sticky-Videos können Benutzer den Inhalt der Webseite gleichzeitig ansehen und lesen. Infolgedessen neigen Menschen dazu, sich mehr mit Websites zu beschäftigen.
• Erhöhen Sie die Abschlussrate von Videos: Da Sticky-Videos nicht die gesamte Seite blockieren, sehen sich Kunden wahrscheinlich bis zum Ende an, anstatt sie auf halbem Weg zu schließen. Wenn Sie Ihr Video also sticky machen, kann dies die Fertigstellungszeit des Videos tatsächlich verlängern.
• Erregen Sie die Aufmerksamkeit des Benutzers: Normalerweise überfliegen die Leute eine Website. Wenn Sie sich in diesem Fall nur auf Textinhalte verlassen, besteht die Möglichkeit, dass Ihre Kunden wichtige Dinge verpassen, von denen Sie möchten, dass sie sie bemerken. Mit Video können Sie die Aufmerksamkeit Ihrer Nutzer gezielter auf bestimmte Informationen lenken.
• Besseres Geschichtenerzählen: Videos bieten Ihnen eine breitere Leinwand zum Erzählen von Geschichten als reine Textinhalte. Da Sie in einem Video Text, Animation und Sprache gleichzeitig verwenden können, sind Sie besser gerüstet, um eine Geschichte effektiver zu erzählen.

Überzeugt, dass Sie Ihrer WordPress-Site ein Sticky-Video hinzufügen sollten? Nun, wenn ja, fahren Sie mit dem nächsten Abschnitt fort, um herauszufinden, wie Sie es tun können.

So fügen Sie in 6 Schritten ein Sticky-Video zur Elementor-Website hinzu

Dies ist der einfachste Prozess, um ein Video klebrig und schwebend auf Ihrer WordPress-Seite zu machen. Gehen Sie alle Schritte durch, um in wenigen Augenblicken ein Sticky-Video zu Elementor hinzuzufügen.

Schritt 1: Installieren Sie Elementor und ElementsKit

Der erste Schritt besteht darin, alle erforderlichen Plugins zu installieren. Um diesem Tutorial zum Hinzufügen von Sticky-Videos in Elementor zu folgen, benötigen Sie

• Elementar und
• ElementsKit (sowohl kostenlose als auch Pro-Versionen).

Elementor ist ein Drag-and-Drop-Seitenersteller und ElementsKit ist ein Addon für Elementor. Sie müssen also zuerst Elementor installieren, dann ElementsKit herunterladen und danach Ihr Plugin auf die Pro-Version aktualisieren.

Sie können die Dokumentation lesen, wenn Sie Hilfe bei der Installation von ElementsKit pro und dem Prozess der Lizenzaktivierung benötigen.

Schritt 2: Aktivieren Sie das Sticky Content-Modul von ElementsKit

Um das Video klebrig zu machen, werde ich die Sticky Content Features von ElementsKit verwenden. Sie müssen also das Sticky-Content-Modul aktivieren.

Navigieren Sie nun zu ElementsKit ⇒ Modules ⇒ Sticky Content , aktivieren Sie die Option und klicken Sie auf Save Changes , um die gerade vorgenommenen Änderungen zu aktualisieren.

Schritt 3: Ziehen Sie das Elementor Video-Widget per Drag-and-Drop

Navigieren Sie zu der Seite, auf der Sie das Sticky-Video hinzufügen möchten, und klicken Sie auf die Option Mit Elementor bearbeiten.

Wählen Sie ein beliebiges Layout, indem Sie auf das +-Symbol klicken. Suchen Sie danach nach dem Video -Widget, ziehen Sie das Widget und legen Sie es dort ab, wo Sie es hinzufügen möchten.

Hinweis : Für dieses Tutorial habe ich bereits die vorgefertigte Seite importiert, die ich bearbeite, um den gesamten Prozess zu zeigen. Mit dem vorgefertigten Abschnitt von ElementsKit können Sie ganz einfach WordPress-Websites erstellen.

Schritt 4: Wählen Sie die Videoquelle und fügen Sie die URL hinzu

Mit dem Video-Widget von Elementor können Sie Videos aus Quellen wie Youtube, Vimeo, DailyMotion und Self Hosted anzeigen.

Wählen Sie zunächst Ihren bevorzugten Quelltyp aus und geben Sie dann die Video-URL an. Ich werde YouTube für diesen Artikel verwenden.

Hinweis : Bei selbst gehosteten Inhalten können Sie ein Video auf Ihren Server hochladen oder eine externe URL angeben.

Sie können auch den Stil des Videos anpassen. Navigieren Sie dazu zur Registerkarte Stil. Hier können Sie das Seitenverhältnis und den CSS-Filter auswählen . Sie können aus sechs Seitenverhältnissen wählen, z. B. 1:1, 3:2, 4:3, 16:9 usw. Klicken Sie auf das Bearbeitungssymbol des CSS-Filters, um Unschärfe, Helligkeit, Kontrast, Sättigung und Farbton anzupassen.

Schritt 5: Einstellungen, um Elementor-Videos klebrig zu machen

Gehen Sie zur Registerkarte Erweitert. Erweitern Sie dann die Sticky-Option von ElementsKit . Hier können Sie den Sticky-Typ als oben, unten, Spalte und beim Scrollen nach oben anzeigen auswählen.

Sobald Sie Sticky Type als etwas anderes als None ausgewählt haben, erhalten Sie die folgenden Optionen:

• Sticky Until: Hier müssen Sie die CSS-ID des Abschnitts festlegen, bis zu dem Ihr Video sticky bleiben soll. Sie können eine benutzerdefinierte CSS-ID für die Spalte festlegen und diese dann kopieren und in die Option Sticky until einfügen.

• Sticky Offset: Stellen Sie in dieser Option den Offset-Wert ein. Der Versatzwert gibt den Abstand zwischen dem Video und der obersten Position Ihrer Seite an.

Hinweis : Sticky until Die Option ist nicht mit der Sticky-Optionsspalte verfügbar, da sie nur sichtbar ist, bis die übergeordnete Spalte auf dem Bildschirm sichtbar ist.

Sie können die Sticky-Hintergrundfarbe ändern und das Video auf allen Geräten, nur Desktop oder sowohl Desktop als auch Tablets, sticky machen.

Schritt 6: Aktualisieren Sie, um Sticky-Videos in Elementor hinzuzufügen und eine Vorschau anzuzeigen

Nachdem Sie den Videotyp ausgewählt und alle Sticky-Einstellungen eingerichtet haben, klicken Sie zum Speichern auf „Aktualisieren“ und klicken Sie auf die Schaltfläche „Vorschau“, um die Endergebnisse anzuzeigen.

Hinweis: Wenn Sie eine klebrige Videoschaltfläche wünschen, die beim Klicken ein Video anzeigt, können Sie das ElementsKit-Video - Widget anstelle des Elementor-Video-Widgets verwenden. Sie können dem oben beschriebenen Vorgang folgen, um Sticky-Videos in Elementor mit dem ElementsKit-Video-Widget hinzuzufügen.

Hier ist eine Vorschau von Sticky Video mit dem ElementsKit-Video-Widget .

Letzte Worte

Herzliche Glückwünsche! Jetzt wissen Sie, wie Sie Sticky-Videos auf der Elementor-Site hinzufügen. Es ist viel einfacher, als es sich zunächst anhört, oder?

Probieren Sie alle Optionen und Einstellungen des Sticky-Moduls von ElementsKit aus und verwenden Sie es auf Ihrer Website, um maximale Ergebnisse zu erzielen. Wenn Sie vom Sticky-Modul von ElementsKit beeindruckt sind und wie einfach es ist, hinzuzufügen, wie Sie ein Sticky-Floating-Video beim Scrollen der Seite hinzufügen.

Dann wird Sie die umfassende Sammlung von Widgets und Modulen, die ElementsKit zu bieten hat, noch mehr überraschen. Schauen Sie sich also unbedingt alle Funktionen an, die ElementsKit zu bieten hat.