{"id":6039,"date":"2026-07-12T10:01:11","date_gmt":"2026-07-12T08:01:11","guid":{"rendered":"https:\/\/branike.com\/prirucka\/dizajn-prehlad\/"},"modified":"2026-07-31T22:07:28","modified_gmt":"2026-07-31T20:07:28","slug":"dizajn-prehlad","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/dizajn-prehlad\/","title":{"rendered":"Dizajn cez Blocksy a bloky"},"content":{"rendered":"\n<p class=\"wp-block-branike-text\">Vzh\u013ead webu vznik\u00e1 na dvoch miestach a najviac \u010dasu sa str\u00e1ca t\u00fdm, \u017ee \u010dlovek h\u013ead\u00e1 nastavenie tam, kde nie je. Preto za\u010dnime deliacou \u010diarou: <strong>t\u00e9ma rob\u00ed r\u00e1m, bloky robia obsah<\/strong>.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>T\u00e9ma<\/strong> je v\u0161etko, \u010do je na ka\u017edej str\u00e1nke rovnak\u00e9 \u2014 hlavi\u010dka, menu, p\u00e4ti\u010dka, z\u00e1kladn\u00e1 paleta farieb, p\u00edsma, \u0161\u00edrka obsahu, vzh\u013ead v\u00fdpisu \u010dl\u00e1nkov a kariet produktov.<\/li>\n\n\n<li><strong>Bloky<\/strong> s\u00fa to, \u010do sklad\u00e1te vn\u00fatri str\u00e1nky \u2014 hero, sekcie s v\u00fdhodami, cenn\u00edk, referencie, ot\u00e1zky a odpovede, gal\u00e9ria, \u010dasov\u00e1 os.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Ke\u010f h\u013ead\u00e1te, ako zmeni\u0165 farbu tla\u010didla v jednej sekcii, je to blok. Ke\u010f h\u013ead\u00e1te, ako zmeni\u0165 farbu tla\u010didiel na celom webe, je to t\u00e9ma. Toto jedin\u00e9 pravidlo u\u0161etr\u00ed v\u00e4\u010d\u0161inu h\u013eadania.<\/p>\n\n\n<div class=\"bkv-orbit\">\n<style>\n\n.bkv-orbit *,.bkv-orbit *::before,.bkv-orbit *::after{box-sizing:border-box;margin:0;padding:0;}\n.bkv-orbit{--bkv-bg:#14122A;--bkv-500:#7C3AED;--bkv-400:#8B5CF6;--bkv-300:#A78BFA;--bkv-200:#C4B5FD;--bkv-100:#DDD6FE;--bkv-deep:#2D1B69;--bkv-cap:#A5B4FC;width:100%;max-width:100%;background:var(--bkv-bg);border-radius:20px;padding:44px 24px;position:relative;overflow:hidden;isolation:isolate;contain:paint;box-shadow:0 24px 70px rgba(0,0,0,.25);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}\n@property --bkvang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\n.bkv-orbit::before{content:\"\";position:absolute;inset:0;border-radius:20px;padding:2px;z-index:6;pointer-events:none;background:conic-gradient(from var(--bkvang),transparent 0 62%,#C4B5FD 78%,#A78BFA 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}\n.bkv-orbit .neb{position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(42% 42% at 72% 22%,rgba(124,58,237,.42),rgba(124,58,237,0) 68%),radial-gradient(38% 38% at 18% 78%,rgba(91,33,182,.40),rgba(91,33,182,0) 70%),radial-gradient(28% 28% at 88% 82%,rgba(167,139,250,.18),rgba(167,139,250,0) 72%);}\n.bkv-orbit .stage{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;}\n.bkv-orbit .rings{position:absolute;inset:0;width:100%;height:100%;}\n.bkv-orbit .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:142px;height:142px;border-radius:50%;background:radial-gradient(circle at 35% 28%,var(--bkv-300),var(--bkv-500) 55%,#5B21B6);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 10px rgba(124,58,237,.12),0 0 60px rgba(124,58,237,.6),inset 0 2px 10px rgba(255,255,255,.35);}\n.bkv-orbit .core svg{display:block;} .bkv-orbit .core b{color:#fff;font-size:11px;font-weight:800;letter-spacing:2.4px;margin-top:8px;}\n\n\n.bkv-orbit .chip{position:absolute;transform:translate(-50%,-50%);z-index:4;}\n.bkv-orbit .chip i{display:inline-flex;align-items:center;gap:9px;font-style:normal;background:rgba(45,27,105,.66);border:1px solid rgba(196,181,253,.4);border-radius:100px;padding:6px 15px 6px 6px;box-shadow:0 10px 30px rgba(0,0,0,.35);white-space:nowrap;backdrop-filter:blur(2px);}\n.bkv-orbit .chip .ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,var(--bkv-300),var(--bkv-500) 72%);box-shadow:0 2px 8px rgba(124,58,237,.45);}\n.bkv-orbit .chip .ic svg{width:14px;height:14px;display:block;} .bkv-orbit .chip b{color:#fff;font-size:13px;font-weight:700;letter-spacing:.2px;}\n.bkv-orbit .c1{left:50%;top:1%;} .bkv-orbit .c2{left:85%;top:16%;} .bkv-orbit .c3{left:95%;top:50%;} .bkv-orbit .c4{left:85%;top:84%;}\n.bkv-orbit .c5{left:50%;top:99%;} .bkv-orbit .c6{left:15%;top:84%;} .bkv-orbit .c7{left:5%;top:50%;} .bkv-orbit .c8{left:15%;top:16%;}\n.bkv-orbit .cap{text-align:center;margin-top:52px;} .bkv-orbit .cap p{color:var(--bkv-cap);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}\n@media (prefers-reduced-motion: no-preference){\n.bkv-orbit .neb,.bkv-orbit .r-spin,.bkv-orbit .r-rev,.bkv-orbit .p1,.bkv-orbit .p2,.bkv-orbit .p3{will-change:transform;}\n.bkv-orbit::before{animation:bkv-orbit-border 5s linear infinite;}\n.bkv-orbit .neb{animation:bkv-orbit-drift 28s ease-in-out infinite alternate;}\n.bkv-orbit .r-spin{transform-origin:260px 260px;animation:bkv-orbit-spin 64s linear infinite;}\n.bkv-orbit .r-rev{transform-origin:260px 260px;animation:bkv-orbit-spin 90s linear infinite reverse;}\n.bkv-orbit .p1{transform-origin:260px 260px;animation:bkv-orbit-spin 38s linear infinite;}\n.bkv-orbit .p2{transform-origin:260px 260px;animation:bkv-orbit-spin 30s linear infinite reverse;}\n.bkv-orbit .p3{transform-origin:260px 260px;animation:bkv-orbit-spin 52s linear infinite;}\n.bkv-orbit .star{animation:bkv-orbit-twinkle 4s ease-in-out infinite;}\n.bkv-orbit .s2{animation-delay:.7s}.bkv-orbit .s3{animation-delay:1.4s}.bkv-orbit .s4{animation-delay:2.1s}.bkv-orbit .s5{animation-delay:2.8s}.bkv-orbit .s6{animation-delay:3.5s}.bkv-orbit .s7{animation-delay:1.1s}.bkv-orbit .s8{animation-delay:2.4s}\n\n.bkv-orbit .core{animation:bkv-orbit-breathe 5s ease-in-out infinite;}\n.bkv-orbit .chip i{animation:bkv-orbit-float 7s ease-in-out infinite;will-change:transform;}\n.bkv-orbit .c2 i{animation-delay:.3s}.bkv-orbit .c3 i{animation-delay:.6s}.bkv-orbit .c4 i{animation-delay:.9s}.bkv-orbit .c5 i{animation-delay:1.2s}.bkv-orbit .c6 i{animation-delay:1.5s}.bkv-orbit .c7 i{animation-delay:1.8s}.bkv-orbit .c8 i{animation-delay:2.1s}\n.bkv-orbit:hover .core{transform:translate(-50%,-50%) scale(1.08);}\n .bkv-orbit:hover::before{animation-duration:2.5s;}\n.bkv-orbit:hover .r-spin{animation-duration:22s;} .bkv-orbit:hover .r-rev{animation-duration:32s;}\n.bkv-orbit:hover .p1{animation-duration:13s;} .bkv-orbit:hover .p2{animation-duration:10s;} .bkv-orbit:hover .p3{animation-duration:18s;}}\n@keyframes bkv-orbit-border{to{--bkvang:360deg;}}\n@keyframes bkv-orbit-drift{to{transform:translate3d(-4%,4%,0) scale(1.08);}}\n@keyframes bkv-orbit-spin{to{transform:rotate(360deg);}}\n@keyframes bkv-orbit-twinkle{0%,100%{opacity:.2}50%{opacity:.95}}\n@keyframes bkv-orbit-float{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-12px,0);}}\n@keyframes bkv-orbit-breathe{0%,100%{box-shadow:0 0 0 10px rgba(124,58,237,.12),0 0 55px rgba(124,58,237,.5),inset 0 2px 10px rgba(255,255,255,.35);}50%{box-shadow:0 0 0 16px rgba(124,58,237,.16),0 0 85px rgba(124,58,237,.75),inset 0 2px 10px rgba(255,255,255,.4);}}\n@media (max-width:600px){.bkv-orbit{padding:52px 14px;}.bkv-orbit .core{width:118px;height:118px;}.bkv-orbit .core svg{width:38px;height:38px;}.bkv-orbit .chip i{padding:5px 12px 5px 5px;gap:7px;}.bkv-orbit .chip .ic{width:23px;height:23px;}.bkv-orbit .chip b{font-size:11.5px;}.bkv-orbit .c2,.bkv-orbit .c4{left:82%;}.bkv-orbit .c6,.bkv-orbit .c8{left:18%;}.bkv-orbit .c3{left:90%;}.bkv-orbit .c7{left:10%;}.bkv-orbit .cap{margin-top:44px;}}\n@media (max-width:600px){.bkv-orbit .c3{left:86%;}.bkv-orbit .c7{left:14%;}.bkv-orbit .c2,.bkv-orbit .c4{left:79%;}.bkv-orbit .c6,.bkv-orbit .c8{left:21%;}}\n\n\/* v2 \u2014 bez rakety: prebleskuj\u00faci obl\u00fak po dr\u00e1he + impulzy po l\u00fa\u010doch do jadra *\/\n.bkv-orbit .flow{opacity:0;}\n.bkv-orbit .sweep,.bkv-orbit .sweep2{transform-origin:260px 260px;}\n@media (prefers-reduced-motion: no-preference){\n.bkv-orbit .f1{animation:bkv-flow-1 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:0.00s;will-change:transform,opacity;}\n.bkv-orbit .f2{animation:bkv-flow-2 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:0.42s;will-change:transform,opacity;}\n.bkv-orbit .f3{animation:bkv-flow-3 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:0.84s;will-change:transform,opacity;}\n.bkv-orbit .f4{animation:bkv-flow-4 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:1.26s;will-change:transform,opacity;}\n.bkv-orbit .f5{animation:bkv-flow-5 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:1.68s;will-change:transform,opacity;}\n.bkv-orbit .f6{animation:bkv-flow-6 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:2.10s;will-change:transform,opacity;}\n.bkv-orbit .f7{animation:bkv-flow-7 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:2.52s;will-change:transform,opacity;}\n.bkv-orbit .f8{animation:bkv-flow-8 3.4s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:2.94s;will-change:transform,opacity;}\n.bkv-orbit .sweep{animation:bkv-orbit-spin 9s linear infinite;will-change:transform;}\n.bkv-orbit .sweep2{animation:bkv-orbit-spin 14s linear infinite reverse;will-change:transform;}\n.bkv-orbit:hover .flow{animation-duration:1.6s;}\n.bkv-orbit:hover .sweep{animation-duration:4s;}\n.bkv-orbit:hover .sweep2{animation-duration:6s;}\n}\n@keyframes bkv-flow-1{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(0.0px,129.8px);opacity:0}}\n@keyframes bkv-flow-2{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(-91.4px,91.4px);opacity:0}}\n@keyframes bkv-flow-3{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(-129.8px,0.0px);opacity:0}}\n@keyframes bkv-flow-4{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(-91.4px,-91.4px);opacity:0}}\n@keyframes bkv-flow-5{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(0.0px,-129.8px);opacity:0}}\n@keyframes bkv-flow-6{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(91.4px,-91.4px);opacity:0}}\n@keyframes bkv-flow-7{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(129.8px,0.0px);opacity:0}}\n@keyframes bkv-flow-8{0%{transform:translate(0,0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translate(91.4px,91.4px);opacity:0}}\n\n<\/style>\n<div class=\"neb\" aria-hidden=\"true\"><\/div>\n<div class=\"stage\" role=\"img\" aria-label=\"Kni\u017enica blokov ako jadro obsahu, okolo nej typy sekci\u00ed: hero, v\u00fdhody, cenn\u00edk, ot\u00e1zky a odpovede, referencie, gal\u00e9ria, \u010dasov\u00e1 os a v\u00fdpis \u010dl\u00e1nkov.\">\n<svg class=\"rings\" viewBox=\"0 0 520 520\" width=\"520\" height=\"520\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"bkvOrbitGlow-dizajn\" cx=\"50%\" cy=\"50%\" r=\"50%\"><stop offset=\"0%\" stop-color=\"#7C3AED\" stop-opacity=\"0.45\"\/><stop offset=\"100%\" stop-color=\"#7C3AED\" stop-opacity=\"0\"\/><\/radialGradient><\/defs><circle cx=\"260\" cy=\"260\" r=\"250\" fill=\"url(#bkvOrbitGlow-dizajn)\"\/><g fill=\"#DDD6FE\"><circle class=\"star s1\" cx=\"96\" cy=\"88\" r=\"1.8\"\/><circle class=\"star s2\" cx=\"430\" cy=\"112\" r=\"2.2\"\/><circle class=\"star s3\" cx=\"472\" cy=\"322\" r=\"1.6\"\/><circle class=\"star s4\" cx=\"352\" cy=\"470\" r=\"2\"\/><circle class=\"star s5\" cx=\"128\" cy=\"424\" r=\"1.7\"\/><circle class=\"star s6\" cx=\"44\" cy=\"252\" r=\"2.1\"\/><circle class=\"star s7\" cx=\"300\" cy=\"36\" r=\"1.5\"\/><circle class=\"star s8\" cx=\"200\" cy=\"498\" r=\"1.9\"\/><\/g><g fill=\"none\" stroke=\"#A78BFA\" stroke-opacity=\"0.28\"><circle class=\"r-spin\" cx=\"260\" cy=\"260\" r=\"228\" stroke-dasharray=\"2 10\"\/><circle cx=\"260\" cy=\"260\" r=\"185\"\/><circle class=\"r-rev\" cx=\"260\" cy=\"260\" r=\"130\" stroke-dasharray=\"2 8\"\/><\/g><g stroke=\"#A78BFA\" stroke-opacity=\"0.3\" stroke-width=\"1.5\" stroke-dasharray=\"3 6\"><line x1=\"260\" y1=\"260\" x2=\"260\" y2=\"40\"\/><line x1=\"260\" y1=\"260\" x2=\"415\" y2=\"105\"\/><line x1=\"260\" y1=\"260\" x2=\"480\" y2=\"260\"\/><line x1=\"260\" y1=\"260\" x2=\"415\" y2=\"415\"\/><line x1=\"260\" y1=\"260\" x2=\"260\" y2=\"480\"\/><line x1=\"260\" y1=\"260\" x2=\"105\" y2=\"415\"\/><line x1=\"260\" y1=\"260\" x2=\"40\" y2=\"260\"\/><line x1=\"260\" y1=\"260\" x2=\"105\" y2=\"105\"\/><\/g><g fill=\"none\" stroke-linecap=\"round\"><circle class=\"sweep\" cx=\"260\" cy=\"260\" r=\"185\" stroke=\"#DDD6FE\" stroke-width=\"2.4\" stroke-opacity=\"0.9\" stroke-dasharray=\"70 1093\"\/><circle class=\"sweep2\" cx=\"260\" cy=\"260\" r=\"228\" stroke=\"#C4B5FD\" stroke-width=\"1.8\" stroke-opacity=\"0.55\" stroke-dasharray=\"40 1393\"\/><\/g><g class=\"flows\"><g class=\"flow f1\"><circle cx=\"260\" cy=\"40\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"260\" cy=\"40\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f2\"><circle cx=\"415\" cy=\"105\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"415\" cy=\"105\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f3\"><circle cx=\"480\" cy=\"260\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"480\" cy=\"260\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f4\"><circle cx=\"415\" cy=\"415\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"415\" cy=\"415\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f5\"><circle cx=\"260\" cy=\"480\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"260\" cy=\"480\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f6\"><circle cx=\"105\" cy=\"415\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"105\" cy=\"415\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f7\"><circle cx=\"40\" cy=\"260\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"40\" cy=\"260\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><g class=\"flow f8\"><circle cx=\"105\" cy=\"105\" r=\"7\" fill=\"#C4B5FD\" opacity=\"0.28\"\/><circle cx=\"105\" cy=\"105\" r=\"3.4\" fill=\"#EDE9FE\"\/><\/g><\/g><g class=\"p1\"><circle cx=\"260\" cy=\"75\" r=\"9\" fill=\"#A78BFA\" opacity=\"0.25\"\/><circle cx=\"260\" cy=\"75\" r=\"5\" fill=\"#DDD6FE\"\/><\/g><g class=\"p2\"><circle cx=\"260\" cy=\"130\" r=\"7\" fill=\"#7C3AED\" opacity=\"0.3\"\/><circle cx=\"260\" cy=\"130\" r=\"4\" fill=\"#A78BFA\"\/><\/g><g class=\"p3\"><circle cx=\"488\" cy=\"260\" r=\"7\" fill=\"#7C3AED\" opacity=\"0.3\"\/><circle cx=\"488\" cy=\"260\" r=\"4\" fill=\"#C4B5FD\"\/><\/g><\/svg>\n<div class=\"core\"><svg viewBox=\"0 0 44 44\" width=\"46\" height=\"46\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"4\" y=\"4\" width=\"36\" height=\"36\" rx=\"10\" fill=\"#ffffff\" fill-opacity=\"0.14\"\/><rect x=\"4.75\" y=\"4.75\" width=\"34.5\" height=\"34.5\" rx=\"9.25\" fill=\"none\" stroke=\"#ffffff\" stroke-opacity=\"0.35\" stroke-width=\"1.5\"\/><rect x=\"12\" y=\"12\" width=\"8.5\" height=\"8.5\" rx=\"2.5\" fill=\"#ffffff\"\/><rect x=\"23.5\" y=\"12\" width=\"8.5\" height=\"8.5\" rx=\"2.5\" fill=\"#ffffff\"\/><rect x=\"12\" y=\"23.5\" width=\"8.5\" height=\"8.5\" rx=\"2.5\" fill=\"#ffffff\"\/><rect x=\"23.5\" y=\"23.5\" width=\"8.5\" height=\"8.5\" rx=\"2.5\" fill=\"#ffffff\"\/><\/svg><b>BLOKY<\/b><\/div>\n<div class=\"chip c1\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 21V4M5 4h12l-2 4 2 4H5\"\/><\/svg><\/span><b>Hero<\/b><\/i><\/div>\n<div class=\"chip c2\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m12 4 2.4 5 5.6.7-4 3.8 1 5.5-5-2.7-5 2.7 1-5.5-4-3.8 5.6-.7z\"\/><\/svg><\/span><b>V\u00fdhody<\/b><\/i><\/div>\n<div class=\"chip c3\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3 12V5a2 2 0 0 1 2-2h7l9 9-9 9z\"\/><circle cx=\"8\" cy=\"8\" r=\"1.5\"\/><\/svg><\/span><b>Cenn\u00edk<\/b><\/i><\/div>\n<div class=\"chip c4\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01\"\/><\/svg><\/span><b>FAQ<\/b><\/i><\/div>\n<div class=\"chip c5\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"9\" cy=\"8\" r=\"3\"\/><path d=\"M3 20a6 6 0 0 1 12 0\"\/><path d=\"M16 11a3 3 0 1 0-1.5-5.6\"\/><\/svg><\/span><b>Referencie<\/b><\/i><\/div>\n<div class=\"chip c6\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/><circle cx=\"9\" cy=\"10\" r=\"2\"\/><path d=\"m4 18 5-4 4 3 3-2 4 3\"\/><\/svg><\/span><b>Gal\u00e9ria<\/b><\/i><\/div>\n<div class=\"chip c7\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"12\" cy=\"12\" r=\"8\"\/><path d=\"M12 8v4l3 2\"\/><\/svg><\/span><b>\u010casov\u00e1 os<\/b><\/i><\/div>\n<div class=\"chip c8\"><i><span class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z\"\/><path d=\"M8 7h7\"\/><\/svg><\/span><b>V\u00fdpis<\/b><\/i><\/div>\n<\/div>\n<div class=\"cap\"><p>T\u00e9ma rob\u00ed r\u00e1m \u00b7 bloky robia obsah<\/p><\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-branike-heading\">Pre\u010do to nie je len jedna vec<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Mohlo by sa zda\u0165 jednoduch\u0161ie, keby v\u0161etko robila t\u00e9ma. V praxi to m\u00e1 opa\u010dn\u00fd efekt: obsah postaven\u00fd n\u00e1strojmi t\u00e9my sa <strong>ned\u00e1 presun\u00fa\u0165<\/strong>. Pri v\u00fdmene t\u00e9my zmizne alebo sa rozsype.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Preto s\u00fa Branike bloky nap\u00edsan\u00e9 tak, aby boli na t\u00e9me nez\u00e1visl\u00e9. Str\u00e1nka postaven\u00e1 z nich vyzer\u00e1 rovnako pod jednou aj druhou t\u00e9mou, preto\u017ee si nesie vlastn\u00e9 rozlo\u017eenie, odsadenia aj farby. Vymeni\u0165 sa d\u00e1 r\u00e1m okolo nej \u2014 obsah ostane.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Dnes Blocksy, smerujeme k Branike t\u00e9me<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Weby, ktor\u00e9 s nami dnes be\u017eia, pou\u017e\u00edvaj\u00fa t\u00e9mu <strong>Blocksy<\/strong>. Vzh\u013ead sa v nej nastavuje v <em>Vzh\u013ead \u2192 Prisp\u00f4sobi\u0165<\/em>: paleta, typografia, hlavi\u010dka, p\u00e4ti\u010dka, \u0161\u00edrky, vzh\u013ead e-shopu.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Pripravujeme <strong>vlastn\u00fa Branike t\u00e9mu<\/strong> postaven\u00fa na nov\u0161om pr\u00edstupe, kde sa cel\u00fd web upravuje v jednom editore vr\u00e1tane hlavi\u010dky a p\u00e4ti\u010dky. Je to in\u00e1 filozofia \u2014 nie in\u00e9 tla\u010didl\u00e1 na tom istom mieste. A\u017e pr\u00edde jej \u010das, dostane vlastn\u00e9ho sprievodcu a prechod nebude znamena\u0165 prestavbu obsahu.<\/p>\n\n\n<p class=\"wp-block-branike-text\">\ud83d\udd34 Praktick\u00fd d\u00f4sledok pre v\u00e1s: <strong>obsah stavajte z blokov, nie z n\u00e1strojov t\u00e9my<\/strong>. Kto to dodr\u017e\u00ed, prejde na nov\u00fa t\u00e9mu bez pr\u00e1ce navy\u0161e.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">\u010co dostanete v blokoch<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>53 blokov<\/strong> \u2014 od z\u00e1kladn\u00fdch (nadpis, text, tla\u010didlo, obr\u00e1zok, odde\u013eova\u010d) po zlo\u017eit\u00e9 (hero, cenn\u00edk, \u010dasov\u00e1 os, prekl\u00e1pacia karta, porovnanie pred a po, odpo\u010det, chr\u00e1nen\u00fd obsah).<\/li>\n\n\n<li><strong>87 hotov\u00fdch vzorov<\/strong> v <strong>21 kateg\u00f3ri\u00e1ch<\/strong> \u2014 cel\u00e9 sekcie, ktor\u00e9 vlo\u017e\u00edte a prep\u00ed\u0161ete v nich texty. Hero, v\u00fdhody, cenn\u00edk, FAQ, referencie, \u0161tatistiky, t\u00edm, kontakt, p\u00e4ti\u010dka, log\u00e1, gal\u00e9ria, \u010dasov\u00e1 os, video, v\u00fdpis \u010dl\u00e1nkov, slu\u017eby, z\u00e1hlavie.<\/li>\n\n\n<li><strong>5 185 ikon<\/strong> \u2014 obrysov\u00e1 sada plus vlastn\u00e9 Branike ikony. Vyberaj\u00fa sa z preh\u013eadu, nie kop\u00edrovan\u00edm k\u00f3du.<\/li>\n\n\n<li><strong>Fotky v bal\u00edku<\/strong> \u2014 vzory nie s\u00fa pr\u00e1zdne r\u00e1m\u010deky, pr\u00eddu s obr\u00e1zkami v \u00faspornom form\u00e1te, ktor\u00e9 viete rovno vymeni\u0165 za svoje.<\/li>\n\n\n<li><strong>Predvo\u013eby<\/strong> \u2014 nastavenie bloku, ktor\u00e9 v\u00e1m sed\u00ed, si ulo\u017e\u00edte a pou\u017eijete na \u010fal\u0161ej str\u00e1nke jedn\u00fdm kliknut\u00edm.<\/li>\n\n\n<li><strong>Kni\u017enica priamo v editore<\/strong> \u2014 vzory si prezriete v n\u00e1h\u013eade, nemus\u00edte ich vklada\u0165 naslepo.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Ako vznik\u00e1 str\u00e1nka v praxi<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Najr\u00fdchlej\u0161ia cesta nie je stava\u0165 sekciu po sekcii z jednotliv\u00fdch blokov. Je to:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Vlo\u017ete vzor<\/strong>, ktor\u00fd sa najviac bl\u00ed\u017ei tomu, \u010do potrebujete.<\/li>\n\n\n<li><strong>Prep\u00ed\u0161te texty<\/strong> a vyme\u0148te obr\u00e1zky za svoje.<\/li>\n\n\n<li><strong>Dola\u010fte farby a odsadenia<\/strong>, ak treba. V\u00e4\u010d\u0161inou netreba \u2014 vzory s\u00fa navrhnut\u00e9 tak, aby fungovali hne\u010f.<\/li>\n\n\n<li><strong>Skontrolujte na mobile.<\/strong> Toto je krok, ktor\u00fd sa vynech\u00e1va naj\u010dastej\u0161ie a mst\u00ed sa najviac.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Rozdiel v \u010dase je r\u00e1dov\u00fd. Str\u00e1nka, ktor\u00e1 by sa skladala hodinu, vznikne za desa\u0165 min\u00fat \u2014 a pritom nie je \u201e\u0161abl\u00f3novit\u00e1&#8220;, preto\u017ee obsah, fotky aj farby s\u00fa va\u0161e.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Farby: paleta rozhoduje, nie jednotliv\u00e9 bloky<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Bloky si ber\u00fa farby z palety t\u00e9my. V\u010faka tomu sta\u010d\u00ed zmeni\u0165 paletu a zmen\u00ed sa cel\u00fd web naraz \u2014 vr\u00e1tane sekci\u00ed, ktor\u00e9 ste postavili pred pol rokom.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Ru\u010dne zadan\u00e1 farba v jednom bloku je v\u00fdnimka, nie sp\u00f4sob pr\u00e1ce. Web, kde je p\u00e4\u0165desiat ru\u010dne nastaven\u00fdch odtie\u0148ov, sa ned\u00e1 prefarbi\u0165 inak ne\u017e ru\u010dne. Preto: <strong>paletu nastavte na za\u010diatku a potom ju pou\u017e\u00edvajte<\/strong>.<\/p>\n\n\n<p class=\"wp-block-branike-text\">S\u00fa\u010das\u0165ou n\u00e1vrhu je aj <strong>tmav\u00fd re\u017eim<\/strong>. Nie je to doplnok na koniec \u2014 ka\u017ed\u00fd blok s n\u00edm r\u00e1ta a kontrast textu vo\u010di pozadiu je podmienka, nie odpor\u00fa\u010danie.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Vzh\u013ead a r\u00fdchlos\u0165 s\u00fa t\u00e1 ist\u00e1 t\u00e9ma<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Pekn\u00e1 str\u00e1nka, ktor\u00e1 sa na\u010d\u00edtava \u0161tyri sekundy, je zl\u00e1 str\u00e1nka. Preto maj\u00fa bloky vlastnosti, ktor\u00e9 sa navrhuj\u00fa spolu s dizajnom:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Obr\u00e1zky sa na\u010d\u00edtavaj\u00fa a\u017e ke\u010f treba<\/strong> \u2014 okrem toho hlavn\u00e9ho v hornej \u010dasti, ktor\u00fd sa na\u010d\u00edta hne\u010f, aby str\u00e1nka nevyzerala pr\u00e1zdna.<\/li>\n\n\n<li><strong>Obr\u00e1zky maj\u00fa rozmery<\/strong>, tak\u017ee obsah pod nimi neposkakuje pri na\u010d\u00edtan\u00ed. Poskakuj\u00face rozlo\u017eenie je najotravnej\u0161ia chyba na mobile.<\/li>\n\n\n<li><strong>Ikony s\u00fa vlo\u017een\u00e9 priamo v str\u00e1nke<\/strong>, nes\u0165ahuje sa kv\u00f4li nim cel\u00e9 p\u00edsmo s tis\u00edckami symbolov.<\/li>\n\n\n<li><strong>Pohyb sa sp\u00fa\u0161\u0165a a\u017e ke\u010f je prvok na obrazovke<\/strong>, nie na pozad\u00ed po\u010das celej n\u00e1v\u0161tevy.<\/li>\n\n\n<li><strong>Pr\u00edstupnos\u0165<\/strong> \u2014 nadpisy maj\u00fa poradie, odkazy sa daj\u00fa rozozna\u0165 aj bez farby, ovl\u00e1da\u0165 sa d\u00e1 kl\u00e1vesnicou.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Kde do toho vstupuj\u00fa ostatn\u00e9 pluginy<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Dizajn nekon\u010d\u00ed na statickej str\u00e1nke. Bloky s\u00fa aj miestom, kde sa zobrazuje to, \u010do spravuj\u00fa ostatn\u00e9 \u010dasti ekosyst\u00e9mu:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>V\u00fdpis \u010dl\u00e1nkov<\/strong> vlo\u017e\u00ed preh\u013ead z blogu alebo z vlastn\u00e9ho typu obsahu \u2014 nemus\u00edte ho stava\u0165 ru\u010dne.<\/li>\n\n\n<li><strong>Chr\u00e1nen\u00fd obsah<\/strong> uk\u00e1\u017ee \u010das\u0165 str\u00e1nky len prihl\u00e1sen\u00e9mu, len \u010dlenovi alebo len dr\u017eite\u013eovi konkr\u00e9tneho bal\u00edka. \u010clensk\u00e1 z\u00f3na sa tak d\u00e1 postavi\u0165 priamo v str\u00e1nke.<\/li>\n\n\n<li><strong>Video s ochranou<\/strong> nadv\u00e4zuje na kurzy a \u010dlensk\u00e9 z\u00f3ny.<\/li>\n\n\n<li><strong>Formul\u00e1r<\/strong> zo str\u00e1nky zap\u00ed\u0161e dopyt do CRM a m\u00f4\u017ee spusti\u0165 s\u00e9riu spr\u00e1v.<\/li>\n\n\n<li><strong>Cenn\u00edk a tla\u010didl\u00e1<\/strong> ved\u00fa do e-shopu, ktor\u00fd m\u00e1 vlastn\u00e9 pravidl\u00e1 cien pre \u010dlenov a ve\u013ekoodberate\u013eov.<\/li>\n\n\n<li><strong>Firemn\u00e9 \u00fadaje a otv\u00e1racie hodiny<\/strong> sa do\u0165ahuj\u00fa z jedn\u00e9ho miesta, tak\u017ee sa v p\u00e4ti\u010dke a na kontakte neopravuj\u00fa dvakr\u00e1t.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">\u010co bloky nerobia<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Nenavrhn\u00fa za v\u00e1s web.<\/strong> Dostanete kvalitn\u00e9 stavebn\u00e9 diely, nie hotov\u00fa identitu zna\u010dky.<\/li>\n\n\n<li><strong>Nenahradia fotografa.<\/strong> Prilo\u017een\u00e9 fotky s\u00fa na rozbeh, nie na fin\u00e1lnu prezent\u00e1ciu va\u0161ej prev\u00e1dzky.<\/li>\n\n\n<li><strong>Nemenia hlavi\u010dku a p\u00e4ti\u010dku<\/strong> \u2014 to je pr\u00e1ca t\u00e9my.<\/li>\n\n\n<li><strong>Nespravia zl\u00fd text dobr\u00fdm.<\/strong> Najkraj\u0161ia sekcia s pr\u00e1zdnou vetou je st\u00e1le pr\u00e1zdna veta.<\/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>Nastavte paletu sk\u00f4r, ne\u017e postav\u00edte dvadsa\u0165 str\u00e1nok.<\/strong> Prefarbovanie po fakte je pr\u00e1ca navy\u0161e.<\/li>\n\n\n<li><strong>Nemie\u0161ajte n\u00e1stroje t\u00e9my do obsahu str\u00e1nky.<\/strong> Presne to sa pri v\u00fdmene t\u00e9my strat\u00ed.<\/li>\n\n\n<li><strong>Nepou\u017e\u00edvajte na obsah vlastn\u00e9 CSS, k\u00fdm sa ned\u00e1 inak.<\/strong> Vlastn\u00e9 pravidl\u00e1 pre\u017eij\u00fa aktualiz\u00e1ciu, ale nikto po v\u00e1s nebude vedie\u0165, kde s\u00fa.<\/li>\n\n\n<li><strong>Kontrolujte pri \u0161\u00edrke mobilu.<\/strong> Dlh\u00e9 n\u00e1pisy na tla\u010didl\u00e1ch a \u0161irok\u00e9 tabu\u013eky s\u00fa dve naj\u010dastej\u0161ie chyby.<\/li>\n\n\n<li><strong>Nadpisy nepou\u017e\u00edvajte na ve\u013ekos\u0165 p\u00edsma.<\/strong> Poradie nadpisov \u010d\u00edtaj\u00fa vyh\u013ead\u00e1va\u010de aj \u010d\u00edta\u010dky pre nevidiacich.<\/li>\n\n\n<li><strong>Vzor upravte, nie prestavte.<\/strong> Ak z neho po \u00faprav\u00e1ch ostane nie\u010do \u00faplne in\u00e9, pravdepodobne ste si vybrali nespr\u00e1vny vzor.<\/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\/ako-upravit-vzhlad\/\">Ako upravi\u0165 vzh\u013ead webu<\/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\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>Modern\u00fd vzh\u013ead cez t\u00e9mu Blocksy a kni\u017enicu Branike blokov a hotov\u00fdch vzorov \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":true,"_bt_container":"","_bt_sidebar":"","_bt_show_title":"","footnotes":"","_bseo_title":"","_bseo_description":"Vzh\u013ead webu staviate na t\u00e9me Blocksy a kni\u017enici Branike blokov a hotov\u00fdch vzorov. Sekcie sklad\u00e1te v editore bez k\u00f3du, s d\u00f4razom na r\u00fdchlos\u0165 a pr\u00edstupnos\u0165. Z \u010doh","_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-6039","kb_article","type-kb_article","status-publish","hentry","kb_category-dizajn"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6039","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":2,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6039\/revisions"}],"predecessor-version":[{"id":6793,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6039\/revisions\/6793"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6039"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6039"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}