So zeigen/verbergen Sie einen Video-Slider basierend auf dem Anmeldestatus mit Divi
Veröffentlicht: 2022-03-05Video-Slider eignen sich hervorragend, um eine Sammlung von Videos für einen Kurs, eine Rezeptseite oder Tutorials zu präsentieren. Sie sind auch ein guter Kandidat, um Premium-Inhalte für Mitglieder oder Abonnenten Ihrer Website zu präsentieren. Beispielsweise könnte ein Besucher auf einer Rezeptseite landen und nur Anweisungen im Textformat sehen. Sobald sie jedoch ein registrierter Benutzer werden, sehen sie einen Video-Slider auf derselben Seite als Premium-Inhalt. In diesem Tutorial zeigen wir Ihnen, wie einfach es ist, einen Video-Slider basierend auf dem eingeloggten Status mit Divi auszublenden/anzuzeigen. Auf diese Weise können Sie eingeloggten Benutzern Videoinhalte als Premium-Funktion zur Verfügung stellen.
Tauchen wir ein!
Vorgeschmack
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden. Beachten Sie, dass der Video-Slider vor Benutzern verborgen ist, bis sie sich über das Anmeldeformular anmelden.
Laden Sie das Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.
Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!
Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.
Klicken Sie auf die Schaltfläche Importieren.
Wählen Sie im Portabilitäts-Popup die Registerkarte „Importieren“ und wählen Sie die Download-Datei von Ihrem Computer aus.
Klicken Sie dann auf die Importschaltfläche.
Anschließend ist das Abschnittslayout in Divi Builder verfügbar.
Kommen wir zum Tutorial, sollen wir?
Ein-/Ausblenden eines Video-Schiebereglers basierend auf dem eingeloggten Status mit Divi
Erstellen Sie eine neue Seite mit einem vorgefertigten Layout
Beginnen wir mit unserem Tutorial, indem wir eine neue Seite mit einem unserer vorgefertigten Layouts zum Laufen bringen.
So geht's:
- Erstellen Sie eine neue Seite und geben Sie ihr einen Titel
- Klicken Sie hier, um den Divi Builder (am Frontend) zu verwenden
- Wählen Sie diese Option, um ein vorgefertigtes Layout zu verwenden
- Suchen Sie nach dem Rezeptseitenlayout für Ernährungsberater und wählen Sie es aus.
- Um das Layout auf die Seite zu laden, klicken Sie einfach auf die Schaltfläche „Dieses Layout verwenden“.
Sobald das Layout auf die Seite geladen wurde, können Sie den Sticky-Video-Slider zur Seite hinzufügen.
Hinzufügen des Video-Schiebereglers zur Seite
Auf der Rezeptseite sehen Sie ein Video in voller Breite in einer Reihe direkt unter der Reihe mit den Zutaten und Anweisungen. Wir werden das Video durch ein Video-Slider-Modul ersetzen. Löschen Sie dazu das Videomodul.
Fügen Sie dann an seiner Stelle ein neues Video-Slider-Modul hinzu.
Hinzufügen von Videos zum Slider
Um Videos zum Slider hinzuzufügen, öffnen Sie die Video-Slider-Einstellungen. Unter der Registerkarte „Inhalt“ sehen Sie bereits ein Mock-Video. Öffnen Sie die Einstellungen für das vorhandene Video.
Löschen Sie als Nächstes das Standardvideo und klicken Sie auf das Symbol Video hinzufügen, um dem Schieberegler ein neues Video hinzuzufügen.
Für dieses Beispiel füge ich ein selbst gehostetes Video hinzu. Es ist immer eine gute Idee, eine MP4- und eine Webm-Version der Videodatei hochzuladen.
Als Nächstes können wir dem Video eine Bildüberlagerung hinzufügen.
Wenn Sie fertig sind, speichern Sie die Änderungen.
Um zusätzliche Videos zu erstellen, gehen Sie zurück zu den Video-Slider-Einstellungen und duplizieren Sie das vorhandene Video dreimal, um insgesamt 4 Videos zu erhalten. Schalten Sie dann unter der Überlagerungsoption auf JA um, um Bildüberlagerungen auf dem Hauptvideo anzuzeigen.
Hinzufügen der bedingten Anzeigeoption
Für dieses Tutorial zeigen wir diesen Video-Slider nur angemeldeten Benutzern. Gehen Sie dazu auf die Registerkarte „Erweitert“ und klicken Sie auf , um eine neue Bedingung in der Optionsgruppe „Bedingungen“ hinzuzufügen.
Wählen Sie im Dropdown-Menü Anzeigebedingungen die Option Angemeldeter Status aus der Liste aus. Stellen Sie sicher, dass Sie nur anzeigen, wenn der Benutzer angemeldet ist . Speichern Sie dann die Änderungen.
Bonus-Tipp: Erstellen Sie einen CTA oder ein Anmeldeformular für Benutzer, die nicht angemeldet sind
Für neue Besucher möchten Sie wahrscheinlich eine Art CTA zur Registrierung oder ein Anmeldeformular erstellen, um es den Mitgliedern zu erleichtern, sich anzumelden und die Videos anzusehen. Dazu können Sie eine neue zweispaltige Zeile mit einem Bild, das wie ein Video aussieht, in der linken Spalte und einem Anmeldeformular in der rechten Spalte erstellen, wie im folgenden Screenshot.
Öffnen Sie dann die Zeileneinstellungen und fügen Sie eine Anzeigebedingung basierend auf dem Anmeldestatus hinzu. Nur diesmal auswählen, um nur anzuzeigen, wenn der Benutzer abgemeldet ist . Dadurch wird der Inhalt Benutzern nur angezeigt, wenn sie abgemeldet sind.
Stellen Sie beim Hinzufügen des Anmeldeformulars sicher, dass Sie die Umleitungsoption aktualisieren, um auf die aktuelle Seite umzuleiten . Dies verbessert die UX für Benutzer, die sich anmelden und die Videos auf derselben Seite ansehen möchten.
Um zu erfahren, wie Sie einen CTA-Bereich für abgemeldete Benutzer von Grund auf neu erstellen, lesen Sie unseren Beitrag zum Erstellen exklusiver Blog-Beiträge für Mitglieder mit den Bedingungsoptionen von Divi.
Endgültige Ergebnisse
Hier ist ein Blick auf unsere endgültigen Video-Slider. Beachten Sie, wie sie vor Benutzern verborgen bleiben, bis sie sich über das Anmeldeformular anmelden.
Das Problem mit YouTube-Videos/Einbettungen unter Verwendung der Bildüberlagerungen im Hauptvideo
Wenn Sie eine YouTube-URL verwenden, um mehrere Videos in den Video-Slider einzubetten, ist es am besten, die integrierte Option von Divi zum „Anzeigen von Bildüberlagerungen im Hauptvideo“ nicht zu verwenden. Dadurch wird das Video-Audio von Anfang an im Sticky-Zustand automatisch abgespielt, wodurch doppeltes Audio in unterschiedlichen Intervallen abgespielt wird.
Dies gilt nicht für selbst gehostete Videos im mp4- oder webm-Dateiformat. Sie können Bildüberlagerungen auf dem Hauptvideo für selbst gehostete Videos anzeigen. Wenn Sie also das Overlay-Bild und das Wiedergabesymbol von Divi mit dem Divi-Videomodul verwenden möchten, sollten Sie stattdessen MP4- und Webm-Videodateien/URLs hinzufügen.
Sie können Ihren Youtube-Videos im Video-Slider jedoch weiterhin benutzerdefinierte Bildüberlagerungen hinzufügen. Sie werden weiterhin in den Thumbnail-Steuerelementen unter dem Hauptvideo angezeigt.
Abschließende Gedanken
Die Möglichkeit, Video-Slider basierend auf dem eingeloggten Status ein-/auszublenden, kann sich als nützlich erweisen, wenn Sie Mitgliedern oder Abonnenten Premium-Inhalte anbieten möchten.
Weitere Informationen finden Sie in einem ähnlichen Beitrag zum Erstellen exklusiver Blog-Beiträge für Mitglieder mit den Bedingungsoptionen von Divi.
Ich freue mich darauf, von dir in den Kommentaren zu hören.
Beifall!