Kompletný sprievodca: Branike Blocks a Knižnica vzorov

1. Čo to je a čo tým získate

Branike Blocks je sada stavebných blokov a hotových vzorov priamo do editora WordPress (Gutenberg). Nie je to page builder — je to rozšírenie toho editora, ktorý už poznáte. Nič sa neučíte odznova a nič vás nezamkne: keby ste plugin raz vypli, obsah zostane obyčajným WordPress obsahom.

V jednom plugine dostanete:

• 53 blokov — 41 samostatných a 12 vnorených (napríklad jednotlivý krok vo vnútri bloku Kroky),
• 87 hotových vzorov v 21 kategóriách — celé sekcie, ktoré vložíte jedným klikom a len prepíšete texty,
• viac než 5 100 ikon — 5 112 z knižnice Tabler, 73 vlastných Branike SVG, Dashicons a priestor na vaše vlastné,
• presety — nastavenie bloku si uložíte pod menom a použijete kdekoľvek inde,
• tmavý režim — bloky ho vedia od začiatku, nedorába sa dodatočne.

Zámer je jednoduchý: pekná stránka bez grafika a bez builderu, ktorá zároveň neublíži rýchlosti webu. Na to, prečo to druhé nie je samozrejmosť, sa pozrieme v časti 7.

2. Kde bloky nájdete v editore

Otvorte ľubovoľnú stránku alebo článok a kliknite na modré + vľavo hore. V zozname blokov nájdete kategóriu BRANIKE — všetky bloky sú pohromade v nej. Rýchlejšie je napísať lomku a názov priamo do textu, napríklad /hero alebo /cenník.

Nastavenia bloku sú vždy na dvoch miestach a je dobré poznať rozdiel:

• Panel vpravo — všetko podstatné: obsah, rozloženie, farby, efekty, responzívne správanie.
• Lišta nad blokom — rýchle úkony: zarovnanie, presun a tlačidlá Kopírovať štýl / Vložiť štýl.

To kopírovanie štýlu je drobnosť, ktorá ušetrí najviac času. Vyladíte jedno tlačidlo do posledného detailu, skopírujete štýl a vložíte ho na ostatné — bez toho, aby ste nastavenia klikali znova.

3. Knižnica vzorov — 87 hotových sekcií

Vzor je celá hotová sekcia: hero, výhody, cenník, referencie, kontakt. Vložíte ho jedným klikom a prepíšete texty. V editore ich nájdete cez + → záložka Vzory → kategórie začínajúce na BRANIKE —.

Kategórií je 21: Hero, Výhody, CTA, Cenník, FAQ, Referencie, Štatistiky, Tím, Kontakt, Pätička, Obsah, Logo Farm, Galéria, Médiá & Text, Citát, Karty, Timeline, Video, Príspevky, Služby a Záhlavie. Všetkých 87 vzorov nájdete aj naraz v spoločnej kategórii BRANIKE.

Fotografie vo vzoroch sú súčasťou pluginu — dodávajú sa ako WebP priamo v ňom. Nič sa nenačítava z cudzieho servera. Je to rozdiel, ktorý nevidno, ale má dva dôsledky: návštevníkove dáta neodchádzajú tretej strane (GDPR) a stránka nečaká na cudzie spojenie.

4. Ktorý blok na čo — podľa toho, čo staviate

Zoznam blokov podľa abecedy vám nepovie nič. Preto sú tu zoradené podľa toho, čo chcete na stránke dosiahnuť.

4.1 Začiatok stránky

• Hero — úvodná sekcia s nadpisom, textom a tlačidlami. Pozadie: farba, gradient, obrázok alebo video. Split layout dá obrázok vedľa textu.
• Nadpis — gradient, dekoratívna podčiarknutie, farebné zvýraznenie slova, animácie.
• Tlačidlo a Tlačidlá — varianty, ikona, efekty Magnetic, Tilt 3D, dvojitý text, stav načítavania.
• Oddeľovač — čiara, gradient, vlna, cik-cak alebo oblúk, s animáciou kreslenia.

4.2 Rozloženie

Stĺpce sú najsilnejší a najviac prehliadaný blok v sade. 1 až 12 stĺpcov, šírky ťaháte myšou, každý stĺpec má vlastné pozadie, okraje a zaoblenie a vlastné správanie na mobile. Väčšinu rozložení, kvôli ktorým ľudia siahajú po builderi, postavíte práve tu.

4.3 Text a čítanie

• Text — bohatý textový blok: formáty, iniciála (drop cap), gradientový text, voľba HTML značky, animácie.
• Blockquote — citát s autorom a fotkou, tri štýly.
• Expand / Zobraziť viac — dlhý text sa zbalí a rozbalí až po kliknutí.
• Reading Progress — tenký pruh hore alebo dole ukazuje, koľko článku ostáva.

4.4 Vysvetliť, čo ponúkate

