Jak dodać tło wideo do witryny WordPress

Szukasz najłatwiejszego sposobu dodania tła wideo WordPress?

Dobrze wykonane tła wideo przykuwają uwagę i sprawiają, że marki od samego początku wyglądają fajnie. Jednak źle wykonane tło wideo spowalnia witrynę, zajmuje miejsce i wprowadza w błąd nowych użytkowników. Dlatego stworzyliśmy ten przewodnik, abyś mógł uniknąć wszystkich pułapek, a zamiast tego nauczyć się, jak dodać tło wideo WordPress we właściwy sposób.

Czytaj dalej, aby poznać najlepsze praktyki i kroki, aby dodać tło wideo do swojej witryny WordPress, a wszystko to bez specjalnej wiedzy technicznej.

Najlepsze praktyki dodawania tła wideo WordPress

• Utrzymuj małe rozmiary plików, ale wysoką rozdzielczość: nic nie obniża wydajności witryny bardziej niż duże filmy i obrazy; jednak lepiej jest zachować rozdzielczość podczas kompresji.
• Nie przesadzaj: zbyt wiele filmów zaśmieca twój interfejs; używaj ich tylko do podkreślenia lub zaprezentowania czegoś istotnego.
• Dołącz wezwanie do działania z dodatkowymi informacjami: nie pozwól, aby widzowie chcieli więcej, a potem zapomnij o linku prowadzącym do dalszych szczegółów.
• Unikaj dźwięku za wszelką cenę: denerwuje, gdy wszyscy ludzie chcą tylko zobaczyć Twoją witrynę.
• Jeśli dźwięk jest wymagany, nie włączaj go podczas autoodtwarzania: udostępnij użytkownikom opcję odtwarzania dźwięku.
• Rozważ podpisy kodowane do filmów z dźwiękiem: nie każdy może słuchać Twojego dźwięku, czy to z powodu lokalizacji, czy upośledzenia słuchu.
• Hostuj zewnętrznie: Twój host witryny prawdopodobnie nie jest przeznaczony do obsługi filmów, więc wybierz witryny takie jak Vimeo i YouTube, aby utrzymać wydajność, lub rozważ specjalną witrynę do hostingu wideo.
• Trzymaj się najlepszych formatów/rozdzielczości: mówimy tylko o MP4; minimum 720p; kodek h264.

I pamiętaj, nie wszystkie strony internetowe potrzebują wideo; czasami po prostu sprawia, że ​​interfejs jest zagracony, powolny i nieukierunkowany. Na przykład prawnik powinien trzymać się profesjonalnych zdjęć, a nie banalnych filmów z uściskami dłoni, które spowalniają jego witrynę.

Jak dodać tło wideo WordPress

Istnieje kilka metod aktywowania funkcji tła wideo w WordPress.

Skoncentrujemy się na czterech różnych rozwiązaniach bez kodu:

1. Wbudowany blok okładki
2. Wtyczka tła/nagłówka
3. Twoja ulubiona wtyczka do tworzenia stron
4. Korzystanie z motywu obsługującego tła wideo lub nagłówki

Postępuj zgodnie z instrukcjami dla każdej metody poniżej.

Opcja 1: Wbudowany blok okładki

Natywny edytor WordPress oferuje tak zwany blok okładki , który umożliwia wstawianie obrazów tła za inną treścią, taką jak tekst i przyciski.

Wielu użytkowników WordPressa nie zdaje sobie sprawy, że blok Cover obsługuje również tła wideo.

Krok 1: Dodaj blok okładki

Aby rozpocząć, przejdź do dowolnej strony, na której chcesz dodać tło, i dodaj blok Okładka .

Krok 2: Prześlij swój film

Jako Okładka wybierz przycisk Prześlij lub Biblioteka multimediów , w zależności od tego, którego chcesz użyć do dodania filmu.

Blok Cover nie mówi nic o wspieraniu filmów, więc musisz tylko wybrać film (np. MP4) z Biblioteki multimediów . Kliknij przycisk Wybierz po zaznaczeniu wideo.

