Come creare un video promozionale appiccicoso con un interruttore Mostra/Nascondi in Divi
Pubblicato: 2020-11-25Un video promozionale è un meraviglioso strumento di marketing per promuovere i tuoi prodotti e servizi a tutti quei visitatori che preferiscono semplicemente guardare un video piuttosto che esplorare la tua pagina per ottenere informazioni. E, se sei sicuro che il tuo video contribuirà ad aumentare le conversioni, è una buona idea mantenere il video disponibile per gli utenti il più possibile. Con questo in mente, un video promozionale appiccicoso (un video che rimane fisso nella parte superiore della pagina) potrebbe essere una risorsa preziosa per il tuo sito web.
In questo tutorial, ti mostreremo come creare un video promozionale appiccicoso con un interruttore mostra/nascondi in Divi. L'idea è di mostrare la versione a grandezza naturale del video inizialmente above the fold. Quindi, mentre l'utente scorre la pagina verso il basso, il video si attacca alla parte superiore della pagina per un facile accesso e/o visualizzazione mentre l'utente esplora il resto del contenuto della pagina. Naturalmente, questo può essere un po' invadente per alcuni visitatori. Quindi ti mostreremo anche come aggiungere un pulsante di attivazione per dare agli utenti la possibilità di mostrare o nascondere il video ogni volta che lo desiderano.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Questo è il video appiccicoso senza l'interruttore.
Ecco lo stesso video appiccicoso con il pulsante di attivazione/disattivazione.
Ecco uno sguardo più da vicino alla funzionalità di attivazione/disattivazione.
Ed ecco come appare sul cellulare.
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 sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
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 della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Seleziona l'opzione "Scegli un layout predefinito".
- Carica il layout di pagina dei servizi di marketing digitale.
Come creare un video promozionale appiccicoso con un interruttore Mostra/Nascondi per la tua pagina di vendita
Aggiunta della riga per il video appiccicoso
Per iniziare, elimineremo il secondo modulo di testo nella riga della prima/parte superiore del layout.
Sotto la riga esistente della sezione superiore, aggiungi una nuova riga a una colonna.
Apri le impostazioni di riga per la nuova riga e, nella scheda Avanzate, aggiorna l'indice Z come segue:
- Indice Z: 14
Ciò assicurerà che il video che aggiungiamo alla riga rimanga sopra l'altro contenuto della pagina quando bloccato durante lo scorrimento della pagina.
Aggiunta del video
All'interno della colonna della riga, aggiungi un nuovo modulo video.
Apri le impostazioni video e carica i formati mp4 e webm per il video che preferisci.
Se lo desideri, aggiungi un'immagine sovrapposta al video.
Nella scheda Progettazione, aggiorna le seguenti opzioni di dimensionamento:
- Larghezza massima: 900 px
- Allineamento del modulo: centro
- Angoli arrotondati: 8px
- Box Shadow: vedi screenshot
Rendere la colonna appiccicosa
Apri le impostazioni per la colonna contenente il video e aggiungi la seguente Classe CSS nella scheda Avanzate:
- Classe CSS: et-sticky-video
Quindi aggiorna la posizione dello stick come segue:
- Posizione appiccicosa: bastone in alto
- Stili di transizione predefiniti e permanenti: NO
Ora che la posizione permanente è attiva, aggiungi il seguente CSS personalizzato all'elemento principale per lo stato adesivo:
width: 300px !important; right: 0px !important; left: auto !important; top: 0px;
Aggiorna la dimensione dell'icona di riproduzione video in stato appiccicoso
Quindi, apri nuovamente le impostazioni video e aggiorna la dimensione del carattere dell'icona di riproduzione nello stato appiccicoso come segue:
- Usa dimensione icona personalizzata: S
- Dimensione carattere icona di riproduzione (appiccicoso): 50 px
Risultato finora
Creazione del pulsante di attivazione/disattivazione video permanente
Per creare il pulsante di attivazione/disattivazione video permanente, crea un nuovo modulo pulsante sotto il modulo video.
Quindi sposta il pulsante sopra il modulo video.
Apri le impostazioni del pulsante e aggiorna il testo del pulsante come segue:
- Testo del pulsante: Nascondi
(NOTA: questo testo verrà sostituito/attivato con la parola "Mostra" quando si fa clic sul pulsante quando si aggiunge il codice in un secondo momento.)
Nella scheda Progettazione, aggiorna quanto segue:
- Usa stili personalizzati per il pulsante: S
- Stili di testo dei pulsanti: 14px
- Colore del testo del pulsante: #fa50a9
- Peso del carattere del pulsante: semi grassetto
- Stile carattere pulsante: TT
- Icona del pulsante: freccia destra
- Mostra solo l'icona al passaggio del mouse per il pulsante: NO
(NOTA: l'icona del pulsante scelta verrà ruotata di 180 gradi quando si fa clic sul pulsante quando si aggiunge il layout del codice per un'esperienza utente migliore e più intuitiva.
Aggiorna anche la spaziatura per il pulsante:
- Imbottitura: 0.5em in alto, 0.5em in basso, 1em a sinistra, 1.7em a destra
Nella scheda Avanzate, aggiungi la seguente Classe CSS al pulsante:
- Classe CSS: et-sticky-video-toggle
Nella scheda Avanzate, aggiorna l'opzione di posizione:
- Posizione: Assoluta
- Posizione: in basso a sinistra
Ora sposta il pulsante all'esterno della colonna/video a sinistra aggiornando l'opzione di conversione della trasformazione nello stato permanente come segue:
- Trasforma Traduci Asse X (appiccicoso): -100%
Per completare il design dell'interruttore a pulsante, dobbiamo nascondere il pulsante fino a quando non raggiunge lo stato permanente. Per fare ciò, aggiorna il CSS personalizzato all'elemento principale per il desktop e lo stato permanente come segue:
Per l'elemento principale sul desktop...
display:none !important;
Per l'elemento principale su Sticky...
display:block !important;
Aggiunta del codice personalizzato per la funzionalità Toggle
Per far funzionare l'interruttore come ci serve, dovremo aggiungere un modulo di codice sotto il modulo video.
CSS personalizzato
Nella scheda contenuto, oltre il seguente CSS personalizzato assicurandosi di racchiuderlo nei tag di stile .
.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}
JQuery personalizzato
Quindi sotto il CSS con i tag di stile, aggiungi il seguente JQuery avvolto nei tag di script .
(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');
$stickyVideoToggle.on('click',function(e) {
e.preventDefault();
$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');
$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);
Questo è tutto!
Risultato finale
Ora guarda la versione live della pagina per vedere tu stesso i risultati.
Questo è il video appiccicoso senza l'interruttore.
Ecco lo stesso video appiccicoso con il pulsante di attivazione/disattivazione.
Ecco uno sguardo più da vicino alla funzionalità di attivazione/disattivazione.
Ed ecco come appare sul cellulare.
Aggiungi facilmente moduli aggiuntivi alla colonna adesiva per complimentarmi con il video
Poiché la posizione permanente viene aggiunta alla colonna (non al video), sentiti libero di aggiungere moduli/contenuti aggiuntivi per completare il video.
Ad esempio, puoi includere un pulsante nella parte inferiore del video nella stessa colonna permanente.
Quindi rimarrà sotto il video nello stato appiccicoso della colonna.
Aggiungi facilmente le tue opzioni video personalizzate con questo layout video appiccicoso
Avere la posizione fissa applicata alla colonna (non al video) è utile anche per aggiungere incorporamenti video personalizzati o HTML (usando un modulo di testo o codice) all'interno della colonna. La funzionalità video permanente continuerà a funzionare.
Ad esempio, puoi aggiungere un video HTML5 a un modulo di codice all'interno della stessa colonna.
Cambia facilmente anche le strutture delle colonne!
Inoltre, puoi facilmente modificare la riga in qualsiasi struttura di colonne in cui desideri visualizzare il tuo video con contenuto adiacente. Ad esempio, puoi creare un layout a due colonne con il video permanente inizialmente nella colonna di destra o di sinistra. Assicurati solo che la colonna contenente il contenuto video abbia la stessa classe CSS e lo stesso stile appiccicoso come spiegato in questo tutorial. La funzionalità adesiva funzionerà allo stesso modo.
Ad esempio, utilizzando il nostro design esistente, possiamo aggiungere una nuova colonna utilizzando la vista dei livelli e riempire quella nuova colonna con il testo dell'intestazione principale.
La colonna permanente continuerà a funzionare senza problemi mentre la colonna/il contenuto adiacente rimane nel normale flusso del documento.
Problema con i video/incorporamenti di YouTube utilizzando l'opzione Divi Overlay Image
Se stai utilizzando un URL di YouTube per incorporare un video con il modulo video come in questo design, è meglio non utilizzare l'opzione dell'immagine di sovrapposizione incorporata di Divi (con l'icona di riproduzione). Ciò farà sì che l'audio del video venga riprodotto automaticamente dall'inizio nello stato permanente causando la riproduzione di audio duplicato a intervalli diversi. Quindi, se desideri utilizzare l'immagine sovrapposta di Divi e l'icona di riproduzione con il modulo video Divi, dovresti invece aggiungere i file/URL video mp4 e WebM.
Pensieri finali
La creazione di un video promozionale permanente con un interruttore mostra/nascondi per la tua pagina apre le porte a nuovi modi per promuovere i tuoi prodotti e servizi. Non solo puoi mantenere quei video ad alta conversione in prima linea, ma puoi anche includere facilmente informazioni complementari o CTA sopra o sotto il video semplicemente aggiungendolo alla stessa colonna in Divi.
In effetti, non devi nemmeno includere un video, basta riempire la colonna adesiva con tutte le informazioni che desideri incollare nella parte superiore della pagina durante lo scorrimento!
Non vedo l'ora di sentirti nei commenti.
Saluti!