Pełnoekranowe tła wideo natychmiast przyciągają uwagę. Zamieniają prostą witrynę WordPress w coś, co wydaje się dopracowane, nowoczesne i profesjonalnie zaprojektowane.
Ogólnie rzecz biorąc, widzieliśmy, jak bardzo dobrze umieszczone tło wideo może poprawić pierwsze wrażenie i utrzymać zaangażowanie odwiedzających.
Dobra wiadomość jest taka, że nie potrzebujesz specjalnego oprogramowania ani niestandardowego rozwoju. Możesz nawet używać filmów z YouTube, które już masz, co czyni go niedrogim sposobem na dodanie ruchu i osobowości do Twoich stron.
W tym przewodniku przeprowadzimy Cię przez najprostsze sposoby dodania filmu z YouTube jako tła WordPress za pomocą przyjaznych dla początkujących narzędzi.
💡Szybka odpowiedź: Jak dodać pełnoekranowe tło wideo w WordPress
Jeśli chcesz pełnoekranowe tło wideo na swojej stronie WordPress, istnieje kilka łatwych opcji w zależności od konfiguracji i preferencji:
- Metoda 1: Advanced WordPress Backgrounds (Darmowy) – Użyj tego wtyczki, jeśli chcesz proste, darmowe rozwiązanie do dodania pełnoekranowego tła wideo z YouTube.
- Metoda 2: Thrive Architect (Zalecane) – Najlepsze dla użytkowników, którzy chcą pełnej kontroli i łatwej personalizacji za pomocą kreatora stron. Jest idealny do szybkiego tworzenia oszałamiających wizualnie nagłówków wideo.
- Alternatywa: SeedProd Animowane tła – Użyj tego, jeśli wolisz lekkie animowane tło zamiast wideo, co może zaoszczędzić przepustowość i poprawić szybkość ładowania strony.
Dlaczego warto używać wideo z YouTube jako pełnoekranowego tła?
Użycie filmu z YouTube jako tła na pełnym ekranie to potężny sposób na natychmiastowe przyciągnięcie uwagi odwiedzających i utrzymanie ich zaangażowania na Twojej stronie.
Oto korzyści:
- Zachowaj szybkie ładowanie strony: Osadzenie filmu z YouTube zamiast przesyłania własnego filmu sprawia, że strona jest lekka, co jest ważne dla doświadczenia użytkownika i SEO.
- Natychmiast angażuj odwiedzających: Ruchome tło wideo może przyciągnąć uwagę w ciągu pierwszych kilku sekund wizyty.
- Wyróżnij się na tle konkurencji: Tworzy atrakcyjny wizualnie i nowoczesny wygląd, który wyróżnia Twoją stronę.
- Oszczędzaj przepustowość i miejsce na dysku: Hostowanie filmów na WordPressie może zużywać wiele zasobów serwera i wymagać dodatkowego miejsca.
W WPBeginner gorąco polecamy osadzanie filmów z YouTube zamiast bezpośredniego przesyłania ich do WordPressa. To podejście pozwala prezentować angażujące treści bez spowalniania strony ani niepotrzebnego obciążania planu hostingowy.
Mając to na uwadze, zobaczmy, jak możesz dodać film z YouTube jako pełnoekranowe tło na swojej stronie WordPress. Pokażemy dwie metody, a Ty możesz użyć tych szybkich linków, aby się między nimi poruszać:
- Metoda 1: Użyj zaawansowanych teł WordPress dla pełnoekranowego tła wideo (bezpłatne)
- Metoda 2: Użyj Thrive Architect do dodania pełnoekranowego tła wideo (zalecane)
- Alternatywa: Dodaj animowane tło w WordPressie za pomocą SeedProd
- Często zadawane pytania dotyczące teł wideo
Metoda 1: Użyj Advanced WordPress Backgrounds dla pełnoekranowego tła wideo (bezpłatne)
Jeśli szukasz darmowego i łatwego sposobu na dodanie tła wideo, możesz użyć Advanced WordPress Backgrounds.
Ten darmowy plugin dodaje blok Tło, który pozwala tworzyć pełnoekranowe tło przy użyciu dowolnego koloru, obrazu lub wideo, w tym filmów z YouTube.
Najpierw musisz zainstalować i aktywować wtyczkę w swoim panelu WordPress. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do strony lub wpisu, gdzie chcesz dodać film z YouTube jako pełnoekranowe tło. W edytorze bloków Gutenberg kliknij przycisk „+” dodaj blok.
W pojawiającym się oknie podręcznym zacznij wpisywać „Tło AWB”. Gdy pojawi się właściwy blok, kliknij go, aby dodać do strony.
W menu po lewej stronie zobaczysz trzy zakładki dla różnych rodzajów pełnych teł, które możesz utworzyć: Kolor, Obraz i Wideo.
Ponieważ chcesz dodać film z YouTube, kliknij zakładkę „Wideo”. Następnie wybierz zakładkę „YouTube / Vimeo”.
Teraz możesz skopiować i wkleić adres URL pliku wideo z YouTube, którego chcesz użyć na swoim blogu WordPress.
Teraz edytor bloków WordPress pokaże podgląd, jak będzie wyglądać to tło.
Advanced WordPress Backgrounds zmienia rozmiar wideo w zależności od treści, którą dodajesz na wierzchu, więc nie martw się, jeśli wideo wygląda obecnie trochę małe.
Domyślnie tło wideo jest wyłączone na urządzeniach mobilnych.
Jeśli jednak chcesz wyświetlać tło wideo na urządzeniach mobilnych, kliknij, aby aktywować przełącznik „Włącz na urządzeniach mobilnych”.
Pamiętaj tylko, że tła wideo mogą szybko zużywać baterię i dane mobilnych użytkowników.
Domyślnie blok będzie odtwarzał cały film z YouTube w trybie autoplay i zapętlony.
Inną opcją jest odtworzenie określonego fragmentu filmu, wpisując dokładne czasy (w sekundach) w polach „Czas rozpoczęcia” i „Czas zakończenia”.
Możesz również zatrzymać zapętlanie wideo, wyłączając przełącznik „Pętla”.
💡Ważne: Upewnij się, że Twój film jest wyciszony lub nie ma dźwięku, ponieważ wiele przeglądarek blokuje automatycznie odtwarzane filmy z włączonym dźwiękiem.
Domyślnie wideo będzie odtwarzane tylko wtedy, gdy odwiedzający będzie mógł je zobaczyć w swojej przeglądarce. Pomoże to utrzymać wydajność Twojej witryny, dlatego zazwyczaj chcesz pozostawić wyłączony przełącznik „Zawsze odtwarzaj”.
Po dodaniu filmu jest on wyświetlany z 100% przezroczystością, dzięki czemu jest w pełni widoczny. Możesz przeciągnąć suwak „Przezroczystość obrazu”, aby tło filmu z YouTube było bardziej subtelne.
Jeśli eksperymentujesz z przezroczystością, możesz również spróbować dodać kolorową nakładkę.
Po prostu kliknij, aby rozwinąć sekcję „Kolor nakładki”, a następnie użyj ustawień, aby utworzyć nakładki w różnych kolorach.
Zachęcamy do zapoznania się z innymi ustawieniami, takimi jak efekt paralaksy i odstępy, aby tło wyglądało dokładnie tak, jak chcesz.
Kiedy będziesz zadowolony z tego, jak ustawiono tło wideo z YouTube, czas zacząć dodawać treści, takie jak linki, teksty i obrazy.
Aby rozpocząć, kliknij ikonę „+” pośrodku bloku Tło (AWB).
Otworzy się okno, w którym możesz wybrać blok, który chcesz dodać. Wtyczka Advanced WordPress Backgrounds działa ze wszystkimi standardowymi blokami WordPress, dzięki czemu możesz dodać dowolną zawartość.
Jeśli dodasz tekst na bloku, upewnij się, że zmienisz kolor tekstu, aby dobrze komponował się z tłem wideo.
Gdy będziesz zadowolony z wyglądu, po prostu kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby opublikować stronę. Teraz, jeśli odwiedzisz swoją witrynę WordPress, zobaczysz w akcji tło wideo.
Metoda 2: Użyj Thrive Architect do dodania pełnoekranowego tła wideo (zalecane)
Jeśli chcesz w pełni dostosować tło wideo lub łatwo projektować kompletne strony, ta metoda jest dla Ciebie.
Do tego będziesz potrzebować Thrive Architect.
Po dokładnym przetestowaniu okazało się, że jest to niezwykle przyjazny dla użytkownika plugin do tworzenia stron. Oprócz funkcji tła wideo, posiada funkcję przeciągnij i upuść, która jest elastyczna w użyciu, dzięki czemu możesz bezproblemowo stworzyć stronę, którą chcesz.
Dodatkowo, jest wyposażona w inteligentne szablony stron docelowych zoptymalizowane pod kątem konwersji, dzięki czemu Twoja strona docelowa jest gotowa na sukces od samego początku.
Więcej informacji o Thrive Architect można znaleźć w naszej recenzji Thrive Architect.
Uwaga: Nie przepadasz za Thrive Architect? Możesz również użyć kreatora stron SeedProd, aby dodać pełnoekranowe tło wideo z YouTube. Dowiedz się więcej o narzędziu w naszej recenzji SeedProd.
Jeśli chcesz skorzystać z tej metody, najpierw kup plan Thrive Architect. Jest dostępny do zakupu jako samodzielny produkt lub jako część pakietu Thrive Themes.
Następnie po prostu zainstaluj wtyczkę. Możesz zapoznać się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress, aby uzyskać więcej informacji.
Następnie możesz przejść do „Strony” z obszaru administracyjnego WordPress i wybrać stronę do edycji. Najedź kursorem na stronę i wybierz „Edytuj za pomocą Thrive Architect”.
Następnie kliknij przycisk „+” po prawej stronie strony i znajdź element Sekcja tła.
Po prostu kliknij go, aby dodać do strony.
W tym momencie możesz przejść do lewej strony strony i przewinąć w dół do sekcji Styl tła.
Tutaj po prostu aktywuj przełącznik „Tło wideo” i wybierz „YouTube” jako źródło.
Następnie przejdź do filmu na YouTube, którego chcesz użyć jako pełnoekranowego tła.
Po prostu skopiuj adres URL filmu z YouTube w ten sposób:
💡Wskazówka Pro: Upewnij się, że wybrany film nie ma włączonych reklam. W przeciwnym razie reklama może się pojawić i zakryć zawartość tła.
Następnie wklej adres URL w odpowiedniej sekcji.
Powinieneś teraz widzieć tło na ekranie.
Chociaż tło zostało dodane, nie jest jeszcze pełnoekranowe.
Aby upewnić się, że jest pełnoekranowy, musisz przewinąć do sekcji Opcje główne. Następnie włącz opcje „Treść pokrywa cały ekran”, „Dopasuj wysokość do ekranu” i „Rozciągnij, aby dopasować szerokość ekranu”.
Poznajmy więcej opcji. Aby dodać zawartość do tła, wystarczy ponownie kliknąć przycisk „+” po prawej stronie i przeciągnąć element.
Możesz dodawać teksty, obrazy, formularze, przyciski, referencje i wiele więcej. Thrive Architect oferuje dziesiątki elementów skoncentrowanych na konwersji, które możesz wykorzystać na swojej stronie internetowej.
Jeśli uważasz, że kolor tła nie kontrastuje wystarczająco dobrze z tekstem, po prostu wróć do ustawień sekcji Tło.
Następnie przewiń ponownie w dół do Stylu tła, a w opcji Dodaj warstwę wybierz jednolity kolor. Następnie możesz wybrać kolor do użycia jako filtr tła i dostosować krycie według własnych upodobań.
Po zakończeniu kliknij „Zastosuj”.
Inną rzeczą, którą możesz dostosować w ustawieniach sekcji Tło, jest Zachowanie podczas przewijania. Możesz wybrać, czy ma być statyczne, przypięte, czy paralaksowe.
Zalecamy po prostu pozostawienie go w stanie statycznym, aby tło nie przesuwało się podczas przewijania przez użytkownika. W przeciwnym razie wideo będzie nadal odtwarzane, co może spowolnić Twoją witrynę.
Następną rzeczą, którą możesz zrobić, jest przejście do sekcji Responsywność. Tutaj możesz wybrać, czy tło wideo ma być widoczne w wersjach na urządzenia mobilne i tablety Twojej witryny.
To zależy od Ciebie, ale pamiętaj, że filmy potrzebują chwili na załadowanie. Może to być irytujące dla Twoich odwiedzających, gdy będą czekać na ich odtworzenie na urządzeniu z małym ekranem.
Gdy będziesz zadowolony z pełnoekranowego tła wideo z YouTube, po prostu kliknij przycisk „Zapisz pracę”, aby zapisać zmiany.
To wszystko!
Teraz przejdź do swojej strony WordPress, aby zobaczyć, jak wygląda na żywo.
Oto jak wygląda nasza przykładowa strona internetowa.
Alternatywa: Dodaj animowane tło w WordPressie za pomocą SeedProd
Chociaż tła wideo mogą być atrakcyjne wizualnie, mogą również spowolnić szybkość ładowania Twojej witryny. Jeśli szukasz alternatywy, możesz zamiast tego dodać animowane tło.
Najlepszym sposobem na zrobienie tego jest użycie SeedProd, potężnej wtyczki do tworzenia stron WordPress metodą przeciągnij i upuść.
Pozwala łatwo dodawać oszałamiające animowane tła do Twojej witryny za pomocą particle.js. Particle.js to lekka biblioteka JavaScript, która tworzy interaktywne animacje cząsteczkowe.
Więcej informacji można znaleźć w naszym przewodniku jak dodać animowane tło w WordPress.
Dodatkowa wskazówka: Dodaj kanał wideo z YouTube w WordPress
Chcesz dodać więcej filmów do swojej witryny? Chociaż WordPress ma wbudowane bloki do osadzania filmów, nie są one najbardziej atrakcyjnym wizualnie sposobem wyświetlania filmów, zwłaszcza jeśli masz ich wiele.
Właśnie tutaj z pomocą przychodzi Smash Balloon YouTube Feed Pro.
Naszym zdaniem jest to najlepsza wtyczka do galerii YouTube na rynku, która automatycznie wyświetla wszystkie najnowsze filmy z Twojego kanału YouTube, dzięki czemu Twoi odwiedzający zawsze zobaczą najnowsze treści.
Po prostu utwórz kanał YouTube za pomocą łatwego edytora Smash Balloon, a następnie dodaj go do dowolnej strony lub wpisu za pomocą kodu krótkiego lub gotowego bloku wtyczki.
Możesz również użyć Smash Balloon, aby osadzić playlisty YouTube, ulubione i transmisje na żywo na swojej stronie WordPress.
Najlepszą rzeczą w Smash Balloon jest to, że nie spowalnia Twojej witryny. Wbudowana funkcja buforowania YouTube wtyczki zapewni, że Twoja witryna zawsze będzie ładować się szybko, co jest świetne dla SEO.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat wyświetlania najnowszych filmów z kanału YouTube w WordPress.
Często zadawane pytania dotyczące teł wideo
Oto kilka pytań, które nasi czytelnicy często zadają na temat dodawania wideo w tle w WordPressie:
Jak odtworzyć film z YouTube na pełnym ekranie?
Aby odtworzyć film z YouTube na pełnym ekranie, kliknij ikonę pełnego ekranu w prawym dolnym rogu odtwarzacza YouTube lub użyj skrótu klawiaturowego f, gdy film jest aktywny.
Jak dodać wideo w tle w WordPressie?
Wideo w tle można dodać za pomocą wtyczki lub kreatora stron, takiego jak Thrive Architect. W przypadku filmów z YouTube zaleca się osadzanie, aby uniknąć spowolnienia witryny.
Jakie filmy z YouTube wybrać jako tło?
Zalecamy wybór wizualnie angażującego filmu, który jest na tyle subtelny, aby nie odwracać uwagi od głównej treści. Krótkie, zapętlone klipy z delikatnym ruchem często sprawdzają się najlepiej.
Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać film z YouTube jako tło w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia wirusowej strony docelowej z listą oczekujących w WordPress oraz naszymi rekomendacjami najlepszych kreatorów motywów WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Mrteesurez
To jest ekscytująca funkcja. Może sprawić, że użytkownicy będą dłużej przebywać na stronie i nadać jej bardziej atrakcyjny wygląd podczas oglądania sceny odtwarzanej w tle.
Dopóki nie będzie to odwracać uwagi użytkowników ani spowalniać strony internetowej. Zmniejszy to współczynnik odrzuceń na Twojej stronie, ponieważ użytkownicy będą mieli tendencję do dłuższego pozostawania.
Zauważyłem to na niektórych blogach, takich jak Createandgo i innych podobnych blogach. Dziękuję za udostępnienie tego artykułu.
Moinuddin Waheed
To bardzo prosty, a zarazem potężny pomysł, aby przyciągnąć uwagę odwiedzających, odtwarzając coś w tle.
Używałem tego z kreatorami stron i nigdy nie wiedziałem, że prosta metoda bezpośrednio z Gutenberga jest również dostępna.
Jest to szczególnie pomocne w przypadku stron docelowych i sprzedażowych, które sprawiają, że zaangażowanie w przycisk wezwania do działania jest intuicyjne po stronie odwiedzających.
Dziękuję za zilustrowanie prostych kroków.
Mrteesurez
Osobiście uważam tę technikę za niezwykle skuteczną, zwłaszcza w przypadku stron docelowych i sprzedażowych. Ja osobiście używałem do tego Elementora, a informacja, że można to zrobić bezpośrednio przez Gutenberga, jest dla mnie dodatkową wiedzą.
THANKGOD JONATHAN
Mam przesłany film w mojej bibliotece Wordpress i zastanawiałem się, jak zrobić z niego film w tle na moim blogu.
Proszę, jak mam to zrobić poprawnie, aby nie wpłynęło to na szybkość mojej strony internetowej? Czy muszę przesłać go na YouTube, a następnie osadzić na mojej stronie?
Wsparcie WPBeginner
Nie zalecamy przesyłania filmów bezpośrednio na stronę WordPress, nasze powody znajdziesz w poniższym przewodniku!
https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
Admin
Ralph
Chcę użyć go jako tła dla mojej strony portfolio/kontaktowej biznesowej, ale czy spowalnia samą witrynę, czy ładuje ją bezpośrednio z YouTube i nie spowalnia samej witryny?
Poprzednie komentarze są stare, ale nadal niepokojące.
Wsparcie WPBeginner
Filmy powinny ładować się jako osadzone z YouTube, co nie powinno powodować spowolnienia Twojej witryny.
Admin
Jiří Vaněk
Nie powinieneś martwić się o spowolnienie samej strony internetowej. Problem leży tu głównie w wolnej łączności i danych na tych urządzeniach. Pierwszy problem pojawia się w przypadku telefonów komórkowych, które nie mają silnej łączności. Będzie się zacinać, wyglądać nieprofesjonalnie i być może skłonić użytkownika do odejścia. Drugi problem polega na tym, że jeśli ktoś ma ograniczony pakiet danych, będzie narzekał na to, ile danych zużywa taka strona. Osobiście prawdopodobnie bym tego unikał.
Jiří Vaněk
Znowu mogę się czegoś nauczyć z Gutenberga. Zawsze wiedziałem, jak to zrobić tylko w Elementorze, gdzie dodanie tła wideo jest naprawdę proste. Teraz wiem, jak to zrobić również poza Elementorem.
Wsparcie WPBeginner
Glad we could share the process
Admin
T_Lind
Świetny artykuł!
Ale nie mogę dodać tła wideo do pojedynczej strony, tak jak opisujesz. Mogę dodać wideo z YouTube tylko do mojej strony głównej, co ogranicza zakres, w jakim aplikacja może być używana.
Pomysły?
Tobi
Cześć, ta wtyczka była katastrofą dla mojej strony internetowej.
Zużyło wszystkie zasoby i przez godziny rozmawiałem telefonicznie z firmą hostingową, próbując walczyć o to, dlaczego otrzymywałem błędy na poniższych zrzutach ekranu:
Po godzinach w końcu zlokalizowaliśmy je w niedawno zainstalowanej wtyczce.
Musieliśmy usunąć go z menedżera plików i wszystko wróciło do normy.
Zajmuje to dużo zasobów, chyba że masz super konto hostingowe, nie polecam.
Wsparcie WPBeginner
Cześć Tobi,
Wtyczka nie powinna zużywać zbyt wielu zasobów, ponieważ ładuje wideo z YouTube, a nie z Twojej strony internetowej. Pierwszy zrzut ekranu, który udostępniłeś, wskazuje na błąd połączenia z bazą danych. Mamy nadzieję, że wszystko działa teraz poprawnie, jednak jeśli nadal widzisz problemy na swojej stronie, to najprawdopodobniej jest to problem z hostingiem.
Admin
Mike
Czy to działa z Avada?
Carlos Leon
Czy działa na telefonach komórkowych?