Krok 3: Wstaw nałożoną zawartość pierwszego planu

Powinieneś teraz zobaczyć podgląd wideo w tle. Możesz dodawać do Okładki bloki pierwszego planu, takie jak tekst lub przyciski.

Krok 4: Edytuj ustawienia okładki zgodnie z potrzebami

Ustawienia okładki obejmują:

• Kolorowe nakładki: idealne, aby ułatwić czytanie tekstu
• Krycie: przydatne również przy ujawnianiu treści na pierwszym planie
• Minimalna wysokość okładki: czasami konieczna, aby tło wideo WordPress zajmowało więcej miejsca

Krok 5: Zobacz swoje tło wideo WordPress w akcji

Gdy skończysz, zapisz stronę i przejdź do interfejsu, aby zobaczyć tło wideo WordPress!

Istnieje sporo wtyczek do dodawania tła wideo WordPress, z których niektóre oferują pełne tła witryny, podczas gdy inne zapewniają nagłówek wideo.

Oto najlepsze wtyczki wideo w tle:

️ Naszą ulubioną jest wtyczka Zaawansowane tła WordPress; pokażemy Ci, jak dodać tło wideo WordPress za pomocą tej wtyczki w zaledwie kilku krokach.

Krok 1: Zainstaluj AWB i dodaj jego blok treści

Aby rozpocząć, zainstaluj Zaawansowane tła WordPress (AWB).

Przejdź do strony, na której chcesz dodać wideo w tle.

Korzystając z edytora WordPress, kliknij, aby dodać blok treści. Wyszukaj i wybierz blok Tło (AWB) .

Krok 2: Dodaj swój film

Daje to opcje dodawania koloru, obrazu lub tła wideo do elementu.

Wybierz Wideo , a następnie wklej adres URL wideo z YouTube lub Vimeo. Alternatywnie wtyczka ma zakładkę Self Hosted do przesyłania lokalnych filmów.

Krok 3: Rozszerz wysokość i szerokość tła wideo

Domyślnie blok treści nie rozciąga się na większą część obszaru strony. Musisz kliknąć przycisk Pełna wysokość w edytorze. Dostępny jest również przycisk rozszerzający tło wideo do pełnej szerokości.

Możesz także przeciągnąć lub wstawić zawartość, taką jak tekst, przyciski lub obrazy, na wideo w tle.

Krok 4: Zmodyfikuj ustawienia tła wideo WordPress

Dostosuj dowolne ustawienie na karcie Blokuj : czas rozpoczęcia, czas zakończenia, zapętlanie, zawsze odtwarzane, krycie wideo.

Rozsądnie jest dodać nakładkę koloru tła ze zmniejszonym kryciem; to sprawia, że ​​nakładający się tekst jest łatwiejszy do odczytania.

Zrób to, przechodząc do zakładki Blokuj i zmieniając kolor na biały lub czarny w obszarze Kolor tła . Przesuń nieco suwak Krycie w dół, aby tło nadal było widoczne.

Krok 5: Zobacz wyniki

W rezultacie wideo odtwarzane jest przed inną zawartością, najlepiej taką, która jest zapętlona, ​​nie ma dźwięku i nadal koncentruje się na zawartości pierwszego planu.

Opcja 3: Twoja ulubiona wtyczka do tworzenia stron

Większość kreatorów stron, takich jak Elementor, WPBakery i Divi, oferuje funkcje tła umożliwiające dodanie obrazu lub tła wideo do niemal dowolnego modułu treści.

️ Możesz wybrać program do tworzenia stron, który Ci się podoba, ale zalecamy Elementor ze względu na łatwość obsługi.

Pamiętaj, aby zainstalować Elementora lub dowolnego innego kreatora, którego zamierzasz użyć, zanim zaczniesz.

Krok 1: Otwórz stronę w edytorze Elementor

