- Klient
- webmotion — projekt własny
- Branża
- Studio developmentu WordPress
- Czas trwania
- Styczeń 2026 — w toku
- Zakres
- Design, Development, Maintenance, Performance, Security
- Zespół
- Jedna osoba — design, development i utrzymanie
- Dostępna pod
- www.webmotion.io
Co ten projekt musiał rozwiązać
Problem, jaki był, i decyzja, która go rozwiązała.
Strona studia, która miała pokazać pracę, a nie ją opisać
Wszystko, co sprzedajemy — autorskie bloki, motyw w edytorze, treści wielojęzyczne, utrzymywany pipeline build — jest niewidoczne na zrzucie ekranu. Strona musiała być demonstracją i musiała zostać edytowalna bez zaglądania w kod przy każdej zmianie.
- Żadna zmiana na stronie nie powinna wymagać programisty
- Dwa języki, łącznie z opcjami globalnymi
- Ten sam stack, który oddajemy klientom, bez skrótów
Każda strona składana z bloków należących do redaktora
Zamiast szablonów stron motyw dostarcza bibliotekę bloków: każdy blok to definicja, serwis normalizujący pola i widok Blade z podglądem w edytorze. Strony powstają z tych samych elementów, które dostaje klient.
- Widoki Blade i typowane serwisy zamiast tagów szablonu
- Jeden system kart wspólny dla wszystkich list
- Podgląd w edytorze dla każdego bloku
Stack, na którym to zbudowaliśmy
Pogrupowany warstwami, a nie wypisany płasko — widać, co jest fundamentem, a co decyzją podjętą w tym projekcie.
- WordPress CMS i edytor blokowy
- ACF Pro Autorskie bloki i grupy pól
- Polylang PL / EN w treściach i opcjach
- PHP 8.2+ Typowane serwisy, tryb strict
- Sage 11 Szkielet motywu od Roots
- Acorn 6 Kontener Laravela w WordPressie
- Blade Widoki, composery, serwisy
- Livewire 3 Filtrowanie list bez przeładowania
- Tailwind CSS v4 Utility plus tokeny motywu
- Swiper 11 Slidery hero i opinii
- PhotoSwipe 5 Lightbox zrzutów ekranu
- Locomotive Scroll 5 Animacje przy przewijaniu
- Vite 6 Build assetów i HMR
- ddev / Docker Identyczne środowiska lokalne
- LiteSpeed + LSCache Serwer produkcyjny i cache stron
- WebP Converter Automatyczne obrazy nowej generacji
Z czym to połączyliśmy
Każda karta nazywa system, jego rolę na tej stronie i kierunek przepływu danych.
-
SMTP
WP Mail SMTP
Poczta z formularzy i systemowa wychodzi przez uwierzytelniony relay zamiast serwerowego mailera, więc nic nie trafia do spamu.
Strona → relay → skrzynka -
Schema
Yoast SEO
Dane strukturalne, mapy witryny i meta dla każdego języka, podpięte pod zarejestrowane typy treści.
Strona → wyszukiwarki -
i18n
Polylang + ACF Options
Dwa pełne drzewa językowe razem z tłumaczonymi stronami opcji, więc bloki globalne edytuje się osobno dla każdego języka.
PL ⇄ EN -
Formularze
Contact Form 7
Szablonowany w Blade, a nie w panelu wtyczki, więc formularze wyglądają jak reszta strony.
Użytkownik → formularz → skrzynka -
Kopie
UpdraftPlus
Zaplanowane kopie bazy i plików wypychane poza serwer, z przećwiczonym odtwarzaniem na stagingu.
Strona → magazyn zewnętrzny -
Endpoint
Health check
Wtyczka mu-plugin raportuje stan rdzenia, PHP i wtyczek do monitoringu, więc widzimy odchylenia przed klientem.
Monitoring → strona → JSON
Kolory i typografia projektu
Paleta i krój to dane projektu, nie dekoracja — każda próbka jest tokenem eksportowanym przez motyw.
- Ink #121212 Nagłówki, ciemne panele
- Graphite #3D3D3D Listy, chipy
- Slate #5F5F5F Akapity
- Sand #F3F1EB Primary · przyciski, tła sekcji, karty
- Base #FFFFFF Strona, karty glass
- Cobalt #016DC6 Linki, nadtytuły, obrysy fokusu
- ExtraLight 200
- Light 300
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
- Display
- 96 / 0.94 / −0.035em
- Nagłówek sekcji
- 46 / 1.1 / −0.025em
- Tytuł karty
- 26 / 1.25 / 500
- Tekst podstawowy: szesnaście na 1.65
- 16 / 1.65 / 400
- Etykieta nad nagłówkiem
- 12 / 0.12em / wersaliki
- 12px Przyciski, kontrolki
- 16px Karty wewnętrzne
- 24px Karty list
- 30px Panele szklane, media
- 50% Kontrolki okrągłe
Glassmorphism jako główna powierzchnia
Każda wypukła powierzchnia na stronie to ten sam półprzezroczysty panel na rozmyciu: karty opinii, kontrolki nagłówka, kropki nawigacji i wszystkie przyciski. Jedno wypełnienie, jedno rozmycie, jedna ramka — głębia jest cechą systemu, a nie decyzją podejmowaną osobno dla każdego komponentu.
- Wypełnienie
- rgb(0 0 0 / 9%)
- Rozmycie
- blur(20px) saturate(1.2)
- Zaokrąglenie
- 30px
- Ramka
- 1px transparent, padding-box
- Przyciski
- rgb(0 0 0 / 60%), blur(12px) przy 12px
Sam produkt
Zrzuty z działającej strony. Każdy kafelek otwiera się w pełnym rozmiarze.
Co faktycznie zbudowaliśmy
Sześć elementów, na których stoi ta strona — każdy z nich trafia też do projektów naszych klientów.
-
01
Biblioteka bloków zamiast składania stron
Trzydzieści trzy autorskie bloki, każdy jako definicja, serwis i widok Blade — redaktor składa strony, których już nie dotykamy.
-
02
Listy bez przeładowania
Portfolio, blog i poradniki działają na komponentach Livewire, więc filtrowanie i doczytywanie zostaje na stronie.
-
03
Dwujęzyczność do ostatniej opcji
Drzewa PL i EN z tłumaczonymi stronami opcji ACF oraz ciągi motywu wyciągane standardowym narzędziem i18n.
-
04
Szkło jako główna powierzchnia
Jeden półprzezroczysty panel — 8% wypełnienia, rozmycie 12px, włosowa ramka — definiuje każdą kartę, kontrolkę i przycisk, wspólny dla bloga, poradników i każdego bloku listy.
-
05
Pipeline wydajności, nie wtyczka
Assety budowane Vite, automatyczna konwersja WebP i cache LiteSpeed skonfigurowane razem, a nie doklejone.
-
06
Monitoring od pierwszego dnia
Wtyczka mu-plugin raportuje stan rdzenia, PHP i wtyczek, więc odchylenie widzimy przed klientem.
Co to zmieniło
Zmierzone na działającej stronie, nie oszacowane — pod każdą liczbą jest źródło pomiaru.
Jakościowa część efektu — co da się dziś zrobić bez otwierania kodu.
- Biblioteka bloków z podglądem w edytorze
- Model treści w dwóch językach
- Portfolio i poradniki jako pełnoprawne typy treści
- Cache, WebP i build assetów skonfigurowane razem
- Dane strukturalne SEO dla każdego typu treści
- Kopie zapasowe i monitoring stanu
Cześć, jestem Clawby.
Maskotka · od 2026
Poznaj Clawby
Clawby to krab, który pilnuje każdego wdrożenia, jakie oddajemy. Krab, bo dobry kod — jak dobra skorupa — ma chronić to, co w środku. A kiedy prosta droga jest zablokowana, Clawby po prostu obchodzi problem bokiem.
- Stanowisko
- Dyrektor ds. dobrego humoru
- Gdzie bywa
- Na razie tutaj — wkrótce w innych miejscach strony
- Ciekawostka
- Dwa szczypce, zero konfliktów przy merge’u
Masz projekt, który ma działać tak samo?
Prześlij brief albo umów rozmowę. Odpowiadamy zakresem i widełkami, nie szablonem.
