Strona o płaskim designie jest czytana. Strona z paralaksą, zapamiętywana. Ta sama treść, ten sam układ, ale tło porusza się wolniej niż pierwszy plan i strona zyskuje głębię, przestrzeń oraz filmowy charakter. Użytkownik przewija nie tekst, lecz historię.

Problem w tym, że większość stron na WordPress wygląda tak samo: nagłówek, siatka, sidebar, stopka. Paralaksa przełamuje ten schemat, bez zmiany układu, bez wymiany motywu, czasem całkowicie bez wtyczek. Nie każda paralaksa działa jednak jak należy: szarpane przewijanie na urządzeniach mobilnych, spowolnienia, konflikt z dostępnością, brzmi znajomo.

Poniżej znajduje się pełna analiza: czym jest efekt paralaksy, kiedy się opłaca, które motywy i wtyczki dają gotowy rezultat oraz jak nie zepsuć wydajności. Ze zrzutami ekranu krok po kroku, porównaniem narzędzi i odpowiedziami na najczęściej zadawane pytania.

💡 Szybki przegląd:

• Proszę zrozumieć, jak działa przewijanie paralaksowe i do czego jest ono potrzebne na Pana/Pani stronie
• Proszę ocenić ryzyko: wydajność na urządzeniach mobilnych, dostępność, dobór teł
• Proszę wybrać motyw z wbudowaną paralaksą lub podłączyć Slider Revolution do sliderów
• Proszę zainstalować bezpłatną wtyczkę Advanced WordPress Backgrounds (AWB), uniwersalne rozwiązanie dla Gutenberg, Classic Editor i WPBakery

Czym jest efekt paralaksy

Efekt paralaksy to technika, w której tło strony internetowej przewija się wolniej niż treść na pierwszym planie. Powstaje iluzja głębi: treść zdaje się unosić nad obrazem, a strona nabiera trójwymiarowości.

Technika ta trafiła do web designu z branży gier, gdzie paralaksa była od lat wykorzystywana do warstw tła w platformówkach. Dziś jest to standardowa funkcja motywów premium, builderów stron i osobnych wtyczek. Nawet darmowy motyw Twenty Seventeen, który był domyślnie dostarczany z WordPressem, miał wbudowaną paralaksę.

Współczesny web design poszedł dalej: właściwość CSS scroll-timeline pozwala tworzyć paralaksę całkowicie bez JavaScriptu, na czystej animacji powiązanej z postępem przewijania. Jednak do szybkiego wdrożenia na stronie produkcyjnej wtyczki i buildery są nadal bardziej praktyczne.

Na powyższym filmie znajduje się pełny poradnik dodawania paralaksy w WordPressie (EN, 12 minut). Autor pokazuje instalację, konfigurację prędkości, wyłączanie na urządzeniach mobilnych i pracę z obrazami tła w czasie rzeczywistym.

Po co stosować paralaksę na stronie

Pierwszy i najbardziej oczywisty powód to wizualny efekt wow. Paralaksa sprawia, że strona jest nowoczesna, stylowa i zapada w pamięć. Gdy użytkownik przewija stronę, a tło porusza się z inną prędkością, przykuwa to uwagę. Treść „wystrzeliwuje".

Jednak korzyści nie ograniczają się do samej estetyki. Paralaksa dzieli stronę na czytelne sekcje, szczególnie na landing page’ach i stronach głównych, gdzie trzeba przeprowadzić odwiedzającego od nagłówka do wezwania do działania (CTA). Sekcja z tłem paralaksowym w naturalny sposób oddziela jeden blok treści od drugiego, kierując uwagą.

Trzeci powód to zaangażowanie i czas spędzony na stronie. Odwiedzający dłużej pozostają na stronach z interaktywnym przewijaniem, co pośrednio poprawia wskaźniki behawioralne i konwersję. Działa to szczególnie dobrze na stronach jednostronicowych, w portfolio i na produktowych landing page’ach.

Co wziąć pod uwagę przed wdrożeniem paralaksy

Każdy medal ma dwie strony. Oto, co warto mieć na uwadze przed dodaniem sekcji paralaksowych.

