Divi Tutorial: Jak dodać moduł wideo do Divi

Dodawanie filmów do swojej strony w Divi jest proste, gdy używasz modułu wideo. Ten moduł umożliwia osadzanie filmów z dowolnego źródła, ale także dostosowywanie obrazu miniatury i przycisku odtwarzania.

Jak dodać moduł wideo do swojej strony

Zanim będziesz mógł dodać moduł wideo do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

Znajdź mod wideo na liście modów i kliknij go, aby dodać go do swojej strony. Listę modów można przeszukiwać, co oznacza, że ​​możesz także wpisać słowo „wideo”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać mod wideo! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: dodanie wideo do strony docelowej

Dodanie filmu do strony docelowej to świetny sposób promować swoje produkty i zwiększyć konwersję. W tym przykładzie pokażę Ci, jak możesz wykorzystać moduł wideo, aby dodać film do swojego landing page’a. Zakreśliłem czerwonym kółkiem miejsce, w którym powinien znajdować się film.

Korzystając z programu Visual Builder, dodaję nową sekcję z wierszem o pełnej szerokości (1 kolumna). W ustawieniach wierszy na karcie Projekt wybieram opcję „Użyj niestandardowej szerokości”. W wyświetlonej opcji Szerokość niestandardowa wprowadzam niestandardową szerokość 767 pikseli. Daje to pewność, że moduł wideo, który zamierzam dodać w tym wierszu, nie przekracza tej szerokości i staje się zbyt duży na większych ekranach.

Następnie dodaję moduł wideo do wiersza. Na karcie Treść w ustawieniach modułu wideo wpisuję adres URL wideo, które chcę umieścić na mojej stronie docelowej. W tym przykładzie używam adresu URL filmu z YouTube.

Następnie dodaję adres URL nakładki obrazu dla mojego pliku wideo, klikając przycisk „Generuj wideo”. To automatycznie pobiera klatkę z wideo, aby służyć jako nakładka z nową niestandardową ikoną wideo.

Na karcie Projekt zmieniam kolor ikony odtwarzania, aby pasował do mojej strony docelowej.

Teraz mam wideo na moją stronę docelową, które wygląda na przejrzyste i pasuje do mojego projektu.

Teraz, gdy widziałeś mod wideo w akcji, zanurz się we wszystkich jego ustawieniach w poniższych sekcjach. Przedstawiliśmy szczegółowe informacje na temat tego, co znajdziesz na każdej karcie ustawień modułu, i wyjaśnienie, co robi każdy z nich.

Opcje zawartości

URL filmu

Moduł Divi Video umożliwia dodawanie wideo przy użyciu dwóch różnych metod. Możesz przesłać własny plik wideo ze swojego komputera, klikając przycisk „Pobierz wideo” i wybierając żądany plik lub możesz wprowadzić dowolny adres URL wideo z zewnętrznego źródła wideo, takiego jak Youtube lub Vimeo. Po prostu skopiuj i wklej adres URL z przeglądarki i wklej go w pole adresu URL wideo, a Divi zajmie się resztą!

URL nakładki obrazu

Jeśli chcesz ustawić niestandardowy obraz miniatury wideo, który zostanie umieszczony w standardowym interfejsie wideo z niestandardowym przyciskiem odtwarzania, aby uzyskać ostrzejszy i bardziej stylowy wygląd, możesz to zrobić za pomocą pola Nakładka obrazu. Ta kontrolka umożliwia przesłanie własnego spersonalizowanego obrazu lub automatyczne zezwolenie Divi na wygenerowanie go na podstawie adresu URL Twojego wideo. Większość dostawców wideo obsługuje tę opcję, np. Youtube i Vimeo. Po prostu kliknij przycisk „Generuj wideo” i pozwól Divi zająć się resztą!

Etykieta administratora

Domyślnie Twój moduł wideo pojawi się w generatorze z etykietą „Wideo”. Tag Admin umożliwia zmianę tego tagu w celu łatwej identyfikacji.

Opcje projektowania

zmień kolor ikony

Jeśli wyznaczysz nakładkę obrazu dla swojego bloku wideo, wyświetlany plik wideo będzie zawierał ikonę odtwarzania. Możesz tutaj określić kolor tej ikony, aby pasował do kolorów na Twojej stronie.

Zaawansowane opcje

Identyfikator i klasy CSS

Można to wykorzystać do dodania identyfikatora CSS lub klasy do modułu. Można ich następnie użyć w arkuszu stylów lub w polu Opcje motywu Niestandardowy styl CSS, aby zastosować niestandardowy styl do modułu. Na identyfikatory CSS można również kierować linki zakotwiczenia, które prowadzą do określonych obszarów strony.

Niestandardowy CSS

Tutaj możesz dodać niestandardowy CSS do swojego modułu wideo.

widoczność

Jeśli chcesz ukryć moduł wideo na niektórych urządzeniach, możesz wybrać urządzenia, na których chcesz wyłączyć moduł wideo.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi

• strony internetowe 5 dotyczące stosowania restauracja Divi tematu
• Jak dodać tekst do produktu Divi WooCommerce
• Jak zmienić kolor menu między stronami Divi
• Jak spersonalizować siatki bloga za pomocą Divi
• Jak korzystać z roli Divi edytor na WordPressie
• Jak utworzyć pełnoekranowy suwak Divi
• Jak zmienić kolor menu między stronami Divi
• Funkcje, których prawdopodobnie nie wiesz o Divi
• Jak korzystać z Divi Builder na WordPress
• Jak korzystać z modułu przewijania wideo Divi
• Jak korzystać z modułu Divi Builder Flip
• Jak dodać moduł referencji w Divi Builder
• Jak korzystać z modułu tekstowego Divi
• Jak utworzyć suwak na Divi
• Jak edytować rolę użytkownika Divi
• Jak korzystać z modułu Divi Social Media
• Jak korzystać z modułu sklepu na temat WordPress Divi
• Jak korzystać z modułu paska bocznego Divi
• Jak korzystać z modułu tabeli cen Divi
• Jak korzystać z modułu tytułowego publikacji Divi
• Jak dodać moduł wideo Divi
• Jak korzystać z modułu nawigacji artykułów
• Jak korzystać z modułu wyszukiwania Divi
• Jak korzystać z modułu portfela Divi
• Jak korzystać z modułu person w Divi Builder
• Jak korzystać z modułu portfela z filtrem Divi
• Jak korzystać z modułu suwaka o pełnej szerokości
• Jak korzystać z modułu obrazu Divi Builder
• Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
• Jak korzystać z modułu galerii obrazów
• Jak korzystać z pełnego modułu karty Divi Builder
• Jak korzystać z modułu portfela o pełnej szerokości Divi
• Jak korzystać z modułu nagłówka Divi o pełnej szerokości
• Jak korzystać z modułu licznika Divi
• Jak korzystać z suwaka artykułów w Divi Builder
• Jak korzystać z modułu Divi Email Optin