Vai al contenuto principale

Come creare un video dimostrativo contestuale su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Una delle pagine di destinazione esclusive che molti forniscono ai propri abbonati durante il periodo del Cyber ​​Monday è la fantastica pagina di destinazione del rilascio del software. Questo layout presenta grandi opere d'arte e un uso unico di divisori di sezione che stupiranno i visitatori.

cyber monday.jpg

Come ottenere la pagina di destinazione della versione software esclusiva per Cyber ​​Monday

Prima di iniziare questo utilizzo, dovresti familiarizzare con l'esclusiva pagina di destinazione del Cyber ​​Monday che puoi ottenere diventando un nuovo membro di Elegant Themes, aggiornando il tuo account esistente o essendo già un membro a vita. con noi. Se sei già un membro a vita, puoi accedere alla nostra area membri e scaricare tutte le nostre pagine esclusive qui. Tutti gli altri utenti dovranno utilizzare il pulsante in basso per acquistare o aggiornare prima di poter completare il resto del nostro tutorial.

Già un membro a vita? Puoi scaricare il pacchetto ora, non è necessario partecipare all'affare del Cyber ​​Monday!

Come creare un video dimostrativo contestuale su Divi

Dopo aver scaricato la nuova pagina di destinazione della versione del software dalla nostra area membri, puoi continuare a leggere quanto segue.

Nel caso d'uso di questo tutorial, ti mostreremo come creare una demo video con il clic di un pulsante. Il video che appare al clic avrà un bell'aspetto su desktop e schermi piccoli. Questo è un ottimo approccio se non desideri includere video direttamente sulla tua pagina ma preferisci creare interazione con i visitatori.

Panoramica

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale in diverse dimensioni dello schermo.

ufficio

risultato finale divi video popup.gif

Mobile

risultato video mobile popup divi.gif

Cominciamo!

Utilizza il plug-in Video gratuito

Installa e attiva il plugin

La prima cosa da fare è scaricare il plug-in gratis popup video . Puoi trovare questo plugin andando al tuo Sito Web WordPress> Plugin> Aggiungi nuovo> Cerca "Video PopUp". Una volta trovato questo plugin, installalo. Al termine, assicurati di attivare il plug-in.

video popup.jpg

Impostazioni del plugin

Continua andando alle impostazioni generali di questo plugin e attivando le due opzioni in alto.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

configurazione video popup.jpg

Aggiungi una nuova pagina utilizzando la pagina di destinazione della versione del software

Aggiungi una nuova pagina e abilita l'uso del Visual Builder

È ora di iniziare a mettere le cose in pratica! Aggiungi una nuova pagina, dai un titolo alla tua pagina e attiva immediatamente Visual Builder.

crea una nuova pagina divi.jpg

Scarica un layout di versione del software dai layout salvati

Vai a "I tuoi layout salvati" e scarica la pagina di destinazione che hai caricato.

layout caricato divi.jpg

Aggiungi un modulo di testo sotto il modulo Blurb del pulsante di riproduzione

Come puoi vedere, la pagina ha già un pulsante di riproduzione che ci aiuterà a ottenere il risultato desiderato. Ma affinché funzioni, dobbiamo ricreare il design nel modulo Blurb utilizzando un modulo di testo. Aggiungi un nuovo modulo di testo appena sotto il modulo Blurb.

aggiungi del testo sopra il modulo blurb.jpg

Aggiungi un'immagine all'area del contenuto

Dopo aver aggiunto il modulo di testo, vai avanti e aggiungi l'immagine del pulsante di riproduzione all'area dei contenuti del modulo di testo facendo clic su " Aggiungi un media E selezionando il pulsante di riproduzione nella libreria multimediale.

Aggiungi un media a blurb divi.jpg

scegli una foto divi.jpg

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Aggiungi una copia all'area del contenuto

Continua aggiungendo una copia appena sotto l'immagine.

duplicare il modulo blurb.jpg

Impostazioni del testo

Per fare in modo che il modulo corrisponda al layout, abiliteremo l'orientamento del testo centrale nelle impostazioni del testo del modulo.

attivare l'orientamento centrale.jpg

Impostazioni di testo del collegamento predefinito

E modificheremo di conseguenza anche i parametri del testo del link:

  • Link Font: Cabin
  • Collega il peso del font: grassetto
  • Colore testo link: rgba (162,176,193,0.7)
  • Dimensione del testo del collegamento: 17px
  • Altezza della linea di collegamento: 1.6em

menu design link divi.jpg

Passa il mouse sopra le impostazioni del testo

Cambia il colore del testo hover.

  • Collega colore testo: # a2b0c1

cambia il colore del collegamento divi.jpg

spaziatura

Infine, aggiungi anche un margine superiore negativo al modulo di testo.

  • Top Marign: -20vw

imposta un margine superiore divi.jpg

Aggiungi una lettura contestuale ai contenuti del modulo di testo

Passa all'editor di testo

Per creare il pop-up al clic, dovremo aggiungere un collegamento personalizzato al contenuto del modulo di testo. Tornare all'area del contenuto del modulo di testo e selezionare la modalità Editor di testo.

modifica il modulo di testo in modalità editor di testo divi.jpg

Aggiungi un collegamento a tutto il contenuto

Collega la tua posizione di contenuto al pop-up aggiungendo un link all'immagine e alla copia. Assicurati di sostituire l'URL del collegamento con il tuo.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

aggiungi un link un'immagine con un video divi.jpg

Rimuovi il modulo Blurb dal pulsante di riproduzione

Ora che abbiamo creato un mod di testo che sembra esattamente lo stesso del mod Blurb, possiamo rimuovere il mod Blurb che esisteva prima e basta! Puoi applicare questo metodo a qualsiasi tipo di layout che utilizzi, ma è davvero un grande valore aggiunto per la pagina di destinazione della versione del software.

elimina il modulo blurb inutilizzato divi.jpg

Considerazioni finali

Come puoi vedere, l'aggiunta di un popup su Divi utilizzando il plug-in Video Popup è abbastanza semplice. Ciò ti consentirà di presentare video sul tuo blog senza bisogno di incorporarli automaticamente nel contenuto.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
5 azioni
quota4
Tweet
Enregistrer1