Wybór obrazu tła

Obraz tła to kluczowy element. Musi być adekwatny do tematu strony i ogólnie do marki. Jeśli na tle znajduje się tekst lub nagłówek, lepiej zastosować stonowany wzór lub kolorową podkładkę, a nie szczegółowe zdjęcie. Treść nie powinna konkurować z tłem.

W przypadku fotografii, tylko wysoka rozdzielczość. Rozmyte lub rozpikselowane tło na cały ekran niszczy profesjonalny wygląd. Zestawienie banków zdjęć z darmowymi i premium fotografiami zebraliśmy w osobnym przeglądzie 35 banków zdjęć.

Paralaksa na urządzeniach mobilnych

Na telefonach i tabletach paralaksa działa niestabilnie. Przewijanie gestem (swipe) różni się od działania kółka myszy, efekt może szarpać, przycinać się lub nie wyświetlać wcale. Większość nowoczesnych wtyczek i motywów pozwala wyłączyć paralaksę dla urządzeń mobilnych jednym kliknięciem i jest to najlepsza opcja z punktu widzenia UX.

Dostępność (accessibility)

Ruchome tło stwarza problemy użytkownikom z zaburzeniami błędnika: zawroty głowy, nudności, trudności ze skupieniem wzroku. Zapytanie medialne prefers-reduced-motion umożliwia automatyczne wyłączanie animacji paralaksy dla takich odwiedzających. Jeśli wtyczka lub motyw go nie obsługują, należy przynajmniej wyłączyć efekt na urządzeniach mobilnych.

Wybór motywu z wbudowaną paralaksą

Dla osób rozpoczynających projekt od zera najprościej jest wybrać motyw z już wbudowaną paralaksą. Większość motywów premium dla WordPressa zawiera tę funkcję przynajmniej dla strony głównej. Jeśli potrzebują Państwo paralaksy na różnych stronach serwisu, warto spojrzeć w stronę motywów wielofunkcyjnych z zaawansowanym builderem.

Trzy sprawdzone opcje:

• Divi od Elegant Themes, wizualny builder z wbudowaną opcją tła paralaksowego dla dowolnej sekcji;
• Ultra od Themify, motyw wielofunkcyjny z builderem Themify Builder i elastycznymi ustawieniami paralaksy;
• Total od WPExplorer, motyw wielofunkcyjny oparty na WPBakery z zaawansowanymi opcjami paralaksy (prędkość, kierunek, wyłączenie na urządzeniach mobilnych).

Dodawanie tła paralaksowego w Total (WPBakery)

Poniżej, krok po kroku, przykład konfiguracji paralaksy w motywie Total. Total wykorzystuje WPBakery do budowy stron, ale analogiczne opcje są dostępne w większości konstruktorów stron WordPress.

Najpierw proszę wstawić wiersz i dodać do niego zawartość. Proszę kliknąć ikonę ołówka, aby edytować wiersz. Jeśli projekt nie ma paska bocznego, proszę włączyć opcję „Stretch row", aby tło paralaksy wypełniło wiersz na całą szerokość. W Total dostępny jest również tryb pełnoekranowy, który rozciąga tło na całe okno przeglądarki.

W sekcji „Parallax" proszę dodać obraz tła i ustawić prędkość przewijania. Im wyższa liczba, tym silniej przesuwa się obraz i tym większej rozdzielczości potrzebuje.

W zaawansowanych ustawieniach paralaksy można włączyć lub wyłączyć efekt na urządzeniach mobilnych, wybrać styl obrazu (cover, fixed, repeat), kierunek ruchu oraz dokładną prędkość.

Dla kontrastu między tłem a zawartością proszę użyć karty „Overlay", na przykład półprzezroczystego białego wypełnienia na obrazie. Proszę zapisać zmiany w wierszu i na stronie.

Slidery paralaksy ze Slider Revolution

