Gradienty na stronie w WordPessie – 3 proste sztuczki

WordPress gradienty

Edytor blokowy WordPressa bardzo dobrze wspiera tworzenie gradientów. Gradient to takie połączenie kolorów, gdzie jeden kolor przechodzi płynnie w drugi.

Dzięki gradientom można w szybki sposób nadać stronie ciekawy wygląd. Na przykład sprawić, że tło nabiera głębi albo jakaś część obrazka staje się bardziej widoczna, a inna mniej.

Dzisiaj przedstawiam 3 proste do zastosowania sztuczki z wykorzystaniem gradientów dla bloków Okładka i Grupa.

Będzie też link do strony demo, gdzie można te wszystkie efekty zobaczyć na żywo.

Gradienty w WordPressie – to prostsze niż myślisz!

Nie wiesz, co to gradient w WordPressie?

  1. Wstaw do strony lub wpisu w WordPressie blok Okładka.
  2. Wybierz dowolny kolor tła, np. niebieski.
  3. Kliknij na blok Okładka.
  4. Na pasku po prawej stronie w sekcji Nakładka przełącz się na Gradient.
  5. Zobaczysz paletę gradientów w formie kołeczek.
  6. Kliknij na jedno z nich.

Tło twojego bloku Okładka zmieni się i zobaczysz jak kolory elegancko przechodzą jeden w drugi.

WordPressowy blok Okładka z gradientem w tle
WordPressowy blok Okładka z gradientem w tle

Bloki dla których można ustawić gradient tła

Gradient tła możemy ustawić dla następujących bloków:

  • Okładka
  • Kolumny
  • Grupa

Jeśli używasz jakiś wtyczek z dodatkowymi blokami, bloków z gradientem w tle może być znacznie więcej. Będą to zwykle bloki typu Section, Container, Advanced Columns itp.

Gradienty w przyciskach

Gradienty można ustawić też w przyciskach.

Gradienty w przyciskach w WordPressie
Gradienty w przyciskach w WordPressie

Praktyczne zastosowania gradientów

W praktyce gradienty najczęściej zobaczymy na stronach jako tło w górnej części strony lub na przyciskach.

Poniżej trzy popularne strony na WordPressie które wykorzystują gradienty.

Strona wtyczki Elementor
Gradient w tle na stronie wtyczki Elementor
Strona wtyczki Qubely
Gradienty w przyciskach na Stronie wtyczki Qubely
Strona motywu Astra
Gradient w tle na stronie motywu Astra

Ale gradient może pełnić więcej funkcji, nie tylko ozdobnych.

Sztuczka 1: Ciemne tło pod tekst, rozświetlenie części z obrazkiem

Gradient możemy wykorzystać po to, aby rozświetlić jedną część strony, a przyciemnić drugą.

Blok Okładka z gradientem w tle i na przycisku
Blok Okładka z gradientem w tle i na przycisku – strona demo

Przykładowo na obrazku prawa strona obrazka używa ciemniejszego koloru i dzięki temu biały tekst jest bardziej widoczny.

Prawa część jest bardziej rozświetlona i ten efekt idzie w parze z tytułem tej strony – Children of the light – podkreślając niejako, dzieci światła.

Jak osiągnąć taki efekt?

Co będzie potrzebne

  • Gradient:
    • kolory brzegowe
    • kąt padania gradientu
    • odległości między kolorami
    • rodzaj gradientu
  • Gradient – konkretne wartości:
    • #020024, #090979, #00d4ff
    • 90%
    • 0, 35, 100
    • gradient liniowy

Skąd wziąć te wartości?

Jeśli masz zacięcie graficzne, to możesz taki gradient bezpośrednio w WordPressie, ustawić metodą prób i błędów.

A jeśli, podobnie jak ja, grafikiem nie jesteś, to wystarczy, że skorzystasz z pracy kogoś, kto tę robotę zrobił za Ciebie i chce się nią z Tobą podzielić.

Odwiedź stronę https://cssgradient.io/