Przejdź do Strony w WordPressie i wybierz stronę wyznaczoną jako Strona główna . Kliknij przycisk Edytuj za pomocą Elementora .

Krok 2: Dodaj blok treści sekcji

Większość modułów treści w Elementorze oferuje ustawienia tła, ale zalecamy wstawienie sekcji. W ten sposób możesz dodać do sekcji wiele elementów, takich jak tekst, obrazy i przyciski. Następnie dodajesz tło wideo do sekcji, tak aby znajdowało się za wszystkim na pierwszym planie.

Dodaliśmy tekst i przycisk do sekcji w naszym samouczku. Śmiało i wybierz ikonę Edytuj sekcję , a następnie wybierz kartę Styl .

Krok 3: Wstaw tło wideo

Tutaj zobaczysz pole rozwijane Tło . Wybierz opcję Wideo obok Typu tła . Następnie wklej adres URL z YouTube, Vimeo lub lokalnego pliku w polu Link wideo .

Krok 4: Edytuj ustawienia tła wideo

Może być konieczne rozwinięcie tła wideo, aby zająć większą część ekranu. Aby to zrobić, przejdź do zakładki Układ i dostosuj Wysokość i Minimalną wysokość .

Wróć na kartę Styl i rozważ zmianę ustawień wideo w tle:

• Czas rozpoczęcia
• Koniec czasu
• Zagraj raz
• Graj na telefonie
• Tryb prywatny

Ponadto pomyśl o dodaniu nakładki tła — zwykle w neutralnym kolorze, takim jak czarny lub biały, i pewnych zmianach krycia — aby tekst, przyciski i obrazy na pierwszym planie były bardziej widoczne.

Krok 5: Wyświetl tło wideo WordPress na interfejsie użytkownika

Kiedy skończysz, wideo zostanie odtworzone za całą zawartością w sekcji!

Opcja 4: Użyj motywu WordPress, który obsługuje tła/nagłówki wideo

Różne motywy WordPress oferują wbudowane ustawienia nagłówka, suwaka i pełnostronicowych multimediów; pozwalają one na przesłanie obrazu, GIF-a lub wideo zajmującego cały ekran, najczęściej używanego jako nagłówek strony głównej.

Aby znaleźć motywy z funkcjami tła wideo, wyszukaj „tło wideo” na popularnych platformach handlowych:

️ Pamiętaj, aby przeskanować listy funkcji, a nawet zapytać programistę przed pobraniem/zakupem, aby upewnić się, że motyw ma funkcję tła wideo.

Na przykład motyw Colibri WP oferuje tła wideo.

Krok 1: Zainstaluj i aktywuj motyw

Aby aktywować tło wideo, zainstaluj motyw Colibri WP, a następnie przejdź do Wygląd > Ustawienia Colibri > Rozpocznij . Tutaj możesz aktywować funkcję Colibri Page Builder.

Krok 2: Dodaj witrynę demonstracyjną

Kliknij kartę Witryny demonstracyjne i zaimportuj wybrany szablon demonstracyjny.

Krok 3: Dostosuj obraz bohatera

Przejdź do Wygląd > Dostosuj i wybierz ikonę koła zębatego Ustawienia obok modułu Bohater .

Krok 4: Dodaj tło wideo

Wybierz kartę Styl i przełącz Tło na Wideo .

Na koniec wybierz YouTube , aby wkleić zewnętrzny adres URL wideo , lub Self Hosted , aby przesłać lokalne wideo.

W rezultacie zobaczysz ruchome tło wideo na podglądzie Customizer.

Zacznij od idealnego tła wideo

W tym poście poznałeś cztery różne metody, z których przynajmniej jedna powinna działać w Twojej sytuacji.

️ Aby poznać inne sposoby na ulepszenie witryny, zapoznaj się z naszym postem z 10 elementami udanego projektu strony głównej.

W przypadku jakichkolwiek pytań dotyczących tła wideo WordPress podziel się swoimi przemyśleniami w komentarzach poniżej.