So fügen Sie in WordPress ein schwebendes Sticky-Video zum Scrollen einer Seite hinzu

Möchte lernen Wie füge ich ein Sticky-Floating-Video beim Scrollen auf der Seite Ihrer WordPress-Site hinzu?

Sticky-Videos sind eine wirkungsvolle Möglichkeit, Ihr Publikum auf Ihre Website aufmerksam zu machen. Heutzutage konsumieren Menschen mehr Videoinhalte als geschriebene Inhalte. Wenn Sie also feststellen, dass Ihre Website-Besucher nicht ausreichend 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 haften zu lassen, dann sind Sie beim richtigen Artikel gelandet. Denn in diesem Blog erfahren Sie es So fügen Sie in wenigen Schritten und Minuten Sticky-Videos zu einer Elementor-basierten WordPress-Site hinzu.

Lesen Sie also weiter…

Was ist ein Sticky-Video?

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

Warum Sticky Video zur 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 durch das Hinzufügen eines Sticky-Videos zu Ihrem Video nutzen können WordPress-Website.

• Erhöht das Benutzerengagement: Mit Sticky Video können Benutzer den Inhalt der Webseite gleichzeitig ansehen und lesen. Infolgedessen tendieren Menschen dazu, sich mehr mit Websites zu beschäftigen.
• Video-Abschlussrate erhöhen: Da Sticky-Videos nicht die gesamte Seite blockieren, schauen sich Kunden wahrscheinlich bis zum Ende an, anstatt sie mittendrin zu schließen. Das Festhalten Ihres Videos kann also tatsächlich die Fertigstellungszeit des Videos 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 Ihren Kunden wichtige Dinge entgehen, die Sie ihnen mitteilen möchten. Mit Videos 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 gleichzeitig Text, Animation und Stimme verwenden können, sind Sie besser gerüstet, um eine Geschichte effektiver zu erzählen.

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

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

Dies ist der einfachste Prozess, um Videos auf Ihrer WordPress-Site festzuhalten und schweben zu lassen. Führen 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 folgen zu können, benötigen Sie Folgendes:

• Elementor Und
• ElementsKit (sowohl kostenlose als auch Pro-Versionen). 

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

Sie können sich das ansehen Dokumentation 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, verwende ich die Sticky Content-Funktionen von ElementsKit. Sie müssen also das Sticky-Content-Modul aktivieren.

Navigieren Sie nun zu ElementsKit ⇒ Module ⇒ Sticky Content, anmachen die Option, und Klicken Sie auf Änderungen speichern um die gerade vorgenommenen Änderungen zu aktualisieren.

Schritt 3: Ziehen Sie das Elementor-Video-Widget per Drag & 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 das gewünschte Layout aus, indem Sie auf klicken das +-Symbol. Danach, Suchen Sie nach dem Video mitdget, ziehen Sie das Widget und fallen es dort, wo Sie es hinzufügen möchten.

Notiz: Für dieses Tutorial habe ich Die vorgefertigte Seite wurde bereits importiert Ich bearbeite, um den gesamten Prozess zu zeigen. Du kannst Erstellen Sie WordPress-Websites ganz einfach mit dem vorgefertigten ElementsKit-Bereich.

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

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

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

Notiz: Im Falle eines selbst gehosteten Videos können Sie ein Video auf Ihren Server hochladen oder ein Video bereitstellen Externe URL.

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

Schritt 5: Einstellungen, um das Elementor-Video festzuhalten

Gehe zum Registerkarte „Erweitert“. Erweitern Sie dann den ElementsKit-Sticky Möglichkeit. Hier können Sie auswählen Sticky-Typ als oberer, unterer und spaltenförmiger Typ, der beim Hochscrollen angezeigt wird.

Sobald Sie den Sticky-Typ als etwas anderes als „Keine“ ausgewählt haben, erhalten Sie die folgenden Optionen:

• Klebrig bis: Hier müssen Sie die CSS-ID des Abschnitts festlegen, bis zu dem Ihr Video hängen bleiben soll. Sie können eine festlegen Fügen Sie der Spalte eine benutzerdefinierte CSS-ID hinzu, kopieren Sie sie und fügen Sie sie in die Option „Sticky Until“ ein.

• Klebriger Offset: Legen Sie in dieser Option den Offset-Wert fest. Der Offset-Wert gibt den Abstand zwischen dem Video und der oberen Position Ihrer Seite an.

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

Sie können das ändern Klebrige Hintergrundfarbe und mache Das Video bleibt auf allen Geräten erhalten, nur auf dem Desktop oder sowohl auf dem Desktop als auch auf dem Tablet.

Schritt 6: Aktualisieren Sie, um Sticky-Videos in Elementor hinzuzufügen und die 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.

Notiz: Wenn Sie ein wollen Sticky-Video-Schaltfläche, die sich öffnet, um beim Klicken ein Video anzuzeigen dann kannst du Verwenden Sie ElementsKit Video Widget anstelle des Elementor-Video-Widgets. Sie können dem folgen Gleicher Prozess Wie oben beschrieben, um Sticky-Videos in Elementor mithilfe des ElementsKit-Video-Widgets hinzuzufügen.

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

Letzte Worte

Glückwunsch! Jetzt wissen Sie, wie Sie Sticky-Videos auf der Elementor-Site hinzufügen. Es ist viel einfacher, als es zunächst klingt, oder?

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

Dann ist die umfangreiche Sammlung von Widgets und Module von ElementsKit werden Sie noch mehr überraschen. Schauen Sie sich also unbedingt alle Funktionen an, die ElementsKit zu bieten hat.