W momencie kiedy piszę ten artykuł, na stronie głównej jest taki gradient:

Trójkolorowy gradient ze strony cssgradient.io
Trójkolorowy gradient ze strony cssgradient.io

I właśnie ten gradient wykorzystałam w stronie demo.

A tak należy ustawić ten gradient w WordPressie, żeby uzyskać podobny efekt.

Ustawienie trójkolorowego gradientu dla bloku Okładka
Ustawienie trójkolorowego gradientu dla bloku Okładka

Kolory brzegowe ustawiamy po kliknięciu w kółeczka na pasku z gradientem.

Jest pewna niedogodność.

Odległości miedzy kolorami gradientu

Punkt stopu dla pierwszego koloru (umiejscowienie drugiego kółka na pasku) w naszym przykładzie powinien wynosić 35.

WordPress nie pozwala nam precyzyjnie ustawić tej wartości. Ale 35 to mniej więcej 1/3, więc po prostu umieszczamy drugie kółko na 1/3 szerokości paska.


Cały blok Okładka wygląda tak:

Blok Okładka z 3-kolorowym gradientem w tle
Blok Okładka z 3-kolorowym gradientem w tle

Jeśli chcesz zobaczyć, jak utworzyć taki blok w całości, zobacz ten filmik.

W tym przykładzie użyłam również gradientu na przycisku.

Tutaj jest prosta sprawa, bo wybrałam gradient o nazwie Bladoturkusowy z domyślnej palety kolorów:

Wykorzystanie gradientu z domyślnej palety kolorów WordPressa na przycisku
Wykorzystanie gradientu z domyślnej palety kolorów WordPressa na przycisku

Czasami motyw WordPressa oferuje inną paletę gradientów domyślnych i koloru Bladoturkusowego nie zobaczymy. Na przykład w motywie Twenty Twenty One zobaczymy inne gradienty domyślne, pasujące pod kolorystykę motywu.

Ale oczywiście nic nie stoi na przeszkodzie, żeby ustawić dowolny gradient własny.

Sztuczka 2: Efekt wystającego obrazka

Gradient możemy wykorzystać również, żeby umieścić obok siebie dwa kolory oddzielone wyraźną granicą (a nie płynnym przejściem).

Pozwoli nam to uzyskać efekt wystającego obrazka:

Efekt wystającego obrazka uzyskany dzięki gradientowi
Efekt wystającego obrazka uzyskany dzięki gradientowi – zobacz stronę demo

Musimy do siebie maksymalnie zbliżyć kółeczka reprezentujące kolory brzegowe i wręcz nałożyć je na siebie:

Nakładanie na siebie kółek w celu uzyskania ostrej granicy między kolorami gradientu
Nakładanie na siebie kółek w celu uzyskania ostrej granicy między kolorami gradientu

Jeśli linia styku obu kolorów ma być pozioma (horyzontalna), musimy również ustawić kąt padania gradientu na 180 stopni.

Wszystkie kroki pokazuję na gifie niżej:

Jak uzyskać ostrą granicę między kolorami w gradiencie
Jak uzyskać ostrą granicę między kolorami w gradiencie

A tutaj zobaczysz filmik pokazujący jak zbudować taką sekcję krok po kroku.

Ostra granica styków obu kolorów gradientu może być poprowadzona pod kątem i wtedy również możemy uzyskać ciekawy efekt:

Gradient z ostrą granicą między zielonymi kolorami
Gradient z ostrą granicą między zielonymi kolorami – zobacz stronę demo

W tym przykładzie wykorzystałam dwa pasujące do siebie kolory zielone:

  • zielony ciemny: #70a9a1
  • zielony jasny: #9ec1a3

Aby znaleźć dwa pasujące do siebie kolory, skorzystałam z tej stronki: https://coolors.co/1f363d-40798c-70a9a1-9ec1a3-cfe0c3. Wejdź na ten link i klikaj spację na klawiaturze. Zobaczysz inne palety z pasującymi do siebie kolorami.

