Una dintre paginile de destinație exclusive pe care mulți le oferă abonaților lor în perioada Cyber ​​​​Monday este minunata pagină de destinație a lansărilor de software. Acest aspect prezintă ilustrații grozave și o utilizare unică a separatoarelor de secțiuni care vor uimi cititorii. vizitatori.

cyber monday.jpg

Cum să obțineți pagina de destinație a lansării software exclusiv pentru Cyber ​​Monday

Înainte de a intra în această utilizare, ar trebui să vă familiarizați cu pagina de destinație exclusivă Cyber ​​Monday, pe care o puteți obține devenind un nou membru Elegant Themes, actualizând contul dvs. existent sau fiind deja membru pe viață. cu noi. Dacă sunteți deja membru pe viață, vă puteți conecta în zona noastră de membri și puteți descărca toate paginile noastre exclusive aici. Toți ceilalți utilizatori vor trebui să utilizeze butonul de mai jos pentru a achiziționa sau actualiza înainte de a putea finaliza restul tutorialului nostru.

Ești deja membru al vieții? Puteți descărca pachetul acum, nu este nevoie să participați la oferta Cyber ​​Monday!

Cum de a crea un video demo contextual pe Divi

După ce ați descărcat noua pagină de destinație a versiunii de software din zona noastră, puteți continua să citiți următoarele.

În cazul de utilizare al acestui tutorial, vă vom arăta cum să creați un demo video cu un clic pe un buton. Videoclipul care apare la clic va arăta grozav pe desktop și pe ecranele mici. Aceasta este o abordare excelentă dacă nu doriți să includeți un videoclip direct pe pagina dvs., dar preferați să creați interacțiune cu vizitatori.

studiu

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului final în diferite dimensiuni de ecran.

Birou

rezultat final divi video popup.gif

Mobil

rezultat video popup video divi.gif

Să începem!

Utilizați pluginul gratuit pentru Popup Video

Instalați și activați pluginul

Primul lucru de făcut este să descărcați conecteaza gratuit Videoclipul PopUp . Puteți găsi acest plugin mergând la site-ul web WordPress > Plugin-uri > Adăugați nou > Căutați „Video PopUp”. După ce găsiți acest plugin, instalați-l. După ce ați terminat, asigurați-vă că activați pluginul.

video popup.jpg

Setări plugin

Continuați accesând setările generale ale acestui plugin și activând cele două opțiuni din partea de sus.

configurare video popup.jpg

Adăugați o pagină nouă folosind pagina de destinație a versiunii software

Adăugați o pagină nouă și activați utilizarea Visual Builder

Este timpul să începem să punem lucrurile în practică! Adăugați o pagină nouă, dați un titlu paginii dvs. și activați imediat Visual Builder.

creați o nouă pagină divi.jpg

Descărcați un aspect de versiune software din layout-urile salvate

Accesați „Aspectele dvs. salvate” și descărcați pagina de destinație pe care ați încărcat-o.

aspect încărcat divi.jpg

Adăugați un modul de text sub modulul Blurb al butonului de redare

După cum puteți vedea, pagina are deja un buton de redare care ne va ajuta să obținem rezultatul dorit. Dar pentru ca acest lucru să funcționeze, trebuie să recreăm designul în modulul Blurb folosind un modul text. Adăugați un nou modul de text chiar sub modulul Blurb.

adăugați un text deasupra modulului blurb.jpg

Adăugați o imagine în zona de conținut

După ce ați adăugat modulul de text, continuați și adăugați imaginea butonului de redare în zona de conținut a modulului dvs. de text, făcând clic pe „ Adăugați un media Și selectarea butonului de redare din media media.

Adăugați un material media pentru a împrăștia divi.jpg

alege o imagine divi.jpg

Adăugați o copie în zona de conținut

Continuați adăugând o copie chiar sub imagine.

duplicat modul blurb.jpg

Setări text

Pentru a face modulul să se potrivească cu aspectul, vom activa orientarea centrală a textului în setările textului modulului.

activați orientarea centrală.jpg

Setări implicite ale textului legăturii

Și vom modifica, de asemenea, parametrii textului de legătură în consecință:

  • Link Font: Cabină
  • Greutatea caracterelor de legătură: bold
  • Culoare text text: rgba (162,176,193,0.7)
  • Dimensiunea textului de legătură: 17px
  • Înălțimea liniei de legătură: 1.6em

design meniu link divi.jpg

Treceți peste setările textului

Modificați culoarea textului hover.

  • Culoarea textului de legătură: # a2b0c1

modificați culoarea linkului divi.jpg

spaţierea

În sfârșit, adăugați, de asemenea, o marjă superioară negativă la modulul text.

  • Top Marign: -20vw

setați o marjă de sus divi.jpg

Adăugați o citire contextuală la conținutul modulului de text

Treceți la editorul de text

Pentru a crea fereastra pop-up pe clic, va trebui să adăugăm un link personalizat la conținutul modulului text. Reveniți la zona de conținut a modulului text și selectați modul Editor text.

editați modulul de text în modul editor de text divi.jpg

Adăugați un link la tot conținutul

Conectați spotul de conținut la fereastra pop-up adăugând un link la imagine și la copie. Asigurați-vă că înlocuiți adresa URL a linkului cu a dvs.

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

adăugați o legătură într-o imagine cu un videoclip divi.jpg

Scoateți modul Blurb din butonul de redare

Acum că am creat un mod text care arată exact la fel ca Blurb mod, putem elimina Blurb mod care a existat înainte și atât! Puteți aplica această metodă oricărui tip de aspect pe care îl utilizați, dar este într-adevăr o mare valoare adăugată pentru pagina de destinație a versiunii software.

ștergeți modulul blurb nefolosit divi.jpg

Ultimele gânduri

După cum puteți vedea, adăugarea unui pop-up pe Divi folosind plugin-ul Video Popup este destul de simplă. Acest lucru vă va permite să prezentați videoclipuri blogul tău fără a fi nevoie automat să-l integreze în conținut.