Jak dodać tło wideo do strony WordPress

Opublikowany: 2022-11-03

Wystarczy kilka sekund, aby odwiedzający zdecydowali, czy chcą pozostać w Twojej witrynie, czy przejść gdzie indziej. Dlatego ważne jest, aby natychmiast przyciągnąć ich uwagę i przekonać ich do zapoznania się z resztą witryny.

Świetnym sposobem na przyciągnięcie uwagi odbiorców i zaimponowanie im jest tło wideo. W tym poście przyjrzymy się korzyściom płynącym z dodania tła wideo do witryny. Następnie omówimy kilka najlepszych praktyk i pokażemy cztery proste sposoby na zrobienie tego w WordPressie.

Co to jest tło wideo?

Tła wideo to sposób na zapewnienie użytkownikom bardziej angażujących wrażeń. Zamiast dodawać jednolity kolor lub obraz za fragmentami treści, możesz zamiast tego użyć wideo. Te filmy często są zapętlone (powtarzane) i wyciszone, aby ulepszyć, a nie oderwać od reszty strony.

Możesz dodać tło wideo za blokami tekstu, obrazów, przycisków, formularzy — co tylko chcesz! — a nawet użyj go jako tła całej strony docelowej.

Strona główna Strandberg Guitars z tłem wideo

Na przykład Strandberg Guitars wyświetla piękne tło wideo swoich produktów w akcji, gdy odwiedzający trafiają na ich stronę. Ich nagłówek, tekst wstępu i przycisk wezwania do działania są umieszczone na górze filmu w taki sposób, że cała zawartość jest nadal widoczna.

Jakie są zalety tła wideo?

Korzystanie z tła wideo ma wiele zalet. Na początek może sprawić, że Twoje strony będą wyglądać bardziej profesjonalnie i atrakcyjnie. Gdy ktoś wchodzi do Twojej witryny i widzi poruszający się film, przyciąga on jego uwagę w sposób, w jaki nie może zastać treści.

Tła wideo mogą być również doskonałym sposobem na zaprezentowanie produktów i usług w akcji. Zaprezentuj piękne pokoje w swoim pensjonacie ze śniadaniem, pokaż dzieciom bawiące się zabawkami, które sprzedajesz, lub udostępnij klipy z oferowanych przez Ciebie doświadczeń.

Najlepsze praktyki dodawania tła wideo WordPress

Jeśli zdecydowałeś, że Twoja witryna może skorzystać na tle wideo, musisz wziąć pod uwagę kilka ważnych rzeczy. Po pierwsze, będziesz chciał używać filmów oszczędnie, ale skutecznie. Zbyt wiele dużych filmów w witrynie WordPress może ją spowolnić i osłabić wpływ.

Najprawdopodobniej będziesz także chciał wyłączyć dźwięk. Dźwięk może być zniechęcający dla odwiedzających, gdy po prostu chcą zobaczyć Twoją witrynę. Ostatnią rzeczą, jakiej chcesz, jest to, aby Twoja muzyka zakłócała ​​spotkanie lub spotkanie gościa.

Jeśli umieszczasz treści, takie jak tekst i przyciski, na tle wideo, ważne jest, aby kontrast był wystarczający, aby ludzie mogli je łatwo przeczytać. Jest to szczególnie ważne dla osób z wadami wzroku. To sprawdzanie kontrastu kolorów to świetny sposób na szybkie zapoznanie się z witryną. Wystarczy wpisać swój adres URL, a zidentyfikuje on wszelkie ulepszenia, które należy wprowadzić.

Wreszcie, zawsze dobrym pomysłem jest użycie obrazu zastępczego. To ustawia obraz, który chcesz wyświetlić w tle, jeśli z jakiegoś powodu wideo się nie załaduje.

Jak dodać tło wideo w WordPress

Teraz, gdy wiesz trochę więcej na temat tła wideo, przyjrzyjmy się kilku sposobom dodania ich do witryny WordPress.

1. Użyj wbudowanego bloku okładki

To najprostsze i najskuteczniejsze rozwiązanie, nie wymagające zewnętrznych wtyczek ani narzędzi. Za pomocą bloku Okładka możesz umieścić zawartość, taką jak tekst, przyciski i formularze, na tle zdjęcia lub wideo. To sprawia, że ​​jest to świetna opcja dla sekcji bohaterów lub banerów.

Aby rozpocząć, utwórz nową stronę/post lub otwórz istniejącą. Następnie kliknij niebieską ikonę + w lewym górnym rogu. To otworzy wszystkie opcje blokowania. Wyszukaj „Cover block”, a następnie dodaj go w dowolnym miejscu na stronie.