Sztuczka 3: rozświetlenie wybranej części obrazka

Kiedy gradient „położymy” na zdjęcie w tle, możemy rozświetlić wybraną część obrazka, a ukryć przeciwległą.

Najprościej objaśnić to na przykładzie.

Gdy przyjrzymy się obrazkowi niżej, zobaczymy że twarz postaci w tle jest rozjaśniona, a lewa i dolna część przyciemniona.

Gradient do rozświetlenia wybranej części zdjęcia – strona demo

W tym przykładzie wykorzystano blok Okładka ze zdjęciem w tle.

Tak wygląda ten sam obrazek bez nałożonego gradientu:

brazek w tle (oryginał) bez gradientu
Obrazek w tle (oryginał) bez gradientu

Aby uzyskać efekt jak na pierwszym obrazku:

  • w gradiencie wykorzystamy 3 kolory
  • zmienimy przezroczystość najjaśniejszego koloru
  • ustawimy odpowiedni kąt rozchodzenia się gradientu.

Kolory są te same, co pokazane w sztuczce nr 1 (czyli #020024, #090979, #00d4ff), tyle, że najjaśniejszy z nich (#00d4ff) ma dodatkowo zmienioną przezroczystość:

Kolory gradientu gdzie jeden z nich ma ustawioną półprzezroczystość
Kolory gradientu gdzie jeden z nich ma ustawioną półprzezroczystość

Na gifie niżej pokazuję jak sterujemy przezroczystością koloru:

Ustawianie pół-przezroczystości jednego z kolorów gradientu
Ustawianie pół-przezroczystości jednego z kolorów gradientu

Zwróćmy uwagę, że przezroczystość dla bloku okładka (suwak na dole) ustawiliśmy w tym przypadku na 100 i dlatego na początku w ogóle nie było widać zdjęcia w tle. O to nam właśnie chodziło, bo chcemy odsłonić tylko tę część obrazka, którą pokrywa najjaśniejszy kolor.

Suwak na dole też może się przydać do sterowania przezroczystością i z niego skorzystaliśmy w sztuczce nr 1.

Jednak sterowanie przezroczystością pojedynczego koloru pozwala odsłonić nam jedynie ten obszar pokrycia gradientem, do którego odnosi się dany kolor. W tym przykładzie jest to obszar zajmujący 2/3 zdjęcia (reprezentowany przez odległość między drugim a trzecim kółkiem).

Gdy przesuniemy tę granicę i zmniejszymy obszar „wpływu” trzeciego koloru, rozświetlimy tylko twarz postaci, porównajmy:

Zmniejszenie obszaru oddziaływania trzeciego koloru zaciemnia większą część obrazka
Zmniejszenie obszaru oddziaływania trzeciego koloru zaciemnia większą część obrazka

I na tym właśnie polega różnica między sterowaniem przezroczystością na poziomie całego gradientu a przezroczystością pojedynczego koloru w gradiencie.

Kliknij tutaj, aby zobaczyć filmik krok po kroku, jak zbudować taką „okładkę” w całości.

Gradienty – podsumowanie

Gradienty w WordPressie najlepiej używać dla bloku Okładka albo Grupa. Można skorzystać z palety gradientów oferowanych przez WordPress i/lub motyw, a można również ustawić własny.

Ciekawe zestawiania gotowych do wykorzystania gradientów znajdziemy na stronach https://cssgradient.io/ oraz https://uigradients.com/#Combi

Najczęstsze zastosowanie gradientu to uatrakcyjnianie tła głównej części strony, ale gradienty można wykorzystać również do:

  • przyciemnienia/rozjaśnienia fragmentu tła lub obrazka (sztuczka 1 i 3)
  • zastosowania dwóch kolorów w tle z wyraźną granicą między nimi (sztuczka 2)
    • efekt wystającego obrazka
    • dwukolorowe tło z kolorami „po przekątnej”

A czy Ty korzystasz z gradientów na swoich stronach w WordPressie?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *