Jak dodać obraz tła w WordPress (6 łatwych sposobów)

Obrazy tła mogą całkowicie odmienić wygląd i charakter Twojej witryny WordPress. Jednak rozciągnięte obrazy, nieprawidłowe wyrównanie lub problemy z rozmiarem pliku mogą stanąć na przeszkodzie. Zwłaszcza jeśli nie wiesz, której metody użyć.

Z naszego doświadczenia w zarządzaniu dziesiątkami witryn WordPress dowiedzieliśmy się, że większość ludzi utrudnia ten proces znacznie bardziej, niż jest to konieczne.

Dobra wiadomość jest taka, że WordPress oferuje kilka wbudowanych opcji dodawania obrazów tła, a także doskonałe wtyczki, które ułatwiają to jeszcze bardziej. Gdy poznasz właściwe metody, możesz dodać piękne tła do całej swojej witryny, poszczególnych stron lub konkretnych sekcji za pomocą zaledwie kilku kliknięć.

W tym przewodniku pokażemy 5 niezawodnych sposobów na dodanie obrazów tła w WordPressie, które działają dla każdego poziomu umiejętności. 🎨

Dlaczego warto dodać obraz tła w WordPress?

Dodanie obrazu do Twojej witryny WordPress może sprawić, że będzie ona bardziej atrakcyjna dla odwiedzających. Możesz szybko przyciągnąć uwagę użytkowników i zaangażować ich w swoje treści.

Pozwala również spersonalizować projekt witryny zgodnie z Twoją marką. Na przykład możesz przesłać subtelne zdjęcia swoich produktów lub maskotki marki w tle.

Dodatkowo możesz dodać film z YouTube jako pełne tło lub pokaz slajdów z obrazów, który ożywi Twoje treści.

Jednak sugerujemy wybieranie obrazów tła, które nie rozpraszają ani nie utrudniają czytania treści na Twoim blogu WordPress. Tło powinno poprawiać doświadczenie użytkownika i pomagać w przekazywaniu Twojej wiadomości odwiedzającym.

Dodatkowo ważne jest, aby wybrać obraz tła, który jest przyjazny dla urządzeń mobilnych i nie wpłynie na szybkość Twojej witryny. W przeciwnym razie zaszkodzi to Twojemu WordPress SEO.

W tym artykule podzielimy się różnymi sposobami dodawania obrazu tła WordPress.

Omówimy wiele metod, w tym narzędzie do dostosowywania motywów WordPress, edytor pełnej witryny, wtyczkę, kreator motywów i inne. Po prostu kliknij poniższy link, aby przejść do preferowanej sekcji:

• Metoda 1. Dodaj obraz tła za pomocą narzędzia dostosowywania motywu WordPress
• Metoda 2. Dodaj niestandardowy obraz tła za pomocą edytora całego serwisu
• Metoda 3. Dodaj obraz tła za pomocą narzędzia do tworzenia motywów WordPress
• Metoda 4. Dodaj obraz tła za pomocą CSS Hero
• Metoda 5. Dodaj niestandardowe obrazy tła w dowolnym miejscu w WordPressie za pomocą kodu CSS
• Dodatkowe zasoby: Przewodniki po plikach graficznych i multimedialnych, aby poprawić UX witryny WordPress

Gotowi? Zacznijmy.

Metoda 1. Dodaj obraz tła za pomocą narzędzia dostosowywania motywu WordPress

Większość popularnych motywów WordPress zawiera niestandardowe wsparcie dla tła. Ta funkcja pozwala łatwo ustawić obraz tła. Zalecamy tę metodę, jeśli Twój motyw ją obsługuje.

Jednak jeśli Twoja opcja menu dostosowywania jest niedostępna, Twój motyw może mieć włączoną edycję całej witryny. W następnej sekcji omówimy, jak użyć edytora całej witryny do zmiany obrazu tła.

W międzyczasie, aby użyć „Dostosuj”, musisz odwiedzić stronę Wygląd » Dostosuj w swoim panelu administracyjnym WordPress.

Spowoduje to uruchomienie narzędzia do dostosowywania motywów WordPress, które pozwala na zmianę różnych ustawień motywu podczas podglądu strony internetowej na żywo.

Pamiętaj, że widoczne opcje będą się różnić w zależności od motywu WordPress, którego używasz. W tym samouczku używamy motywu Sydney.

