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:

• 55 blokov — 41 samostatných a 14 vnorených (napríklad jednotlivý krok vo vnútri bloku Kroky alebo mega panel vo vnútri navigácie),
• 130 hotových vzorov v 22 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,
• návod priamo v administrácii — vlastná stránka s prehľadom všetkých blokov a nápoveda pri každom nastavení.

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 9.

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, správanie na mobile a viditeľnosť podľa zariadenia.
• 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.

Tip: licenciu aktivujte hneď po inštalácii. Bez nej sa na webe nevykreslí napríklad blok Video (zostane po ňom prázdne miesto) a nastavenia pluginu vás presmerujú na stránku licencie. Licencia je viazaná na doménu, takže testovacia kópia webu potrebuje vlastnú. Ak používate Branike HUB, licencia sa načíta z neho a druhýkrát ju nezadávate.

3. Knižnica vzorov — 130 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. K vzorom sa dostanete dvoma cestami:

• Tlačidlo Knižnica vzorov v hornej lište editora. Otvorí okno s náhľadmi, vyhľadávaním a kategóriami — najpohodlnejší spôsob, ako si vzory prezrieť.
• + → záložka Vzory → kategórie začínajúce na BRANIKE —.

Kategórií je 22: 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, Záhlavie a Mega panel. Všetkých 130 vzorov nájdete aj naraz v spoločnej kategórii BRANIKE.

Za posledné týždne knižnica narástla o 43 sekcií a hlavne sa zmenilo jedno: každý blok, ktorý sa dá vložiť do stránky, má aspoň jeden vzor, na ktorom ho vidno v akcii. Nájdete tu teda aj sekcie s odpočtom, porovnaním pred a po, preklápacími kartami, ukotvenou sekciou pri rolovaní, fotkou v okne či prekrytím dvoch sekcií. Keď neviete, na čo je nejaký blok dobrý, najrýchlejšie to zistíte z jeho vzoru.

Vzory si berú farby z palety vášho webu — akcentová farba sa zdedí, takže vložená sekcia hneď ladí so zvyškom stránky. Zástupné texty typu „Lorem ipsum“ v nich nie sú; texty sú písané tak, aby ste videli, čo na dané miesto patrí.

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. Na telefóne sa dá nastaviť zvlášť výrez fotky, výška aj iná fotka (viac v časti 5).
• 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. Tlačidlo vie namiesto stránky otvoriť aj okno. Farbu si bez nastavenia berie z témy, takže ladí s tlačidlami na zvyšku webu.
• 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 tablete a mobile. Väčšinu rozložení, kvôli ktorým ľudia siahajú po builderi, postavíte práve tu.

Tri nastavenia, ktoré pribudli alebo začali poriadne fungovať:

• Max. šírka obsahu — pozadie sekcie ide od kraja po kraj, ale text a stĺpce v nej ostanú v čitateľnom páse. Predtým toto políčko orezávalo celú sekciu aj s pozadím; dnes orezáva len obsah, ako hovorí jeho názov.
• Prekrytie predchádzajúcej sekcie — sekciu vytiahnete nahor, takže sa prekryje s tou nad ňou (typicky karty, ktoré „vyčnievajú“ z hera). Hodnota pre mobil sa nastavuje zvlášť a nededí sa z počítača, lebo na úzkom displeji rovnaký počet pixelov zožerie tretinu obrazovky. Funguje, len keď má sekcia vlastné pozadie — bez neho by text ležal na texte a prekrytie sa radšej neuplatní.
• Medzera medzi blokmi v stĺpci — jedno číslo, ktoré platí medzi každými dvoma blokmi v stĺpci. Keď je nula, každý blok si drží vlastný odstup; nadpis tak dýcha, ale tlačidlo býva nalepené na texte.

4.3 Text a čítanie

• Text — bohatý textový blok: formáty, iniciála (drop cap), gradientový text, novinové stĺpce, efekt písania, voľba HTML značky, animácie.
• Citát — citát s autorom a fotkou, tri štýly.
• Rozbalenie / Čítať viac — dlhý text sa zbalí a rozbalí až po kliknutí.
• Postup čítania — 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.
• Ikona s textom a Zoznam s ikonami — to isté v menšom: jedna výhoda alebo zoznam s ikonami.
• Steps / Kroky — postup krok za krokom, vodorovne alebo zvisle, s číslami alebo ikonami a spojovacími linkami.
• Záložky — dlhý obsah rozdelený do záložiek.
• Akordeón — 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.
• Časová os — míľniky, história firmy, priebeh projektu.
• Flip Card — karta s prednou a zadnou stranou, 10 efektov prevrátenia.
• Alert / Upozornenie — zvýraznené upozornenie v texte, voliteľne zatvárateľné.

