5.0Opinie Google

Viventra Academy - dedykowany motyw WordPress zamiast gotowego szablonu

Klientka przyszła z gotową koncepcją wizualną swojej marki i stroną na gotowym motywie z builderem, który tej koncepcji nie udźwignął. Napisaliśmy motyw od zera: brand przeniesiony na tokeny CSS, własne typy treści pod trzy lokalizacje i trzy grupy wiekowe, dane strukturalne wbudowane w szablony, animacje z wyłącznikiem i własny system zgód. Efekt jest schludny, lekki i wygląda dokładnie tak, jak marka klientki - a nie jak tysiąc innych stron na tym samym szablonie.

Viventra Academy - widok strony na komputerze
Viventra Academy - widok strony na telefonie
99
Performance w Lighthouse

Pomiar na żywej stronie głównej: 99 na desktopie, 92 na symulowanym telefonie.

100
SEO i Best Practices

Oba obszary bez ani jednej uwagi, w obu wersjach pomiaru.

0
przesunięć layoutu (CLS)

Podczas wczytywania nic nie skacze - ani na telefonie, ani na desktopie.

0,8 s
LCP na desktopie

Największy element renderuje się poniżej sekundy; 3,3 s na symulowanym 4G.

Akrobatyka sportowa dla dzieci pod Wrocławiem

Viventra Academy prowadzi zajęcia z akrobatyki sportowej dla dzieci w wieku 4-14 lat w trzech miejscach: OSiR Oborniki Śląskie, Kryniczno i Siedlec. Małe grupy, zapisy przez cały rok, do tego obozy i półkolonie. Zakres naszych prac: dedykowany motyw WordPress według koncepcji klientki, architektura treści pod SEO lokalne, dane strukturalne, warstwa zgód i optymalizacja wydajności.

Gotowy motyw nie unosi własnej koncepcji marki

Szablon z builderem daje efekt szybko, ale zawsze na warunkach szablonu. Klientka miała precyzyjny pomysł na to, jak marka ma wyglądać - i to on wyznaczył kierunek prac.

Gotowy motyw z builderemDedykowany motyw Viventry
WyglądWariacja na temat cudzego szablonuBrand klientki przeniesiony 1:1 na tokeny CSS
Kod stronyDziesiątki plików CSS i JS z motywu i wtyczekJeden arkusz motywu (68 KB) i dwa pliki JS
Struktura treściWszystko upychane w strony i sekcje builderaWłasne typy treści: lokalizacje i zajęcia
Dane strukturalneZależne od dodatkowej wtyczki SEOWbudowane w szablony każdego typu treści
Zmiana wygląduWalka z ustawieniami builderaZmiana wartości tokenu w jednym miejscu
Zgody i skrypty firm trzecichZwykle wczytywane od razuWstrzykiwane dopiero po zgodzie użytkownika

Sześć obszarów prac

Od przełożenia brandu na kod, przez strukturę treści pod frazy lokalne, po zgody i wydajność.

Brand klientki przeniesiony na tokeny CSS

Cała identyfikacja siedzi w zmiennych: róż marki, ciemniejsza magenta pod gradienty, atramentowa czerń tła oraz osobne zestawy dla sekcji jasnych i ciemnych - dzięki temu strona swobodnie przełącza się między nimi bez duplikowania stylów. Do tego płynna skala typograficzna na clamp() (nagłówek H1 skaluje się od 3 do 6,75 rem), stała miara tekstu 65 znaków i wspólna skala odstępów. Kroje pisma - Finico Sans, JUST Sans i Anton - hostujemy lokalnie w formacie woff2, dwa krytyczne z preloadem: żadnego zapytania do Google Fonts i żadnego migotania tekstu przy pierwszym renderze.

Własne typy treści zamiast stron sklejanych builderem

Motyw wprowadza dwa własne typy treści. Lokalizacja: OSiR Oborniki Śląskie, Kryniczno i Siedlec - każda z własnym adresem, współrzędnymi, mapą, grafikiem i linkiem do wyznaczenia trasy. Zajęcia: grupy 4-6, 6-8 i 9-14 lat, każda z osobną stroną i opisem. Klientka dodaje nową lokalizację czy grupę jak zwykły wpis, a strona sama buduje z tego karty na stronie głównej, listing i podstronę - zamiast kopiowania sekcji w builderze. Obok tego komplet stron obsługowych: cennik, grafik, FAQ, o nas, kontakt, dokumenty i zapisy.