Jeśli używasz innego motywu, być może będziesz musiał zapoznać się z dokumentacją tego motywu. Jeśli nie możesz znaleźć obrazu tła w narzędziu do dostosowywania, możesz również skontaktować się z twórcą motywu, aby dowiedzieć się, jak go dodać.

W opcjach dostosowywania motywu Sydney musisz kliknąć „Ogólne” w panelu po lewej stronie.

Po wykonaniu tej czynności zobaczysz różne opcje „Ogólne” do dostosowywania motywu Sydney.

W tym momencie będziesz musiał kliknąć sekcję „Obraz tła”.

Na następnym ekranie zobaczysz opcję dodania obrazu tła.

Kliknij przycisk „Wybierz obraz”.

Spowoduje to wyświetlenie biblioteki multimediów WordPress.

Tutaj możesz przesłać obraz z komputera lub wybrać wcześniej przesłany.

Po wybraniu obrazu dla tła będziesz musiał kliknąć przycisk „Wybierz”.

Zamknie to wyskakujące okienko multimediów, a w personalizatorze motywu zobaczysz podgląd wybranego obrazu tła.

W lewym panelu możesz dostosować pozycję obrazu (góra, środek, dół, lewo, prawo), aby kontrolować, jak pojawia się w tle. Możesz również zmienić jego rozmiar za pomocą menu rozwijanego „Rozmiar obrazu”, aby dopasować, wypełnić lub pokryć obszar.

Jeśli chcesz, aby obraz powtarzał się w tle, zaznacz pole wyboru „Powtarzaj obraz tła”. Możesz również sprawić, że obraz będzie przewijał się wraz z zawartością strony, zaznaczając pole „Przewijaj ze stroną”.

Gdy będziesz zadowolony z wyglądu, kliknij przycisk „Opublikuj” na górze, aby zapisać ustawienia.

To wszystko. Pomyślnie dodałeś obraz tła do swojej witryny WordPress. Odwiedź swoją witrynę, aby zobaczyć go w akcji.

Metoda 2. Dodaj niestandardowy obraz tła za pomocą edytora całego serwisu

Jeśli używasz motywu WordPress opartego na blokach, możesz dodać niestandardowy obraz tła za pomocą edytora pełnej witryny (FSE).

Edytor całych witryn pozwala na edycję projektu Twojej witryny za pomocą bloków. Jest to podobne do edycji posta na blogu lub strony za pomocą edytora bloków WordPress.

W tym samouczku użyjemy domyślnego motywu „Twenty Twenty-Two”. Aby uruchomić pełny edytor witryny, przejdź do Wygląd » Edytor z obszaru administracyjnego WordPress.

Gdy już znajdziesz się w edytorze pełnej witryny, będziesz musiał dodać blok „Pokrywa” do swojego szablonu, aby przesłać obraz tła.

Po prostu kliknij znak „+” na górze i dodaj blok „Okładka”.

Aby dodać obraz tła do bloku „Okładka”, kliknij przycisk „Prześlij” lub „Biblioteka multimediów”.

Spowoduje to otwarcie okna wyskakującego okienko do przesyłania multimediów WordPress.

Następnym krokiem jest wybranie obrazu, którego chcesz użyć jako tła witryny.

Po wybraniu obrazu kliknij przycisk „Wybierz”.

Po dodaniu obrazu do bloku „Okładka” musisz ustawić go jako tło strony.

Aby to zrobić, po prostu kliknij ikonę „Widok listy” na górze (ikona z 3 kreskami). Spowoduje to otwarcie widoku konspektu elementów motywu, takich jak nagłówek witryny i stopka.

Następnie po prostu przeciągnij i upuść wszystkie elementy szablonu pod blokiem „Nagłówek” w widoku listy.

Gdy wszystkie znajdą się pod spodem, obraz bloku „Okładka” pojawi się jako tło witryny.

Następnie możesz dostosować obraz tła, klikając blok „Pokrywa” i wybierając ikonę zębatki w prawym górnym rogu ekranu. Spowoduje to otwarcie panelu ustawień „Blok”.

Tutaj znajdziesz opcje, aby ustawić obraz jako stałe tło, dostosować jego nakładkę, edytować kolor i więcej.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz”.

I to wszystko! Pomyślnie dodałeś obraz tła za pomocą edytora pełnej witryny.

