zamierzam zachować to intro naprawdę krótkie.
oto, co omówimy w tym artykule:
- Co to są obrazy tła
- o co chodzi z tłami paralaksy?
- jak dodać obrazy tła do witryny WordPress
- jak podejść do rozmiaru obrazu w WordPress
gotowy, stabilny? Idziemy!
co to są obrazy tła?
obrazy tła to obrazy, które są stosowane do tła elementu na stronie internetowej, w wiadomości e-mail itp. Podczas gdy obraz bohatera jest głównym punktem strony internetowej lub wiadomości e-mail, obrazy tła są bardziej subtelne. Wspierają inne elementy witryny, jako drugą warstwę: wezwania do działania, inne obrazy, różne sekcje witryny itp.
spójrzmy na kilka przykładów takich obrazów tła:
IKEA
na stronie głównej witryny IKEA obrazy tła są używane do prezentowania inspirujących historii. Tytuł i kategoria historii są umieszczone na górze obrazu. Zastosowano nakładkę gradientową, która zmniejsza krycie rzeczywistego obrazu. Takie podejście sprawia, że tekst jest bardziej widoczny, ale także zapewnia spójność projektu, dzięki czemu żaden kolor nie wyróżnia się bardziej niż inny.
Loving Vincent
jeden z moich ulubionych filmów, ten.
obrazy tła leżą za karuzelą, która przedstawia historie Vincenta van Gogha i filmu. Obrazy tła wydają się wzmacniać historię i dostarczać silnych emocji.
Lush
uwielbiam, jak bujna strona wygląda: kolorowa i żywa jak same produkty.
teraz obrazy tła mogą używać wzorów lub kształtów, jak w tym przykładzie strony rejestracji do newslettera. Te wzorce potrafią przekształcić coś potencjalnie Nudnego, w coś wesołego.
obrazy tła paralaksy
jeśli spojrzysz na stronę British Museum, zauważysz, że na ich stronach znajdują się obrazy, które leżą w tle, dlatego zawartość pierwszego planu przewija się w dół. To są obrazy tła paralaksy.
przewijanie paralaksy jest jednym z tych trendów w projektowaniu stron internetowych, któremu udaje się dodać genialny efekt do strony internetowej, jeśli jest poprawnie zintegrowana.
taki efekt można również uzyskać w WordPressie, pokażę wam jak to zrobić nieco później.
jak dodać obrazy tła do witryny WordPress
istnieją trzy główne sposoby dodawania obrazów tła do witryny WordPress. Sprawdźmy je, dobrze?
-
Dodawanie obrazów tła za pomocą dostosowywania motywu WordPress
większość popularnych motywów WordPress ma tę opcję. Użyję motywu Colibri do celów tego przykładu. Inne motywy zachowują się podobnie do motywu Colibri.
jeśli wybrany motyw nie obsługuje tej funkcji, przejdź do metod 2 i 3.
teraz zacznijmy od przejścia do Wygląd – > Dostosuj z pulpitu WordPress. Po lewej stronie zobaczysz opcje edycji dostosowywania motywu, a po prawej-podgląd na żywo Twojej witryny.
motyw pozwala na umieszczanie obrazów tła dla:
- wiersze
- kolumny
- bloki (całe sekcje strony takie jak: o mnie, portfolio, Zespół, Kontakt, itp.)
- Komponenty (nagłówki, karuzele, cenniki, karuzele itp.)
sposób, w jaki możesz to zrobić, jest taki sam, bez względu na to, gdzie potrzebujesz obrazu tła.
Załóżmy, że chcesz dodać obraz tła do bloku witryny usług. Zacznij od wybrania sekcji. Po lewej stronie zobaczysz opcje edycji w menu o strukturze poniżej:
- układ
- styl
- zaawansowane
przejdź do stylu – > Typ tła.
Wybierz „obraz”. Zobaczysz teraz obraz, który możesz zastąpić własnym. 
po kliknięciu na obraz zostanie wyświetlony ekran, na którym możesz wybrać obraz z galerii mediów WordPress lub przesłać inny obraz.
jak mogłeś już zauważyć, możesz nawet dodać film jako tło.
i jest też opcja przełączania dla efektu paralaksy!
teraz jest inny skrót do zmiany obrazu tła. Po wybraniu bloku z prawej strony zobaczysz ikonę ustawień. Kliknij na niego, a zobaczysz kilka opcji edycji.
jeśli wybierzesz „Zmień tło”, zostaniesz przekierowany do środka „styl”, aby postępować zgodnie z opisem powyżej.
to wszystko ludzie. Całkiem proste, prawda?
teraz, jeśli twój motyw nie ma opcji obrazu tła, istnieje sposób, aby to zrobić w domyślnym edytorze WordPress.
-
dodawanie obrazu tła za pomocą bloków WordPress
z pulpitu WordPress przejdź do”stron”. Teraz wybierz „Edytuj” spod żądanej strony. Zobaczysz interfejs, jak pokazano poniżej.
domyślny edytor WordPress jest oparty na blokach, co oznacza, że każda sekcja witryny jest wykonana z bloków. Dostęp do tych bloków można uzyskać z dowolnego znaku”+”, który zobaczysz w interfejsie. Kliknijmy na ten w lewym górnym rogu.
teraz wybierz blok” Cover”. Zobaczysz to od razu na swojej stronie.
możesz przesłać obraz, który jest przechowywany lokalnie na komputerze lub wybrać jeden z istniejących w bibliotece multimediów.
wybrałem zdjęcie z biblioteki mediów. Teraz mogę dodać do niego tekst. Opcje edycji są tutaj dość ograniczone.
jeśli wybierzesz okładkę, zobaczysz menu powyżej, w którym możesz wyrównać obraz lub powielić cały blok. Możesz nawet zapisać swój blok jako wielokrotnego użytku, do ponownego użycia w innych projektach.
teraz, po prawej stronie ekranu, masz kilka dodatkowych opcji edycji.
w Ustawieniach mediów, jeśli włączysz opcję stałe tło, aktywujesz efekt paralaksy.
gdy przełącznik jest wyłączony, możesz dostosować punkt ogniskowej.
ta regulacja ogniskowej może być wykonana również procentowo, biorąc pod uwagę szerokość i wysokość.
następnie możesz dodać nakładkę. Możesz wybrać jego kolor i nieprzezroczystość.
i gotowe.
-
Dodawanie obrazów tła za pomocą wtyczek WordPress
oto kilka wtyczek WordPress otagowanych jako wtyczki obrazu tła. Mam zamiar zagrać trochę z prostym pełnoekranowym pluginem obrazu tła, ponieważ ma najwięcej instalacji i najlepsze recenzje do tej pory.
teraz oto samouczek, Jak zainstalować wtyczkę WordPress.
Dzięki tej wtyczce obrazy będą automatycznie skalowane w przeglądarce, więc niezależnie od rozmiaru przeglądarki, obraz zawsze wypełni ekran.
wszystko, co musisz zrobić, to przejść do wyglądu – > pełnoekranowy Obraz BG. Stąd wybierz swój obraz.
po naciśnięciu „Zapisz opcje” zobaczysz, że wszystkie sekcje w Twojej witrynie, bez tła, otrzymają ten obraz jako tło.
teraz to jest to, co dzieje się w darmowej wersji. Jest dość prosty i wcale nie elastyczny. Płatny plan zawiera dodatkowe opcje, takie jak:
- nieograniczone obrazy tła
- obrazy tła specyficzne dla postów / stron
- wiele obrazów z przejściami zanikania na stronach
i gotowe, właśnie odkryłeś metody 3, których możesz użyć, aby dodać obrazy tła do swojej witryny WordPress.
jest jeszcze jedna rzecz, o której musisz wiedzieć, zanim skończymy dzień.
rozmiary obrazów
zanim załadujesz dowolny obraz na swoją stronę, zwróć uwagę na jego rozmiar. Wiem, że wszyscy patrzymy na megapiksele, ale w sieci jest haczyk. Obrazy o wysokiej rozdzielczości mogą zaszkodzić witrynie, wpływając na jej czas ładowania. W dłuższej perspektywie każda dodatkowa sekunda ładowania może stracić odwiedzających witrynę i konwersje. Ponadto znacznie zmniejszysz swoje szanse na pozycję w wyszukiwarkach, ponieważ szybkość wieku jest ważnym czynnikiem rankingowym.
z drugiej strony Korzystanie z obrazów, które są zbyt małe, może również zaszkodzić doświadczeniu użytkownika. Musimy związać koniec z końcem.
jednym ze sposobów jest użycie zewnętrznych aplikacji, które mogą pomóc w zmianie rozmiaru obrazów, zapewniając jednocześnie odpowiednią przejrzystość.
ale w WordPressie możesz to zrobić łatwo za pomocą … wtyczki, jak już mogłeś się domyślić.
tutaj, w Colibri, jesteśmy Smuszowymi fanami. Smush może i będzie kompresować obrazy bez widocznego spadku jakości.
w wersji pro konwertuje również obrazy na WebP, Format obrazu następnej generacji, który może kompresować pliki o rozmiarach do 35%, bez wyraźnej utraty jakości.
i to już koniec!
Jeśli podoba Ci się ten artykuł i chcesz dowiedzieć się więcej o tym, jak zaprojektować stronę WordPress, zapisz się na Kanał Colibri na Youtube i śledź nas na Twitterze i Facebooku!