Gdy potrzebny jest nie statyczne tło, a cały slider z efektem paralaksy, najlepszym narzędziem jest Slider Revolution. Wtyczka premium zawiera setki opcji: czcionki, warstwy, efekty przejść, układy i, oczywiście, wielopoziomową paralaksę. Szczegółowy poradnik dotyczący Slider Revolution znajduje się w osobnym artykule.

Jak włączyć paralaksę w Slider Revolution

Proszę zainstalować wtyczkę i zaimportować gotowy szablon slidera lub utworzyć slider od podstaw.

Proszę edytować główne tło slajdu: dodać obraz źródłowy i przejść do karty „Parallax / 3D", aby przypisać poziom paralaksy. Następnie, dodając warstwy (tekst, obrazy, przyciski), proszę wybrać opcję Parallax / 3D dla każdej warstwy; głębia paralaksy ożywi elementy niezależnie od siebie.

Gotowy slider wstawia się za pomocą shortcode’u do dowolnego wpisu lub strony. Jeśli korzystają Państwo z WPBakery, wystarczy przeciągnąć element Slider Revolution na stronę i wybrać slider z listy rozwijanej.

Bezpłatna wtyczka Advanced WordPress Backgrounds (AWB)

Jeśli motyw jest już zainstalowany i nie obsługuje paralaksy, nie trzeba go zmieniać. Advanced WordPress Backgrounds (AWB) to bezpłatna wtyczka z oficjalnego katalogu WordPress.org, która dodaje tło paralaksowe do dowolnego elementu strony: bloku, nagłówka czy całej sekcji. Wtyczka jest aktywnie rozwijana: ostatnia aktualizacja w czerwcu 2026, potwierdzono zgodność z WordPress 7.0.

AWB obsługuje trzy typy tła: kolor, obraz i wideo (YouTube/Vimeo/własny hosting). Działa z Gutenbergiem, Edytorem klasycznym i WPBakery.

Instalacja AWB

Proszę wejść do panelu administracyjnego WordPress: Wtyczki → Dodaj nową. W wyszukiwaniu proszę wpisać „Advanced WordPress Backgrounds", kliknąć Zainstaluj → Aktywuj.

Sposób dodawania tła zależy od edytora. Zgodnie z opisem wtyczki na WordPress.org, w każdym z trzech edytorów dostępne są: typ tła (kolor, obraz lub wideo), rozmiar wyświetlania (cover, contain lub pattern), pozycja tła z wartościami procentowymi, nakładka (overlay) z wyborem koloru i przezroczystości za pomocą selektora Alpha, przewijanie paralaksowe z ustawieniem prędkości, skalowania i przezroczystości, a także paralaksa myszy (tło delikatnie przesuwa się za kursorem).

W menu Ustawienia → AWB znajduje się zakładka z parametrami globalnymi. Można tu wyłączyć efekty paralaksy i wideo dla urządzeń mobilnych i konkretnych przeglądarek.

AWB w Gutenbergu

AWB jest w pełni kompatybilny z edytorem blokowym i udostępnia własny blok.

Proszę wstawić blok AWB, a następnie dodać do jego wnętrza dowolne inne bloki z Pana/Pani treścią.

Proszę kliknąć blok AWB i przejść do zakładki „Block" w prawym panelu. Tutaj konfiguruje się wszystkie parametry tła: typ, obraz, paralaksę, nakładkę.

AWB w Edytorze klasycznym

W Edytorze klasycznym AWB działa za pomocą shortcode’u. Proszę zaznaczyć tekst, dla którego potrzebne jest tło paralaksowe, i kliknąć ikonę AWB na pasku edytora.

Proszę wybrać obraz tła i skonfigurować pozostałe parametry: kolor nakładki, typ paralaksy, prędkość. Proszę kliknąć „Wstaw".

Shortcode wygląda mniej więcej tak:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Ваш контент внутри параллакс-фона[/nk_awb]

Minus podejścia z shortkodami: ustawienia tła nie są widoczne w edytorze wizualnym, trzeba poprawiać kod ręcznie. Do komfortowej pracy lepiej używać Gutenberga lub WPBakery.

AWB z WPBakery

