Jak ustawić tło obrazu w wordpress

Jak ustawić tło obrazu w wordpress
Obraz tła WordPress dla strony głównej z innymi elementami.

Istnieje więcej sposobów dodawania obrazów tła w WordPress. Od podstawowych do najbardziej zaawansowanych ze zmianą kodu motywu. Jednak z przyjemnością przedstawiamy przyjazne dla użytkownika narzędzie, idealne dla administratorów stron internetowych bez znajomości programowania i projektowania. Wtyczka Citadela Pro zawiera wiele funkcji i ustawień do dostosowywania witryny.

Wypróbuj za darmo potężne bloki, ustawienia i funkcje wtyczki Citadela Pro. Oferujemy 7-dniową wersję próbną ze wszystkimi funkcjami premium. Możesz odkryć doskonałe narzędzie, które pozwala dodawać obrazy tła do stron WordPress, postów i niestandardowych typów postów.

Cluster to blok Gutenberga w WordPress, który umożliwia dodanie obrazu tła. Wielofunkcyjny element umożliwia zmianę domyślnego tła WordPress. Możesz nie tylko dodać obraz tła, ale także połączyć go z innymi blokami. Zyskujesz wiele odmian i wszechstronność.

W połączeniu z Blok tytułowy strony, z łatwością uzyskasz fantastycznie wyglądającą witrynę internetową. Możesz dodać więcej bloków Gutenberga i dostosować obraz tła w WordPress. Możesz także zapisać zestaw bloków, takich jak bloki wielokrotnego użytku, i dodać motyw w dowolnym miejscu na swojej stronie internetowej. Możesz więc od razu zmienić stronę internetową WordPress w tle.

Jak dodać obraz tła w WordPress za pomocą bloku Gutenberga

Zacznij teraz

Zacznij już teraz, korzystając z okresu próbnego bez ryzyka. Nie wymagamy karty kredytowej.

Obraz tła WordPress przez blok klastra

Przedstawiamy przydatny blok, który stworzyliśmy dla WordPressa Blok Gutenberga dla obrazu tła – Blok klastrów. Jest częścią naszej własnej grupy bloków. Wtyczka Citadela Pro ma wiele funkcji, które pomogą Ci stworzyć piękną stronę internetową. Wszystkie niestandardowe bloki AitThemes są dostępne w Wtyczka Citadela Pro.

Proszę przeczytaj Dokumentacja bloku klastra dla szczegółowych ustawień.

Blok klastrowy umożliwia grupowanie wielu bloków w jeden. Możesz efektywnie pracować z całą klastrowaną grupą, ponieważ był to jeden blok. Szerokość klastra można ustawić na pełną szerokość strony, co oznacza, że masz bardzo dużo miejsca na dodawanie różnych bloków.

Klaster nie rozciągnie się do pełnej szerokości, jeśli:

  • Masz aktywny pasek boczny
  • Jeśli używasz kolumn, które ograniczą miejsce na Cluster

Ponieważ niektóre z podstawowych bloków WordPress można dopasować tylko do szerokości treści, blok klastrów oferuje większą różnorodność w budowaniu witryny. Świetną cechą jest również to, że możesz ustawić dla WordPress obraz tła, zmienić jego kolor lub ustawić nakładkę obrazu tła. Tło można zatem skonfigurować do projektu strony internetowej.

W tym artykule pokażemy Ci:

Jak dodać blok klastra

Blok klastra jest blokiem premium i jest dostępny tylko po zainstalowaniu i aktywacji Wtyczka bloków Citadela. Po zainstalowaniu wtyczki Cluster block zostanie automatycznie dodany do edytora bloków WordPress i możesz od razu zacząć z nim pracować.

Blok klastra można dodawać zarówno do postów, jak i stron. Po prostu kliknij znak „+” na górnym pasku lub w dowolnym miejscu na pulpicie edytora. Następnie po prostu wyszukaj Cluster block.

Dodaj blok klastra do edytora WordPress, klikając „+”
Dodanie bloku Cluster poprzez kliknięcie na „+”

Drugą opcją dodania bloku klastra jest wpisanie „/” i nazwy bloku po tym. Blok klastra jest wtedy gotowy do użycia.