Dane strukturalne wbudowane w szablony

Każdy typ treści emituje własny JSON-LD, bez dodatkowej wtyczki i bez ręcznego wklejania. Lokalizacje: SportsActivityLocation z PostalAddress i GeoCoordinates. Zajęcia: Course z EducationalAudience i Organization. Strona FAQ: FAQPage z pytaniami i odpowiedziami. Strona główna: SportsActivityLocation z telefonem, mailem i profilami społecznościowymi. Nowa lokalizacja dodana przez klientkę dostaje poprawne dane strukturalne automatycznie - w Lighthouse SEO wychodzi 100/100.

Wydajność wpisana w budowę motywu

Motyw serwuje jeden zbudowany arkusz stylów (68 KB) i dwa własne pliki JavaScript. Strona główna to 36 żądań i 26 KB HTML, a Lighthouse pokazuje 99/100 Performance na desktopie i 92/100 na symulowanym telefonie, przy zerowym przesunięciu layoutu i 20 ms całkowitego czasu blokowania. Obrazy idą w WebP z leniwym ładowaniem, a rozmiary są zadeklarowane w kodzie - stąd zero skoków treści podczas wczytywania.

Animacje deklarowane przez sekcje, z wyłącznikiem

Zamiast konfigurowania każdego elementu z osobna, sekcja deklaruje w kodzie sposób wejścia atrybutem data-anim: hero, cards, counters, steps, list albo panel. GSAP ze ScrollTriggerem i Lenis siedzą w jednej, samodzielnie hostowanej paczce - bez wtyczek animacyjnych i bez skryptów z cudzych serwerów. Wszystko respektuje ustawienie prefers-reduced-motion, zabezpieczone i po stronie CSS, i po stronie JavaScriptu.

Zgody, prywatność i dostępność

W motywie siedzi własny baner zgód z podziałem na kategorie: niezbędne, statystyki, marketing i funkcjonalne (mapa Google). Skrypty firm trzecich - opinie Google, mapa, analityka, piksel Meta - są wstrzykiwane dopiero po zgodzie, więc przed nią nie ma po nich śladu w sieci. Po stronie dostępności: sekcje opisane przez aria-labelledby, ikony SVG ukryte przed czytnikami ekranu, FAQ na natywnych elementach details i summary, czyli działające również z wyłączonym JavaScriptem. Lighthouse: 100/100 Best Practices i 94/100 dostępności - pozostałe trzy uwagi (kontrast dwóch odnośników, nazwa dostępna logo w stopce i etykieta widżetu Instagrama) są na liście poprawek.

Co klientka dostała do ręki

  • Motyw, który wygląda jak jej marka, a nie jak szablon - kolory, typografia i rytm wprost z jej koncepcji
  • Strona główna złożona z 14 sekcji prowadzących od pierwszego wrażenia do zapisu na zajęcia
  • Osobne strony trzech lokalizacji i trzech grup wiekowych - materiał pod frazy lokalne dla Obornik Śląskich, Kryniczna i Siedlca
  • Dodawanie lokalizacji i grup bez dotykania kodu i bez buildera - jak zwykłych wpisów
  • 99/100 Performance, 100/100 SEO i 100/100 Best Practices w Lighthouse przy zerowym przesunięciu layoutu
  • Zgody rozbite na kategorie, ze skryptami firm trzecich blokowanymi do momentu decyzji użytkownika

Na czym to działa

Motyw

WordPressdedykowany motywwłasne typy treściPHP

Front

CSS custom propertiesclamp()woff2JSON-LD

Animacje

GSAPScrollTriggerLenis

Integracje

grafik zajęćopinie GoogleInstagram Feedwłasny consent mode

Zobacz stronę viventra-academy.pl

Masz własny pomysł na to, jak ma wyglądać Twoja marka?

Dedykowany motyw kosztuje więcej niż szablon, ale przestajesz walczyć z cudzymi ustawieniami. Pokażemy, jak przełożyć Twoją koncepcję na kod.