4.5 Získať dôveru

• Referencia — recenzia s hviezdičkami, avatarom a logom firmy, tri rozloženia.
• Štatistické číslo — štatistika, ktorá sa pri scrollovaní odpočíta nahor.
• Logá klientov — logá klientov ako mriežka alebo bežiaci pás, s odfarbením pri prejdení myšou.
• Člen tímu — karta človeka s fotkou, rolou, bio a sociálnymi odkazmi.
• Ukazovateľ postupu a Kruhový ukazovateľ — 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á.
• Cenník + Cenová karta — cenník. Skupina drží karty v rade s rovnakou výškou a má vlastný počet stĺpcov pre telefón; každá karta má plán, cenu, zoznam funkcií, tlačidlo a voliteľný odznak pre plán, ktorý chcete predať.
• Odpočítavanie — odpočet k dátumu pre kampane a podujatia, s voľbou, čo sa stane po vypršaní (zobrazí nuly, skryje celý blok alebo ukáže správu).
• 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.
• Pred / Po — 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í

Mriežka článkov 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, fotka v okne a obsah len pre niektorých

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.

Médium v okne je nový blok pre situáciu, ktorú pozná každý, kto píše návody: jedna veta potrebuje obrázok, krátke video alebo schému, ale vložiť ho priamo do textu by rozbilo čítanie všetkým, ktorí ho nepotrebujú. Obsah dáte do bloku a na stránke z neho zostane len spúšťač — po kliknutí sa otvorí okno. Podrobne ho opisuje časť 6.

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 (napríklad odberateľ alebo zákazník),
• členstvo alebo klub,
• odomknutie e-mailom, teda stiahnutý lead magnet (potrebuje Branike CRM),
• zakúpený produkt (potrebuje WooCommerce).

Pozor na pravidlo Členstvo / klub: odomkne obsah len vtedy, keď sa naň napojí členský plugin, ktorý povie, kto je členom. Bez takého napojenia vidia obsah iba administrátori a všetci ostatní dostanú ukážku so zámkom. Pre členské stránky preto zatiaľ použite ochranu priamo v členskom plugine alebo pravidlo podľa roly.

Kto pravidlom neprejde, uvidí ukážku — nadpis, krátky text a tlačidlo, ktoré si nastavíte. Napíšte ju ako pozvánku, nie ako zamknuté dvere. Administrátor vidí obsah vždy, aj v náhľade.

Súbor sa neservíruje priamo z knižnice médií — ide cez kontrolovaný kanál. Jeho adresu dostane len ten, kto pravidlom prešiel, platí dve hodiny a pri prihlásenom používateľovi je viazaná na jeho účet, takže preposlaná inému človeku nefunguje. Video sa dá previnúť, ale prehrávač neponúka tlačidlo na stiahnutie. Povedzme si to na rovinu: je to obmedzenie prístupu, nie DRM (DRM je technická ochrana proti kopírovaniu). 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. Potrebuje vedľa seba dosť dlhý obsah, inak efekt nemá kedy nastať.
• 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. Na telefóne sa panely do strany neposúvajú, ale poskladajú sa pod seba. Výšku panela a odsadenie pre mobil nastavíte zvlášť; predvolená výška je „podľa obsahu“, takže nad obrázkom ani pod ním nezostane prázdne miesto.

4.11 Menu s mega panelom

Mega panel je blok, ktorý žije vnútri navigácie webu: položka menu po prejdení myšou neotvorí úzky zoznam, ale široký panel so stĺpcami, ikonami či produktmi. Panel je obyčajný vzor, ktorý raz postavíte (alebo si vyberiete jeden z troch hotových v kategórii Mega panel). Kde sa panel priraďuje a ako sa správa na mobile, rozoberá Menu a navigácia.

5. Ako blok vyzerá na telefóne

Väčšina návštev prichádza z telefónu, a práve tam sa pekná stránka najčastejšie rozsype. Preto v blokoch pribudli nastavenia, ktoré riešia mobil zvlášť.

Viditeľnosť podľa zariadenia

Každý blok zo sady má v pravom paneli sekciu Viditeľnosť podľa zariadenia s tromi voľbami:

