Przewinąłeś sekcję wyżej? Pusty salon dostał po kolei tkaniny, grafiki i detale, a obok przesuwały się opisy kolejnych kroków. Tak wygląda sekcja „Jak to działa” na stronie home stagingu, którą zrobiłem dla Magdaleny Oleszko. Klient nie czyta, że home staging działa. Widzi to na własne oczy, zanim zadzwoni.
Ten sam efekt pasuje wszędzie tam, gdzie praca ma etapy i da się je sfotografować: remont łazienki, renowacja mebli, ogród przed i po, metamorfoza w salonie fryzjerskim, auto po detailingu. Poniżej opisuję, jak działa, jak przygotować zdjęcia i jak go wkleić. Kod jest gotowy do skopiowania i działa bez żadnych bibliotek, także w zwykłym WordPressie.
Jak to działa: trzy elementy
Cały efekt to trzy proste rzeczy złożone razem:
- Cztery zdjęcia leżą jedno na drugim. Ten sam kadr w czterech stanach, od „przed” do „po”. Widoczne jest tylko to, które ma włączoną przezroczystość. Kolejne zdjęcie płynnie się na nie nakłada.
- Zdjęcie jest przyklejone do ekranu (w CSS to
position: sticky). Stoi w miejscu, a obok przewijają się opisy kroków. - Krótki skrypt sprawdza, który krok czytasz. Przy każdym przewinięciu wybiera opis najbliżej środka ekranu i włącza zdjęcia do tego kroku włącznie. Na telefonie zdjęcie jest u góry, więc skrypt liczy środek miejsca pod nim.
Bez JavaScriptu sekcja nadal ma sens: widać ostatnie, gotowe zdjęcie i wszystkie opisy. Nic się nie psuje, po prostu nie ma animacji.
Krok 1: przygotuj zdjęcia
To jest najważniejsza część i jedyna, której nie załatwi kod. Zdjęcia muszą pokazywać dokładnie ten sam kadr. Jeśli aparat przesunie się o kilka centymetrów, przy przenikaniu całe pomieszczenie zacznie drgać i efekt zamieni się w usterkę.
Najlepsza droga: prawdziwe etapy pracy. Statyw albo telefon oparty zawsze w tym samym miejscu, zdjęcie po każdym etapie. To najbardziej wiarygodne, bo każdy kadr jest prawdziwy.
Gdy masz tylko zdjęcie końcowe. Tak było w przykładzie: była tylko gotowa sesja po home stagingu. Wersje pośrednie odtworzyłem edycją zdjęcia przez AI („usuń kwiaty i nakrycie stołu”, potem „usuń grafiki i lustro”, potem „usuń poduszki, koc i dywan”). AI lekko przesuwa i przebarwia kadr, więc z każdej wersji wziąłem tylko obszary, które się zmieniły, a resztę pikseli z oryginału. Dzięki temu nic nie drga. Taką sekcję trzeba uczciwie podpisać, tak jak pod przykładem wyżej.
Zanim wkleisz: zapisz zdjęcia w formacie WebP, około 1600 px szerokości, w proporcji 3:2. W przykładzie cztery zdjęcia ważą razem około 400 KB. Nazwij je tak, żeby było widać kolejność, np. krok-0.webp…krok-3.webp.
Krok 2: skopiuj kod
Cały efekt to jeden blok: styl, treść i skrypt. Miejsca do zmiany są oznaczone słowem PODMIEŃ. To komentarz, którego odwiedzający nie widzi: tylko wskazuje miejsce, a sam go nie ruszasz. Zmieniasz teksty i adresy w liniach pod nim (komentarz mówi, ile linii niżej). Zdjęcia w kodzie wskazują na przykład z tego artykułu, więc po wklejeniu efekt zadziała od razu, a Ty podmieniasz tylko adresy i teksty.
<!-- ===== Efekt „przewiń i zobacz”: zdjęcie, które zmienia się przy przewijaniu — PROSM (prosm.pl) =====
Jeden blok do wklejenia: WordPress → blok „Własny HTML”, zwykła strona → w miejsce sekcji.
Szukaj słowa PODMIEŃ. Komentarz z tym słowem tylko WSKAZUJE miejsce — samego komentarza nie zmieniasz.
Zmieniasz teksty i wartości w liniach POD nim: 4 adresy zdjęć, teksty, ewentualnie kolory i odstęp od góry.
Klasy mają prefiks .stg- — nie gryzą się z motywem. Bez JavaScriptu widać ostatnie (gotowe) zdjęcie. -->
<style>
.stg{
/* PODMIEŃ (linia niżej): kolory sekcji — tło, tekst, akcent */
--stg-tlo:#efe9de; --stg-tekst:#14304c; --stg-akcent:#c19a3f; --stg-szary:#5c6a77; --stg-linia:rgba(20,48,76,.14);
/* PODMIEŃ (linia niżej): odstęp przyklejonego zdjęcia od góry = wysokość przyklejonego menu (komputer / telefon) */
--stg-top:96px; --stg-top-m:0px;
background:var(--stg-tlo);color:var(--stg-tekst);padding:5rem 0 4rem;font-family:inherit;
container-type:inline-size;} /* układ zależy od szerokości SEKCJI, nie ekranu: wąska kolumna motywu = jak na telefonie */
.stg *{box-sizing:border-box;}
.stg__head{max-width:760px;margin:0 auto 3rem;padding:0 1.5rem;text-align:center;}
.stg__eyebrow{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--stg-akcent);margin:0 0 .8rem;font-weight:600;}
.stg__head h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.15;margin:0 0 .8rem;color:var(--stg-tekst);}
.stg__head p{color:var(--stg-szary);margin:0;}
.stg__wrap{max-width:1232px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:3.5rem;align-items:start;}
.stg__scena{position:sticky;top:var(--stg-top);}
.stg__kadr{position:relative;aspect-ratio:3/2;overflow:hidden;box-shadow:0 30px 70px rgba(13,33,54,.2);background:#f7f4ee;}
.stg__warstwa{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;opacity:0;transition:opacity 1.1s ease;}
.stg__warstwa.is-on{opacity:1;}
.stg__chip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.7);opacity:0;background:rgba(255,253,249,.96);color:var(--stg-tekst);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:.5rem .85rem;box-shadow:0 10px 24px rgba(13,33,54,.25);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none;white-space:nowrap;}
.stg__chip::before{content:'';position:absolute;left:50%;top:100%;width:1px;height:22px;background:var(--stg-akcent);}
.stg__chip.is-on{opacity:1;transform:translate(-50%,calc(-50% - 26px)) scale(1);}
.stg__pasek{display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stg-szary);}
.stg__pasek i{flex:1;height:2px;background:var(--stg-linia);position:relative;overflow:hidden;}
.stg__pasek i::after{content:'';position:absolute;inset:0;background:var(--stg-akcent);transform:scaleX(var(--p,1));transform-origin:left;transition:transform .9s ease;}
.stg__pasek span:last-child{color:var(--stg-akcent);}
.stg__lista{list-style:none;margin:0;padding:0;}
.stg__krok{min-height:44vh;margin:0;padding:1.6rem 0 1.6rem 1.5rem;border-left:2px solid var(--stg-linia);display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s,border-color .5s;}
.stg__krok.is-on{opacity:1;border-left-color:var(--stg-akcent);}
.stg__nr{font-size:2.2rem;color:var(--stg-akcent);line-height:1;font-weight:600;}
.stg__krok h3{font-size:1.5rem;color:var(--stg-tekst);margin:.35rem 0 .5rem;}
.stg__krok p{color:var(--stg-szary);margin:0;line-height:1.7;}
@container (max-width:700px){
.stg__wrap{grid-template-columns:1fr;gap:1rem;padding:0;}
.stg__scena{z-index:3;background:var(--stg-tlo);padding:0 0 .6rem;}
.stg__kadr{box-shadow:none;}
.stg__pasek,.stg__lista{padding:0 1rem;}
.stg__krok{min-height:42vh;}
.stg__krok h3{font-size:1.3rem;}
.stg__chip{font-size:.56rem;padding:.4rem .6rem;}
}
@media (max-width:700px){.stg{padding:4rem 0 3rem;} .stg__scena{top:var(--stg-top-m);}} /* telefon: inna wysokość menu */
@media (prefers-reduced-motion:reduce){.stg__warstwa,.stg__chip,.stg__krok{transition:none;}}
</style>
<section class="stg" data-stg>
<div class="stg__head">
<!-- PODMIEŃ (3 linie niżej): teksty nagłówka — zmień tylko tekst między > a < -->
<p class="stg__eyebrow">Jak to działa</p>
<h2>Mieszkanie, które samo się staguje</h2>
<p>Przewiń i zobacz, co dokładam po kolei.</p>
</div>
<div class="stg__wrap">
<div class="stg__scena">
<div class="stg__kadr">
<!-- PODMIEŃ (4 linie niżej): adres zdjęcia w src="…" i opis w alt="…". Ten sam kadr, od „przed” do „po”; ostatnie = prawdziwe zdjęcie gotowej pracy. -->
<img class="stg__warstwa is-on" data-krok="0" src="https://prosm.pl/media/blog/staguje/dmowskiego-1-pusty.webp" alt="Salon przed home stagingiem" loading="lazy" decoding="async">
<img class="stg__warstwa is-on" data-krok="1" src="https://prosm.pl/media/blog/staguje/dmowskiego-2-tkaniny.webp" alt="" loading="lazy" decoding="async">
<img class="stg__warstwa is-on" data-krok="2" src="https://prosm.pl/media/blog/staguje/dmowskiego-3-grafiki.webp" alt="" loading="lazy" decoding="async">
<img class="stg__warstwa is-on" data-krok="3" src="https://prosm.pl/media/blog/staguje/dmowskiego-4-oryginal.webp" alt="Ten sam salon po home stagingu" loading="lazy" decoding="async">
<!-- PODMIEŃ (3 linie niżej): tekst etykiety (po „>”) i miejsce, które wskazuje: --x i --y w % szerokości i wysokości zdjęcia -->
<span class="stg__chip" data-krok="1" style="--x:44%;--y:60%" aria-hidden="true">+ tkaniny</span>
<span class="stg__chip" data-krok="2" style="--x:51%;--y:24%" aria-hidden="true">+ grafiki i lustro</span>
<span class="stg__chip" data-krok="3" style="--x:11%;--y:40%" aria-hidden="true">+ detale</span>
</div>
<p class="stg__pasek" aria-hidden="true"><span>Przed</span><i></i><span>Gotowe</span></p>
</div>
<ol class="stg__lista">
<!-- PODMIEŃ (4 kroki niżej): numer, tytuł w <h3> i opis w <p>; data-krok zostaw = numer zdjęcia (0, 1, 2, 3) -->
<li class="stg__krok" data-krok="0"><span class="stg__nr">01</span><h3>Neutralna baza</h3><p>Meble, ściany i światło z okna. Gołe ściany to dla oglądającego znak zapytania, a nie zaproszenie.</p></li>
<li class="stg__krok" data-krok="1"><span class="stg__nr">02</span><h3>Tkaniny</h3><p>Poduszki, koc i dywan w jednej palecie. Sofa wygląda na wygodną, pokój na ciepły.</p></li>
<li class="stg__krok" data-krok="2"><span class="stg__nr">03</span><h3>Grafiki i lustro</h3><p>Ściana przestaje być pusta, lustro odbija światło. Pokój wydaje się większy.</p></li>
<li class="stg__krok" data-krok="3"><span class="stg__nr">04</span><h3>Detale do zdjęć</h3><p>Kwiaty, nakryty stół, zieleń. Drobiazgi, przy których oglądający zatrzymuje się dłużej.</p></li>
</ol>
</div>
</section>
<script>
(function () {
/* Aktywny krok = ten najbliżej środka wolnego miejsca na ekranie. Na telefonie zdjęcie jest
przyklejone u góry, więc liczymy środek miejsca POD nim. Bez zmian w tym bloku. */
document.querySelectorAll('[data-stg]').forEach(function (stg) {
var warstwy = stg.querySelectorAll('.stg__warstwa'), chipy = stg.querySelectorAll('.stg__chip');
var kroki = Array.prototype.slice.call(stg.querySelectorAll('.stg__krok'));
var scena = stg.querySelector('.stg__scena'), pasek = stg.querySelector('.stg__pasek i');
var akt = -1, ramka = 0;
function ustaw(k) {
if (k === akt) return; akt = k;
warstwy.forEach(function (w) { w.classList.toggle('is-on', +w.dataset.krok <= k); });
chipy.forEach(function (c) { c.classList.toggle('is-on', +c.dataset.krok === k); });
kroki.forEach(function (s) { s.classList.toggle('is-on', +s.dataset.krok === k); });
if (pasek) pasek.style.setProperty('--p', k / (kroki.length - 1));
}
function wybierz() {
var r = scena.getBoundingClientRect();
var jedenSlup = scena.offsetWidth > stg.querySelector('.stg__wrap').offsetWidth * 0.8; // zdjęcie nad krokami
var przyklejone = Math.abs(r.top - parseFloat(getComputedStyle(scena).top)) < 2;
var nad = jedenSlup ? (przyklejone ? r.bottom : 0) : 0; // bez „&&”: WordPress zamienia je w treści na & i psuje skrypt
var punkt = nad + (innerHeight - nad) / 2, best = 0, bd = Infinity;
kroki.forEach(function (s, i) {
var b = s.getBoundingClientRect(), d = Math.abs(b.top + b.height / 2 - punkt);
if (d < bd) { bd = d; best = i; }
});
ustaw(best);
}
function naRuch() { if (!ramka) ramka = requestAnimationFrame(function () { ramka = 0; wybierz(); }); }
window.addEventListener('scroll', naRuch, { passive: true });
window.addEventListener('resize', naRuch);
ustaw(0); wybierz();
});
})();
</script>
<!-- ===== /koniec bloku PROSM ===== -->
| Co podmienić | Gdzie w kodzie |
|---|---|
| 4 zdjęcia | atrybuty src przy stg__warstwa; kolejność od „przed” do „po” |
| Opisy kroków | elementy stg__krok; data-krok = numer zdjęcia (0–3) |
| Etykiety na zdjęciu | stg__chip; --x i --y to miejsce w % zdjęcia |
| Nagłówek sekcji | stg__head |
| Kolory | zmienne --stg-tlo, --stg-tekst, --stg-akcent na początku stylu |
| Odstęp od góry | --stg-top (komputer) i --stg-top-m (telefon) = wysokość przyklejonego menu |
Przykład: podmieniam na własne grafiki
Tabela to teoria. Zobaczmy to na konkretnym przypadku. Firma Remonty Kowalski (wymyślona na potrzeby przykładu) chce pokazać na stronie, jak powstaje jej nowa strona internetowa: od szkicu do gotowego projektu. Ma cztery grafiki tego samego kadru, wgrane do swojego WordPressa jako krok-0.webp…krok-3.webp.
Bierzemy kod z góry i zmieniamy w nim tylko to, co oznaczone słowem PODMIEŃ. Poniżej każda zmieniona linia: na czerwono, jak było, na zielono, jak jest teraz. Wszystkich pozostałych linii, w tym całego skryptu, nie ruszamy.
/* Kolory (3 zmienne na początku stylu) */- --stg-tlo:#efe9de; --stg-tekst:#14304c; --stg-akcent:#c19a3f; --stg-szary:#5c6a77; --stg-linia:rgba(20,48,76,.14);+ --stg-tlo:#fbf8f3; --stg-tekst:#1f3d36; --stg-akcent:#d9822b; --stg-szary:#5c6a77; --stg-linia:rgba(20,48,76,.14);/* Nagłówek sekcji */- <p class="stg__eyebrow">Jak to działa</p>+ <p class="stg__eyebrow">Jak pracujemy</p>- <h2>Mieszkanie, które samo się staguje</h2>+ <h2>Strona, która powstaje na Twoich oczach</h2>- <p>Przewiń i zobacz, co dokładam po kolei.</p>+ <p>Przewiń i zobacz cztery etapy projektu.</p>/* 4 zdjęcia: adresy z Twojej biblioteki mediów (i opisy alt) */- <img class="stg__warstwa is-on" data-krok="0" src="https://prosm.pl/media/blog/staguje/dmowskiego-1-pusty.webp" alt="Salon przed home stagingiem" loading="lazy" decoding="async">+ <img class="stg__warstwa is-on" data-krok="0" src="https://twojadomena.pl/wp-content/uploads/2026/10/krok-0.webp" alt="Szkic strony: szare bloki" loading="lazy" decoding="async">- <img class="stg__warstwa is-on" data-krok="1" src="https://prosm.pl/media/blog/staguje/dmowskiego-2-tkaniny.webp" alt="" loading="lazy" decoding="async">+ <img class="stg__warstwa is-on" data-krok="1" src="https://twojadomena.pl/wp-content/uploads/2026/10/krok-1.webp" alt="" loading="lazy" decoding="async">- <img class="stg__warstwa is-on" data-krok="2" src="https://prosm.pl/media/blog/staguje/dmowskiego-3-grafiki.webp" alt="" loading="lazy" decoding="async">+ <img class="stg__warstwa is-on" data-krok="2" src="https://twojadomena.pl/wp-content/uploads/2026/10/krok-2.webp" alt="" loading="lazy" decoding="async">- <img class="stg__warstwa is-on" data-krok="3" src="https://prosm.pl/media/blog/staguje/dmowskiego-4-oryginal.webp" alt="Ten sam salon po home stagingu" loading="lazy" decoding="async">+ <img class="stg__warstwa is-on" data-krok="3" src="https://twojadomena.pl/wp-content/uploads/2026/10/krok-3.webp" alt="Gotowa strona firmy remontowej" loading="lazy" decoding="async">/* Etykiety na zdjęciu: tekst i miejsce (--x, --y w % zdjęcia) */- <span class="stg__chip" data-krok="1" style="--x:44%;--y:60%" aria-hidden="true">+ tkaniny</span>+ <span class="stg__chip" data-krok="1" style="--x:27%;--y:22%" aria-hidden="true">+ teksty</span>- <span class="stg__chip" data-krok="2" style="--x:51%;--y:24%" aria-hidden="true">+ grafiki i lustro</span>+ <span class="stg__chip" data-krok="2" style="--x:22%;--y:52%" aria-hidden="true">+ kolory marki</span>- <span class="stg__chip" data-krok="3" style="--x:11%;--y:40%" aria-hidden="true">+ detale</span>+ <span class="stg__chip" data-krok="3" style="--x:68%;--y:24%" aria-hidden="true">+ zdjęcie i opinie</span>/* Opisy kroków (numer data-krok bez zmian) */- <li class="stg__krok" data-krok="0"><span class="stg__nr">01</span><h3>Neutralna baza</h3><p>Meble, ściany i światło z okna. Gołe ściany to dla oglądającego znak zapytania, a nie zaproszenie.</p></li>+ <li class="stg__krok" data-krok="0"><span class="stg__nr">01</span><h3>Szkic</h3><p>Układ bez treści: gdzie nagłówek, gdzie przycisk, gdzie zdjęcie. Tu zapadają decyzje, które potem trudno odkręcić.</p></li>- <li class="stg__krok" data-krok="1"><span class="stg__nr">02</span><h3>Tkaniny</h3><p>Poduszki, koc i dywan w jednej palecie. Sofa wygląda na wygodną, pokój na ciepły.</p></li>+ <li class="stg__krok" data-krok="1"><span class="stg__nr">02</span><h3>Teksty</h3><p>Nagłówek mówi, co robisz, gdzie i w jakim czasie. Przyciski mówią, co klient ma zrobić dalej.</p></li>- <li class="stg__krok" data-krok="2"><span class="stg__nr">03</span><h3>Grafiki i lustro</h3><p>Ściana przestaje być pusta, lustro odbija światło. Pokój wydaje się większy.</p></li>+ <li class="stg__krok" data-krok="2"><span class="stg__nr">03</span><h3>Kolory marki</h3><p>Dwa kolory i jeden krój pisma. Przycisk „Wycena” wyróżnia się na całej stronie.</p></li>- <li class="stg__krok" data-krok="3"><span class="stg__nr">04</span><h3>Detale do zdjęć</h3><p>Kwiaty, nakryty stół, zieleń. Drobiazgi, przy których oglądający zatrzymuje się dłużej.</p></li>+ <li class="stg__krok" data-krok="3"><span class="stg__nr">04</span><h3>Zdjęcie i opinie</h3><p>Prawdziwa realizacja i ocena z Google. Klient widzi dowód, zanim przeczyta ofertę.</p></li>
Tyle. Kolory zmieniły się w trzech zmiennych, zdjęcia w czterech adresach, a etykiety na zdjęciu przesunęły się w miejsca, które pokazują: --x:27%;--y:22% to punkt 27% od lewej i 22% od góry grafiki, czyli nagłówek strony. Efekt po podmianie wygląda tak (przewiń):
Jak pracujemy
Strona, która powstaje na Twoich oczach
Przewiń i zobacz cztery etapy projektu.
- 01
Szkic
Układ bez treści: gdzie nagłówek, gdzie przycisk, gdzie zdjęcie. Tu zapadają decyzje, które potem trudno odkręcić.
- 02
Teksty
Nagłówek mówi, co robisz, gdzie i w jakim czasie. Przyciski mówią, co klient ma zrobić dalej.
- 03
Kolory marki
Dwa kolory i jeden krój pisma. Przycisk „Wycena” wyróżnia się na całej stronie.
- 04
Zdjęcie i opinie
Prawdziwa realizacja i ocena z Google. Klient widzi dowód, zanim przeczyta ofertę.
Grafiki przykładu przygotowane w HTML, bez AI. W prawdziwym wdrożeniu byłyby to zrzuty ekranu z kolejnych etapów projektu.
Jak znaleźć --x i --y dla etykiety: otwórz zdjęcie w dowolnym programie, najedź na miejsce, które chcesz pokazać, i odczytaj pozycję kursora. Podziel ją przez szerokość i wysokość zdjęcia. Punkt 430 × 235 px na zdjęciu 1600 × 1067 to --x:27%;--y:22%. Etykieta stanie trochę nad tym punktem, z cienką kreską, która go wskazuje.
Krok 3a: zwykła strona HTML
Na stronie pisanej w czystym HTML wklejasz cały blok w miejsce, w którym ma stać sekcja, czyli między inne sekcje wewnątrz <body>. Nic więcej nie trzeba: styl i skrypt są w środku bloku. Jeśli wolisz porządek w plikach, możesz blok rozdzielić na trzy części:
- W
<body>zostaje tylko sekcja: od<section class="stg" data-stg>do</section>. - Do arkusza stylów (np.
style.css) przenosisz to, co jest między<style>a</style>, bez samych znaczników. - Do pliku skryptów (np.
main.js) przenosisz to, co jest między<script>a</script>, też bez znaczników.
Przy takim podziale pilnuj dwóch rzeczy. Skrypt szuka sekcji od razu po uruchomieniu, więc plik JS musi być podpięty na końcu <body> albo w <head> z atrybutem defer. Bez tego nie znajdzie sekcji i nic się nie rusza. Po zmianie arkusza CSS przeglądarki mogą pokazywać starą wersję, więc podbij wersję pliku, np. style.css?v=2. Wklejenie całego bloku w jednym miejscu omija oba problemy.
Jedna rzecz do sprawdzenia: jeśli strona ma menu przyklejone do góry, ustaw --stg-top na jego wysokość plus kilkanaście pikseli. Inaczej zdjęcie schowa się pod menu. Na tej stronie menu ma około 67 px, więc w demo jest 90 px na komputerze i 66 px na telefonie.
Krok 3b: WordPress, blok „Własny HTML”
Zwykły WordPress z edytorem blokowym ma wbudowany blok „Własny HTML” (po angielsku „Custom HTML”). Nie potrzebujesz wtyczki ani motywu premium.
- Wgraj zdjęcia. W kokpicie: Media → Dodaj plik mediów i przeciągnij cztery pliki. Potem kliknij zdjęcie: w oknie Szczegóły załączonego pliku jest pole Adres URL pliku i przycisk Skopiuj adres URL do schowka.
- Dodaj blok. Otwórz stronę w edytorze, kliknij + (Wybierak bloków), wpisz „HTML” i wybierz Własny HTML.
- Wklej kod. W nowszym WordPressie (sprawdzone na 7.1) blok pokazuje przycisk Edytuj HTML, który otwiera okno z zakładkami HTML, CSS i JavaScript. Wklej całość do zakładki HTML, razem ze stylem i skryptem, i kliknij Aktualizuj. W starszych wersjach blok ma zwykłe pole tekstowe: wklejasz w nie to samo.
- Podmień zdjęcia: cztery adresy
srcna adresy skopiowane z biblioteki mediów, tak jak w przykładzie wyżej. - Sprawdź na stronie. W edytorze animacja nie ruszy, bo WordPress nie uruchamia tam skryptów. Zapisz szkic i otwórz Podgląd strony.
Jeśli motyw ma wąską kolumnę treści (jak domyślne motywy WordPressa, ok. 650 px), sekcja sama ułoży się jak na telefonie: zdjęcie u góry, kroki pod nim. To celowe. Kod sprawdza szerokość sekcji, a nie ekranu, więc dwie kolumny pojawiają się dopiero wtedy, gdy jest na nie miejsce (od 700 px).
Jeśli tylko wklejasz kod i podmieniasz zdjęcia, teksty i kolory, nic tu nie musisz robić. To uwaga dla osób, które chcą dopisać coś własnego do skryptu: nie używajcie w nim podwójnego znaku && (w JavaScripcie oznacza „i”). WordPress przy wyświetlaniu strony zamienia znak & na zapis &. W zwykłym tekście nikt tego nie zauważy, ale skrypt przestaje wtedy działać i zdjęcie stoi w miejscu. Złapałem to przy testach w WordPressie, dlatego gotowy kod jest napisany bez tego znaku.
Ważne: kod z <script> wkleja administrator. WordPress usuwa skrypty wklejane z konta o niższych uprawnieniach, np. redaktora, i wtedy zdjęcie stoi w miejscu. Na WordPress.com w tańszych planach skrypty też są wycinane. Na zwykłym hostingu z własnym WordPressem wszystko działa.
Krok 3c: motyw Kadence i inne kreatory
W motywach i kreatorach stron (Kadence, Astra, GeneratePress, Elementor) zasada jest ta sama: wstawiasz blok albo widżet HTML i wklejasz kod. W Elementorze jest widżet „HTML”. W Kadence (sprawdzone na darmowym motywie z wtyczką Kadence Blocks):
- Wstaw blok Row Layout i wybierz układ Row (jedna kolumna). Sekcja dostaje szerokość kontenera motywu, więc efekt ułoży się w dwie kolumny.
- W kolumnie kliknij Dodaj blok, wpisz „HTML”, wybierz Własny HTML i wklej kod jak wyżej.
- Przyklejony nagłówek włączasz w Wygląd → Dostosuj → Header → Sticky Header (opcja Yes - Only Main Row). Ten panel Kadence jest po angielsku.
Dwie rzeczy warto sprawdzić od razu:
- Przyklejone menu motywu. Jeśli nagłówek jest przyklejony, wpisz w
--stg-top(komputer) i--stg-top-m(telefon) jego wysokość z małym zapasem. Przy nagłówku Kadence sprawdziły się wartości 120 px i 90 px. Zalogowany administrator widzi jeszcze czarny pasek WordPressa, którego odwiedzający nie mają. - Zdjęcie się nie przykleja?
position: stickyprzestaje działać, gdy któryś element nadrzędny maoverflow: hidden. Kreatory stron czasem ustawiają to na sekcjach. Wtedy wstaw blok poza taką sekcję albo wyłącz w jej ustawieniach ukrywanie zawartości wychodzącej poza krawędź.
Wideo: krok po kroku na ekranie
8:27 · zwykła strona HTML, WordPress i motyw Kadence krok po kroku. Film odtwarza się z YouTube po kliknięciu. Otwórz na YouTube
Kiedy ten efekt ma sens, a kiedy nie
Ma sens, gdy Twoja praca ma widoczny efekt i etapy: wnętrza, remonty, ogrody, renowacje, metamorfozy. Zamienia akapit „dbamy o każdy detal” w dowód, który klient ogląda sam. Najlepiej działa jako jedna sekcja na stronie oferty, blisko przycisku kontaktu.
Nie ma sensu, gdy nie masz zdjęć tego samego kadru albo efekt jest słabo widoczny na zdjęciu. Wtedy lepiej sprawdzi się zwykła para „przed” i „po” obok siebie. Nie wstawiaj też kilku takich sekcji na jedną stronę. Jedna robi wrażenie, trzy męczą.
Jeśli chcesz taki efekt u siebie, ale nie masz czasu na zdjęcia, maski i wklejanie, zrobię to za Ciebie w ramach strony internetowej albo abonamentu, w którym strona jest prowadzona na bieżąco. O tym, co jeszcze odróżnia dobrą stronę firmową, pisałem w 16 punktach dobrej strony firmowej. Więcej moich wdrożeń jest w realizacjach.
Najczęstsze pytania
Czy zwykły WordPress ma blok do wklejania kodu?
Tak, „Własny HTML” jest w edytorze blokowym od zawsze. Nie trzeba wtyczki ani motywu premium. Skrypt zostaje zapisany, jeśli wkleja go administrator.
Czy ten efekt spowolni stronę?
Prawie wcale. Skrypt ma około 40 linijek i nie korzysta z żadnej biblioteki. Najwięcej ważą zdjęcia: w przykładzie razem około 400 KB, wczytywane dopiero, gdy sekcja zbliża się do ekranu.
Skąd wziąć zdjęcia pośrednie?
Najlepiej z prawdziwych etapów pracy, ze statywu. Jeśli masz tylko zdjęcie końcowe, wersje pośrednie da się odtworzyć edycją przez AI, ale wtedy trzeba to oznaczyć pod sekcją.
Czy mogę mieć więcej albo mniej niż cztery kroki?
Tak. Każdy krok to para: zdjęcie i opis z tym samym data-krok. Dopisz kolejne pary z numerami 4, 5… albo usuń zbędne. Skrypt liczy kroki sam.
Wkleiłem kod, a zdjęcie się nie zmienia. Co sprawdzić?
Po kolei: czy skrypt nie zniknął przy zapisie (wklejała osoba bez uprawnień administratora), czy nikt nie dopisał do skryptu && (WordPress go psuje), czy zdjęcie się przykleja (element nadrzędny z overflow: hidden), czy numery data-krok przy zdjęciach i opisach się zgadzają.