• Feature — mriežka výhod (1–4 stĺpce), každá s ikonou, nadpisom a textom.
• Icon Box a Icon List — to isté v menšom: jedna výhoda alebo zoznam s ikonami.
• Kroky — postup krok za krokom, vodorovne alebo zvisle, s číslami alebo ikonami a spojovacími linkami.
• Tabs — dlhý obsah rozdelený do záložiek.
• Accordion — rozbaľovacie otázky. Stavia na natívnom details/summary a pridáva FAQ schému pre Google, takže sa otázky môžu zobraziť priamo vo výsledkoch vyhľadávania.
• Timeline — míľniky, história firmy, priebeh projektu.
• Flip Card — karta s prednou a zadnou stranou, 10 efektov prevrátenia.
• Alert — zvýraznené upozornenie v texte, voliteľne zatvárateľné.

4.5 Získať dôveru

• Testimonial — recenzia s hviezdičkami, avatarom a logom firmy, tri rozloženia.
• Number Box — štatistika, ktorá sa pri scrollovaní odpočíta nahor.
• Logo Showcase — logá klientov ako mriežka, bežiaci pás alebo slučka, s odfarbením pri prejdení myšou.
• Team Member — karta človeka s fotkou, rolou, bio a sociálnymi odkazmi.
• Progress Bar a Progress Circle — pruh alebo kruh, ktorý sa naplní až keď naň používateľ doscrolluje.

4.6 Predať

• CTA — výzva k akcii s farebným pozadím, centrovaná alebo delená.
• Pricing Group + Pricing Box — cenník. Skupina drží mriežku, každá karta má plán, cenu, zoznam funkcií a tlačidlo.
• Countdown — odpočet k dátumu pre kampane a podujatia.
• Karta — obrázok, nadpis, text a tlačidlo; štyri varianty aj vodorovné rozloženie.

4.7 Obrázky a galéria

Samostatný galériový plugin nepotrebujete — galéria je súčasťou Branike Blocks.

• Obrázok — lightbox, popis v prekryve, hover efekty, parallax, pomer strán, polia pre SEO a prístupnosť.
• Foto kôpka — 2 až 4 fotky naskladané ako nálepky; pri prejdení myšou sa rozložia do vejára, klik otvorí lightbox.
• Before / After — posuvné porovnanie dvoch fotiek myšou aj dotykom. Pre rekonštrukcie, retuše, pred a po.
• Carousel — posuvník postavený na CSS scroll-snap, so šípkami a bodkami.
• Vzory kategórie Galéria — hotové rozloženia fotogalérií.

Lightbox je spoločný pre všetky bloky. Keď máte na stránke obrázok, foto kôpku aj vzor galérie, návštevník po otvorení preklikáva všetky fotky v jednej sade — nie tri oddelené.

4.8 Výpis článkov, produktov a podujatí

Posts Grid je dynamická mriežka obsahu — najkomplexnejší blok v sade. Vypíše články, produkty, kurzy, podujatia, referencie aj vlastné typy obsahu.

• filtrovanie podľa typu obsahu, kategórie, štítku a autora,
• zoradenie podľa dátumu, názvu, náhodne alebo podľa vlastného poradia,
• hotové presety vzhľadu — od jednoduchého zoznamu po kartovú mriežku,
• režim carousel namiesto mriežky,
• skeleton loading — kým sa obsah načítava, drží miesto sivá kostra, takže stránka pod ním neposkakuje.

Aj tu platí, že samostatný plugin na výpis príspevkov nepotrebujete.

4.9 Video a obsah len pre členov

Video prehrá YouTube, Vimeo aj vlastné MP4 — bez loga a bez reklám. Kým návštevník neklikne, zobrazuje sa len náhľadový obrázok; samotný prehrávač sa načíta až keď sa video dostane do pohľadu. Vďaka tomu video na začiatku stránky nezdrží jej načítanie.

Chránený obsah uzamkne súbor alebo prehrávač — PDF, EPUB, audio, video — za pravidlo prístupu. Na výber je päť:

• prihlásený používateľ,
• konkrétna rola,
• členstvo alebo tier (napojí sa Branike Membership alebo Club),
• stiahnutý lead magnet (napojí sa Branike CRM),
• zakúpený produkt (napojí sa WooCommerce).

Súbor sa neservíruje priamo z knižnice médií — ide cez kontrolovaný kanál, ktorý prístup overí ešte raz pri každom prehratí. Video sa dá previnúť, ale odkaz sa nedá poslať ďalej. Povedzme si to na rovinu: je to obmedzenie prístupu, nie DRM. Kto má prístup, vie si obsah zaznamenať. Zmyslom je, aby sa nedostal k tým, čo zaň nezaplatili.

4.10 Pohyb pri scrollovaní

Toto je časť, kvôli ktorej stránky vyzerajú draho. Zároveň je to časť, kde sa najčastejšie pokazí rýchlosť — preto sú tieto bloky postavené tak, aby sa im to nestalo.