Dodaj blok klastra z ukośnikiem „/”
Dodawanie bloku klastra za pomocą ukośnika „/”

Grupowanie bloków za pomocą Cluster

Główną cechą Cluster block jest grupowanie wielu bloków w jeden. Przyjrzyjmy się, jak to działa. Jeśli umieścisz blok klastrów na swojej stronie, natychmiast zobaczysz symbol zastępczy „Wstaw więcej bloków tutaj”. Jeśli na niego klikniesz, otrzymasz listę wszystkich dostępnych bloków. Możesz także wyszukać żądany blok za pomocą paska wyszukiwania na górze listy.

Proces wybierania zagnieżdżonych bloków
Proces wybierania i wstawiania zagnieżdżonych bloków

Wszystkie zagnieżdżone bloki będą miały dostępne wszystkie domyślne opcje i ustawienia. Na przykład, jeśli wstawisz blok obrazu, będziesz mieć możliwość przesłania obrazu lub wybrania go z Biblioteki multimediów.

Za pomocą Cluster block możesz na przykład stworzyć przyciągającą wzrok sekcję na swojej stronie internetowej, aby zaprezentować swoją ostatnią pracę. Dodaj obrazy ze swojego portfolio, a następnie ustaw pod nimi obraz tła. Właśnie utworzyłeś ładny link do swojego portfolio.

Blok obrazu zagnieżdżony w bloku klastra
Strona portfolio stworzona przy pomocy Cluster block

Blok klastra może być również wykorzystany do stworzenia atrakcyjnej prezentacji produktu. Możesz ustawić obraz produktu jako tło sekcji i wybrać jego kolor. Blok serwisowy może być również zagnieżdżony w bloku Cluster.

Blok usługi zagnieżdżony w bloku klastra
Użyj Service block w Cluster block, aby zaprezentować swój produkt (i jego cechy) w bardziej atrakcyjny sposób

Wiele bloków w jednym

Jeśli chcesz dodać wiele zagnieżdżonych bloków do Cluster, możesz użyć bloku Columns. Za pomocą bloku kolumny możesz dodać kilka bloków obok siebie. Każda kolumna może mieć inny typ zawartości, taki jak obraz, akapit, listy lub przycisk.

Typowym przykładem wielu kolumn w połączeniu z blokiem klastrów jest witryna jednostronicowa.

Blok kolumn zagnieżdżony w bloku klastra
Jak można wykorzystać Cluster Block w witrynie One Page

Podstawowe ustawienia na pasku narzędzi: Opcje wyrównania zawartości

Domyślnie szerokość bloku klastra jest ustawiona na rozmiar zawartości. Możesz zmienić to zachowanie na pasku narzędzi. Dostępne są następujące opcje:

  • Rozmiar zawartości – opcja domyślna, blok klastra ma taką samą szerokość jak zawartość.
  • Szeroki rozmiar — zawartość wewnątrz klastra jest szersza niż szerokość zawartości.
  • Rozmiar pełnej szerokości – w tym przypadku szerokość klastra to szerokość z boku na bok okna przeglądarki.

Należy pamiętać, że to ustawienie będzie miało wpływ na zawartość klastra tylko wtedy, gdy obsługuje ją aktualnie aktywny motyw. Wszystkie zagnieżdżone bloki można skonfigurować w zależności od dostępności ich opcji.

Pobierz motyw i wtyczki WordPress Citadela

Zacznij już teraz, korzystając z okresu próbnego bez ryzyka. Nie wymagamy karty kredytowej.

Ustawienia koloru nagłówka i separatora

Zmiana koloru nagłówka

Od WP 5.3 możesz zmienić kolor nagłówka za pomocą bloku nagłówka. Jest to bardzo przydatna funkcja – zwłaszcza jeśli masz ciemny układ i schemat kolorów, lepiej zmienić domyślny kolor tekstu (który jest czarny) na jaśniejszy.

Zmiana koloru nagłówka nie była możliwa aż do nowej wersji, co powodowało problemy z jego widocznością na ciemnym podłożu. Dlatego często zdarzało się, że nagłówek mieszał się z obrazem tła lub zdjęciem WordPress, które dodałeś. Teraz możesz wybrać odpowiedni kolor nagłówka, aby Twoja strona zabłysła.