• Skryť na mobile (do 767 px),
• Skryť na tablete (768–1023 px),
• Skryť na desktope (od 1024 px).

Hodí sa to napríklad na dve verzie tej istej sekcie — bohatšiu pre počítač a stručnejšiu pre telefón. Všetky tri naraz zapnúť nejde, blok by nebolo vidieť nikde. V editore sa skrytý blok nikdy nestratí — len ho orámuje prerušovaná čiara a nápis, kde je skrytý.

Pozor: skrytý blok sa návštevníkovi aj tak stiahne, vrátane obrázkov. Je to nástroj na rozloženie, nie na zrýchlenie stránky. Prečo? Web má jednu uloženú verziu stránky pre všetky zariadenia; keby sa blok podľa zariadenia vôbec nevypísal, uložila by sa verzia prvého návštevníka a dostali by ju všetci ostatní.

Hero na telefóne

Úvodná sekcia s fotkou je miesto, kde telefón narobí najviac škody: fotku musí orezať a bez nastavenia reže vždy od stredu. Tvár alebo logo potom odíde za okraj. V bloku Hero preto nájdete:

• Výrez fotky krížikom — potiahnete krížik na bod, ktorý má zostať vidieť, zvlášť pre počítač a zvlášť pre mobil. Kým mobilný výrez nenastavíte, zdedí sa z počítača.
• Inú fotku pre mobil — nepovinnú, pre prípad, keď výrez nestačí. Je to ďalší súbor navyše, preto až druhá voľba.
• Výšku na mobile — predvolene „podľa obrázka“, takže pri fotke zobrazenej celej (voľba Contain) nad ňou ani pod ňou nezostanú biele pásy. Dá sa zvoliť aj rovnaká výška ako na počítači alebo vlastná hodnota.
• Umiestnenie obsahu na obrázku — samostatný panel, ktorý sa ukáže pri obrázkovom pozadí. Krížikom posadíte nadpis a tlačidlá na konkrétne miesto fotky, napríklad tam, kde v bannere nie je text. Pre mobil môžete zvoliť vlastné miesto alebo vrátiť obsah do bežného toku — pod fotku, keď sa do voľného miesta na úzkom displeji jednoducho nezmestí.

Fotka v Here sa navyše telefónu posiela v menšej verzii, nie v plnej desktopovej veľkosti — na rýchlosti načítania to na mobile poznať.

Tlačidlá, ktoré sa nezmestia

Keď sa rad tlačidiel nezmestí do šírky, tlačidlá sa zalomia na ďalší riadok, nie orežú. Platí to na telefóne aj na užších oknách notebooku.

6. Médium v okne a značka v texte

Blok Médium v okne má dve časti: obsah, ktorý sa zobrazí v okne (obrázok, video, aj viac blokov naraz — čokoľvek, čo sa dá dať na stránku; na video vložte blok Video), a spúšťač, na ktorý čitateľ klikne.

Ako ho vložiť

1. V editore pridajte blok Médium v okne.
2. Dovnútra vložte, čo sa má zobraziť v okne.
3. V pravom paneli vyberte, ako vyzerá spúšťač.
4. Vyplňte, ako sa okno volá. Tento názov prečíta čítačka obrazovky (program, ktorý nevidiacim číta stránku nahlas), keď sa okno otvorí — napíšte ho ako vetu, nie „img_2481″.

Štyri podoby spúšťača

• Iba ikona — malý symbol v riadku textu. Najtichšia voľba, keď je obrázok bonus.
• Ikona s textom — symbol a krátky popis. Keď by čitateľ inak neodhadol, čo sa za ním skrýva.
• Tlačidlo — najvýraznejšie; patrí pod odsek, nie doň.
• Bez spúšťača — otvára ho slovo v texte — blok na stránke neukazuje nič a len drží obsah. Otvára ho označené slovo v článku.

Ikonu si blok vyberie sám podľa obsahu — fotka dostane ikonu fotky, video ikonu prehrávania — takže značka znamená všade to isté.

Pozor: pri štvrtej podobe potrebuje blok adresu (kotvu), na ktorú slovo ukáže. Bez nej sa nevykreslí vôbec — nie prázdny rámik, ale nič. Editor ju doplní sám, hneď ako túto podobu zvolíte; pole Adresa tejto schránky potom nemeňte, pokiaľ neviete prečo.

Značka na slove

Druhý, často krajší spôsob: namiesto tlačidla označíte slovo, ktoré už vo vete je. Slovo dostane nenápadné vyznačenie a kliknutie naň otvorí okno.