Metoda 3. Dodaj obraz tła za pomocą narzędzia do tworzenia motywów WordPress

Innym sposobem dodania niestandardowych obrazów tła do Twojej witryny jest użycie kreatora motywów WordPress, takiego jak SeedProd. Jest to najlepsza wtyczka do tworzenia stron docelowych WordPress z funkcją przeciągnij i upuść, która pozwala łatwo dostosować projekt witryny bez dotykania ani jednej linii kodu.

Używamy również SeedProd na niektórych z naszych stron firmowych i działa to naprawdę dobrze. Aby uzyskać więcej informacji na temat naszych doświadczeń, możesz zapoznać się z naszą obszerną recenzją SeedProd.

W tym samouczku użyjemy wersji SeedProd Pro, ponieważ zawiera ona kreator motywów. Istnieje również darmowa wersja SeedProd Lite, którą możesz wypróbować za darmo.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji zobaczysz ekran powitalny SeedProd w swoim panelu WordPress.

Następnie będziesz musiał wprowadzić swój klucz licencyjny i kliknąć przycisk „Zweryfikuj klucz”, aby aktywować wersję pro wtyczki. Swój klucz licencyjny znajdziesz w obszarze swojego konta SeedProd.

Po wszystkim będziesz musiał przejść do SeedProd » Kreator motywów w swoim panelu administracyjnym WordPress.

Kliknij przycisk „Motywy” na górze.

SeedProd zaoferuje teraz wiele szablonów motywów do wyboru.

Możesz najechać kursorem i kliknąć na dowolny szablon, którego chcesz użyć. W tym samouczku użyjemy szablonu motywu „Starter”.

Stąd SeedProd wygeneruje różne szablony, takie jak strona główna, pojedynczy wpis, pojedyncza strona, pasek boczny, nagłówek i inne.

Aby dodać obraz tła, który będzie widoczny na całej stronie internetowej i we wszystkich szablonach motywu, kliknij opcję „Edytuj projekt” w sekcji Globalny CSS.

Na następnym ekranie zobaczysz globalne ustawienia CSS, które możesz zmienić.

Po prostu kliknij opcję „Tło”, aby rozpocząć dostosowywanie.

Po tym zobaczysz opcje „Obraz tła”.

Kliknij „Użyj własnego obrazu”, aby przesłać swoje zdjęcie. Alternatywnie możesz kliknąć przycisk „Użyj obrazu z biblioteki”, aby wyszukać obraz z biblioteki do wykorzystania jako tło Twojej witryny.

Po dodaniu obrazu tła, kreator SeedProd wyświetli podgląd na żywo.

W razie potrzeby możesz dostosować pozycję tła. Możesz również wybrać, czy użyć pełnoekranowej osłony, czy powtórzyć ją, między innymi opcjami.

Dodatkowo możesz edytować poziom ciemności obrazu tła, przesuwając suwak „Przyciemnij tło”. Im wyższy wynik, tym ciemniejszy będzie obraz.

Po zakończeniu edycji obrazu tła po prostu kliknij przycisk „Zapisz” na górze i zamknij ustawienia Global CSS.

Jeśli chcesz dodać niestandardowy obraz tła dla różnych części swojej witryny, możesz edytować te poszczególne szablony motywów w SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak łatwo stworzyć niestandardowy motyw WordPress.

Metoda 4. Dodaj obraz tła za pomocą CSS Hero

CSS Hero to wtyczka WordPress, która pozwala na wprowadzanie wszelkich zmian w motywie bez kodowania.

Możesz szybko dodać obrazy tła w kilku prostych krokach. Ale najpierw musisz zainstalować i aktywować CSS Hero. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po wykonaniu tej czynności możesz zacząć dostosowywać swoją witrynę.

Pierwszą rzeczą, którą musisz zrobić, to otworzyć swoją stronę główną w przeglądarce. Tam zobaczysz link „Dostosuj za pomocą CSS Hero” w swojej pasku administracyjnym.

Po prostu kliknij link, a zobaczysz otwarte opcje CSS Hero.

Po wejściu najedź kursorem myszy na obszar, do którego chcesz dodać obraz. Następnie kliknij obszar, aby uzyskać dostęp do opcji „Tło” w lewym pasku bocznym.

Kliknij przycisk „Tło”, aby zobaczyć ustawienia dodawania obrazu.

Stamtąd po prostu kliknij „Obraz”.

