{"id":6040,"date":"2026-07-12T10:01:11","date_gmt":"2026-07-12T08:01:11","guid":{"rendered":"https:\/\/branike.com\/prirucka\/ako-upravit-vzhlad\/"},"modified":"2026-07-31T19:40:58","modified_gmt":"2026-07-31T17:40:58","slug":"ako-upravit-vzhlad","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/ako-upravit-vzhlad\/","title":{"rendered":"Ako upravi\u0165 vzh\u013ead webu"},"content":{"rendered":"\n<p class=\"wp-block-branike-text\">Tento \u010dl\u00e1nok je n\u00e1vod na to, kde sa \u010do men\u00ed. Je usporiadan\u00fd pod\u013ea toho, <strong>ako \u010faleko z\u00e1sah siaha<\/strong> \u2014 od zmien, ktor\u00e9 ovplyvnia cel\u00fd web, po zmeny jednej sekcie. Toto poradie je z\u00e1rove\u0148 poradie, v akom sa vzh\u013ead rozumne nastavuje.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">\u0160tyri \u00farovne, kde sa d\u00e1 zasiahnu\u0165<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Cel\u00fd web<\/strong> \u2014 paleta farieb, p\u00edsma, \u0161\u00edrka obsahu, hlavi\u010dka a p\u00e4ti\u010dka. Nastavuje sa v t\u00e9me.<\/li>\n\n\n<li><strong>Typ str\u00e1nky<\/strong> \u2014 ako vyzer\u00e1 v\u00fdpis \u010dl\u00e1nkov, karta produktu, jednotliv\u00fd \u010dl\u00e1nok.<\/li>\n\n\n<li><strong>Jedna str\u00e1nka<\/strong> \u2014 jej vlastn\u00e9 rozlo\u017eenie, \u010di m\u00e1 bo\u010dn\u00fd panel, \u010di sa zobrazuje tituln\u00e1 oblas\u0165.<\/li>\n\n\n<li><strong>Jeden blok<\/strong> \u2014 farba, odsadenie, zaoblenie, ve\u013ekos\u0165 pr\u00e1ve tejto sekcie.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Chyba, ktor\u00e1 stoj\u00ed najviac \u010dasu: rie\u0161i\u0165 na \u00farovni bloku nie\u010do, \u010do patr\u00ed na \u00farove\u0148 webu. Ak upravujete to ist\u00e9 v desiatej sekcii, ste na nespr\u00e1vnej \u00farovni.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Krok 1 \u2014 paleta farieb<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Paleta je zoznam farieb, z ktor\u00fdch web \u010derp\u00e1. Bloky si z nej ber\u00fa farby samy, tak\u017ee <strong>zmena palety prefarb\u00ed web naraz<\/strong> \u2014 vr\u00e1tane str\u00e1nok postaven\u00fdch d\u00e1vno.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Pri zostavovan\u00ed palety plat\u00ed nieko\u013eko vec\u00ed, ktor\u00e9 sa \u013eahko podcenia:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Hlavn\u00e1 farba nie je najkraj\u0161ia farba, ale najpou\u017eite\u013enej\u0161ia.<\/strong> Mus\u00ed unies\u0165 biely text na tla\u010didle.<\/li>\n\n\n<li><strong>Kontrast je podmienka, nie odpor\u00fa\u010danie.<\/strong> Svetlosiv\u00fd text na bielej vyzer\u00e1 na kvalitnom monitore elegantne a na notebooku v aute je ne\u010ditate\u013en\u00fd.<\/li>\n\n\n<li><strong>Farby textu a pozadia sa nastavuj\u00fa v p\u00e1roch.<\/strong> Zmeni\u0165 pozadie a zabudn\u00fa\u0165 na text je naj\u010dastej\u0161ia pr\u00ed\u010dina nevidite\u013en\u00e9ho nadpisu.<\/li>\n\n\n<li><strong>R\u00e1tajte s tmav\u00fdm re\u017eimom.<\/strong> Farba, ktor\u00e1 funguje na bielej, m\u00f4\u017ee na tmavom pozad\u00ed zanikn\u00fa\u0165.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Krok 2 \u2014 p\u00edsma<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Dve p\u00edsma sta\u010dia: jedno na nadpisy, jedno na text. Tri s\u00fa maximum a v\u00e4\u010d\u0161inou znak, \u017ee sa rozhodovanie odlo\u017eilo.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Pri p\u00edsmach sledujte aj r\u00fdchlos\u0165 \u2014 ka\u017ed\u00fd \u010fal\u0161\u00ed rez, ktor\u00fd sa na\u010d\u00edtava, stoj\u00ed \u010das. Be\u017ene sta\u010dia dva a\u017e tri rezy (be\u017en\u00fd, tu\u010dn\u00fd a pr\u00edpadne kurz\u00edva). P\u00edsma z extern\u00fdch slu\u017eieb sa navy\u0161e \u0165ahaj\u00fa z cudzieho servera; ak ich pou\u017e\u00edvate, nech ich je m\u00e1lo.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Krok 3 \u2014 hlavi\u010dka a p\u00e4ti\u010dka<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Toto s\u00fa prvky, ktor\u00e9 vid\u00ed n\u00e1v\u0161tevn\u00edk na ka\u017edej str\u00e1nke, a preto sa oplat\u00ed venova\u0165 im viac ne\u017e p\u00e4\u0165 min\u00fat:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>V hlavi\u010dke m\u00e1 by\u0165 to, \u010do \u013eudia h\u013eadaj\u00fa<\/strong> \u2014 nie v\u0161etko, \u010do m\u00e1te. Sedem polo\u017eiek menu je ve\u013ea.<\/li>\n\n\n<li><strong>Na mobile sa hlavi\u010dka spr\u00e1va inak.<\/strong> Skontrolujte, \u010di sa logo a menu zmestia a \u010di sa d\u00e1 menu otvori\u0165 palcom.<\/li>\n\n\n<li><strong>Kontaktn\u00e1 akcia patr\u00ed navrch.<\/strong> Telef\u00f3n, rezerv\u00e1cia alebo n\u00e1kupn\u00fd ko\u0161\u00edk pod\u013ea toho, \u010do rob\u00edte.<\/li>\n\n\n<li><strong>P\u00e4ti\u010dka je miesto pre povinn\u00e9 odkazy<\/strong> \u2014 obchodn\u00e9 podmienky, ochrana \u00fadajov, reklam\u00e1cie. Firemn\u00e9 \u00fadaje a otv\u00e1racie hodiny sa daj\u00fa do\u0165ahova\u0165 z jedn\u00e9ho miesta, tak\u017ee ich netreba prepisova\u0165 ru\u010dne.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Krok 4 \u2014 rozlo\u017eenie str\u00e1nky<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Pri ka\u017edej str\u00e1nke sa d\u00e1 ur\u010di\u0165, \u010di m\u00e1 bo\u010dn\u00fd panel, ak\u00fa m\u00e1 \u0161\u00edrku a \u010di sa nad obsahom zobrazuje tituln\u00e1 oblas\u0165. Pri predajn\u00fdch str\u00e1nkach b\u00fdva spr\u00e1vna odpove\u010f \u201ena cel\u00fa \u0161\u00edrku, bez bo\u010dn\u00e9ho panela a bez titulnej oblasti&#8220; \u2014 hero si urob\u00edte blokom a vyzer\u00e1 lep\u0161ie.<\/p>\n\n\n<p class=\"wp-block-branike-text\">\u0160\u00edrku obsahu nastavujte s oh\u013eadom na \u010ditate\u013enos\u0165. Riadok textu cez cel\u00fa \u0161\u00edrku ve\u013ek\u00e9ho monitora sa \u010d\u00edta zle; pre be\u017en\u00fd text je pr\u00edjemn\u00e9, ke\u010f m\u00e1 riadok zhruba osemdesiat znakov.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Krok 5 \u2014 jednotliv\u00e9 bloky<\/h2>\n\n\n<p class=\"wp-block-branike-text\">A\u017e teraz prich\u00e1dzaj\u00fa na rad sekcie. Ka\u017ed\u00fd blok m\u00e1 vlastn\u00e9 nastavenia \u2014 pozadie, odsadenie zhora a zdola, zaoblenie rohov, zarovnanie, spr\u00e1vanie na mobile. Dve veci, ktor\u00e9 tu urobia najv\u00e4\u010d\u0161\u00ed rozdiel:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Odsadenia dr\u017ete jednotn\u00e9.<\/strong> Ak maj\u00fa sekcie raz 40 a raz 96 pixelov, str\u00e1nka p\u00f4sob\u00ed rozh\u00e1dzane, aj ke\u010f ka\u017ed\u00e1 sekcia zvl\u00e1\u0161\u0165 vyzer\u00e1 dobre.<\/li>\n\n\n<li><strong>Rad kariet zarovnajte na rovnak\u00fa v\u00fd\u0161ku.<\/strong> Inak m\u00e1 ka\u017ed\u00e1 karta v\u00fd\u0161ku pod\u013ea d\u013a\u017eky textu a rad vyzer\u00e1 ako schodisko.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Ke\u010f v\u00e1m nastavenie bloku sed\u00ed, <strong>ulo\u017ete si ho ako predvo\u013ebu<\/strong>. Na \u010fal\u0161ej str\u00e1nke ho pou\u017eijete jedn\u00fdm kliknut\u00edm a nemus\u00edte si pam\u00e4ta\u0165, ak\u00e9 \u010d\u00edslo ste zadali minule.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">R\u00fdchla cesta: vzory namiesto stavania<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Ak staviate nov\u00fa str\u00e1nku, neza\u010d\u00ednajte pr\u00e1zdnym pl\u00e1tnom. 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, gal\u00e9ria, \u010dasov\u00e1 os, log\u00e1, v\u00fdpis \u010dl\u00e1nkov.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Vzor vlo\u017e\u00edte, prep\u00ed\u0161ete texty a vymen\u00edte obr\u00e1zky. Pr\u00eddu aj s fotkami, tak\u017ee str\u00e1nka vyzer\u00e1 hotovo od prvej chv\u00edle a nemus\u00edte sa d\u00edva\u0165 na siv\u00e9 obd\u013a\u017eniky.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Ikony<\/h2>\n\n\n<p class=\"wp-block-branike-text\">K dispoz\u00edcii je <strong>5 185 ikon<\/strong> a vyberaj\u00fa sa z preh\u013eadu s vyh\u013ead\u00e1van\u00edm. Pri ikon\u00e1ch plat\u00ed jedno: dr\u017ete jeden \u0161t\u00fdl. Mie\u0161anie obrysov\u00fdch a pln\u00fdch ikon na jednej str\u00e1nke je drobnos\u0165, ktor\u00fa si nikto nevie pomenova\u0165, ale ka\u017ed\u00fd ju vid\u00ed.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Ke\u010f treba vlastn\u00e9 CSS<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Vlastn\u00e9 \u0161t\u00fdly s\u00fa posledn\u00e1 mo\u017enos\u0165, nie prv\u00e1. Sk\u00f4r ne\u017e ich nap\u00ed\u0161ete, overte si, \u010di sa to ist\u00e9 ned\u00e1 nastavi\u0165 v bloku alebo v t\u00e9me \u2014 v deviatich pr\u00edpadoch z desiatich d\u00e1.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Ak u\u017e vlastn\u00e9 CSS p\u00ed\u0161ete, patr\u00ed do <strong>vlastn\u00e9ho priestoru na \u0161t\u00fdly<\/strong>, nie do s\u00faborov t\u00e9my. Z\u00e1sah priamo do t\u00e9my zmizne pri jej najbli\u017e\u0161ej aktualiz\u00e1cii.<\/p>\n\n\n<p class=\"wp-block-branike-text\">A e\u0161te jedno: ke\u010f pravidlo \u201enefunguje&#8220;, zvy\u010dajne existuje, len ho preb\u00edja in\u00e9, silnej\u0161ie. Nie je to d\u00f4vod prid\u00e1va\u0165 \u010fal\u0161ie v\u00fdnimky \u2014 je to d\u00f4vod pozrie\u0165 sa, \u010do ho preb\u00edja.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Ke\u010f zmenu nevidno<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Obnovte str\u00e1nku na\u010disto<\/strong> \u2014 prehliada\u010d si dr\u017e\u00ed star\u00fa verziu \u0161t\u00fdlov.<\/li>\n\n\n<li><strong>Skontrolujte, \u010di ste v spr\u00e1vnej t\u00e9me.<\/strong> Na webe m\u00f4\u017ee by\u0165 nain\u0161talovan\u00fdch viac t\u00e9m a upravova\u0165 sa d\u00e1 aj t\u00e1, ktor\u00e1 nie je zapnut\u00e1.<\/li>\n\n\n<li><strong>Pozrite sa na ulo\u017een\u00e9 glob\u00e1lne \u0161t\u00fdly.<\/strong> Nastavenia ulo\u017een\u00e9 v administr\u00e1cii prebij\u00fa to, \u010do je nap\u00edsan\u00e9 v t\u00e9me \u2014 a to potom vyzer\u00e1, akoby sa zmena \u201enechytila&#8220;.<\/li>\n\n\n<li><strong>Vyrovn\u00e1vacia pam\u00e4\u0165 na serveri.<\/strong> Ak sa zmena neprejav\u00ed ani po chv\u00edli, b\u00fdva to ona.<\/li>\n\n<\/ul>\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>Nastavujte zhora nadol.<\/strong> Paleta, p\u00edsma, hlavi\u010dka \u2014 a\u017e potom sekcie.<\/li>\n\n\n<li><strong>Neopravujte to ist\u00e9 na dvadsiatich miestach.<\/strong> Je to sign\u00e1l, \u017ee z\u00e1sah patr\u00ed o \u00farove\u0148 vy\u0161\u0161ie.<\/li>\n\n\n<li><strong>Kontrolujte pri \u0161\u00edrke mobilu.<\/strong> V\u00e4\u010d\u0161ina n\u00e1v\u0161tev prich\u00e1dza z telef\u00f3nu.<\/li>\n\n\n<li><strong>Ru\u010dne zadan\u00fa farbu pou\u017e\u00edvajte v\u00fdnimo\u010dne.<\/strong> Web s desiatkami natvrdo zadan\u00fdch odtie\u0148ov sa ned\u00e1 prefarbi\u0165.<\/li>\n\n\n<li><strong>Po v\u00e4\u010d\u0161ej zmene sa pozrite na r\u00fdchlos\u0165.<\/strong> Ve\u013ek\u00fd obr\u00e1zok v hlavi\u010dke dok\u00e1\u017ee pokazi\u0165 dojem viac ne\u017e menej pekn\u00e9 p\u00edsmo.<\/li>\n\n\n<li><strong>Z\u00e1lohu si spravte pred ve\u013ek\u00fdm z\u00e1sahom do vzh\u013eadu<\/strong>, nie po \u0148om.<\/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\/obsahove-bloky\/\">Obsahov\u00e9 bloky (alert, accordion, kroky\u2026)<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/sprievodca-blocks\/\">Kompletn\u00fd sprievodca: Branike Blocks<\/a><\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Farby, p\u00edsma, hlavi\u010dku a p\u00e4tu nastav\u00edte v Prisp\u00f4soben\u00ed Blocksy \u2014 bez k\u00f3du.<\/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":"Vzh\u013ead webu men\u00edte na\u017eivo v Prisp\u00f4soben\u00ed, kde hne\u010f vid\u00edte v\u00fdsledok. Postup Otvorte Vzh\u013ead \u2192 Prisp\u00f4sobi\u0165. V Farby \u2192 paleta nastavte prim\u00e1rnu a doplnkov\u00e9 farby zn","_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-6040","kb_article","type-kb_article","status-publish","hentry","kb_category-dizajn"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6040","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\/6040\/revisions"}],"predecessor-version":[{"id":6682,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6040\/revisions\/6682"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6040"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6040"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}