Branike — Wordpress Ekosystém, vlastné pluginy

Dizajn cez Blocksy a bloky

Aktualizované 24. septembra 2026

Vzhľad webu vzniká na dvoch miestach a najviac času sa stráca tým, že človek hľadá nastavenie tam, kde nie je. Preto začnime deliacou čiarou: téma robí rám, bloky robia obsah.

  • Téma je všetko, čo je na každej stránke rovnaké — hlavička, menu, pätička, základná paleta farieb, písma, šírka obsahu, vzhľad výpisu článkov a kariet produktov.
  • Bloky sú to, čo skladáte vnútri stránky — hero, sekcie s výhodami, cenník, referencie, otázky a odpovede, galéria, časová os.

Keď hľadáte, ako zmeniť farbu tlačidla v jednej sekcii, je to blok. Keď hľadáte, ako zmeniť farbu tlačidiel na celom webe, je to téma. Toto jediné pravidlo ušetrí väčšinu hľadania.

Téma robí rám · bloky robia obsah

Prečo to nie je len jedna vec

Mohlo by sa zdať jednoduchšie, keby všetko robila téma. V praxi to má opačný efekt: obsah postavený nástrojmi témy sa nedá presunúť. Pri výmene témy zmizne alebo sa rozsype.

Preto sú Branike bloky napísané tak, aby boli na téme nezávislé. Stránka postavená z nich vyzerá rovnako pod jednou aj druhou témou, pretože si nesie vlastné rozloženie, odsadenia aj farby. Vymeniť sa dá rám okolo nej — obsah ostane.

Dve témy: Blocksy a Branike téma

Weby, ktoré s nami bežia, používajú jednu z dvoch tém. Blocksy je téma, na ktorej beží väčšina dnešných webov; vzhľad sa v nej nastavuje vo Vzhľad → Prispôsobiť: paleta, typografia, hlavička, pätička, šírky, vzhľad e-shopu.

Branike téma je naša vlastná téma postavená na úplnom editovaní webu (FSE — spôsob, ktorým WordPress dovoľuje upravovať aj hlavičku, pätičku a šablóny v tom istom blokovom editore ako stránky). Nastavuje sa vo Vzhľad → Editor a na vlastnej stránke nastavení témy. Je to iná filozofia — nie iné tlačidlá na tom istom mieste. Každá téma má vlastného sprievodcu a ktorú máte, zistíte za pätnásť sekúnd v rozcestníku Ktorú tému mám?.

Bloky fungujú v oboch témach rovnako a v oboch si berú farby z palety témy. Prechod z jednej na druhú preto neznamená prestavbu obsahu.

Dôležité: obsah stavajte z blokov, nie z nástrojov témy. Kto to dodrží, prejde na inú tému bez práce navyše.

Čo dostanete v blokoch

  • 55 blokov — od základných (nadpis, text, tlačidlo, obrázok, oddeľovač) po zložité (hero, cenník, časová os, preklápacia karta, porovnanie pred a po, odpočet, chránený obsah, fotka či video v okne a mega panel do menu).
  • 130 hotových vzorov v 22 kategóriách — celé sekcie, ktoré vložíte a prepíšete v nich texty. Hero, výhody, cenník, FAQ, referencie, štatistiky, tím, kontakt, pätička, logá, galéria, časová os, video, výpis článkov, služby, záhlavie a panely pre mega menu. Každý blok, ktorý sa dá vložiť do stránky, má aspoň jeden vzor, na ktorom ho vidno v akcii.
  • 5 185 ikon — obrysová sada plus vlastné Branike ikony. Vyberajú sa z prehľadu, nie kopírovaním kódu.
  • Fotky v balíku — vzory nie sú prázdne rámčeky, prídu s obrázkami v úspornom formáte, ktoré viete rovno vymeniť za svoje.
  • Predvoľby — nastavenie bloku, ktoré vám sedí, si uložíte a použijete na ďalšej stránke jedným kliknutím.
  • Knižnica priamo v editore — tlačidlo Knižnica vzorov v hornej lište otvorí náhľady s vyhľadávaním, takže vzory nevkladáte naslepo.
  • Nastavenia pre telefón — každý blok sa dá skryť na mobile, tablete alebo počítači a úvodná sekcia (Hero) má pre telefón vlastný výrez fotky, výšku aj umiestnenie textu.

Ako vzniká stránka v praxi

Najrýchlejšia cesta nie je stavať sekciu po sekcii z jednotlivých blokov. Je to:

  • Vložte vzor, ktorý sa najviac blíži tomu, čo potrebujete.
  • Prepíšte texty a vymeňte obrázky za svoje.
  • Dolaďte farby a odsadenia, ak treba. Väčšinou netreba — vzory sú navrhnuté tak, aby fungovali hneď.
  • Skontrolujte na mobile. Toto je krok, ktorý sa vynecháva najčastejšie a mstí sa najviac.

Rozdiel v čase je rádový. Stránka, ktorá by sa skladala hodinu, vznikne za desať minút — a pritom nie je „šablónovitá“, pretože obsah, fotky aj farby sú vaše.

