Come ricreare la procedura dettagliata di Click Video di ET con Divi

La condivisione di anteprime video sul tuo sito Web può aumentare l'interattività e aiutare i visitatori a comprendere meglio e più rapidamente i tuoi prodotti e/o servizi. Ora, sul sito Web di Elegant Themes, abbiamo adottato questo approccio per noi stessi e abbiamo creato un semplice design di guida video con clic che consente alle persone di navigare attraverso alcune delle nostre funzionalità più popolari. Abbiamo ricreato questo design all'interno di Divi e oggi ti mostreremo come ricrearlo da zero. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout della procedura dettagliata di Click Video

Per mettere le mani sul layout del video walkthrough gratuito, dovrai prima scaricarlo utilizzando il pulsante qui sotto. 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 i file

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.

SCARICA

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!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare!

Aggiungi nuova sezione regolare

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e applica le seguenti impostazioni di dimensionamento:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 85vw (desktop), 90% (tablet e telefono)
• Larghezza massima: 100%

Impostazioni colonna 1

Successivamente apri le impostazioni della colonna 1.

Spaziatura

Vai alle impostazioni di spaziatura e aggiungi un po' di imbottitura superiore sul desktop.

• Imbottitura superiore: 5vw (desktop), 0vw (tablet e telefono)

Classe CSS

Passa alla scheda Avanzate e aggiungi una classe CSS. Più avanti nel post, useremo questa classe CSS per creare un effetto griglia su tablet e dispositivi mobili.

• Classe CSS: item-responsive-grid

Aggiungi modulo Blurb alla colonna 1

Aggiungi titolo

Iniziamo ad aggiungere moduli! Per ogni elemento cliccabile, utilizzeremo un modulo Blurb. Inizieremo con il primo e lo riutilizzeremo per gli elementi clic rimanenti. Aggiungi un nuovo modulo Blurb alla colonna 1 e inserisci un titolo a tua scelta.

Seleziona icona

Seleziona un'icona successiva.

Impostazioni predefinite dell'icona

Passa al design e modifica le impostazioni dell'icona di conseguenza:

• Colore icona: #e8e9ea
• Posizionamento dell'icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 2vw (desktop), 4.5vw (tablet), 7vw (telefono)

Impostazioni dell'icona al passaggio del mouse

Modifica il colore dell'icona al passaggio del mouse.

• Colore icona: #b0c8ff

Impostazioni del testo del titolo

Passa alle impostazioni del testo del titolo e apporta alcune modifiche anche lì.

• Carattere del titolo: Lato
• Peso del carattere del titolo: grassetto
• Stile carattere del titolo: maiuscolo
• Dimensione del testo del titolo: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
• Altezza della riga del titolo: 2vw (desktop), 4.5vw (tablet), 7vw (telefono)

Spaziatura predefinita

Daremo forma al modulo Blurb utilizzando alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 0,5 vw (desktop), 1,5 vw (tablet e telefono)
• Imbottitura sinistra: 1.2vw (desktop e tablet), 5vw (telefono)
• Imbottitura destra: 1.2vw (desktop e tablet), 5vw (telefono)

Spaziatura al passaggio del mouse

Crea un effetto di evidenziazione al passaggio del mouse modificando i valori dei margini al passaggio del mouse.

• Margine sinistro: -0.5vw
• Margine destro: -0,5 vw

Frontiera

Aggiungi anche alcuni angoli arrotondati.

Ombra casella predefinita

Insieme a un'ombra sottile della scatola.

• Posizione verticale dell'ombra del riquadro: 10 px
• Intensità della sfocatura dell'ombra della scatola: 70 px
• Colore ombra: rgba(0,0,0,0.11)

Ombra del riquadro al passaggio del mouse

Cambia il colore dell'ombra della casella al passaggio del mouse.

• Colore ombra: rgba (103,151,255,0.22)

ID e classe CSS

Ultimo ma non meno importante, vai alla scheda Avanzate del Modulo Blurb e aggiungi un ID CSS e una classe.

• ID CSS: video-walkthrough-item-1
• Classe CSS: cursore-elemento video

Clona modulo Blurb tre volte

Una volta completato il primo modulo Blurb, puoi clonarlo tre volte.

Modifica contenuto

Modifica il contenuto di ogni modulo Blurb duplicato.

Modifica tutti gli ID CSS duplicati del modulo Blurb

Insieme agli ID CSS.

• 1) Costruisci visivamente: video-walkthrough-item-1
• 2) Effetti: video-walkthrough-item-2
• 3) Divisori di forma: video-procedura-elemento-3
• 4) Modifica in blocco: video-walkthrough-item-4

Riutilizza colonna 1

Rimuovi colonna 3