Nowy kolor separatora używanego na Twojej stronie

Kiedy dodajesz do swojego WP obraz tła lub inny rodzaj treści, czasami może być konieczne oddzielenie go od reszty witryny. W tym celu można użyć specjalnego bloku zwanego Separatorem. Wstawiając Separator możesz:

  • Oddziel określone bloki
  • Podziel cały tekst na mniejsze sekcje
  • Zaznacz ważne części
  • Zapewnij lepszą czytelność treści
  • Uprość nawigację w swojej witrynie

Ponadto możesz teraz zmienić kolor linii separatora za pomocą zaktualizowanego WordPressa. Coloured Separator jest idealny do uzupełnienia schematu kolorystycznego witryny.

Jak dodać obraz tła pod zgrupowanymi blokami

Prawdziwa moc Cluster block polega na tym, że możesz dodać obraz tła i ustawić kolor tła pod zgrupowanymi blokami. Wszystko można łatwo skonfigurować w inspektorze WordPress. Przyjrzyjmy się, jak to zrobić.

  1. Kliknij Obraz tła i aktywuj funkcję „Pokaż obraz tła”.
  2. Kliknij „Wybierz obraz”. Otworzy się biblioteka multimediów. Możesz wybrać istniejący obraz lub przesłać nowy obraz do swojej biblioteki.
  3. Obraz tła można również ustawić jako stały. Oznacza to, że jeśli przewiniesz stronę, tło nie będzie się przesuwać wraz z treścią, a jego pozycja zostanie ustalona.
  4. Możesz także wybrać, która część obrazu tła ma być wyświetlana za pomocą „Punktu ogniskowania”. Możliwe jest również wybranie części obrazu za pomocą wartości procentowej.
Jak dodać obraz tła pod zgrupowanymi blokami
Przewodnik krok po kroku, jak dodać obraz tła

Zacznij teraz

Zacznij już teraz, korzystając z okresu próbnego bez ryzyka. Nie wymagamy karty kredytowej.

Nakładka tła

Jedną z zaawansowanych opcji w Cluster jest nakładka obrazu tła. Możesz wybrać jeden z domyślnych kolorów lub wybrać kolor niestandardowy za pomocą próbnika kolorów. Możliwe jest również ustawienie krycia kolorów. Te ustawienia blokowania klastrów pomogą Ci stworzyć naprawdę atrakcyjną prezentację strony internetowej.

Nakładka obrazu tła WordPress
Ustaw nakładkę tła i zmień jego przezroczystość, aby stworzyć przyciągający wzrok projekt

Nowy blok grupowy dostępny w rdzeniu

Jaka jest różnica między blokiem grupy a blokiem klastra AitThemes?

Nasz niestandardowy blok klastrów został wydany wcześniej niż blok grupowy i zapewnia bardziej złożone rozwiązanie. Możesz użyć Bloku grupowego do grupowania wielu bloków, ale nadal ma on ograniczone funkcje. Na przykład nie możesz ustawić nakładki koloru w bloku – możesz wybrać tylko podstawowy kolor tła, który będzie wokół obrazu, a nie nad nim.

Edycja obrazu tła to bułka z masłem w naszym bloku Cluster.

Możesz przesłać obraz tła WordPress, ustawić dla niego kolor tła, a także nakładkę koloru tła (a także dostosować krycie nakładki!). Zajmuje to tylko kilka minut.

4 pomyślał o „How to set image background in WordPress

  1. Czy można pozwolić odwiedzającemu Twoją witrynę za pomocą bloków klastrów wybrać obraz tła i obraz nakładki z wybranych obrazów?

    1. Cześć John,

      Dziękujemy za zainteresowanie produktami Citadela. Tak, aby skonfigurować tło, możesz wybierać spośród różnych opcji. Szczegółowe informacje można znaleźć na stronie: https://www.ait-themes.club/citadela-doc/cluster-block/

      Serdeczne pozdrowienia!
      Zlatko
      Zespół AIIT

Możliwość dodawania komentarzy nie jest dostępna.