1. Kdekoľvek na stránke vložte blok Médium v okne s podobou Bez spúšťača.
2. V texte označte slovo a v lište formátovania (tam, kde je tučné písmo a odkaz) zvoľte značku Náhľad. Funguje v bežnom odseku aj v blokoch Text, Nadpis a Ikona s textom.
3. Vyberte, ktorú schránku (blok Médium v okne) má slovo otvárať. Ak na stránke ešte žiadna nie je, vytvoríte ju rovno odtiaľ tlačidlom Vytvoriť novú schránku — nový blok sa vloží hneď za odsek, v ktorom stojíte.

Pri značke si ďalej nastavíte:

• Čo značka znamená — Ukážka — otvorí obrázok, Vysvetlenie — čo to slovo znamená, Upozornenie — na toto si daj pozor alebo Bez farby — len ikona, žiadny akcent. Každý význam má vlastnú ikonu, takže je čitateľný aj bez rozlišovania farieb.
• V texte ukázať len ikonu — v texte je vidieť iba ikona; označené slovo v obsahu zostáva a čítačka obrazovky ho prečíta.
• Upozorniť na značku — ikona trikrát jemne pulzne, keď k nej čitateľ doroluje, a potom stíchne. Kto má v systéme zapnuté obmedzenie pohybu, pulz neuvidí vôbec.

Čo z toho má čitateľ: kým neklikne, nič sa nesťahuje — fotka ani video ho nestoja nič. Po zatvorení sa kurzor klávesnice vráti na označené slovo, takže človek bez myši pokračuje tam, kde prestal. Kláves Esc okno zatvorí a video sa zastaví.

7. 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 (siete serverov, z ktorej weby bežne ťahajú súbory):

• 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. Obrysové ikony zostanú obrysové a farba z panela sa na ne naozaj prejaví.

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

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.
• Farby z palety — výber farby v blokoch má skupinu Téma s farbami vášho webu. Bloky si farby berú z palety v Branike téme aj v Blocksy. A keď v bloku vyberiete farbu, ktorá v palete je, blok si nezapamätá odtieň, ale odkaz na paletu — preto sa v tmavom režime a pri zmene farebnej variácie prefarbí spolu s webom. Svetlý text na tmavej sekcii je výnimka: ten zostane svetlý aj v noci, aby nestratil kontrast.
• Nápoveda pri nastaveniach — pri voľbách, kde nie je zrejmé, čo robia, je vysvetlenie priamo v paneli. Otáznik sa dá kliknúť, nielen naň ukázať myšou, takže funguje aj na tablete.
• Návod v administrácii — v menu Nastavenia má plugin vlastnú položku 📖 Blocks — Návod. Nájdete v nej prvé kroky, prehľad všetkých blokov s najčastejšou chybou pri každom, slovníček pojmov a riešenie problémov.

9. 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. Platí to aj pre mega panel: web bez neho nedostane ani bajt navyše.
• 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.

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

Prístupnosť nie je v tejto sade doplnok. Bloky používajú sémantické HTML — Akordeón 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 — týka sa to animácií pri objavení, pohybu pri scrollovaní, počítadiel, pulzujúcej značky aj automatického štartu videa.

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ť.

11. 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 obmedzenie prístupu, nie DRM. Bráni neoprávnenému prístupu, nie kopírovaniu tým, čo prístup majú. Pravidlo Členstvo / klub bez napojeného členského pluginu nepustí nikoho okrem administrátora.
• 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.
• Skrytie na mobile nie je zrýchlenie. Skrytý blok sa stiahne aj tak; ťažké sekcie radšej zjednodušte.
• Nevkladajte fotky so zapečeným textom. Čítačka ho neprečíta, preklad ho nezmení a na úzkom displeji ho výrez rozreže.
• 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č.

Súvisiace návody

• Branike Blocks — prehľad a možnosti
• Celá príručka Branike
• Obsahové bloky (alert, accordion, kroky…) — všetky bloky zoradené podľa účelu
• Menu a navigácia — mega panel krok za krokom
• Kompletný sprievodca: Branike HUB — odtiaľ sa plugin inštaluje a aktualizuje
• Kompletný sprievodca: Branike SEO — FAQ schéma z Akordeónu a nastavenia pre vyhľadávače
• Kompletný sprievodca: Branike LMS — chránený obsah v kurzoch
• Dizajn cez Blocksy a bloky
• Prečo obsah lepí na kraj — šírka obsahu v blokovej téme

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.