• Pin Scroll — sekcia ostane prilepená na obrazovke, kým okolo nej beží ostatný obsah. Čisté CSS, žiadny JavaScript.
• Pin Scene — filmový efekt: sekcia sa zapichne a jej vrstvy (Pin Frame, Pin Item) sa počas scrollovania postupne objavujú a miznú. Každej vrstve nastavíte, kedy má prísť a kedy odísť.
• H-Scroll — vodorovný posun poháňaný zvislým scrollovaním: panely idú do strany, kým používateľ scrolluje nadol.

5. Ikony

Ikon máte k dispozícii vyše 5 100 zo štyroch zdrojov — a všetky sú na vašom serveri, nič sa nesťahuje z cudzej CDN:

• 5 112 ikon Tabler — od šípok cez sociálne siete až po odborné symboly,
• 73 vlastných Branike SVG ikon,
• Dashicons — ikony, ktoré pozná WordPress,
• vaše vlastné SVG — nahráte si ich do knižnice a používate ako ostatné.

Pri Tableri stojí za zmienku jeden detail. Vo výbere ikon beží webfont, aby ste mohli listovať všetkých 5 112 naraz. Na hotovú stránku sa ale žiadny font nedostane — zvolená ikona sa vykreslí ako priame SVG. Návštevník teda nesťahuje kvôli trom ikonám celý font. Ikona navyše dedí farbu textu, takže sa v tmavom režime prefarbí sama.

6. Presety, kopírovanie štýlu a nápoveda

Tri veci, ktoré ušetria najviac klikania:

• Presety — vyladený blok uložíte pod vlastným menom a inde ho vyvoláte jedným klikom. Presety sú per blok, takže si môžete držať napríklad tri varianty cenníka.
• Kopírovať / Vložiť štýl — v lište nad blokom. Prenesie vzhľad z jedného bloku na druhý bez toho, aby ste kopírovali obsah.
• Nápoveda pri nastaveniach — pri voľbách, kde nie je zrejmé, čo robia, je vysvetlenie priamo v paneli. Nemusíte hľadať v dokumentácii.

7. Prečo to nezhorší rýchlosť webu

Bežná námietka voči „peknému webu” je, že sa spomalí. Pri Branike Blocks stoja proti tomu štyri konkrétne rozhodnutia:

• Načíta sa len to, čo je na stránke. Blok, ktorý na stránke nie je, na ňu neposiela ani riadok kódu.
• Animácie sa spúšťajú až pri doscrollovaní. Počítadlá, progress bary aj video čakajú, kým sa dostanú do pohľadu — nie na načítanie stránky.
• Prvky si držia miesto dopredu. Obrázky majú rozmery, oddeľovače a výpisy majú vyhradenú výšku. Stránka pod prstom nepodskočí — to je metrika CLS, ktorú Google meria.
• Žiadne cudzie servery. Fotky vo vzoroch, ikony aj skripty sú u vás. Žiadny hotlink, žiadna externá CDN.

Bloky sú písané v čistom JavaScripte bez jQuery. Sada nepotrebuje builder, ktorý by k stránke pribalil vlastný runtime.

8. Prístupnosť a tmavý režim

Prístupnosť nie je v tejto sade doplnok. Bloky používajú sémantické HTML — Accordion stavia na natívnom details/summary, nie na naklikanom divs. Ovládateľné prvky sú dostupné z klávesnice a majú viditeľný stav pri prechode tabulátorom.

Dôležitá vec pre citlivých návštevníkov: bloky rešpektujú systémové nastavenie „obmedziť pohyb”. Keď má návštevník v operačnom systéme zapnuté potlačenie animácií, efekty sa mu nespustia. Netýka sa to jedného či dvoch blokov — je to zapracované naprieč celou sadou.

Tmavý režim je zabudovaný. Farby blokov idú cez spoločné dizajnové tokeny, ktoré vedia o svetlej aj tmavej verzii, takže sa web prepne celý a konzistentne — nie tak, že tri sekcie ostanú svietiť.

9. Na čo si dať pozor

• Nepoužívajte všetky efekty naraz. Pin Scene, H-Scroll a carousel na jednej stránke pôsobia nepokojne a spomalia ju. Jeden výrazný efekt na stránku je akurát.
• Chránený obsah je gating, nie DRM. Bráni neoprávnenému prístupu, nie kopírovaniu tým, čo prístup majú.
• Vzory sú východisko, nie hotová stránka. Prepíšte texty aj fotky — inak bude váš web vyzerať ako každý iný, čo použil ten istý vzor.
• Video s automatickým štartom je vždy stlmené. Nie je to naša svojvôľa — prehliadače automatické prehratie so zvukom blokujú, takže by ste dostali len zaseknutý prehrávač.

10. Kam ďalej

• Branike Blocks — prehľad a možnosti
• Celá príručka Branike
• Kompletný sprievodca: Branike HUB — odtiaľ sa plugin inštaluje a aktualizuje
• Kompletný sprievodca: Branike SEO — FAQ schéma z Accordionu a nastavenia pre vyhľadávače
• Kompletný sprievodca: Branike LMS — chránený obsah v kurzoch

Ak vám niečo v tomto sprievodcovi chýba, napíšte nám — príručku dopĺňame podľa toho, na čo sa pýtate.