Przejdź do głównej treści

Jak utworzyć kontekstowe wideo demonstracyjne na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Jeden wyłączne strony docelowe, które dostarczają wielu swoich abonentów w okresie cyberponiedziałek jest wielką strony docelowej wersje oprogramowania. Ten układ zawiera piękne ilustracje i unikalne zastosowanie separatorów sekcji, które zachwycą odwiedzających.

cyber poniedziałek.jpg

Jak zdobyć ekskluzywną stronę docelową wydania oprogramowania na Cyber ​​poniedziałek

Przed rozpoczęciem korzystania z tej funkcji należy zapoznać się z wyłączną stroną docelową Cyberponiedziałka, którą można uzyskać, zostając nowym członkiem Elegant Themes, aktualizując istniejące konto lub pozostając członkiem dożywotnim. z nami. Jeśli jesteś już członkiem dożywotnio, możesz zalogować się do naszej strefy członkowskiej i pobrać tutaj wszystkie nasze ekskluzywne strony. Wszyscy inni użytkownicy będą musieli użyć przycisku poniżej, aby dokonać zakupu lub aktualizacji, zanim będą mogli przejść do dalszej części naszego samouczka.

Jesteś już członkiem życia? Możesz pobrać pakiet teraz, nie musisz brać udziału w ofercie Cyber ​​Monday!

Jak utworzyć kontekstowe wideo demonstracyjne na Divi

Po pobraniu nowej strony docelowej wersji oprogramowania z obszaru naszych członków, możesz kontynuować czytanie poniższego.

W przypadku korzystania z tego samouczka pokażemy, jak utworzyć demonstrację wideo, klikając przycisk. Film wyświetlany po kliknięciu będzie wyglądał świetnie na ekranach komputerów i małych. Jest to doskonałe podejście, jeśli nie chcesz umieszczać wideo bezpośrednio na swojej stronie, ale wolisz wchodzić w interakcje z odwiedzającymi.

badanie

Zanim zagłębimy się w samouczek, spójrzmy na ostateczny wynik w różnych rozmiarach ekranu.

Biuro

efekt końcowy divi wideo popup.gif

Telefon komórkowy

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 swojej Witryna WordPress> Wtyczki> Dodaj nowy> Wyszukaj "Wideo PopUp", Po znalezieniu tej wtyczki zainstaluj ją. Gdy skończysz, upewnij się, że aktywujesz wtyczkę.

wideo popup.jpg

Ustawienia wtyczki

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

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

wideo konfiguracji popup.jpg

Dodaj nową stronę za pomocą strony docelowej wersji oprogramowania

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

Czas zacząć wprowadzanie w życie! Dodaj nową stronę, nadaj tytuł swojej stronie i natychmiast aktywuj program Visual Builder.

utwórz nową stronę divi.jpg

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

Przejdź do "Zapisanych układów" i pobierz opublikowaną stronę docelową.

przesłany układ divi.jpg

Dodaj moduł tekstowy pod modułem Blurb przycisku odtwarzania

Jak widać, strona zawiera już przycisk odtwarzania, który pomoże nam uzyskać pożądany rezultat. Aby 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, należy iść dalej i dodać obraz przycisku odtwarzania do treści obszarze modułu tekstowego poprzez kliknięcie na " Dodaj media I wybierając przycisk odtwarzania w bibliotece multimediów.

Dodaj media do blurb divi.jpg

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

wybierz zdjęcie divi.jpg

Dodaj kopię do obszaru zawartości

Kontynuuj dodawanie kopii tuż pod obrazem.

duplikat modułu blurb.jpg

Ustawienia tekstu

Aby moduł pasował do prezentacji, umożliwiamy orientację tekstu centralnego w parametrach tekstowych modułu.

aktywuj centralną orientację.jpg

Domyślne ustawienia tekstu łącza

Zmodyfikujemy również 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 także ujemny górny margines do modułu tekstowego.

  • Top Marign: -20vw

zdefiniuj górny margines divi.jpg

Dodaj kontekstowy odczyt do zawartości modułu tekstowego

Przejdź do edytora tekstu

Aby utworzyć wyskakujące okienko z kliknięciami, 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

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Dodaj link do wszystkich treści

Połącz obszar zawartości z wyskakującym okienkiem, dodając link do obrazu i kopii. Pamiętaj, aby zastąpić adres URL linku swoim adresem.

<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, stworzyliśmy moduł tekstowy, który ma dokładnie taki sam wygląd jak moduł krótką, możemy usunąć Blurb moduł, który istniał przed i to jest to! Można zastosować tę metodę do każdego rodzaju układu używasz, ale to naprawdę świetny stosunek jakości do strony docelowej wersji oprogramowania.

usuń nieużywany moduł blurb divi.jpg

Ostatnie myśli

Jak widać, dodanie okna popup w Divi przy użyciu wtyczki Video Popup jest dość proste. Pozwoli ci to prezentować filmy na swoim blogu bez konieczności automatycznego włączania go do treści.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
5 akcji
udział4
ćwierkanie
Enregistrer1