Jak poprawnie dodać obrazy tła WordPress do swojej witryny?

Czy dodawanie obrazów tła WordPress do Twojej witryny jest łatwe? Odpowiedź brzmi w większości przypadków tak, chyba że Twój motyw go nie obsługuje.

Prawda jest taka, że ​​obecnie wiele motywów WordPress oferuje łatwe sposoby dodawania i zmieniania istniejących obrazów tła.

Możesz także zmienić obrazy tła WordPress za pomocą CSS lub wtyczki, która otwiera opcje ustawiania obrazu tła na stronach, postach i kategoriach.

W tym artykule dowiesz się, jak wykonać wszystkie powyższe czynności, aby Twoja witryna wyróżniała się przyciągającym wzrok wyglądem.

Co to są obrazy tła WordPress ?

Obraz tła WordPress to obraz umieszczony za główną treścią. Zamiast być głównym celem Twojej witryny, jak obraz bohatera, często są bardziej subtelne i uzupełniają inne treści na Twoich stronach internetowych.

Oprócz pomocy w tworzeniu stron internetowych, które zapewniają lepsze wrażenia z czytania, obrazy tła WP oferują wiele możliwości projektowania, które odróżniają Twoją witrynę od konkurencji.

Odróżnianie się od konkurencji oznacza podnoszenie świadomości marki poprzez wkładanie dodatkowego wysiłku w projekt strony internetowej, co nie zawsze jest łatwe. W takich przypadkach możesz poprosić agencję cyfrową o profesjonalne usługi projektowania stron internetowych.

Ale dlaczego chcesz zmienić tło? Cóż, domyślny może nie przemawiać do Ciebie lub nie przypominać Twojej marki. A może to wcale nie jest obraz, tylko jednolity kolor. A może na początku kochałeś ten istniejący, ale teraz znudził Ci się.

Bez względu na powód, poeksperymentujmy ze zmianą tego.

Użyj domyślnego konfiguratora WordPress, aby dodać obraz tła WordPress

Motywy WordPress zwykle oferują łatwy sposób na użycie koloru lub obrazu w tle. Większość osób decyduje się na zmianę koloru tła, aby lepiej pasował do marki i gustu ich witryny.

W tym przewodniku użyjemy Woostify — fantastycznego motywu dla witryn eCommerce. W zależności od motywu metoda może się nieznacznie różnić.

1. Z pulpitu WordPress przejdź do Wygląd > Tapeta/Tło lub Wygląd > Dostosuj > Tapeta .

2. Kliknij przycisk Wybierz obraz , aby otworzyć Bibliotekę multimediów.

3. Wybierz żądany obraz. Możesz przesłać go z komputera lub wybrać istniejący z Biblioteki multimediów.

4. Kliknij przycisk Wybierz obraz , gdy będziesz zadowolony.
5. Jeśli podoba Ci się to, co widzisz w podglądzie, kliknij przycisk Opublikuj . I to wszystko!

Ponadto WordPress oferuje proste narzędzie do edycji obrazu tła. Możesz z nim poeksperymentować, aby zobaczyć, jaki rozmiar, pozycja itp. jest najlepszy.

Nie martw się, że utkniesz w czymkolwiek. W każdej chwili możesz łatwo wrócić do ustawień i zmienić tło (i powiązane opcje).

Użyj kreatora stron Elementor, aby dodać obrazy tła WordPress do posta/strony

Elementor to popularny program do tworzenia stron, który znacznie przyspiesza produkcję stron internetowych. Oferuje darmową wtyczkę, której możesz użyć do dodawania obrazów tła WordPress.

1. Aby rozpocząć, musisz zainstalować i aktywować wtyczkę Elementor.
2. Najpierw przejdź do wybranego posta lub strony. W domyślnym edytorze stron WordPress kliknij przycisk Edytuj za pomocą Elementora .

Edytor Elementora zostanie otwarty. Po lewej stronie zobaczysz menu z listą wszystkich bloków do przeciągania i upuszczania do budowania i edytowania posta/strony.

3. Kliknij małą ikonę ustawień w lewym dolnym rogu kreatora stron.

4. Następnie wybierz kartę Styl .

5. Następnie kliknij ikonę pędzla, aby dodać obraz tła WordPress .

6. Następnie kliknij przycisk Wybierz obraz , aby wyświetlić Bibliotekę multimediów.

7. Wybierz żądany obraz. Możesz przesłać go z komputera lub wybrać istniejący z Biblioteki multimediów.

8. Następnie kliknij przycisk „Wstaw nośnik” w prawym dolnym rogu.

Teraz wybrany obraz tła powinien pojawić się w podglądzie po prawej stronie. Może być konieczne dostosowanie innych treści, aby elementy, takie jak obrazy i tekst, wyświetlały się poprawnie.

