Jedną z ekskluzywnych stron docelowych, które wielu udostępnia swoim subskrybentom w okresie Cyber ​​​​poniedziałku, jest niesamowita strona docelowa wydań oprogramowania. Ten układ zawiera wspaniałe ilustracje i wyjątkowe zastosowanie przegródek, które zachwycą czytelników. odwiedzający.

cyber poniedziałek.jpg

Jak uzyskać wyłączną stronę docelową wydania oprogramowania dla Cybernetycznego poniedziałku

Zanim zaczniesz korzystać z tej funkcji, powinieneś zapoznać się z ekskluzywną stroną docelową Cyberponiedziałku, którą możesz uzyskać, zostając nowym członkiem Elegant Themes, ulepszając istniejące konto lub będąc członkiem dożywotnim. z nami. Jeśli jesteś już członkiem dożywotnim, możesz zalogować się do naszego obszaru członkowskiego i pobrać wszystkie nasze ekskluzywne strony tutaj. Wszyscy pozostali użytkownicy będą musieli użyć poniższego przycisku, aby dokonać zakupu lub uaktualnienia, zanim będą mogli ukończyć resztę naszego samouczka.

Jesteś już członkiem życia? Możesz pobrać pakiet już teraz, nie musisz brać udziału w promocji w Cyberponiedziałek!

Jak utworzyć kontekstowe wideo demonstracyjne na Divi

Po pobraniu nowej strony docelowej nowej wersji oprogramowania z naszego obszaru dla członków możesz kontynuować czytanie poniższych.

W przypadku użycia tego samouczka pokażemy, jak utworzyć demo wideo za pomocą kliknięcia przycisku. Film, który pojawia się po kliknięciu, będzie świetnie wyglądał na komputerze i na małych ekranach. To świetne podejście, jeśli nie chcesz umieszczać filmu bezpośrednio na swojej stronie, ale wolisz nawiązać z nim interakcję odwiedzający.

badanie

Zanim przejdziemy do samouczka, przyjrzyjmy się efektowi końcowemu w różnych rozmiarach ekranu.

Biuro

wynik końcowy divi video popup.gif

Aplikacje mobilne

wynik mobilnego wideo popup divi.gif

Zacznijmy!

Użyj darmowej wtyczki Video PopUp

Zainstaluj i aktywuj wtyczkę

Pierwszą rzeczą do zrobienia jest pobranie wtyczka wolny Wideo PopUp . Możesz znaleźć tę wtyczkę, przechodząc do swojego strona internetowa WordPress > Wtyczki > Dodaj nowy > Wyszukaj „Wyskakujące okno wideo”. Po znalezieniu tej wtyczki zainstaluj ją. Gdy skończysz, pamiętaj, aby aktywować wtyczkę.

wideo popup.jpg

Ustawienia wtyczek

Kontynuuj, przechodząc do ogólnych ustawień tej wtyczki i aktywując dwie opcje u góry.

wideo konfiguracji popup.jpg

Dodaj nową stronę, korzystając ze strony docelowej wersji oprogramowania

Dodaj nową stronę i włącz używanie Visual Builder

Czas zacząć wprowadzać rzeczy w życie! Dodaj nową stronę, nadaj jej tytuł i natychmiast aktywuj Visual Builder.

utwórz nową stronę divi.jpg

Pobierz układ wersji oprogramowania z zapisanych układów

Przejdź do „Twoich zapisanych układów” i pobierz załadowaną stronę docelową.

przesłano układ divi.jpg

Dodaj moduł tekstowy pod modułem Blurb przycisku odtwarzania

Jak widać, na stronie jest już przycisk odtwarzania, który pomoże nam osiągnąć pożądany efekt. Ale żeby to zadziałało, musimy odtworzyć projekt w module Blurb za pomocą modułu tekstowego. Dodaj nowy moduł tekstowy tuż pod modułem Blurb.

dodaj tekst powyżej modułu blurb.jpg

Dodaj obraz do obszaru zawartości

Po dodaniu modułu tekstowego dodaj obraz przycisku odtwarzania do obszaru zawartości modułu tekstowego, klikając „ Dodaj nośnik I wybierając przycisk odtwarzania w bibliotece multimediów.

Dodaj media do blurb divi.jpg

wybierz zdjęcie divi.jpg

Dodaj kopię do obszaru zawartości

Kontynuuj, dodając kopię tuż pod obrazem.

duplikat modułu blurb.jpg

Ustawienia tekstu

Aby moduł pasował do układu, włączymy centralną orientację tekstu w ustawieniach tekstu modułu.

aktywuj centralną orientację.jpg

Domyślne ustawienia tekstu linku

Zmodyfikujemy również odpowiednio parametry tekstu linku:

  • Czcionka łącza: kabina
  • Połącz grubość czcionki: pogrubienie
  • Kolor tekstu linku: rgba (162,176,193,0.7)
  • Rozmiar tekstu linku: 17px
  • Wysokość linii łącza: 1.6em

menu projektowania link divi.jpg

Najedź kursorem na ustawienia tekstu

Zmień kolor tekstu kursora.

  • Kolor tekstu linku: # a2b0c1

zmień kolor linku divi.jpg

rozstaw

Na koniec dodaj również ujemny górny margines do modułu tekstowego.

  • Top Marign: -20vw

ustaw górny margines divi.jpg

Dodaj kontekstowy odczyt do zawartości modułu tekstowego

Przejdź do edytora tekstu

Aby utworzyć wyskakujące okienko po kliknięciu, musimy dodać niestandardowy link do zawartości modułu tekstowego. Wróć do obszaru zawartości modułu tekstowego i wybierz tryb edytora tekstu.

edytować moduł tekstowy w trybie edytora tekstu divi.jpg

Dodaj link do całej zawartości

Połącz obszar danych z wyskakującym okienkiem, dodając łącze do obrazu i kopii. Pamiętaj, aby zastąpić adres URL łącza własnym.

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

dodaj link do obrazu z filmem divi.jpg

Usuń moduł Blurb z przycisku odtwarzania

Teraz, gdy stworzyliśmy mod tekstowy, który wygląda dokładnie tak samo jak mod Blurb, możemy usunąć mod Blurb, który istniał wcześniej i to wszystko! Możesz zastosować tę metodę do dowolnego typu układu, którego używasz, ale jest to naprawdę świetna wartość dodana dla strony docelowej wersji oprogramowania.

usuń nieużywany moduł blurb divi.jpg

końcowe przemyślenia

Jak widać, dodanie wyskakującego okienka na Divi za pomocą wtyczki Video Popup jest dość proste. Umożliwi to prezentację filmów na Twój blog bez konieczności automatycznego integrowania go z treścią.