Następnie możesz wybrać obraz z Unsplash lub przesłać własny, aby utworzyć tło.

Po kliknięciu wybranego obrazu zobaczysz przycisk „Zastosuj obraz”.

Następnie możesz wybrać, jakiego rozmiaru ma być Twój obraz. Zalecamy wybór dużej wersji, aby rozciągnęła się na całą stronę.

Na koniec możesz kliknąć „Zapisz i opublikuj” na dole, aby zapisać obraz tła dla swojej witryny.

Metoda 5. Dodaj niestandardowe obrazy tła w dowolnym miejscu w WordPressie za pomocą kodu CSS

Domyślnie WordPress dodaje kilka klas CSS do różnych elementów HTML na Twojej stronie WordPress. Możesz więc łatwo dodawać niestandardowe obrazy tła do poszczególnych wpisów, kategorii, autorów i innych stron, korzystając z tych klas CSS generowanych przez WordPress.

Na przykład, jeśli na Twojej stronie masz kategorię o nazwie TV, WordPress automatycznie doda te klasy CSS do tagu body, gdy ktoś wyświetli stronę kategorii TV.

<body class="archive category category-tv category-4">

Możesz użyć narzędzia do inspekcji, aby zobaczyć, jakie klasy CSS WordPress dodaje do tagu body. Oto przykład:

Możesz użyć klasy CSS category-tv lub category-4, aby inaczej stylizować tylko tę stronę kategorii.

Na przykład dodajmy niestandardowy obraz tła do strony archiwum kategorii.

Chociaż powszechną praktyką jest modyfikowanie pliku motywu functions.php w celu dodania kodu CSS, jest to niebezpieczne i nieprzyjazne dla początkujących. Jeden drobny błąd i ryzykujesz uszkodzenie swojej witryny.

Dlatego zawsze zalecamy używanie WPCode. Jest to najlepsza wtyczka do dodawania niestandardowych fragmentów kodu bez większych problemów.

Używamy WPCode do dodawania i zarządzania fragmentami kodu w naszych markach. Był to prosty i skuteczny sposób na utrzymanie porządku i płynne działanie rzeczy. Jeśli chcesz dowiedzieć się więcej, zapoznaj się z naszą szczegółową recenzją WPCode.

Aby to zrobić, zainstaluj i aktywuj wtyczkę WPCode. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji po prostu przejdź do Fragmenty kodu » + Dodaj nowy z obszaru administracyjnego WordPress.

Na następnym ekranie najedź kursorem na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Użyj fragmentu”, gdy się pojawi.

Na następnym ekranie możesz zacząć od dodania tytułu dla swojego niestandardowego fragmentu CSS. Warto wybrać coś prostego i trafnego, ponieważ pomoże Ci to rozpoznać kod później.

Następnie możesz wpisać lub wkleić poniższy niestandardowy kod CSS do pola „Podgląd kodu”.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Nie zapomnij zastąpić adresu URL obrazu tła i klasy kategorii tymi z Twojej własnej witryny.

Oto jak może to wyglądać w edytorze WPCode:

Następnie musisz ustawić „Typ kodu”, wybierając „Fragment kodu CSS” z menu rozwijanego.

Gdy wszystko będzie wyglądać dobrze, możesz przełączyć przełącznik, aby aktywować fragment kodu i kliknąć „Zapisz fragment”.

Dodatkowo możesz dodać niestandardowe tła do poszczególnych wpisów i stron.

WordPress posiada klasę CSS z identyfikatorem posta lub strony w tagu body. Możesz użyć tego samego kodu CSS i po prostu zastąpić .category-tv klasą CSS specyficzną dla posta.

Więcej szczegółów znajdziesz w naszym poradniku jak dodać niestandardowy CSS w WordPressie.

Dodatkowe zasoby: Przewodniki po plikach graficznych i multimedialnych, aby poprawić UX witryny WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać obraz tła w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat:

• Jak prawidłowo dodawać obrazy w WordPressie
• Jak stworzyć galerię obrazów w WordPress
• Jak stworzyć suwak wideo i obrazkowy w WordPress
• Jak dodać miniatury do linków poprzedniego i następnego wpisu w WordPressie
• Jak osadzić Spotify w WordPressie
• Jak osadzić Apple Podcasts w WordPress
• Najlepsze oprogramowanie do projektowania stron internetowych
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości

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.