# Active24.cz > Pre hostingovú značku Active24 sme postavili nový web na multi-brand dizajnovom systéme, ktorý sme navrhli pre celé portfólio hostingových značiek medzinárodnej skupiny — Active24.cz bol prvý web spustený naživo na tomto základe. ![Úvodná stránka webu Active24.cz s vyhľadávaním domény](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/85/02/85026262691a28a0.jpg) _active24.cz_ Unikátny web na jednom Dizajn systéme · dlhodobá spolupráca Pre Active24, jednu z najväčších hostingových spoločností v Česku, sme vytvorili nový web postavený na dizajnovom systéme, ktorý sme navrhli pre celé portfólio značiek medzinárodnej hostingovej spoločnosti. Jeden funkčný základ, konfigurovateľný dizajn pre každú značku. Informácie o produktoch sa synchronizujú na web priamo z centrálneho systému spoločnosti. [active24.cz](https://www.active24.cz/) ### Ako projekt vznikol Implementácia vznikla na základe dodaného dizajnu vo Figme, pôvodne pripraveného pre nový web inej značky skupiny. Ten projekt zostal dočasne pozastavený, no dizajn bol navrhnutý tak premyslene, že sa z neho dal odvodiť **generický dizajnový systém pre všetky hostingové značky spoločnosti**. Celá myšlienka: dizajnový systém postavený na **premenných naprieč komponentami**, ktorý sa dá konfigurovať rovnako vo Figme ako v kóde. Každá značka tak získa **unikátny vizuál na tom istom funkčnom základe**, bez duplikovania kódu. **Active24.cz bol prvý web spustený do prevádzky** na tomto základe. Podľa upraveného dizajnu sme preň dorobili projektové bloky na mieru a overili tak, že celý koncept funguje aj v ostrej prevádzke. **Myšlienka platformy** - **Dizajn vo Figme** — dizajnový systém postavený na premenných - → premenné ↔ tokeny 1:1 - **Generická téma** — jeden funkčný základ pre všetky značky - → rebrand = konfigurácia - **Weby značiek** — unikátny dizajn, spoločné funkcie ### Ako to funguje Web beží na **WordPress multisite** — jedna inštalácia obsluhuje viacero značiek a krajín. Redakčnou vrstvou je natívny blokový editor Gutenberg s desiatkami vlastných blokov a celý vizuál je odvodený zo **stoviek dizajnových tokenov**, ktoré zrkadlia premenné z Figmy. - **Figma** (Zdroj dizajnu) — dizajnový systém s premennými pre každú značku - → 470+ tokenov zrkadlených 1:1 - **WordPress multisite** (Platforma) — generická téma · 55 vlastných blokov · child témy značiek - → živé ceny cez API - **Centrálne systémy spoločnosti** (Dáta) — produkty, ceny hostingov a domén, košík - → prvý naživo - **Active24.cz** (Značky) — active24.cz, active24.eu + ďalšie značky skupiny Jeden funkčný základ, unikátny dizajn pre každú značku a informácie vždy aktuálne z centrálnych systémov. ### Technické highlighty **Dizajnový systém ako vo Figme** Vizuál celého webu je odvodený zo 470+ dizajnových tokenov - farby, typografia, tlačidlá, komponenty. Jeden súbor s premennými prefarbí frontend, editor aj administráciu naraz. Rebrand pre novú značku je konfigurácia, nie prepisovanie webu: dizajn Active24 vznikol z generického základu, len zlomkom kódu navyše. **55 vlastných Gutenberg blokov** Redakcia skladá stránky z natívnych blokov - hero sekcie, produktové karty, porovnávacie tabuľky, FAQ či scroll-animácie. Bloky majú responzívne nastavenia pre 7 breakpointov priamo v editore, ktoré sa kompilujú na konrétne štýly v kóde. Žiadne nadbytočné CSS, žiadne rozbité stránky. **Živé informácie z centrálnych systémov** Ceny hostingov, serverov a stoviek domén sa neupravujú lokálne, ale sú na web naživo synchronizované z centrálnych API systémov. Konfigurátory prepočítavajú cenu okamžite, a prepočítavajú sa bez načítania stránky. Všetko je pritom rýchle a responzívne. **Jedna platforma, viac značiek a krajín** WordPress multisite so zdieľaným kódom, mediálnou knižnicou a prepojenými jazykovými verziami. Českú a európsku verziu Active24 obsluhuje ten istý kód s lokalizovaným obsahom a nová značka skupiny sa pridáva ako ďalšia konfigurácia tej istej platformy. Ceny priamo zo zdroja ### Cenník domén, ktorý **nikto nespravuje ručne** Registrácie, predĺženia aj transfery stoviek domén - všetko sa načítava priamo z centrálneho registra. Redakcia píše texty, ceny sa aktualizujú samy. ![Cenník domén Active24 s cenami s DPH aj bez DPH](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/59/cc/59ccffd7d62def9f.jpg) Cenník doménových koncoviek s cenami s DPH aj bez. _active24.cz/domeny — ceník_ ![Konfigurátor webhostingových balíkov Active24 so slidermi a živými cenami](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/ea/bd/eabd09280c1313c2.jpg) Konfigurátor balíkov so slidermi a okamžitým prepočtom ceny. _active24.cz/webhosting_ #### Konfigurátory s okamžitým prepočtom Hostingy, virtuálne aj dedikované servery si návštevník naklikáva cez parametre ako operačný systém, doplnky, fakturačné obdobie. Cena sa prepočítava okamžite cez API a produkt ide rovno do košíka. Vyhľadávanie voľných domén, prepínač cien s DPH / bez DPH, či overenie dostupnosti pri transfere sú súčasťou tej istej integračnej vrstvy. ### Redakcia v hlavnej úlohe, prevádzka bez kompromisov Marketingový tím skladá kampaňové stránky sám - z blokov s nastaveniami pre každú veľkosť obrazovky, s A/B testovaním variantov stránok zabudovaným priamo v platforme. Pod kapotou sa o výkon stará viacúrovňové cachovanie, optimalizácia obrázkov a automatizované nasadzovanie s review prostrediami — web hostingovej spoločnosti si nemôže dovoliť výpadok. ### Priebeh spolupráce Implementáciu sme dodali na základe dizajnu vo Figme v úzkej spolupráci s interným tímom klienta. Od spustenia web dlhodobo rozvíjame. Pribúdajú kampaňové bloky na mieru, nové produktové stránky a platforma sa medzitým stala základom pre ďalšie weby klienta. Dizajn dodaný vo Figme Agilný vývoj Spolupráca s interným tímom Dlhodobý rozvoj a podpora ### Výsledok **1.** — web skupiny spustený na novom základe **55** — vlastných blokov pre redakciu **470+** — dizajnových tokenov zrkadlených z Figmy **2** — krajiny z jedného kódu Active24.cz overil celý koncept v ostrej prevádzke: **unikátny dizajn značky na spoločnom funkčnom základe**, informácie z centrálnych systémov a redakcia, ktorá si web spravuje sama. Platforma dnes slúži ako základ pre ďalšie weby kienta. Pridanie novej značky je otázka konfigurácie dizajnových parametrov, nie programovanie nového webu. ![Stránka registrácie domén Active24 s overením dostupnosti domény](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/67/a2/67a281b8e337832e.jpg) Registrácia domén s overením dostupnosti v reálnom čase. _active24.cz/domeny_ ### Naše ďalšie projekty ### **Budujeme inovatívne a zmysluplné riešenia.** Pridajte sa k nám. ![](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/05/da/05daf6b866ba6b2f.svg) **250+** — Ukončených projektov **13** — Rokov skúseností **1200+** — Odpracovaných hodín mesačne **13** — Členov tímu [Ozvite sa nám](/kontakt/) --- Source: https://webikon-web.pages.dev/projekty/active24/