Una volta completata la prima colonna, puoi aprire le impostazioni della riga e rimuovere la terza colonna.

Clona colonna 1 e posiziona in basso

Clona la prima colonna (contenente i moduli Blurb) e posiziona la colonna duplicata in basso.

Modifica la struttura della colonna posteriore

Riportare la struttura della colonna a quella selezionata all'inizio di questo tutorial.

Cambia tutto il contenuto del modulo Blurb della colonna 3

Modifica il titolo del modulo Blurb di ogni duplicato nella colonna 3.

Cambia tutti gli ID CSS del modulo Blurb della colonna 3

Insieme agli ID CSS.

• 5) Libreria layout: video-walkthrough-item-5
• 6) Trasforma: video-guida-item-6
• 7) Stati al passaggio del mouse: video-walkthrough-item-7
• 8) Trova e sostituisci: video-guida-item-8

Aggiungi modulo di testo alla colonna 2

Lascia la casella del contenuto vuota

È ora di iniziare ad aggiungere le diverse anteprime video! Ci sono due modi per affrontarlo; utilizzando un modulo video o un modulo di testo. Il modulo video richiede ai visitatori di premere play. Utilizzando un modulo di testo con uno sfondo video, invece, il video viene riprodotto automaticamente ma senza audio. Per questo tutorial, utilizzeremo un modulo di testo, ma sentiti libero di utilizzare invece un modulo video. Assicurati che la casella del contenuto del modulo di testo rimanga vuota.

Sfondo video

Vai alle impostazioni dello sfondo e carica un video a tua scelta.

• Metti in pausa il video mentre non è in visualizzazione: Sì

Dimensionamento

Passa alla scheda Design e aggiungi '100%' alla larghezza.

• Larghezza: 100%

Spaziatura

Successivamente, consentiremo la visualizzazione dello sfondo del video aggiungendo alcuni valori di riempimento superiore e inferiore personalizzati su diverse dimensioni dello schermo. Nota: i valori che aggiungi devono essere adattati al set di dimensioni del tuo video.

• Imbottitura superiore: 15vw (desktop), 24vw (tablet), 26vw (telefono)
• Imbottitura inferiore: 15vw (desktop), 24vw (tablet), 26vw (telefono)

Frontiera

Continua aggiungendo "10px" a ciascuno degli angoli.

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 30 px
• Forza di diffusione dell'ombra della scatola: -5px
• Colore ombra: rgba(0,0,0,0.11)

ID CSS

Ultimo ma non meno importante, aggiungi un ID CSS.

• ID CSS: video-guida-1

Clona modulo di testo 7 volte

Una volta terminato il modulo di testo, puoi clonarlo sette volte (una per ogni modulo Blurb).

Cambia tutti gli sfondi video del modulo di testo duplicato

Carica uno sfondo video diverso per ciascuno dei duplicati.

Modifica tutti gli ID CSS dei moduli di testo duplicati e aggiungi la classe CSS a tutti i moduli di testo duplicati

Modifica anche gli ID CSS. Assicurati di collegare ciascun modulo di testo al modulo Blurb corretto utilizzando lo stesso numero alla fine dell'ID CSS. Nascondiamo anche ogni modulo di testo, oltre al modulo di testo originale, utilizzando una classe CSS.

• Modulo di testo 1: video-guida-1
• Modulo di testo 2: video-guida-2
• Modulo di testo 3: video-guida-3
• Modulo di testo 4: video-guida-4
• Modulo di testo 5: video-guida-5
• Modulo di testo 6: video-guida-6
• Modulo di testo 7: video-guida-7
• Modulo di testo 8: video-guida-8
• Classe CSS: video-not-first

Aggiungi il modulo di codice n. 1 alla colonna 1

Una volta completata la seconda riga, è il momento di iniziare ad aggiungere il codice. Per far funzionare la funzione clic, utilizzeremo del codice CSS e JQuery. Metteremo il codice in due Moduli Codice separati. Inizia aggiungendo il primo modulo di codice alla colonna 1.

Inserisci il codice CSS della pagina

Aggiungi le seguenti righe di codice CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Aggiungi il modulo codice n. 2 alla colonna 3

Continua aggiungendo un altro modulo di codice alla terza colonna.

Inserisci codice JQuery funzione clic

Inserisci le seguenti righe di codice JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Una volta completato questo passaggio, puoi salvare la tua pagina ed uscire da Visual Builder!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come ricreare il video walkthrough di Elegant Themes con Divi. Ti abbiamo fornito anche il download gratuito di JSON! Sentiti libero di usare questo design per qualsiasi tipo di sito web che crei. È un ottimo modo per mostrare i video e attirare l'attenzione dei visitatori. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.