9. Pamiętaj, aby nacisnąć przycisk „AKTUALIZUJ”, aby zapisać wszystkie zmiany i zaktualizować wpis/stronę.

Ponadto Elementor zapewnia pewne dostosowanie do obrazów tła WordPress, takich jak Pozycja, Załącznik, Powtórz itp. Możesz eksperymentować z nimi, aby znaleźć najlepsze tło.

Użyj wtyczki, aby dodać obrazy tła WordPress

Istnieje kilka darmowych, ale doskonałych wtyczek, które mogą wykonać zadanie dodawania obrazów tła WordPress . Na przykład prosty obraz tła na pełnym ekranie, zaawansowane tła WordPress, menedżer pełnego tła itp.

Dodaj obraz tła WordPress dla całej witryny

W tym przewodniku użyjemy prostego pełnoekranowego obrazu tła, ponieważ jest prosty, stąd jego nazwa.

Ta wtyczka zapewnia prostą instalację i konfigurację obrazu tła WordPress dla Twojej witryny. Automatycznie skaluje obraz z przeglądarką. Dzięki temu zawsze wypełnia ekran, bez względu na to, z jakich urządzeń korzystają Twoi goście.

Aby wprowadzić go w życie, wystarczy kilka prostych kroków. Dostępna jest płatna wersja, która dodaje dodatkowe funkcje. Jednak darmowy to wszystko, czego potrzebujemy.

1. Zainstaluj i aktywuj wtyczkę Simple Screen Background Image.
2. Z pulpitu nawigacyjnego WordPress przejdź do Wygląd > Pełny ekran BG Image .

3. Kliknij przycisk Wybierz obraz , aby otworzyć Bibliotekę multimediów.

4. Wybierz żądany obraz. Możesz przesłać go z komputera lub wybrać istniejący z Biblioteki multimediów.

5. Kliknij przycisk Wybierz obraz , gdy będziesz szczęśliwy.
6. Na koniec kliknij przycisk „Zapisz opcje” i sprawdź swoją witrynę. Obraz powinien teraz wyświetlać się w witrynie jako pełnoekranowy obraz tła WordPress.

Zwróć uwagę, że ustawienie wtyczki dla obrazów tła WordPress zastępuje domyślny Konfigurator WordPress. Nie jest to żadna zła rzecz, po prostu należy o tym pamiętać.

Dodaj obrazy tła WordPress na określonej stronie / poście

W tym przewodniku użyjemy wtyczki Advanced WordPress Backgrounds, o której wspomnieliśmy powyżej.

Ta wtyczka umożliwia dodawanie tła za pomocą bloków Gutenberga. Możesz ustawić kolor, obraz, a nawet wideo jako tło WordPress. Wszystkie są widoczne na urządzeniach mobilnych. Ponadto możesz dodać efekt paralaksy do obrazów i filmów w tle WordPress.

W takim przypadku do obszaru zawartości, w szczególności postów/stron, dodamy tylko statyczny obraz tła.

Ponieważ działa to z blokami Gutenberga, pamiętaj, aby przełączyć się z trybu klasycznego edytora, jeśli zajdzie taka potrzeba.

1. Zainstaluj i aktywuj wtyczkę.
2. Otwórz istniejący post/stronę lub utwórz nowy.
3. Kliknij przycisk plusa w lewym górnym rogu. Następnie przewiń w dół do sekcji Projekt i wybierz blok AWB. Obok bloku pojawi się górny pasek ikon i kolumna menu bocznego.

4. Kliknij przycisk Obraz w bocznej kolumnie. Następnie kliknij przycisk Wybierz obraz poniżej, aby otworzyć Bibliotekę multimediów.

5. Wybierz żądany obraz. Następnie kliknij przycisk Wybierz . Gdy to zrobisz, powinieneś zobaczyć obraz tła.

6. Na górnym pasku ikon kliknij ikonę kształtu hamburgera. Następnie wybierz opcję Pełna szerokość , aby pokryć całą szerokość. Jest to całkowicie opcjonalne.

W bocznej kolumnie możesz zmienić rozmiar obrazu tła WordPress, odstępy, położenie i wiele innych. Zapraszam do eksperymentowania.

Teraz pozostaje tylko dodać zawartość wewnątrz bloku. Jeśli edytujesz istniejący post/stronę, po prostu wytnij i wklej zawartość do bloku.

Pamiętaj, aby zapisać post/stronę, gdy jesteś zadowolony z wyniku.

Użyj CSS , aby dodać obrazy tła WordPress

Teraz zbadamy, jak zmienić obrazy tła WordPress za pomocą CSS . Można to zrobić dla całej witryny lub dla określonych kategorii za pomocą narzędzia WordPress Customizer.

1. Z pulpitu WordPress przejdź do Wygląd > Dostosuj , aby uzyskać dostęp do WordPress Customizer.

2. Przewiń w dół i kliknij sekcję Dodatkowy CSS .

