{"id":6041,"date":"2026-07-12T10:01:11","date_gmt":"2026-07-12T08:01:11","guid":{"rendered":"https:\/\/branike.com\/prirucka\/obsahove-bloky\/"},"modified":"2026-07-31T19:42:38","modified_gmt":"2026-07-31T17:42:38","slug":"obsahove-bloky","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/obsahove-bloky\/","title":{"rendered":"Obsahov\u00e9 bloky (alert, accordion, kroky\u2026)"},"content":{"rendered":"\n<p class=\"wp-block-branike-text\">Blokov je <strong>53<\/strong> a keby boli zoraden\u00e9 pod\u013ea abecedy, nikto by v nich ni\u010d nena\u0161iel. Preto s\u00fa tu usporiadan\u00e9 pod\u013ea toho, <strong>\u010do chcete dosiahnu\u0165<\/strong> \u2014 nie pod\u013ea toho, ako sa volaj\u00fa.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Ka\u017ed\u00fd blok m\u00e1 vlastn\u00e9 nastavenia pozadia, odsaden\u00ed, zaoblenia a spr\u00e1vania na mobile, a farby si berie z palety webu. Ni\u017e\u0161ie je pri ka\u017edom nap\u00edsan\u00e9, na \u010do je dobr\u00fd a kedy siahnu\u0165 po \u0148om a nie po susednom.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Z\u00e1klad, z ktor\u00e9ho sa sklad\u00e1 v\u0161etko<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Nadpis<\/strong> \u2014 s nastavite\u013enou \u00farov\u0148ou. \u00darove\u0148 nie je ve\u013ekos\u0165 p\u00edsma: je to poradie v \u0161trukt\u00fare, ktor\u00e9 \u010d\u00edtaj\u00fa vyh\u013ead\u00e1va\u010de aj \u010d\u00edta\u010dky pre nevidiacich.<\/li>\n\n\n<li><strong>Text<\/strong> \u2014 odsek s plnou kontrolou nad \u0161\u00edrkou a odsaden\u00edm.<\/li>\n\n\n<li><strong>Tla\u010didlo<\/strong> a <strong>rad tla\u010didiel<\/strong> \u2014 pln\u00e9 aj obrysov\u00e9 prevedenie.<\/li>\n\n\n<li><strong>Obr\u00e1zok<\/strong> \u2014 s popisom, zaoblen\u00edm a rozmermi, tak\u017ee obsah pod n\u00edm pri na\u010d\u00edtan\u00ed nepodsko\u010d\u00ed.<\/li>\n\n\n<li><strong>Ikona<\/strong> \u2014 jedna zo sady 5 185 ikon.<\/li>\n\n\n<li><strong>Odde\u013eova\u010d<\/strong> \u2014 na oddelenie sekci\u00ed bez toho, aby ste vkladali pr\u00e1zdne odseky.<\/li>\n\n\n<li><strong>St\u013apce<\/strong> a <strong>st\u013apec<\/strong> \u2014 z\u00e1klad ka\u017ed\u00e9ho rozlo\u017eenia. Nastavuje sa po\u010det, pomer \u0161\u00edrok, medzera, pozadie a zvisl\u00e9 zarovnanie.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">\ud83d\udd34 Pri rade kariet nastavte zvisl\u00e9 zarovnanie na rovnak\u00fa v\u00fd\u0161ku. Inak m\u00e1 ka\u017ed\u00e1 karta v\u00fd\u0161ku pod\u013ea d\u013a\u017eky svojho textu a rad vyzer\u00e1 rozh\u00e1dzane.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Za\u010diatok str\u00e1nky<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Hero<\/strong> \u2014 \u00favodn\u00e1 sekcia s nadpisom, textom, tla\u010didlami a pozad\u00edm. Prv\u00e1 vec, ktor\u00fa n\u00e1v\u0161tevn\u00edk uvid\u00ed.<\/li>\n\n\n<li><strong>V\u00fdzva na akciu<\/strong> \u2014 sekcia, ktor\u00e1 p\u00fdta jeden konkr\u00e9tny krok. Patr\u00ed na koniec str\u00e1nky a pokojne aj do jej stredu.<\/li>\n\n\n<li><strong>Ukazovate\u013e pre\u010d\u00edtan\u00e9ho<\/strong> \u2014 tenk\u00fd pr\u00fa\u017eok postupu pri dlhom \u010dl\u00e1nku. Drobnos\u0165, ktor\u00e1 zvy\u0161uje do\u010d\u00edtanos\u0165.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Vysvetli\u0165, \u010do pon\u00fakate<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>V\u00fdhody<\/strong> (a jednotliv\u00e1 v\u00fdhoda) \u2014 mrie\u017eka bodov, ktor\u00e9 pred\u00e1vaj\u00fa. Typicky tri alebo \u0161es\u0165.<\/li>\n\n\n<li><strong>Ikonov\u00fd box<\/strong> \u2014 ikona, nadpis a text. Najpou\u017e\u00edvanej\u0161ia stavebn\u00e1 jednotka cel\u00e9ho webu.<\/li>\n\n\n<li><strong>\u010c\u00edseln\u00fd box<\/strong> \u2014 ve\u013ek\u00e9 \u010d\u00edslo s popisom. \u201e12 rokov na trhu&#8220;, \u201e400 spokojn\u00fdch klientov&#8220;.<\/li>\n\n\n<li><strong>Karta<\/strong> \u2014 univerz\u00e1lny obd\u013a\u017enik s obr\u00e1zkom, textom a odkazom.<\/li>\n\n\n<li><strong>Ikonov\u00fd zoznam<\/strong> (a jeho polo\u017eka) \u2014 od\u0161krtnut\u00e9 body. \u010c\u00edta sa lep\u0161ie ne\u017e odsek a p\u00f4sob\u00ed konkr\u00e9tnej\u0161ie.<\/li>\n\n\n<li><strong>Kroky<\/strong> (a jednotliv\u00fd krok) \u2014 o\u010d\u00edslovan\u00fd postup \u201eako to prebieha&#8220;. Na str\u00e1nke slu\u017eby patr\u00ed takmer v\u017edy.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Z\u00edska\u0165 d\u00f4veru<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Referencia<\/strong> \u2014 hodnotenie s menom, fotkou a funkciou. Bez mena to nefunguje.<\/li>\n\n\n<li><strong>Cit\u00e1t<\/strong> \u2014 zv\u00fdraznen\u00e1 my\u0161lienka v texte.<\/li>\n\n\n<li><strong>T\u00edm<\/strong> \u2014 \u013eudia za firmou. Na weboch slu\u017eieb m\u00e1 nadpriemern\u00fd \u00fa\u010dinok.<\/li>\n\n\n<li><strong>Prehliadka log<\/strong> (a jednotliv\u00e9 logo) \u2014 zna\u010dky, s ktor\u00fdmi pracujete. D\u00e1 sa nastavi\u0165 ako pomal\u00fd posun.<\/li>\n\n\n<li><strong>\u010casov\u00e1 os<\/strong> (a jej bod) \u2014 hist\u00f3ria firmy alebo priebeh projektu.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Preda\u0165<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Cenn\u00edk<\/strong> a <strong>cenov\u00e1 karta<\/strong> \u2014 bal\u00edky ved\u013ea seba, s mo\u017enos\u0165ou ozna\u010di\u0165 jeden ako odpor\u00fa\u010dan\u00fd. Presne to je naj\u00fa\u010dinnej\u0161ia \u010das\u0165 cel\u00e9ho cenn\u00edka.<\/li>\n\n\n<li><strong>Odpo\u010det<\/strong> \u2014 \u010das do konca akcie alebo do za\u010diatku podujatia.<\/li>\n\n\n<li><strong>Postup<\/strong> a <strong>kruhov\u00fd postup<\/strong> \u2014 vyjadrenie miery: naplnenos\u0165 kurzu, priebeh zbierky, \u00farove\u0148 zru\u010dnosti.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Zmesti\u0165 ve\u013ea obsahu do mal\u00e9ho miesta<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Rozba\u013eovac\u00ed zoznam<\/strong> (a jeho polo\u017eka) \u2014 ot\u00e1zky a odpovede. Najlep\u0161\u00ed sp\u00f4sob, ako pred\u00eds\u0165 polovici e-mailov, ktor\u00e9 dost\u00e1vate.<\/li>\n\n\n<li><strong>Z\u00e1lo\u017eky<\/strong> (a jedna z\u00e1lo\u017eka) \u2014 obsah rozdelen\u00fd do kariet ved\u013ea seba.<\/li>\n\n\n<li><strong>Rozbalenie textu<\/strong> \u2014 dlh\u00fd text skr\u00e1ten\u00fd s mo\u017enos\u0165ou \u201e\u010d\u00edta\u0165 viac&#8220;.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Obr\u00e1zky a gal\u00e9ria<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Koloto\u010d<\/strong> (a jeho sn\u00edmka) \u2014 posuvn\u00e1 gal\u00e9ria alebo posuvn\u00e9 referencie.<\/li>\n\n\n<li><strong>Vrstven\u00e9 obr\u00e1zky<\/strong> \u2014 fotky poskladan\u00e9 na seba, ke\u010f m\u00e1 sekcia vyzera\u0165 \u017eiv\u0161ie ne\u017e mrie\u017eka.<\/li>\n\n\n<li><strong>Pred a po<\/strong> \u2014 dve fotky s posuvn\u00edkom. Pre remesl\u00e1, kozmetiku, rekon\u0161trukcie a v\u0161ade, kde je zmena hlavn\u00fdm argumentom.<\/li>\n\n\n<li><strong>Prekl\u00e1pacia karta<\/strong> \u2014 oto\u010d\u00ed sa a uk\u00e1\u017ee rub. Dobr\u00e9 na ot\u00e1zky, ceny alebo skryt\u00fd detail.<\/li>\n\n\n<li><strong>Vodorovn\u00fd posun<\/strong> (a jeho sn\u00edmka) \u2014 obsah, ktor\u00fd sa pos\u00fava do strany pri scrollovan\u00ed.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Obr\u00e1zky v t\u00fdchto blokoch zdie\u013eaj\u00fa spolo\u010dn\u00e9 zv\u00e4\u010d\u0161ovanie po kliknut\u00ed, tak\u017ee sa gal\u00e9ria nespr\u00e1v\u00e1 na ka\u017edej str\u00e1nke inak.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Vyp\u00edsa\u0165 obsah, ktor\u00fd spravuj\u00fa in\u00e9 \u010dasti webu<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>V\u00fdpis pr\u00edspevkov<\/strong> \u2014 \u010dl\u00e1nky, pr\u00edpadov\u00e9 \u0161t\u00fadie alebo vlastn\u00fd typ obsahu ako mrie\u017eka kariet. Nemus\u00edte ho udr\u017eiava\u0165, dop\u013a\u0148a sa s\u00e1m.<\/li>\n\n\n<li><strong>Video<\/strong> \u2014 prehr\u00e1va\u010d, ktor\u00fd sa vie spusti\u0165 a\u017e vtedy, ke\u010f je na obrazovke, a neza\u0165a\u017euje na\u010d\u00edtanie str\u00e1nky.<\/li>\n\n\n<li><strong>Chr\u00e1nen\u00fd obsah<\/strong> \u2014 \u010das\u0165 str\u00e1nky vidite\u013en\u00e1 len prihl\u00e1sen\u00e9mu, len \u010dlenovi alebo len dr\u017eite\u013eovi konkr\u00e9tneho bal\u00edka. V\u010faka nemu sa \u010dlensk\u00e1 z\u00f3na d\u00e1 postavi\u0165 priamo v str\u00e1nke, nie ako samostatn\u00fd svet.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Upozorni\u0165<\/h2>\n\n\n<p class=\"wp-block-branike-text\"><strong>Upozornenie<\/strong> je farebn\u00fd r\u00e1mik s ikonou pre inform\u00e1ciu, tip, varovanie alebo chybu. Pou\u017e\u00edva sa na to, \u010do si mus\u00ed \u010ditate\u013e v\u0161imn\u00fa\u0165, aj ke\u010f str\u00e1nku len prebehne o\u010dami. V n\u00e1vodoch je to naju\u017eito\u010dnej\u0161\u00ed blok v\u00f4bec \u2014 a z\u00e1rove\u0148 ten, ktor\u00fd sa naj\u013eah\u0161ie pre\u017eene. Tri upozornenia na obrazovke znamenaj\u00fa, \u017ee nie je d\u00f4le\u017eit\u00e9 ni\u010d.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Pohyb pri scrollovan\u00ed<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Pripnut\u00fd scroll<\/strong>, <strong>pripnut\u00e1 polo\u017eka<\/strong>, <strong>r\u00e1m<\/strong> a <strong>sc\u00e9na<\/strong> \u2014 sekcia ostane st\u00e1\u0165 a jej obsah sa men\u00ed, k\u00fdm sa okolo nej scrolluje. Pou\u017e\u00edva sa na rozpr\u00e1vanie pr\u00edbehu: postup, porovnanie, v\u00fdvoj v \u010dase.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Pohyb je koreninou, nie hlavn\u00fdm jedlom. Jedna tak\u00e1to sekcia na str\u00e1nke zap\u00f4sob\u00ed, tri z nej urobia p\u00fa\u0165. A plat\u00ed, \u017ee pohyb sa nesmie dia\u0165 na \u00fakor r\u00fdchlosti \u2014 preto sa sp\u00fa\u0161\u0165a a\u017e vtedy, ke\u010f je prvok na obrazovke.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Vzory: nemus\u00edte to sklada\u0165 sami<\/h2>\n\n\n<p class=\"wp-block-branike-text\">V\u00e4\u010d\u0161inu z t\u00fdchto blokov nikdy nebudete vklada\u0165 po jednom. V editore je kni\u017enica <strong>87 hotov\u00fdch sekci\u00ed v 21 kateg\u00f3ri\u00e1ch<\/strong> s n\u00e1h\u013eadom \u2014 hero, v\u00fdhody, cenn\u00edk, ot\u00e1zky a odpovede, referencie, \u0161tatistiky, t\u00edm, kontakt, p\u00e4ti\u010dka, log\u00e1, gal\u00e9ria, \u010dasov\u00e1 os, video, v\u00fdpis \u010dl\u00e1nkov, slu\u017eby a z\u00e1hlavie.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Vzor je poskladan\u00fd presne z t\u00fdchto blokov, tak\u017ee po vlo\u017een\u00ed viete ktor\u00fako\u013evek jeho \u010das\u0165 upravi\u0165. Pr\u00eddu aj s fotkami. A ke\u010f si nastav\u00edte blok tak, ako ho chcete ma\u0165, <strong>ulo\u017e\u00edte si predvo\u013ebu<\/strong> a pou\u017eijete ju inde jedn\u00fdm kliknut\u00edm.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Na \u010do si da\u0165 pozor<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Nadpisy nepou\u017e\u00edvajte na ve\u013ekos\u0165 p\u00edsma.<\/strong> \u00darove\u0148 nadpisu je \u0161trukt\u00fara, nie vzh\u013ead \u2014 a \u010d\u00edtaj\u00fa ju vyh\u013ead\u00e1va\u010de aj asisten\u010dn\u00e9 technol\u00f3gie.<\/li>\n\n\n<li><strong>Rad kariet zarovnajte na rovnak\u00fa v\u00fd\u0161ku.<\/strong> Bez toho vyzer\u00e1 rozh\u00e1dzane.<\/li>\n\n\n<li><strong>Dlh\u00fd text na tla\u010didle skontrolujte na mobile.<\/strong> Je to naj\u010dastej\u0161ie miesto, kde sa nie\u010do nezmest\u00ed.<\/li>\n\n\n<li><strong>Nemie\u0161ajte \u0161t\u00fdly ikon.<\/strong> Obrysov\u00e9 a pln\u00e9 ikony ved\u013ea seba vyzeraj\u00fa nedbalo.<\/li>\n\n\n<li><strong>Upozornenia pou\u017e\u00edvajte striedmo.<\/strong> Ke\u010f je zv\u00fdraznen\u00e9 v\u0161etko, nie je zv\u00fdraznen\u00e9 ni\u010d.<\/li>\n\n\n<li><strong>Farby berte z palety.<\/strong> Ru\u010dne zadan\u00fd odtie\u0148 sa pri zmene zna\u010dky nezmen\u00ed s\u00e1m.<\/li>\n\n\n<li><strong>Odsadenia sekci\u00ed dr\u017ete jednotn\u00e9.<\/strong> Je to najlacnej\u0161\u00ed sp\u00f4sob, ako str\u00e1nka p\u00f4sob\u00ed profesion\u00e1lne.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">\u010ealej<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/dizajn-prehlad\/\">Dizajn cez Blocksy a bloky<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/ako-upravit-vzhlad\/\">Ako upravi\u0165 vzh\u013ead webu<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/sprievodca-blocks\/\">Kompletn\u00fd sprievodca: Branike Blocks<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/branike-blocks-prepracovane-bloky-pre-gutemberg\/\">Branike Blocks \u2014 predajn\u00e1 str\u00e1nka<\/a><\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hotov\u00e9 bloky na zv\u00fdraznenie inform\u00e1ci\u00ed, \u010dast\u00e9 ot\u00e1zky, postupy a \u010fal\u0161ie \u2014 vlo\u017e\u00edte v editore.<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"_bkb_access":"public","_bkb_min_tier":"basic","_bkb_teaser":"","_bkb_featured":false,"_bt_container":"","_bt_sidebar":"","_bt_show_title":"","footnotes":"","_bseo_title":"","_bseo_description":"Branike bloky s\u00fa stavebn\u00e9 prvky, ktor\u00e9 vlo\u017e\u00edte do ktorejko\u013evek str\u00e1nky \u010di \u010dl\u00e1nku. S\u00fa optimalizovan\u00e9 na v\u00fdkon a pr\u00edstupnos\u0165. U\u017eito\u010dn\u00e9 bloky pre dokument\u00e1ciu Aler","_bseo_noindex":"","_bseo_nofollow":"","_bseo_canonical":"","_bseo_og_title":"","_bseo_og_description":"","_bseo_og_image_id":0,"_bseo_og_image_url":"","_bseo_focus_keyword":""},"kb_category":[36],"kb_tag":[],"class_list":["post-6041","kb_article","type-kb_article","status-publish","hentry","kb_category-dizajn"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article"}],"about":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/types\/kb_article"}],"author":[{"embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6041\/revisions"}],"predecessor-version":[{"id":6683,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6041\/revisions\/6683"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6041"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6041"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}