{"id":6105,"date":"2026-07-12T12:00:00","date_gmt":"2026-07-12T10:00:00","guid":{"rendered":"https:\/\/branike.com\/prirucka\/sprievodca-blocks\/"},"modified":"2026-07-31T22:23:32","modified_gmt":"2026-07-31T20:23:32","slug":"sprievodca-blocks","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/sprievodca-blocks\/","title":{"rendered":"Kompletn\u00fd sprievodca: Branike Blocks a Kni\u017enica vzorov"},"content":{"rendered":"\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=\"Branike Blocks a jeho \u010dasti: chr\u00e1nen\u00fd obsah, vzory, ikony, hero, cenn\u00edk, gal\u00e9ria, bloky a pohyb pri scrollovan\u00ed.\">\n<svg class=\"rings\" viewBox=\"0 0 520 520\" width=\"520\" height=\"520\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"bkvOrbitGlow-gblk\" 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-gblk)\"\/><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>BLOCKS<\/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\"><rect x=\"5\" y=\"10\" width=\"14\" height=\"10\" rx=\"2\"\/><path d=\"M8 10V7a4 4 0 0 1 8 0v3\"\/><\/svg><\/span><b>Chr\u00e1nen\u00fd obsah<\/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=\"M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z\"\/><path d=\"M8 7h7\"\/><\/svg><\/span><b>Vzory<\/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=\"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>Ikony<\/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=\"M5 21V4M5 4h12l-2 4 2 4H5\"\/><\/svg><\/span><b>Hero<\/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\"><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 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\"><rect x=\"4\" y=\"4\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"13\" y=\"4\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"4\" y=\"13\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"13\" y=\"13\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg><\/span><b>Bloky<\/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\"><rect x=\"3\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"\/><path d=\"m15 10 6-3v10l-6-3z\"\/><\/svg><\/span><b>Pohyb<\/b><\/i><\/div>\n<\/div>\n<div class=\"cap\"><p>53 blokov \u00b7 87 hotov\u00fdch sekci\u00ed<\/p><\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-branike-heading\">1. \u010co to je a \u010do t\u00fdm z\u00edskate<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Branike Blocks je <strong>sada stavebn\u00fdch blokov a hotov\u00fdch vzorov<\/strong> priamo do editora WordPress (Gutenberg). Nie je to page builder \u2014 je to roz\u0161\u00edrenie toho editora, ktor\u00fd u\u017e pozn\u00e1te. Ni\u010d sa neu\u010d\u00edte odznova a ni\u010d v\u00e1s nezamkne: keby ste plugin raz vypli, obsah zostane oby\u010dajn\u00fdm WordPress obsahom.<\/p>\n\n\n<p class=\"wp-block-branike-text\">V jednom plugine dostanete:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>53 blokov<\/strong> \u2014 41 samostatn\u00fdch a 12 vnoren\u00fdch (napr\u00edklad jednotliv\u00fd krok vo vn\u00fatri bloku Kroky),<\/li>\n\n\n<li><strong>87 hotov\u00fdch vzorov<\/strong> v 21 kateg\u00f3ri\u00e1ch \u2014 cel\u00e9 sekcie, ktor\u00e9 vlo\u017e\u00edte jedn\u00fdm klikom a len prep\u00ed\u0161ete texty,<\/li>\n\n\n<li><strong>viac ne\u017e 5 100 ikon<\/strong> \u2014 5 112 z kni\u017enice Tabler, 73 vlastn\u00fdch Branike SVG, Dashicons a priestor na va\u0161e vlastn\u00e9,<\/li>\n\n\n<li><strong>presety<\/strong> \u2014 nastavenie bloku si ulo\u017e\u00edte pod menom a pou\u017eijete kdeko\u013evek inde,<\/li>\n\n\n<li><strong>tmav\u00fd re\u017eim<\/strong> \u2014 bloky ho vedia od za\u010diatku, nedor\u00e1ba sa dodato\u010dne.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Z\u00e1mer je jednoduch\u00fd: <strong>pekn\u00e1 str\u00e1nka bez grafika a bez builderu<\/strong>, ktor\u00e1 z\u00e1rove\u0148 neubl\u00ed\u017ei r\u00fdchlosti webu. Na to, pre\u010do to druh\u00e9 nie je samozrejmos\u0165, sa pozrieme v \u010dasti 7.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">2. Kde bloky n\u00e1jdete v editore<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Otvorte \u013eubovo\u013en\u00fa str\u00e1nku alebo \u010dl\u00e1nok a kliknite na modr\u00e9 <strong>+<\/strong> v\u013eavo hore. V zozname blokov n\u00e1jdete kateg\u00f3riu <strong>BRANIKE<\/strong> \u2014 v\u0161etky bloky s\u00fa pohromade v nej. R\u00fdchlej\u0161ie je nap\u00edsa\u0165 lomku a n\u00e1zov priamo do textu, napr\u00edklad <code>\/hero<\/code> alebo <code>\/cenn\u00edk<\/code>.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Nastavenia bloku s\u00fa v\u017edy na dvoch miestach a je dobr\u00e9 pozna\u0165 rozdiel:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Panel vpravo<\/strong> \u2014 v\u0161etko podstatn\u00e9: obsah, rozlo\u017eenie, farby, efekty, responz\u00edvne spr\u00e1vanie.<\/li>\n\n\n<li><strong>Li\u0161ta nad blokom<\/strong> \u2014 r\u00fdchle \u00fakony: zarovnanie, presun a tla\u010didl\u00e1 <strong>Kop\u00edrova\u0165 \u0161t\u00fdl<\/strong> \/ <strong>Vlo\u017ei\u0165 \u0161t\u00fdl<\/strong>.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">To kop\u00edrovanie \u0161t\u00fdlu je drobnos\u0165, ktor\u00e1 u\u0161etr\u00ed najviac \u010dasu. Vylad\u00edte jedno tla\u010didlo do posledn\u00e9ho detailu, skop\u00edrujete \u0161t\u00fdl a vlo\u017e\u00edte ho na ostatn\u00e9 \u2014 bez toho, aby ste nastavenia klikali znova.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">3. Kni\u017enica vzorov \u2014 87 hotov\u00fdch sekci\u00ed<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Vzor je cel\u00e1 hotov\u00e1 sekcia: hero, v\u00fdhody, cenn\u00edk, referencie, kontakt. Vlo\u017e\u00edte ho jedn\u00fdm klikom a prep\u00ed\u0161ete texty. V editore ich n\u00e1jdete cez <strong>+<\/strong> \u2192 z\u00e1lo\u017eka <strong>Vzory<\/strong> \u2192 kateg\u00f3rie za\u010d\u00ednaj\u00face na <strong>BRANIKE \u2014<\/strong>.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Kateg\u00f3ri\u00ed je 21: Hero, V\u00fdhody, CTA, Cenn\u00edk, FAQ, Referencie, \u0160tatistiky, T\u00edm, Kontakt, P\u00e4ti\u010dka, Obsah, Logo Farm, Gal\u00e9ria, M\u00e9di\u00e1 &amp; Text, Cit\u00e1t, Karty, Timeline, Video, Pr\u00edspevky, Slu\u017eby a Z\u00e1hlavie. V\u0161etk\u00fdch 87 vzorov n\u00e1jdete aj naraz v spolo\u010dnej kateg\u00f3rii <strong>BRANIKE<\/strong>.<\/p>\n\n\n<p class=\"wp-block-branike-text\"><strong>Fotografie vo vzoroch s\u00fa s\u00fa\u010das\u0165ou pluginu<\/strong> \u2014 dod\u00e1vaj\u00fa sa ako WebP priamo v \u0148om. Ni\u010d sa nena\u010d\u00edtava z cudzieho servera. Je to rozdiel, ktor\u00fd nevidno, ale m\u00e1 dva d\u00f4sledky: n\u00e1v\u0161tevn\u00edkove d\u00e1ta neodch\u00e1dzaj\u00fa tretej strane (GDPR) a str\u00e1nka ne\u010dak\u00e1 na cudzie spojenie.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">4. Ktor\u00fd blok na \u010do \u2014 pod\u013ea toho, \u010do staviate<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Zoznam blokov pod\u013ea abecedy v\u00e1m nepovie ni\u010d. Preto s\u00fa tu zoraden\u00e9 pod\u013ea toho, <strong>\u010do chcete na str\u00e1nke dosiahnu\u0165<\/strong>.<\/p>\n\n\n<h3 class=\"wp-block-branike-heading\">4.1 Za\u010diatok str\u00e1nky<\/h3>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Hero<\/strong> \u2014 \u00favodn\u00e1 sekcia s nadpisom, textom a tla\u010didlami. Pozadie: farba, gradient, obr\u00e1zok alebo video. Split layout d\u00e1 obr\u00e1zok ved\u013ea textu.<\/li>\n\n\n<li><strong>Nadpis<\/strong> \u2014 gradient, dekorat\u00edvna pod\u010diarknutie, farebn\u00e9 zv\u00fdraznenie slova, anim\u00e1cie.<\/li>\n\n\n<li><strong>Tla\u010didlo<\/strong> a <strong>Tla\u010didl\u00e1<\/strong> \u2014 varianty, ikona, efekty Magnetic, Tilt 3D, dvojit\u00fd text, stav na\u010d\u00edtavania.<\/li>\n\n\n<li><strong>Odde\u013eova\u010d<\/strong> \u2014 \u010diara, gradient, vlna, cik-cak alebo obl\u00fak, s anim\u00e1ciou kreslenia.<\/li>\n\n<\/ul>\n\n\n<h3 class=\"wp-block-branike-heading\">4.2 Rozlo\u017eenie<\/h3>\n\n\n<p class=\"wp-block-branike-text\"><strong>St\u013apce<\/strong> s\u00fa najsilnej\u0161\u00ed a najviac prehliadan\u00fd blok v sade. 1 a\u017e 12 st\u013apcov, \u0161\u00edrky \u0165ah\u00e1te my\u0161ou, ka\u017ed\u00fd st\u013apec m\u00e1 vlastn\u00e9 pozadie, okraje a zaoblenie a vlastn\u00e9 spr\u00e1vanie na mobile. V\u00e4\u010d\u0161inu rozlo\u017een\u00ed, kv\u00f4li ktor\u00fdm \u013eudia siahaj\u00fa po builderi, postav\u00edte pr\u00e1ve tu.<\/p>\n\n\n<h3 class=\"wp-block-branike-heading\">4.3 Text a \u010d\u00edtanie<\/h3>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Text<\/strong> \u2014 bohat\u00fd textov\u00fd blok: form\u00e1ty, inici\u00e1la (drop cap), gradientov\u00fd text, vo\u013eba HTML zna\u010dky, anim\u00e1cie.<\/li>\n\n\n<li><strong>Blockquote<\/strong> \u2014 cit\u00e1t s autorom a fotkou, tri \u0161t\u00fdly.<\/li>\n\n\n<li><strong>Expand \/ Zobrazi\u0165 viac<\/strong> \u2014 dlh\u00fd text sa zbal\u00ed a rozbal\u00ed a\u017e po kliknut\u00ed.<\/li>\n\n\n<li><strong>Reading Progress<\/strong> \u2014 tenk\u00fd pruh hore alebo dole ukazuje, ko\u013eko \u010dl\u00e1nku ost\u00e1va.<\/li>\n\n<\/ul>\n\n\n<h3 class=\"wp-block-branike-heading\">4.4 Vysvetli\u0165, \u010do pon\u00fakate<\/h3>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Feature<\/strong> \u2014 mrie\u017eka v\u00fdhod (1\u20134 st\u013apce), ka\u017ed\u00e1 s ikonou, nadpisom a textom.<\/li>\n\n\n<li><strong>Icon Box<\/strong> a <strong>Icon List<\/strong> \u2014 to ist\u00e9 v men\u0161om: jedna v\u00fdhoda alebo zoznam s ikonami.<\/li>\n\n\n<li><strong>Kroky<\/strong> \u2014 postup krok za krokom, vodorovne alebo zvisle, s \u010d\u00edslami alebo ikonami a spojovac\u00edmi linkami.<\/li>\n\n\n<li><strong>Tabs<\/strong> \u2014 dlh\u00fd obsah rozdelen\u00fd do z\u00e1lo\u017eiek.<\/li>\n\n\n<li><strong>Accordion<\/strong> \u2014 rozba\u013eovacie ot\u00e1zky. Stavia na nat\u00edvnom <code>details\/summary<\/code> a prid\u00e1va <strong>FAQ sch\u00e9mu pre Google<\/strong>, tak\u017ee sa ot\u00e1zky m\u00f4\u017eu zobrazi\u0165 priamo vo v\u00fdsledkoch vyh\u013ead\u00e1vania.<\/li>\n\n\n<li><strong>Timeline<\/strong> \u2014 m\u00ed\u013eniky, hist\u00f3ria firmy, priebeh projektu.<\/li>\n\n\n<li><strong>Flip Card<\/strong> \u2014 karta s prednou a zadnou stranou, 10 efektov prevr\u00e1tenia.<\/li>\n\n\n<li><strong>Alert<\/strong> \u2014 zv\u00fdraznen\u00e9 upozornenie v texte, volite\u013ene zatv\u00e1rate\u013en\u00e9.<\/li>\n\n<\/ul>\n\n\n<h3 class=\"wp-block-branike-heading\">4.5 Z\u00edska\u0165 d\u00f4veru<\/h3>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Testimonial<\/strong> \u2014 recenzia s hviezdi\u010dkami, avatarom a logom firmy, tri rozlo\u017eenia.<\/li>\n\n\n<li><strong>Number Box<\/strong> \u2014 \u0161tatistika, ktor\u00e1 sa pri scrollovan\u00ed odpo\u010d\u00edta nahor.<\/li>\n\n\n<li><strong>Logo Showcase<\/strong> \u2014 log\u00e1 klientov ako mrie\u017eka, be\u017eiaci p\u00e1s alebo slu\u010dka, s odfarben\u00edm pri prejden\u00ed my\u0161ou.<\/li>\n\n\n<li><strong>Team Member<\/strong> \u2014 karta \u010dloveka s fotkou, rolou, bio a soci\u00e1lnymi odkazmi.<\/li>\n\n\n<li><strong>Progress Bar<\/strong> a <strong>Progress Circle<\/strong> \u2014 pruh alebo kruh, ktor\u00fd sa napln\u00ed a\u017e ke\u010f na\u0148 pou\u017e\u00edvate\u013e doscrolluje.<\/li>\n\n<\/ul>\n\n\n<h3 class=\"wp-block-branike-heading\">4.6 Preda\u0165<\/h3>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>CTA<\/strong> \u2014 v\u00fdzva k akcii s farebn\u00fdm pozad\u00edm, centrovan\u00e1 alebo delen\u00e1.<\/li>\n\n\n<li><strong>Pricing Group<\/strong> + <strong>Pricing Box<\/strong> \u2014 cenn\u00edk. Skupina dr\u017e\u00ed mrie\u017eku, ka\u017ed\u00e1 karta m\u00e1 pl\u00e1n, cenu, zoznam funkci\u00ed a tla\u010didlo.<\/li>\n\n\n<li><strong>Countdown<\/strong> \u2014 odpo\u010det k d\u00e1tumu pre kampane a podujatia.<\/li>\n\n\n<li><strong>Karta<\/strong> \u2014 obr\u00e1zok, nadpis, text a tla\u010didlo; \u0161tyri varianty aj vodorovn\u00e9 rozlo\u017eenie.<\/li>\n\n<\/ul>\n\n\n<h3 class=\"wp-block-branike-heading\">4.7 Obr\u00e1zky a gal\u00e9ria<\/h3>\n\n\n<p class=\"wp-block-branike-text\">Samostatn\u00fd gal\u00e9riov\u00fd plugin nepotrebujete \u2014 <strong>gal\u00e9ria je s\u00fa\u010das\u0165ou Branike Blocks<\/strong>.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Obr\u00e1zok<\/strong> \u2014 lightbox, popis v prekryve, hover efekty, parallax, pomer str\u00e1n, polia pre SEO a pr\u00edstupnos\u0165.<\/li>\n\n\n<li><strong>Foto k\u00f4pka<\/strong> \u2014 2 a\u017e 4 fotky naskladan\u00e9 ako n\u00e1lepky; pri prejden\u00ed my\u0161ou sa rozlo\u017eia do vej\u00e1ra, klik otvor\u00ed lightbox.<\/li>\n\n\n<li><strong>Before \/ After<\/strong> \u2014 posuvn\u00e9 porovnanie dvoch fotiek my\u0161ou aj dotykom. Pre rekon\u0161trukcie, retu\u0161e, pred a po.<\/li>\n\n\n<li><strong>Carousel<\/strong> \u2014 posuvn\u00edk postaven\u00fd na CSS scroll-snap, so \u0161\u00edpkami a bodkami.<\/li>\n\n\n<li><strong>Vzory kateg\u00f3rie Gal\u00e9ria<\/strong> \u2014 hotov\u00e9 rozlo\u017eenia fotogal\u00e9ri\u00ed.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Lightbox je <strong>spolo\u010dn\u00fd pre v\u0161etky bloky<\/strong>. Ke\u010f m\u00e1te na str\u00e1nke obr\u00e1zok, foto k\u00f4pku aj vzor gal\u00e9rie, n\u00e1v\u0161tevn\u00edk po otvoren\u00ed preklik\u00e1va v\u0161etky fotky v jednej sade \u2014 nie tri oddelen\u00e9.<\/p>\n\n\n<h3 class=\"wp-block-branike-heading\">4.8 V\u00fdpis \u010dl\u00e1nkov, produktov a podujat\u00ed<\/h3>\n\n\n<p class=\"wp-block-branike-text\"><strong>Posts Grid<\/strong> je dynamick\u00e1 mrie\u017eka obsahu \u2014 najkomplexnej\u0161\u00ed blok v sade. Vyp\u00ed\u0161e \u010dl\u00e1nky, produkty, kurzy, podujatia, referencie aj vlastn\u00e9 typy obsahu.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li>filtrovanie pod\u013ea typu obsahu, kateg\u00f3rie, \u0161t\u00edtku a autora,<\/li>\n\n\n<li>zoradenie pod\u013ea d\u00e1tumu, n\u00e1zvu, n\u00e1hodne alebo pod\u013ea vlastn\u00e9ho poradia,<\/li>\n\n\n<li>hotov\u00e9 presety vzh\u013eadu \u2014 od jednoduch\u00e9ho zoznamu po kartov\u00fa mrie\u017eku,<\/li>\n\n\n<li>re\u017eim carousel namiesto mrie\u017eky,<\/li>\n\n\n<li><strong>skeleton loading<\/strong> \u2014 k\u00fdm sa obsah na\u010d\u00edtava, dr\u017e\u00ed miesto siv\u00e1 kostra, tak\u017ee str\u00e1nka pod n\u00edm neposkakuje.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Aj tu plat\u00ed, \u017ee samostatn\u00fd plugin na v\u00fdpis pr\u00edspevkov nepotrebujete.<\/p>\n\n\n<h3 class=\"wp-block-branike-heading\">4.9 Video a obsah len pre \u010dlenov<\/h3>\n\n\n<p class=\"wp-block-branike-text\"><strong>Video<\/strong> prehr\u00e1 YouTube, Vimeo aj vlastn\u00e9 MP4 \u2014 <strong>bez loga a bez rekl\u00e1m<\/strong>. K\u00fdm n\u00e1v\u0161tevn\u00edk neklikne, zobrazuje sa len n\u00e1h\u013eadov\u00fd obr\u00e1zok; samotn\u00fd prehr\u00e1va\u010d sa na\u010d\u00edta a\u017e ke\u010f sa video dostane do poh\u013eadu. V\u010faka tomu video na za\u010diatku str\u00e1nky nezdr\u017e\u00ed jej na\u010d\u00edtanie.<\/p>\n\n\n<p class=\"wp-block-branike-text\"><strong>Chr\u00e1nen\u00fd obsah<\/strong> uzamkne s\u00fabor alebo prehr\u00e1va\u010d \u2014 PDF, EPUB, audio, video \u2014 za pravidlo pr\u00edstupu. Na v\u00fdber je p\u00e4\u0165:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li>prihl\u00e1sen\u00fd pou\u017e\u00edvate\u013e,<\/li>\n\n\n<li>konkr\u00e9tna rola,<\/li>\n\n\n<li>\u010dlenstvo alebo tier (napoj\u00ed sa Branike Membership alebo Club),<\/li>\n\n\n<li>stiahnut\u00fd lead magnet (napoj\u00ed sa Branike CRM),<\/li>\n\n\n<li>zak\u00fapen\u00fd produkt (napoj\u00ed sa WooCommerce).<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">S\u00fabor sa neserv\u00edruje priamo z kni\u017enice m\u00e9di\u00ed \u2014 ide cez kontrolovan\u00fd kan\u00e1l, ktor\u00fd pr\u00edstup over\u00ed <strong>e\u0161te raz pri ka\u017edom prehrat\u00ed<\/strong>. Video sa d\u00e1 previn\u00fa\u0165, ale odkaz sa ned\u00e1 posla\u0165 \u010falej. Povedzme si to na rovinu: je to <strong>obmedzenie pr\u00edstupu, nie DRM<\/strong>. Kto m\u00e1 pr\u00edstup, vie si obsah zaznamena\u0165. Zmyslom je, aby sa nedostal k t\u00fdm, \u010do za\u0148 nezaplatili.<\/p>\n\n\n<h3 class=\"wp-block-branike-heading\">4.10 Pohyb pri scrollovan\u00ed<\/h3>\n\n\n<p class=\"wp-block-branike-text\">Toto je \u010das\u0165, kv\u00f4li ktorej str\u00e1nky vyzeraj\u00fa draho. Z\u00e1rove\u0148 je to \u010das\u0165, kde sa naj\u010dastej\u0161ie pokaz\u00ed r\u00fdchlos\u0165 \u2014 preto s\u00fa tieto bloky postaven\u00e9 tak, aby sa im to nestalo.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Pin Scroll<\/strong> \u2014 sekcia ostane prilepen\u00e1 na obrazovke, k\u00fdm okolo nej be\u017e\u00ed ostatn\u00fd obsah. \u010cist\u00e9 CSS, \u017eiadny JavaScript.<\/li>\n\n\n<li><strong>Pin Scene<\/strong> \u2014 filmov\u00fd efekt: sekcia sa zapichne a jej vrstvy (Pin Frame, Pin Item) sa po\u010das scrollovania postupne objavuj\u00fa a mizn\u00fa. Ka\u017edej vrstve nastav\u00edte, kedy m\u00e1 pr\u00eds\u0165 a kedy od\u00eds\u0165.<\/li>\n\n\n<li><strong>H-Scroll<\/strong> \u2014 vodorovn\u00fd posun poh\u00e1\u0148an\u00fd zvisl\u00fdm scrollovan\u00edm: panely id\u00fa do strany, k\u00fdm pou\u017e\u00edvate\u013e scrolluje nadol.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">5. Ikony<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Ikon m\u00e1te k dispoz\u00edcii <strong>vy\u0161e 5 100<\/strong> zo \u0161tyroch zdrojov \u2014 a v\u0161etky s\u00fa <strong>na va\u0161om serveri<\/strong>, ni\u010d sa nes\u0165ahuje z cudzej CDN:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>5 112 ikon Tabler<\/strong> \u2014 od \u0161\u00edpok cez soci\u00e1lne siete a\u017e po odborn\u00e9 symboly,<\/li>\n\n\n<li><strong>73 vlastn\u00fdch Branike SVG ikon<\/strong>,<\/li>\n\n\n<li><strong>Dashicons<\/strong> \u2014 ikony, ktor\u00e9 pozn\u00e1 WordPress,<\/li>\n\n\n<li><strong>va\u0161e vlastn\u00e9 SVG<\/strong> \u2014 nahr\u00e1te si ich do kni\u017enice a pou\u017e\u00edvate ako ostatn\u00e9.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Pri Tableri stoj\u00ed za zmienku jeden detail. Vo v\u00fdbere ikon be\u017e\u00ed webfont, aby ste mohli listova\u0165 v\u0161etk\u00fdch 5 112 naraz. <strong>Na hotov\u00fa str\u00e1nku sa ale \u017eiadny font nedostane<\/strong> \u2014 zvolen\u00e1 ikona sa vykresl\u00ed ako priame SVG. N\u00e1v\u0161tevn\u00edk teda nes\u0165ahuje kv\u00f4li trom ikon\u00e1m cel\u00fd font. Ikona navy\u0161e ded\u00ed farbu textu, tak\u017ee sa v tmavom re\u017eime prefarb\u00ed sama.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">6. Presety, kop\u00edrovanie \u0161t\u00fdlu a n\u00e1poveda<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Tri veci, ktor\u00e9 u\u0161etria najviac klikania:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Presety<\/strong> \u2014 vyladen\u00fd blok ulo\u017e\u00edte pod vlastn\u00fdm menom a inde ho vyvol\u00e1te jedn\u00fdm klikom. Presety s\u00fa per blok, tak\u017ee si m\u00f4\u017eete dr\u017ea\u0165 napr\u00edklad tri varianty cenn\u00edka.<\/li>\n\n\n<li><strong>Kop\u00edrova\u0165 \/ Vlo\u017ei\u0165 \u0161t\u00fdl<\/strong> \u2014 v li\u0161te nad blokom. Prenesie vzh\u013ead z jedn\u00e9ho bloku na druh\u00fd bez toho, aby ste kop\u00edrovali obsah.<\/li>\n\n\n<li><strong>N\u00e1poveda pri nastaveniach<\/strong> \u2014 pri vo\u013eb\u00e1ch, kde nie je zrejm\u00e9, \u010do robia, je vysvetlenie priamo v paneli. Nemus\u00edte h\u013eada\u0165 v dokument\u00e1cii.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">7. Pre\u010do to nezhor\u0161\u00ed r\u00fdchlos\u0165 webu<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Be\u017en\u00e1 n\u00e1mietka vo\u010di \u201epekn\u00e9mu webu&#8220; je, \u017ee sa spomal\u00ed. Pri Branike Blocks stoja proti tomu \u0161tyri konkr\u00e9tne rozhodnutia:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Na\u010d\u00edta sa len to, \u010do je na str\u00e1nke.<\/strong> Blok, ktor\u00fd na str\u00e1nke nie je, na \u0148u neposiela ani riadok k\u00f3du.<\/li>\n\n\n<li><strong>Anim\u00e1cie sa sp\u00fa\u0161\u0165aj\u00fa a\u017e pri doscrollovan\u00ed.<\/strong> Po\u010d\u00edtadl\u00e1, progress bary aj video \u010dakaj\u00fa, k\u00fdm sa dostan\u00fa do poh\u013eadu \u2014 nie na na\u010d\u00edtanie str\u00e1nky.<\/li>\n\n\n<li><strong>Prvky si dr\u017eia miesto dopredu.<\/strong> Obr\u00e1zky maj\u00fa rozmery, odde\u013eova\u010de a v\u00fdpisy maj\u00fa vyhraden\u00fa v\u00fd\u0161ku. Str\u00e1nka pod prstom nepodsko\u010d\u00ed \u2014 to je metrika CLS, ktor\u00fa Google meria.<\/li>\n\n\n<li><strong>\u017diadne cudzie servery.<\/strong> Fotky vo vzoroch, ikony aj skripty s\u00fa u v\u00e1s. \u017diadny hotlink, \u017eiadna extern\u00e1 CDN.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Bloky s\u00fa p\u00edsan\u00e9 v \u010distom JavaScripte bez jQuery. Sada nepotrebuje builder, ktor\u00fd by k str\u00e1nke pribalil vlastn\u00fd runtime.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">8. Pr\u00edstupnos\u0165 a tmav\u00fd re\u017eim<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Pr\u00edstupnos\u0165 nie je v tejto sade doplnok. Bloky pou\u017e\u00edvaj\u00fa <strong>s\u00e9mantick\u00e9 HTML<\/strong> \u2014 Accordion stavia na nat\u00edvnom <code>details\/summary<\/code>, nie na naklikanom divs. Ovl\u00e1date\u013en\u00e9 prvky s\u00fa dostupn\u00e9 z kl\u00e1vesnice a maj\u00fa vidite\u013en\u00fd stav pri prechode tabul\u00e1torom.<\/p>\n\n\n<p class=\"wp-block-branike-text\">D\u00f4le\u017eit\u00e1 vec pre citliv\u00fdch n\u00e1v\u0161tevn\u00edkov: <strong>bloky re\u0161pektuj\u00fa syst\u00e9mov\u00e9 nastavenie \u201eobmedzi\u0165 pohyb&#8220;<\/strong>. Ke\u010f m\u00e1 n\u00e1v\u0161tevn\u00edk v opera\u010dnom syst\u00e9me zapnut\u00e9 potla\u010denie anim\u00e1ci\u00ed, efekty sa mu nespustia. Net\u00fdka sa to jedn\u00e9ho \u010di dvoch blokov \u2014 je to zapracovan\u00e9 naprie\u010d celou sadou.<\/p>\n\n\n<p class=\"wp-block-branike-text\"><strong>Tmav\u00fd re\u017eim<\/strong> je zabudovan\u00fd. Farby blokov id\u00fa cez spolo\u010dn\u00e9 dizajnov\u00e9 tokeny, ktor\u00e9 vedia o svetlej aj tmavej verzii, tak\u017ee sa web prepne cel\u00fd a konzistentne \u2014 nie tak, \u017ee tri sekcie ostan\u00fa svieti\u0165.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">9. Na \u010do si da\u0165 pozor<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Nepou\u017e\u00edvajte v\u0161etky efekty naraz.<\/strong> Pin Scene, H-Scroll a carousel na jednej str\u00e1nke p\u00f4sobia nepokojne a spomalia ju. Jeden v\u00fdrazn\u00fd efekt na str\u00e1nku je akur\u00e1t.<\/li>\n\n\n<li><strong>Chr\u00e1nen\u00fd obsah je gating, nie DRM.<\/strong> Br\u00e1ni neopr\u00e1vnen\u00e9mu pr\u00edstupu, nie kop\u00edrovaniu t\u00fdm, \u010do pr\u00edstup maj\u00fa.<\/li>\n\n\n<li><strong>Vzory s\u00fa v\u00fdchodisko, nie hotov\u00e1 str\u00e1nka.<\/strong> Prep\u00ed\u0161te texty aj fotky \u2014 inak bude v\u00e1\u0161 web vyzera\u0165 ako ka\u017ed\u00fd in\u00fd, \u010do pou\u017eil ten ist\u00fd vzor.<\/li>\n\n\n<li><strong>Video s automatick\u00fdm \u0161tartom je v\u017edy stlmen\u00e9.<\/strong> Nie je to na\u0161a svojv\u00f4\u013ea \u2014 prehliada\u010de automatick\u00e9 prehratie so zvukom blokuj\u00fa, tak\u017ee by ste dostali len zaseknut\u00fd prehr\u00e1va\u010d.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">10. Kam \u010falej<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><a href=\"https:\/\/branike.com\/branike-blocks-prepracovane-bloky-pre-gutemberg\/\">Branike Blocks \u2014 preh\u013ead a mo\u017enosti<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/\">Cel\u00e1 pr\u00edru\u010dka Branike<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/kompletny-sprievodca-hub\/\">Kompletn\u00fd sprievodca: Branike HUB<\/a> \u2014 odtia\u013e sa plugin in\u0161taluje a aktualizuje<\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/sprievodca-seo\/\">Kompletn\u00fd sprievodca: Branike SEO<\/a> \u2014 FAQ sch\u00e9ma z Accordionu a nastavenia pre vyh\u013ead\u00e1va\u010de<\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/sprievodca-lms\/\">Kompletn\u00fd sprievodca: Branike LMS<\/a> \u2014 chr\u00e1nen\u00fd obsah v kurzoch<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Ak v\u00e1m nie\u010do v tomto sprievodcovi ch\u00fdba, nap\u00ed\u0161te n\u00e1m \u2014 pr\u00edru\u010dku dop\u013a\u0148ame pod\u013ea toho, na \u010do sa p\u00fdtate.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Branike Blocks je sada 53 blokov a 87 hotov\u00fdch vzorov priamo do editora WordPress. Gal\u00e9ria aj v\u00fdpis pr\u00edspevkov s\u00fa jej s\u00fa\u010das\u0165ou \u2014 samostatn\u00e9 pluginy nepotrebujete. Sprievodca je zoraden\u00fd pod\u013ea toho, \u010do chcete na str\u00e1nke dosiahnu\u0165.<\/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":"1. \u010co to je a na \u010do sl\u00fa\u017ei Branike Blocks je sada stavebn\u00fdch blokov a hotov\u00fdch vzorov priamo do editora WordPress (Gutenberg). Namiesto skladania str\u00e1nky z desia","_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":[47],"kb_tag":[],"class_list":["post-6105","kb_article","type-kb_article","status-publish","hentry","kb_category-branike-blocks"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6105","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":4,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6105\/revisions"}],"predecessor-version":[{"id":6836,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6105\/revisions\/6836"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6105"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6105"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}