3. Skopiuj i wklej odpowiedni kod poniżej w polu CSS:

Dodaj obraz tła WordPress dla całej witryny

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Pamiętaj, aby zastąpić tekst zastępczy „imageURL” rzeczywistym adresem URL pliku obrazu. Aby to zobaczyć, wybierz żądany obraz w Bibliotece mediów, aby wyświetlić informacje o obrazie.

A jeśli znasz CSS, możesz go dowolnie modyfikować.

Dodaj obrazy tła WordPress na stronie określonej kategorii

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Pamiętaj, aby zastąpić tekst zastępczy „imageURL” rzeczywistym adresem URL pliku obrazu, a „categoryid” prawidłową nazwą kategorii.

Aby poznać identyfikator kategorii, postępuj zgodnie z poniższymi instrukcjami:

1. Z pulpitu WordPress przejdź do Wpisy > Kategorie .

2. Najedź myszą na tekst edycji kategorii, do której chcesz się odnieść. Zobaczysz adres URL w lewym dolnym rogu strony, pokazując identyfikator kategorii.

Najlepsze praktyki dotyczące używania obrazów tła w WordPress

Ustawienie niestandardowego obrazu tła w WordPressie wydaje się łatwym zadaniem. TAk! To prawda w większości przypadków, ale nie zawsze.

Dlatego zalecamy stosowanie najlepszych praktyk dotyczących obrazu tła WordPress, aby wyeliminować jak najwięcej problemów.

Sprawdź obsługę obrazów tła przed użyciem motywu WordPress

Niestety nie wszystkie motywy WordPress obsługują niestandardowe obrazy tła. Zwykle dzieje się tak dlatego, że tła nie pasują do ogólnego projektu motywu. Dlatego twórcy zdecydowali się całkowicie go wyłączyć.

Dlatego powinieneś sprawdzić listę funkcji podczas pobierania nowego motywu, zwłaszcza jeśli planujesz zapłacić za premium. Wiele stron internetowych, które sprzedają motywy, dostarcza informacji o tym, czy motyw WordPress obsługuje obrazy tła, czy nie.

Trzymaj się wysokiej jakości obrazów

Rozdzielczość zamierzonych obrazów tła często powoduje lub psuje prezentację. Możesz pomyśleć, że zdjęcie zrobione telefonem jest wystarczająco dobre na tło. Ale są szanse, że musi być znacznie wyższej jakości.

Możesz płacić za zdjęcia bez tantiem z witryn takich jak Shutterstock. Witryny te często zawierają profesjonalne obrazy gotowe do przesłania jako duże obrazy tła. Wiele z nich można również znaleźć na bezpłatnych stronach z obrazami stockowymi.

Obraz tła może nie być w pełni widoczny w witrynie WordPress, ponieważ większość z niego jest zakryta treścią. Jednak nadal jest wyświetlany na całym ekranie. Dlatego ryzykujesz, że zobaczysz rozciągnięte tło, jeśli nie użyjesz obrazu wysokiej jakości.

Zoptymalizuj obrazy tła

Podobnie jak w przypadku wszystkich zdjęć przesłanych do witryny WordPress, przed publikacją należy zoptymalizować obrazy tła.

Jest to szczególnie ważne w przypadku obrazów tła, ponieważ często pojawiają się one na wielu stronach w witrynie. Dodatkowo są to duże zdjęcia i zajmują dużo miejsca na ekranie. Ponadto większe obrazy znacznie obciążają serwer. Dlatego pamiętaj, aby zoptymalizować obrazy tła, aby witryna ładowała się szybko.

Masz tutaj dwie opcje:

• Zoptymalizuj obrazy tła (i wszystkie zdjęcia z witryny) przed przesłaniem ich na serwer. Możesz ukończyć ten ręczny proces za pomocą narzędzi takich jak Photoshop, GIMP i Pixlr.
• Zautomatyzuj proces optymalizacji, instalując wtyczkę WordPress, która zmienia rozmiar i zmniejsza obrazy podczas przesyłania.

Końcowe przemyślenia

Dodawanie obrazów tła WordPress do Twojej witryny może wydawać się drobnostką. Ale jeśli zostanie to zrobione dobrze, może mieć ogromny wpływ.

Ponadto może pomóc w utrzymaniu świeżości Twojej obecności w Internecie. Dzięki temu Twoi goście nie będą się nudzić, widząc w kółko te same zdjęcia.

Najlepiej użyć narzędzia WordPress Customizer, aby dodać obraz tła, gdy tylko jest to możliwe, ponieważ jest on specjalnie zaprojektowany, aby działał zgodnie z przeznaczeniem.

Masz jednak również inne opcje dodawania i zmieniania obrazów tła WordPress, jak pokazaliśmy powyżej.

Teraz śmiało i kreatywnie wykorzystaj tło swojej witryny, aby wizualnie zaangażować odwiedzających.