Farby: paleta rozhoduje, nie jednotlivé bloky

Bloky si berú farby z palety témy — v Blocksy aj v Branike téme. Vďaka tomu stačí zmeniť paletu a zmení sa celý web naraz — vrátane sekcií, ktoré ste postavili pred pol rokom.

Aj keď v bloku farbu vyberiete ručne, ale je to farba z palety, blok si zapamätá odkaz na paletu, nie konkrétny odtieň. Preto sa prefarbí spolu s webom aj v tmavom režime. Svetlý text na tmavej sekcii je zámerná výnimka — ostane svetlý, aby nestratil kontrast.

Ručne zadaná farba v jednom bloku je výnimka, nie spôsob práce. Web, kde je päťdesiat ručne nastavených odtieňov, sa nedá prefarbiť inak než ručne. Preto: paletu nastavte na začiatku a potom ju používajte.

Súčasťou návrhu je aj tmavý režim. Nie je to doplnok na koniec — každý blok s ním ráta a kontrast textu voči pozadiu je podmienka, nie odporúčanie.

Vzhľad a rýchlosť sú tá istá téma

Pekná stránka, ktorá sa načítava štyri sekundy, je zlá stránka. Preto majú bloky vlastnosti, ktoré sa navrhujú spolu s dizajnom:

  • Obrázky sa načítavajú až keď treba — okrem toho hlavného v hornej časti, ktorý sa načíta hneď, aby stránka nevyzerala prázdna. Fotka v bloku Hero to má automaticky; pri bloku Obrázok zapnite voľbu LCP obrázok (hero).
  • Obrázky majú rozmery, takže obsah pod nimi neposkakuje pri načítaní. Poskakujúce rozloženie je najotravnejšia chyba na mobile.
  • Ikony sú vložené priamo v stránke, nesťahuje sa kvôli nim celé písmo s tisíckami symbolov.
  • Pohyb sa spúšťa až keď je prvok na obrazovke, nie na pozadí počas celej návštevy. Kto má v systéme zapnuté obmedzenie pohybu, animácie nedostane.
  • Prístupnosť — nadpisy majú poradie, odkazy sa dajú rozoznať aj bez farby, ovládať sa dá klávesnicou.

Kde do toho vstupujú ostatné pluginy

Dizajn nekončí na statickej stránke. Bloky sú aj miestom, kde sa zobrazuje to, čo spravujú ostatné časti ekosystému:

  • Výpis článkov vloží prehľad z blogu alebo z vlastného typu obsahu — nemusíte ho stavať ručne.
  • Chránený obsah sprístupní súbor alebo prehrávač len tomu, kto prejde pravidlom — prihlásenému, používateľovi s konkrétnou rolou, tomu, kto si odomkol obsah e-mailom (s Branike CRM), alebo tomu, kto kúpil produkt. Ostatní uvidia ukážku s tlačidlom.
  • Video s ochranou nadväzuje na kurzy a členské zóny.
  • Formulár zo stránky zapíše dopyt do CRM a môže spustiť sériu správ.
  • Cenník a tlačidlá vedú do e-shopu, ktorý má vlastné pravidlá cien pre členov a veľkoodberateľov.
  • Firemné údaje a otváracie hodiny sa v Branike téme doťahujú z jedného miesta (nastavenia témy, záložka Kontakt), takže sa v pätičke a na kontakte neopravujú dvakrát.

Čo bloky nerobia

  • Nenavrhnú za vás web. Dostanete kvalitné stavebné diely, nie hotovú identitu značky.
  • Nenahradia fotografa. Priložené fotky sú na rozbeh, nie na finálnu prezentáciu vašej prevádzky.
  • Nemenia hlavičku a pätičku — to je práca témy. Jedinou výnimkou je mega panel, ktorý sa pripája k položke menu.
  • Nespravia zlý text dobrým. Najkrajšia sekcia s prázdnou vetou je stále prázdna veta.

Na čo si dať pozor

  • Nastavte paletu skôr, než postavíte dvadsať stránok. Prefarbovanie po fakte je práca navyše.
  • Nemiešajte nástroje témy do obsahu stránky. Presne to sa pri výmene témy stratí.
  • Nepoužívajte na obsah vlastné CSS, kým sa nedá inak. Vlastné pravidlá prežijú aktualizáciu, ale nikto po vás nebude vedieť, kde sú.
  • Kontrolujte pri šírke mobilu. Dlhé nápisy na tlačidlách a široké tabuľky sú dve najčastejšie chyby. Skrytie bloku na mobile nie je zrýchlenie — skrytý blok sa stiahne aj tak.
  • Nadpisy nepoužívajte na veľkosť písma. Poradie nadpisov čítajú vyhľadávače aj čítačky pre nevidiacich.
  • Vzor upravte, nie prestavte. Ak z neho po úpravách ostane niečo úplne iné, pravdepodobne ste si vybrali nesprávny vzor.

Súvisiace návody

Nenašli ste odpoveď? Radi pomôžeme — napíšte nám.
Napíšte nám