Czy chcesz dodać obraz tła do swojej witryny WordPress?

Obrazy tła mogą służyć do uatrakcyjnienia witryny internetowej i jej estetyki.

W tym artykule pokażemy, jak łatwo dodać obraz tła do witryny WordPress.

Jeśli wolisz pisemne instrukcje, kontynuuj czytanie.

Metoda 1. Dodaj obraz tła za pomocą ustawień motywu WordPress

Wykonanie odcisków ucha jest konieczne, abyśmy mogli stworzyć Twoje monitory Najpopularniejsze motywy WordPress pochodzą z niestandardową obsługą tła. Ta funkcja umożliwia łatwe ustawienie obrazu tła w witrynie WordPress.

Si votre WordPress obsługuje niestandardowe funkcje tła, zalecamy użycie tej metody, aby dodać obraz tła do swojej witryny.

Jednakże, jeśli Twój WordPress nie obsługuje tej funkcji lub jeśli nie podoba Ci się sposób, w jaki implementuje obrazy tła, możesz wypróbować inne opcje wymienione w naszym samouczku.

Musisz najpierw odwiedzić tę stronę Wygląd »Dostosuj w panelu administracyjnym WordPress. Spowoduje to uruchomienie narzędzia Customizer WordPress gdzie możesz zmieniać różne ustawienia tego motywu, przeglądając podgląd w czasie rzeczywistym.

Jak dodać obraz tła Wordpress Blogpascher 1

Następnie musisz kliknąć opcję 'Zdjęcie w tle'. Panel wysunie się i pokaże opcje przesyłania lub wyboru obrazu tła witryny.

Jak dodać obraz tła Wordpress Blogpascher 2

Kliknij przycisk Wybierz obraz, aby kontynuować.

Spowoduje to wyświetlenie wyskakującego okienka WordPress, w którym możesz przesłać obraz ze swojego komputera. Będziesz także mógł wybrać obraz pobrany wcześniej z biblioteki multimediów.

Jak dodać obraz tła Wordpress Blogpascher 3

Następnie po przesłaniu lub wybraniu obrazu, którego chcesz użyć w tle, kliknij przycisk Wybierz obraz.

Spowoduje to zamknięcie wyskakującego okienka programu do przesyłania multimediów i zobaczysz podgląd wybranego obrazu w dostosowaniu motywu WordPress.

Jak dodać obraz tła Wordpress Blogpascher 4

Pod obrazem będziesz mógł również zobaczyć opcje obrazu tła. Poniżej „ PresetMożesz wybrać sposób wyświetlania obrazu tła: wypełnij ekran, dopasuj ekran, powtórz lub niestandardowy.

Możesz także wybrać położenie obrazu tła, klikając strzałki poniżej. Klikając na środku, obraz wyrówna obraz do środka ekranu.

Nie zapomnij kliknąć przycisku « publikować Do przechowywania ustawień. To wszystko, pomyślnie dodałeś obraz tła do swojej witryny WordPress.

Śmiało i odwiedź swoją witrynę, aby zobaczyć, jak działa.

Metoda 2. Dodaj niestandardowy obraz tła w WordPress za pomocą wtyczki

Ta metoda jest znacznie bardziej elastyczna. Działa z dowolnym motywem WordPress i umożliwia konfigurację wielu obrazów tła.

Możesz także ustawić różne tła dla dowolnego posta, strony, kategorii lub dowolnej innej sekcji witryny WordPress.

Automatycznie sprawia, że ​​wszystkie obrazy tła są pełnoekranowe i responsywne. Oznacza to, że obraz tła automatycznie zmieni rozmiar na mniejszych urządzeniach.

Przede wszystkim musisz zainstalować i aktywować wtyczkę Pełny ekran Pro. Więcej informacji można znaleźć w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę Wygląd »Pełnoekranowy obraz BG skonfigurować ustawienia wtyczki.

Pełnoekranowe tło

Zostaniesz poproszony o dodanie klucza licencyjnego. Możesz uzyskać te informacje z wiadomości e-mail otrzymanej po zakupie wtyczki lub ze swojego konta na stronie wtyczki.

Następnie musisz kliknąć 'Zapisz ustawienia'do przechowywania zmian. Możesz teraz zacząć dodawać obrazy tła do swojej witryny WordPress.

Śmiało i kliknij przycisk Dodaj nowy obraz Na stronie ustawień wtyczki. Spowoduje to przejście do ekranu pobierania obrazu tła.

dodaj nowy obraz tła

Kliknij przycisk 'Wybierz obraz', aby pobrać lub wybrać obraz. Jak tylko wybierzesz obraz, będziesz mógł zobaczyć podgląd obrazu w czasie rzeczywistym na ekranie.

Następnie musisz podać nazwę tego obrazu. Ta nazwa będzie używana wewnętrznie, więc możesz jej używać wszędzie.

Na koniec musisz wybrać miejsce, w którym ten obraz ma być używany jako obraz tła.

Full Screen Background Pro pozwala również ustawić obrazy tła dla całej witryny lub możesz wybierać spośród różnych sekcji witryny, takich jak kategorie, archiwa, strona główna lub blog.

Nie zapomnij zapisać, aby zapisać obraz tła.

Możesz dodać dowolną liczbę obrazów, odwiedzając stronę apparence »Pełnoekranowy obraz BG 

Jeśli zdefiniujesz wiele obrazów do użytku globalnego, wtyczka zostanie wyświetlona automatiquement obrazy tła jako pokaz slajdów.

Możesz dostosować czas potrzebny do zniknięcia obrazu oraz czasu, po którym pojawia się nowy obraz tła.

Ustawienia pojawiania się i zanikania tła

Czas, który tu wpisujesz, jest podany w milisekundach. Jeśli chcesz, aby obraz tła wyblakł po 20 sekundach, musisz wprowadzić 20000 XNUMX.

Nie zapomnij kliknąć przycisku Zapisz opcje aby zapisać zmiany.

Obrazy tła dla postów, stron i kategorii

Full Screen Background Pro pozwala również ustawić obrazy tła dla postów, stron, kategorii, tagów i nie tylko.

Po prostu edytuj post / stronę, na której chcesz wyświetlić inny obraz tła. Na stronie edycji artykułu zauważysz nową grupę „ Obraz tła na pełnym ekranie »W edytorze artykułów.

Dodawanie obrazu tła do pojedynczego posta lub strony

Aby użyć obrazu tła dla określonej kategorii, musisz odwiedzić tę stronę Wygląd »Pełnoekranowy obraz tła, a następnie kliknij „Wybierz obraz ".

Po przesłaniu obrazu możesz wybrać „kategorię” jako kontekst, w którym chcesz wyświetlić obraz tła.

Ustaw obraz tła dla określonej kategorii

Wprowadź identyfikator określonej kategorii lub informacji o pracy, w której chcesz wyświetlić obraz. 

Pamiętaj, aby zapisać obraz, aby zachować ustawienia.

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

Domyślnie WordPress dodaje wiele klas CSS do różnych elementów HTML w Twojej witrynie WordPress. Możesz łatwo dodawać niestandardowe obrazy tła do postów, kategorii, autorów i innych stron za pomocą tych klas CSS wygenerowanych przez WordPress.

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

 

Możesz użyć narzędzie inspekcyjne aby zobaczyć dokładnie, które klasy CSS są dodawane przez WordPress do tagu body.

Użyj narzędzia inspekcji, aby zobaczyć klasy dodane przez WordPress

Możesz użyć dowolnej klasy CSS, aby nadać inny styl tej stronie kategorii. 

kategoria-tvcategory-4

Dodajmy niestandardowy obraz tła do strony archiwum kategorii. Będziesz musiał dodać ten niestandardowy CSS do motywu WordPress.

body.category-telewizor { 

background-image: url („http://example.com/wp-content/uploads/2017/03/your-background-image.jpg”); 

pozycja tła: środek centrum; 

rozmiar tła: okładka; 

background-repeat: bez powtórzeń; 

załącznik do tła: naprawiono;

}
Pamiętaj, aby zastąpić adres URL obrazu tła i klasę kategorii własną kategorią.

Możesz także dodawać niestandardowe tła do poszczególnych postów i stron. WordPress dodaje klasę CSS z identyfikatorem posta lub strony w treści tagu. Możesz użyć tego samego kodu CSS, po prostu zastąp .category-tv klasą CSS określonego postu.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Łatwy Custom JS i CSS 

Ce WordPress Plugin premium to potężny edytor kodu CSS i JavaScript, który pozwala dodawać je do dowolnej sekcji witryny. Pozwala zachować dostosowania nawet po dużej aktualizacji motywu WordPress. Łatwa niestandardowa wtyczka do dostosowywania js i css do Wordpress

Masz możliwość ograniczenia zakresu wykorzystania spersonalizowanego kodu. Na przykład możesz użyć swojego kodu tylko dla artykułu mającego format wideo.

Zobacz nasze artykuły na Jak wymagać akceptacji warunków korzystania z WordPress

Lub możesz ograniczyć swój kod do określonego motywu WordPress; Jest to przydatne, jeśli obecnie zmieniasz motywy na swoim blogu WordPress.

Pobierz | Demo | hosting

2. Żółty ołówek: Edytor stylów Visual CSS

Yellow Pencil to wizualny edytor stylów, którego możesz użyć z dowolnym motywem, aby spersonalizować swoją witrynę w ciągu kilku minut (czcionki, kolory, animacje i więcej…).Wtyczka edytora wizualnego stylu css Yellowpencil wordpress

Ce WordPress Plugin premium stworzy style CSS przez tło podczas zabawy kolorami, jakby to była gra. Został zaprojektowany zarówno dla początkujących, jak i doświadczonych użytkowników.

Odkryj także nasze Wtyczki 5 WordPress wyświetlać powiadomienia

Nie jest wymagana znajomość kodowania. Jednakże WordPress Plugin ma dobry edytor CSS dla tych, którzy lubią kodować. Za pomocą tego edytora możesz kodować na żywo i dostosowywać swój CSS.

Pobierz | Demo | hosting

3. Widżet Najnowsze komentarze na Facebooku 

Ten widżet umożliwia wyświetlenie listy najnowszych komentarzy z Twojego bloga na Facebooku na pierwszej stronie lub w dowolnym miejscu, w którym znajduje się widżet używany przez witrynę.

Najnowsze komentarze na Facebooku Widżet Wordpress Wtyczka Wordpress do komentarzy na Facebooku

Jako funkcje będziesz mieć między innymi: wyświetlanie wszystkich ostatnich komentarzy na swojej stronie lub blogu WordPress, plikAutomatyczne lub ręczne zatwierdzanie komentarzy do wyświetlenia na widżecie,wysyłanie powiadomienia e-mail, gdy osoba komentuje poprzez wtyczkę komentarzy na Facebooku, dobre SEO, kompatybilność z dowolny motyw WordPress, włopcje dostosowania widgetu i wiele więcej.

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Tutaj! To wszystko w tym samouczku. Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać obraz tła w WordPress. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na temat Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...