ustawianie kolorów dla bloku Cover w WordPress

Na wyświetlonym pasku narzędzi wybierz Dodaj multimedia. Tam możesz wybrać wideo z biblioteki multimediów lub przesłać własne.

Możesz dostosować ustawienia wideo w prawym panelu. Wybierz punkt centralny, wybierz krycie nakładki i nie tylko.

ustawianie tła wideo za pomocą bloku Cover

Następnie dodaj dowolne bloki do tła wideo, klikając ikonę + w bloku okładki. Na przykład możesz dodać nagłówek, wiersz tekstu i przycisk. Pamiętaj, że ważne jest, aby ta treść wyróżniała się z tła, więc w razie potrzeby dostosuj kolor i krycie tła.

Gdy będziesz zadowolony z bloku okładki, zapisz lub opublikuj zmiany i to wszystko! Wystarczy kilka prostych kroków, aby uzyskać efektowne, piękne tło wideo.

2. Użyj wtyczki wideo

Jeśli szukasz bardzo specyficznej funkcji — takiej jak tło wideo na całej stronie lub efekty przewijania — wtyczki wideo mogą być dobrą alternatywą.

W tym przykładzie użyjemy wtyczki Advanced WordPress Backgrounds.

Zaawansowana strona wtyczki WordPress Tła w repozytorium WordPress

To narzędzie umożliwia tworzenie różnych typów tła, w tym obrazów, filmów z własnego hostingu i filmów od stron trzecich, takich jak YouTube. Najlepsze jest to, że nadal działa z poziomu edytora bloków WordPress.

Po zainstalowaniu wtyczki w swojej witrynie przejdź do strony lub posta, w którym chcesz dodać tło wideo. Następnie kliknij ikonę + , aby dodać nowy blok i wyszukaj „Tło (AWB)”. Dodaj go w dowolnym miejscu na stronie.

W panelu ustawień po prawej stronie wybierz kartę Wideo , a następnie wybierz między YouTube/Vimeo i Self Hosted. W zależności od tego, co wybierzesz, możesz przesłać plik wideo lub wprowadzić zewnętrzny adres URL.

Następnie kliknij ikonę + w bloku Tło (AWB), aby dodać zawartość, którą chcesz wyświetlić na górze. W tym przypadku zdecydowaliśmy się dodać formularz kontaktowy.

formularz kontaktowy na tle wideo

Stamtąd możesz dostosować ustawienia za pomocą prawego paska narzędzi. Wybierz czas rozpoczęcia i zakończenia wideo, wybierz urządzenia, na których ma się pojawiać, dodaj efekty paralaksy i nie tylko. Kiedy skończysz, zapisz swoją stronę.

3. Użyj kreatora stron

Jeśli używasz już narzędzia do tworzenia stron, takiego jak Elementor, możesz użyć go, aby dodać tło wideo do swojej witryny. Utwórz nową stronę za pomocą kreatora i przeciągnij element sekcji wewnętrznej na ekran.

elementy dostępne w Elementorze

Dodając film do sekcji, możesz nałożyć na materiał dodatkowe elementy, takie jak tekst i przyciski. Kliknij kropki u góry sekcji, aby otworzyć Edytor sekcji. Następnie przejdź do karty Styl .

Zakładka Styl w Elementorze

Obok opcji Typ tła kliknij Wideo i wklej link do filmu w polu.

tło wideo ustawione w Elementorze

Tutaj możesz określić czas rozpoczęcia i zakończenia oraz dostosować inne ustawienia wyświetlania. Możesz też ustawić obraz zastępczy na wypadek, gdyby film się nie odtwarzał. Następnie możesz dodać dowolne elementy na górze filmu, tak jak zwykle.

W obszarze Układ , możesz zmienić wysokość i szerokość treści. Następnie możesz dodać nakładkę tła i dostosować krycie, aby inne treści w sekcji były bardziej widoczne. Dostęp do tych ustawień można uzyskać, przewijając w dół sekcji Styl .

4. Dodaj tło wideo ze swoim motywem

Niektóre motywy automatycznie umożliwiają przesyłanie obrazów, filmów lub GIF-ów jako elementów tła. Mogą one wypełnić cały ekran lub możesz ich użyć jako nagłówków lub suwaków.

Aby znaleźć motyw, który umożliwia tworzenie tła wideo, przejdź do pulpitu WordPress i kliknij Wygląd TematyDodaj nowy. Następnie wyszukaj „tło wideo” i wybierz motyw, który oferuje tę funkcję. Możesz też zawsze przesłać własny motyw premium.