Z WPBakery integracja jest maksymalnie prosta. W ustawieniach dowolnego wiersza pojawia się dodatkowa zakładka „Backgrounds (AWB)", gdzie można utworzyć i skonfigurować tło paralaksy bez shortkodów, wszystko wizualnie.

⁉️🤔 Często zadawane pytania

Czy trzeba zmieniać motyw dla efektu paralaksy?

Nie. Jeśli obecny motyw nie obsługuje paralaksy, wystarczy darmowa wtyczka AWB. Dodaje ona efekt do dowolnego elementu na dowolnej stronie przez wygodny interfejs, nie naruszając reszty motywu. Zmiana motywu ma sens tylko wtedy, gdy i tak zaczynają Państwo od zera i chcą wbudowaną paralaksę „od razu po instalacji".

Czy paralaksa spowalnia stronę?

Przy starannej konfiguracji, nieznacznie. AWB używa lekkiej biblioteki Jarallax (bez jQuery od wersji 1.11), a nowoczesne przeglądarki optymalizują transform na GPU. Główny czynnik spowolnienia to zbyt ciężkie zdjęcie w tle. Proszę zoptymalizować zdjęcia do WebP lub AVIF, utrzymywać rozmiar w granicach 200-300 KB, a szybkość nie ucierpi.

Czy paralaksa działa na iPhone’ach i Androidzie?

Zależy od implementacji. Na iOS paralaksa w przeglądarce tradycyjnie sprawia problemy: stałe tło (background-attachment: fixed) jest ignorowane przez Safari. Wtyczka AWB rozwiązuje to przez animację JavaScript, działa stabilnie. Jednak najlepszą praktyką dla urządzeń mobilnych jest całkowite wyłączenie paralaksy (zaznaczenie w ustawieniach AWB lub motywu): na małym ekranie efekt jest ledwo zauważalny, a oszczędza się baterię.

Czy można zrobić paralaksę całkowicie bez wtyczek?

Można. Właściwość CSS animation-timeline: scroll() pozwala powiązać animację paralaksy z postępem przewijania bez ani jednej linii JavaScript. Jednak wsparcie przeglądarek wciąż jest niepełne (Safari włączyło w 2024, Firefox od 2025). Dla kompatybilności ze starszymi przeglądarkami wtyczka jest na razie pewniejsza.

Czym AWB jest lepszy od innych darmowych wtyczek do paralaksy?

AWB wyróżnia się trzema rzeczami: po pierwsze, obsługą trzech edytorów (Gutenberg, Classic, WPBakery) bez konfliktów; po drugie, regularnymi aktualizacjami, wtyczka jest testowana aż do WordPress 7.0; po trzecie, paralaksą myszy i tłem wideo w wersji darmowej, u konkurencji są to często funkcje Pro.

Czy paralaksa jest potrzebna do SEO?

Bezpośrednio, nie. Paralaksa to zabieg wizualny, a nie czynnik rankingowy. Ale pośrednio może pomóc: dłuższy czas na stronie, niższy współczynnik odrzuceń, wyszukiwarki biorą to pod uwagę. Najważniejsze, by nie poświęcać dla efektu szybkości ładowania i czytelności tekstu.

Jakie narzędzie wybrać do swojego zadania

Jeśli motyw już obsługuje paralaksę, proszę używać wbudowanych ustawień, to wystarczy dla strony głównej i stron docelowych.

Jeśli motyw nie ma paralaksy, AWB pokrywa większość typowych scenariuszy za darmo: szybka instalacja, intuicyjny interfejs, praca z Gutenbergiem i WPBakery, globalne wyłączenie na urządzeniach mobilnych. Do sliderów z wielowarstwową paralaksą, Slider Revolution nie ma konkurencji pod względem elastyczności animacji.

Paralaksa nie jest panaceum. Na stronach z gęstą treścią tekstową (longready, dokumentacja) raczej przeszkadza, niż pomaga. Ale dla landing page’a, portfolio, strony promocyjnej produktu ten zabieg wciąż jest jednym z najmocniejszych w web designie. Użytkownik zapomni tekst, ale zapamięta, jak strona „oddychała" podczas przewijania.