Dodanie obrazu tła do witryny WordPress jest łatwe. Prawda?
W większości tak. Chyba, że Twój motyw go nie obsługuje. Prawda jest taka, że wiele motywów WordPress ma dziś szybkie i łatwe ustawienia dodawania lub zmiany istniejącego obrazu tła. Podobnie jak domyślne dostosowania wyglądu WP.
Możesz także zmienić tło za pomocą CSS lub różnych wtyczek, otwierając opcje ustawiania obrazu tła na stronach, postach i kategoriach.
W tym artykule pokażemy Ci, jak wykonać wszystkie powyższe czynności i sprawić, by Twoja strona wyróżniała się atrakcyjnym wyglądem.
Czytaj dalej, lub Skocz do przodu, korzystając z tych linków:
Po co zmieniać przeszłość? Cóż, obraz, który domyślnie jest Twoim motywem, może Ci się nie spodobać lub czuć, że tętni Twoim brandingiem. A może to wcale nie jest obraz, tylko kolory. A może pierwotnie podobał Ci się obraz, ale już ci się znudził.
Bez względu na powód, eksperymentujmy ze zmianą.
Dodaj obraz tła za pomocą domyślnych dostosowań WordPress
Motywy WordPress mogą mieć kolorowe tło lub domyślne zdjęcie w tle. Większość ludzi decyduje się zastąpić je obrazem i / lub kolorami, które lepiej pasują do ich gustu i marki witryny.
Aby dodać obraz tła do domyślnego edytora WordPress, musisz wykonać następujące kroki:
- Z Pulpitu nawigacyjnego WP przejdź do Wygląd > Dostosuj > obraz tła lub wygląd > tło / obraz tła.
- Kliknij przycisk Wybierz obraz, aby otworzyć bibliotekę multimediów.
- Wybierz żądany obraz, przesyłając go z komputera lub wybierając jeden z biblioteki multimediów.
- Po wybraniu obrazu kliknij niebieski przycisk Wybierz obraz.
- W górnym oknie menu po lewej stronie zobaczysz swój wybór. Po prawej stronie zobaczysz Pełnowymiarowy podgląd strony głównej witryny z obrazem tła.
Jeśli podoba Ci się to, co widzisz, kliknij niebieski przycisk Publikuj w prawym górnym rogu i gotowe!
Jeśli chcesz zmienić sposób, w jaki wygląda przed finalizacją, istnieje wiele ustawień i opcji, z którymi możesz grać, aby znaleźć preferowany wygląd.
Narzędzia do edycji menu obrazu tła wraz z powiązanymi z nimi opcjami są następujące:
- Preset
- Domyślny, wypełnij ekran, Dopasuj do ekranu, powtórz, Niestandardowy
- Pozycja Obrazu
- Środkowy, Górny Prawy, Środkowy Prawy, Dolny Prawy, Środkowy Dolny, Górny Lewy, Środkowy Lewy, Dolny Lewy, Środkowy Górny
- Rozmiar Obrazu
- Oryginalny, dopasowany do ekranu, wypełnij ekran
- Powtórz obraz tła-checkbox
- Scroll with Page-checkbox
Pobaw się narzędziami do edycji, aby zobaczyć, jaki rozmiar, Wzór i pozycja najbardziej Ci się podoba. Wybranie dowolnej z opcji rozwijanych z podmenu spowoduje wyświetlenie wynikowego podglądu strony po prawej stronie.
Nie martw się, że utkniesz z czymkolwiek. Łatwo jest wrócić do ustawień i zmienić obraz tła (i powiązane opcje) w dowolnym momencie.
Dodaj tyłobraz uziemiający za pomocą wtyczki
Istnieje kilka wtyczek na WordPress.org które wykonują zadanie dodawania obrazów tła.
Aby wymienić tylko kilka: zaawansowane tła WordPress, pełny Menedżer tła i prosty pełnoekranowy obraz tła.
Ten ostatni jest moim ulubionym z grupy, więc to, co będę używać w tym samouczku.
Prosty pełnoekranowy obraz tła zapewnia łatwą instalację i konfigurację pełnoekranowego obrazu jako tła Twojej witryny. Skaluje obrazy automatycznie za pomocą przeglądarki, co oznacza, że obraz zawsze wypełnia ekran.
Wprowadzenie go w życie wymaga tylko kilku prostych kroków. Dostępna jest wersja płatna/pro, która dodaje inne funkcje, ale darmowa wersja jest wszystkim, czego potrzebujemy do tego ćwiczenia.
Użyjmy wtyczki teraz, aby dodać pełnoekranowy obraz tła.
- Zainstaluj i aktywuj Prosty Pełnoekranowy Obraz Tła plugin.
- Z Pulpitu nawigacyjnego WP przejdź do Wygląd > pełnoekranowy obraz tła.
- Wybierz żądany obraz, przesyłając go z komputera lub wybierając jeden z biblioteki multimediów.
- Po wybraniu obrazu kliknij niebieski przycisk Użyj obrazu.
- Kliknij niebieski przycisk Zapisz opcje i sprawdź swoją witrynę.
Proszę bardzo! Obraz powinien być teraz wyświetlany w witrynie jako pełnoekranowy obraz tła.
Chciałem wspomnieć, że ustawienia tej wtyczki dla obrazu tła nadpisuje domyślne ustawienia tła WP dostosuj. To nie jest zła rzecz, tylko coś do odnotowania.
Ustawienie obrazu tła dla pojedynczych postów, stron, kategorii, tagów i innych za pomocą tej konkretnej wtyczki jest możliwe, ale wymaga zakupu wersji pro.
Dodaj obraz tła za pomocą CSS
Teraz zbadamy, jak zmienić obraz tła za pomocą kodu CSS. Można to zrobić, aby stworzyć tło dla całej witryny lub dla określonej kategorii-za pomocą dostosowywania motywu WP.
- Z Pulpitu nawigacyjnego WordPress przejdź do Wygląd > Dostosuj.
- Przewiń w dół i kliknij dodatkowy CSS.
- Wklej odpowiedni kod w polu CSS w następujący sposób:
Obraz tła w całej witrynie:
Pamiętaj, aby zastąpić tekst Posiadacza dla “imageURL“w kodzie z rzeczywistą nazwą URL pliku obrazu. Aby to zobaczyć, wybierz dowolny obraz w bibliotece multimediów i spójrz na informacje o obrazie po prawej stronie ekranu.
Konkretna Kategoria Obraz Tła:
Pamiętaj, aby wymienić dwa uchwytyobszary tekstowe er w powyższym kodzie:
- Rzeczywista nazwa URL pliku obrazu dla “imageURL”
- Prawidłowa nazwa kategorii dla catname
Aby znaleźć nazwę kategorii:
- Przejdź do Pulpitu nawigacyjnego witryny WordPress
- Kliknij na posty > kategorie
- Wybierz kategorię, do której chcesz się odwołać, i najedź kursorem na link” Edytuj”; zobaczysz adres URL w lewym dolnym rogu strony, który pokazuje identyfikator kategorii
Należy pamiętać, że jest to kodowane na twardo, więc możliwe jest, że niektóre wtyczki nie będą leniwie ładować obrazu lub będą mogły indeksować go do CDN.
Dodaj obraz tła do określonych obszarów
Jest jeszcze jedna fajna wtyczka, która pomoże w dodawaniu obrazów tła do określonych obszarów treści.
Zaawansowana Wtyczka WordPress Backgrounds dla WordPress umożliwia dodawanie tła za pomocą bloków Gutenberga. Możesz ustawić kolor, obraz, a nawet wideo jako tło, które można przeglądać na urządzeniach mobilnych.
Umożliwia również dodanie efektu paralaksy do obrazów tła i filmów.
W tym przypadku po prostu dodamy statyczny obraz tła do obszaru zawartości, w szczególności postu.
Ponieważ to działa z blokami Gutenberga, będziesz musiał użyć edytora Gutenberga, więc upewnij się, że przełączyłeś się z klasycznego trybu edytora, jeśli potrzebujesz.
Po zainstalowaniu i aktywacji wtyczki przejdź do Pulpitu nawigacyjnego WordPress.
1. Kliknij Post > Dodaj nowy.
2. Kliknij przycisk znak plus+, przewiń w dół do Projekt sekcji i kliknij na blok AWB.
Paski narzędzi do dowolnej edycji, którą chcemy wykonać, znajdują się w dwóch obszarach: górnym pasku ikon i kolumnie menu bocznego.
3. Z dowolnego menu (preferuję użycie bocznej kolumny pierwszej), kliknij Pasek obrazu u góry (między kolorem i wideo), a następnie kliknij niebieski przycisk Wybierz obraz pod nim, a otworzy się biblioteka multimediów.
4. Wybierz żądany obraz, a następnie kliknij niebieski przycisk Wybierz.
Gdy już to zrobisz, powinieneś zobaczyć, że obraz jest teraz częścią bloku AWB. (Jeśli go nie widzisz, kliknij ikonę obrazu z paska ikon AWB i powinien pojawić się w widoku.)
Za pomocą ustawień menu możesz zmienić pozycję obrazu (na podstawie wskaźnika na osiach), rozmiar, odstępy itp. Zostawiłem ustawienia procentowe na domyślnym 50/50 (co stawia go bezpośrednio w środku), a rozmiar domyślny Full I Cover.
Więc teraz, gdy mamy nasze tło postu, musimy dodać rzeczywistą zawartość postu / tekst.
1. Kliknij na przycisk znak plus + znajdujący się w bloku na górze obrazu tła.
2. Kliknij ikonę akapitu, która doda blok tekstu na obrazku tła.
Wpisz treść tekstu, a następnie zmień wyrównanie lub kolor tekstu w razie potrzeby (zrobiłem to, ale jest to opcjonalne) i voila! Mamy post z własnym indywidualnym obrazem tła.
Możesz zrobić to tak, że tylko część Twojego postu ma obraz tła, co daje mu trochę oomph. Wystarczy dodać dodatkowe bloki akapitów przed i po obrazie tła.
Całkiem fajne.
Powrót (grunt) do podstaw
Dodawanie tła do witryny WordPress może wydawać się małą rzeczą. Ale jeśli wykonane prawidłowo, może to mieć duży wpływ. Może również pomóc utrzymać świeżość twojej obecności w Internecie, dzięki czemu odwiedzający nie nudzą się zawsze widząc te same zdjęcia w kółko.
Idealnie jest użyć wbudowanej funkcji dostosowywania motywu do dodawania obrazów tła, gdy istnieje, ponieważ jest specjalnie zaprojektowany do pracy jako kodowany.
Masz jednak inne opcje, jeśli chodzi o umieszczanie obrazów tła WordPress. Dostosowanie rdzenia WP, wtyczki, kreatory stron i poprawki CSS-wszystko to pozwala uzyskać precyzyjną kontrolę nad tym, jakie obrazy są używane i gdzie.
Więc śmiało i bądź kreatywny ze swoim pochodzeniem. Wywieraj wpływ tematyczny i utrzymuj wizualne zaangażowanie odwiedzających.
Nota wydawcy: Ten post został zaktualizowany pod kątem dokładności i trafności.
[Pierwotnie Opublikowany: Sierpień 2014 / Zmieniony: Listopad 2021]
Tagi:
- obrazy
- weekendowe projekty wordpress
