Come mostrare/nascondere un dispositivo di scorrimento video in base allo stato di accesso con Divi
Pubblicato: 2022-03-05I video slider sono ottimi per mostrare una raccolta di video per un corso, una pagina di ricette o tutorial. Sono anche un buon candidato per mostrare contenuti premium per membri o abbonati al tuo sito. Ad esempio, un visitatore può atterrare su una pagina di una ricetta e vedere solo le istruzioni solo in formato testo. Tuttavia, una volta diventati utenti registrati, vedrebbero un dispositivo di scorrimento video sulla stessa pagina dei contenuti premium. In questo tutorial, ti mostreremo quanto è facile nascondere/mostrare un dispositivo di scorrimento video in base allo stato di accesso con Divi. Ciò ti consente di fornire contenuti video agli utenti che hanno effettuato l'accesso come funzionalità premium.
Immergiamoci!
Sbirciata
Ecco una rapida occhiata al design che creeremo in questo tutorial. Nota come il dispositivo di scorrimento del video è nascosto agli utenti finché non effettuano l'accesso utilizzando il modulo di accesso.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua Libreria Divi, vai alla Libreria Divi.
Fare clic sul pulsante Importa.
Nel popup di portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.
Veniamo al tutorial, vero?
Mostrare/nascondere un dispositivo di scorrimento video in base allo stato di accesso con Divi
Crea una nuova pagina con un layout predefinito
Iniziamo con il nostro tutorial mettendo in funzione una nuova pagina con uno dei nostri layout predefiniti.
Ecco come farlo:
- Crea una nuova pagina e assegnagli un titolo
- Fare clic per utilizzare Divi Builder (sul front-end)
- Selezionare per utilizzare un layout predefinito
- Cerca e seleziona il layout della pagina della ricetta del dietista.
- Per caricare il layout nella pagina, fai semplicemente clic sul pulsante "Usa questo layout".
Una volta che il layout è stato caricato nella pagina, sei pronto per aggiungere il dispositivo di scorrimento video appiccicoso alla pagina.
Aggiunta del dispositivo di scorrimento video alla pagina
Nella pagina della ricetta, vedrai un video a tutta larghezza in una riga appena sotto la riga con gli ingredienti e le istruzioni. Sostituiremo il video con un modulo di scorrimento video. Per fare ciò, elimina il modulo video.
Quindi aggiungi un nuovo modulo di scorrimento video al suo posto.
Aggiunta di video allo slider
Per aggiungere video al dispositivo di scorrimento, apri le impostazioni del dispositivo di scorrimento video. Nella scheda contenuto, vedrai un video fittizio già in atto. Apri le impostazioni per il video esistente.
Quindi, elimina il video predefinito e fai clic sull'icona Aggiungi video per aggiungere un nuovo video al dispositivo di scorrimento.
Per questo esempio, sto aggiungendo un video self-hosted. È sempre una buona idea caricare una versione MP4 e una versione Webm del file video.
Successivamente, possiamo aggiungere una sovrapposizione di immagini al video.
Al termine, salva le modifiche.
Per creare video aggiuntivi, torna alle impostazioni del dispositivo di scorrimento video e duplica il video esistente 3 volte per ottenere un totale di 4 video. Quindi, sotto l'opzione di sovrapposizione, attiva SÌ per mostrare le sovrapposizioni di immagini sul video principale.
Aggiunta dell'opzione di visualizzazione condizionale
Per questo tutorial, mostreremo questo dispositivo di scorrimento video solo agli utenti che hanno effettuato l'accesso. Per fare ciò, vai alla scheda Avanzate e fai clic per aggiungere una nuova condizione nel gruppo di opzioni delle condizioni.
Nel menu a discesa delle condizioni di visualizzazione, selezionare Stato accesso dall'elenco. Assicurati di selezionare per visualizzare solo se l'utente ha effettuato l'accesso . Quindi salva le modifiche.
Suggerimento bonus: crea un CTA o un modulo di accesso per gli utenti che non hanno effettuato l'accesso
Per i nuovi visitatori, probabilmente vorrai creare una sorta di CTA per la registrazione o un modulo di accesso per consentire ai membri di accedere facilmente e vedere i video. Per fare ciò puoi creare una nuova riga a due colonne con un'immagine che assomiglia a un video nella colonna di sinistra e un modulo di accesso nella colonna di destra come nello screenshot qui sotto.
Quindi apri le impostazioni della riga e aggiungi una condizione di visualizzazione basata sullo stato di accesso. Solo questa volta, selezionare per visualizzare solo se l' utente è disconnesso . Questo mostrerà il contenuto agli utenti solo se sono disconnessi.
Quando aggiungi il modulo di accesso, assicurati di aggiornare l'opzione di reindirizzamento per reindirizzare alla pagina corrente . Ciò migliorerà l'esperienza utente per gli utenti che desiderano accedere e visualizzare i video sulla stessa pagina.
Per sapere come creare da zero una sezione CTA per utenti disconnessi, dai un'occhiata al nostro post su come creare post di blog esclusivi per i membri con le opzioni delle condizioni di Divi.
Risultati finali
Ecco uno sguardo ai nostri cursori video finali. Nota come vengono nascosti agli utenti fino a quando non effettuano l'accesso utilizzando il modulo di accesso.
Il problema con i video/incorporamenti di YouTube che utilizzano le sovrapposizioni di immagini sul video principale
Se stai utilizzando un URL di YouTube per incorporare più video nel dispositivo di scorrimento del video, è meglio non utilizzare l'opzione integrata di Divi per "Mostra sovrapposizioni di immagini sul video principale". Ciò farà sì che l'audio del video venga riprodotto automaticamente dall'inizio nello stato permanente, causando la riproduzione dell'audio duplicato a intervalli diversi.
Questo non è il caso dei video self-hosted in formato file mp4 o webm. Puoi mostrare sovrapposizioni di immagini sul video principale per i video ospitati autonomamente. Quindi, se desideri utilizzare l'immagine sovrapposta di Divi e l'icona di riproduzione con il modulo video Divi, dovresti invece aggiungere file/URL video MP4 e Webm.
Detto questo, puoi comunque aggiungere sovrapposizioni di immagini personalizzate ai tuoi video di Youtube nel dispositivo di scorrimento del video. Verranno comunque visualizzati sui controlli delle miniature sotto il video principale.
Pensieri finali
Avere la possibilità di mostrare/nascondere i video slider in base allo stato di accesso può tornare utile quando si desidera offrire contenuti premium a membri o abbonati.
Per ulteriori informazioni, dai un'occhiata a un post simile su come creare post di blog esclusivi per i membri con le opzioni delle condizioni di Divi.
Non vedo l'ora di sentirti nei commenti.
Saluti!