Colibri WP to doskonała, bezpłatna opcja. Po zainstalowaniu i aktywacji motywu przejdź do Wygląd → Dostosuj . Następnie wybierz Ustawienia obok elementu Bohatera.

ustawianie tła wideo z motywem WordPress

Przełącz na styl i zmień typ tła na Wideo .

wybór wideo do tła sekcji

Możesz wkleić zewnętrzny adres URL lub przesłać plik wideo do biblioteki multimediów.

dodawanie wideo z własnego hosta

Następnie możesz dostosować tło wideo. Możesz zastosować kolorowe nakładki i dostosować krycie wideo. Gdy będziesz zadowolony z projektu, opublikuj zmiany.

Często Zadawane Pytania

Przyjrzyjmy się często zadawanym pytaniom dotyczącym używania tła wideo w WordPress.

Czy tło wideo spowolni moją witrynę?

Duże pliki wideo mogą negatywnie wpłynąć na wydajność witryny. Ale dobrą wiadomością jest to, że możesz użyć narzędzia takiego jak Jetpack VideoPress, aby zminimalizować wpływ, jaki mają na Twoją witrynę. Przechowuje Twoje filmy poza witryną i wyświetla je za pośrednictwem potężnej sieci CDN, jednocześnie pomagając uniknąć reklam innych firm.

Jeśli szukasz sposobów na niemal natychmiastową poprawę szybkości WordPressa, Jetpack Boost to świetna opcja.

Strona główna Jetpack Boost z tekstem „Najłatwiejsza wtyczka optymalizacji prędkości dla WordPressa”

Za pomocą kilku kliknięć możesz zoptymalizować ładowanie CSS, odroczyć niepotrzebny JavaScript i włączyć leniwe ładowanie obrazu bez użycia niestandardowego kodu. To narzędzie koncentruje się w szczególności na podstawowych wskaźnikach internetowych Google, które są pomiarami wydajności Twojej witryny w rzeczywistych sytuacjach. Poprawa tych wskaźników może pozytywnie wpłynąć na wrażenia użytkownika i rankingi w wyszukiwarkach.

Jaki jest najłatwiejszy sposób dodania tła wideo WordPress?

Wbudowany blok Cover to najprostszy sposób na dodanie tła wideo WordPress, ponieważ nie wymaga dodatkowych wtyczek, narzędzi ani niestandardowego kodu.

Zamiast tego możesz utworzyć tło wideo bezpośrednio w edytorze WordPress. To sprawia, że ​​jest to doskonała opcja dla wszystkich użytkowników, nawet początkujących. Jednak nadal możesz dostosować swoje tło, korzystając z opcji nakładek, punktów centralnych i nie tylko. To tylko jeden świetny przykład tego, jak edytor bloków WordPress sprawia, że ​​tworzenie pięknej, efektywnej witryny jest dostępne dla wszystkich.

Gdzie powinienem przechowywać moje filmy?

Możesz przechowywać swoje wideo na tym samym serwerze, co Twoja witryna. W ten sposób możesz pominąć ograniczenia platform innych firm i zapewnić odwiedzającym wrażenia bez reklam.

Jednak filmy z własnym hostingiem mogą wymagać dużej przepustowości serwera i możesz nie być w stanie przesłać dużych plików. Co więcej, mogą spowolnić wrażenia użytkownika i spowodować dużo buforowania i innych zakłóceń.

VideoPress to najlepsze z obu światów. Odciąża cały serwer, ale daje też kontrolę nad sposobem wyświetlania plików. Ponadto nie ma reklam, które odciągnęłyby użytkowników od Twoich treści.

Strona główna Jetpack VideoPress

Dzięki VideoPress możesz zarządzać swoimi filmami w tej samej przestrzeni, w której zarządzasz swoją witryną.

Zwiększ zaangażowanie za pomocą tła wideo

Przy tak dużej konkurencji w Internecie wyróżnienie witryny może być trudne. Na szczęście możesz dodać tło wideo WordPress, aby przyciągnąć uwagę odwiedzających i stworzyć wciągające wrażenia. Kluczem do sukcesu jest wybór najlepszej metody hostingu i wyświetlania tej wartościowej treści.

VideoPress to jedno z najlepszych rozwiązań do hostingu wideo dla WordPress. Jest łatwy w użyciu i można uzyskać do niego dostęp bezpośrednio z pulpitu WordPress. Ponadto może pomóc zapewnić doskonałe wrażenia użytkownika dzięki szybko ładującym się filmom bez reklam.