Una delle pagine di destinazione esclusive che molti forniscono ai propri abbonati durante il periodo del Cyber Monday è la fantastica pagina di destinazione delle versioni software. Questo layout presenta fantastiche illustrazioni e un uso unico di divisori di sezione che stupiranno i lettori. Visitatori.
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 piccoli schermi. Questo è un ottimo approccio se non vuoi includere un video direttamente sulla tua pagina ma preferisci creare interazione con Visitatori.
Panoramica
Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale in diverse dimensioni dello schermo.
ufficio
Mobile
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.
Impostazioni del plugin
Continua andando alle impostazioni generali di questo plugin e attivando le due opzioni in alto.
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.
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.
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 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 una copia all'area del contenuto
Continua aggiungendo una copia appena sotto l'immagine.
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.
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
Passa il mouse sopra le impostazioni del testo
Cambia il colore del testo hover.
- Collega colore testo: # a2b0c1
spaziatura
Infine, aggiungi anche un margine superiore negativo al modulo di testo.
- Top Marign: -20vw
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.
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.
<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a> |
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.
Considerazioni finali
Come puoi vedere, aggiungere un popup su Divi utilizzando il plug-in Video Popup è abbastanza semplice. Ciò ti consentirà di presentare video su il tuo blog senza doverlo integrare automaticamente nel contenuto.
