{"id":3,"date":"2026-09-11T03:57:41","date_gmt":"2026-09-11T03:57:41","guid":{"rendered":"https:\/\/demo.gatilab.com\/pbb\/?page_id=3"},"modified":"2026-09-11T03:57:41","modified_gmt":"2026-09-11T03:57:41","slug":"demo","status":"publish","type":"page","link":"https:\/\/demo.gatilab.com\/pbb\/","title":{"rendered":"Page Blocks Builder Demo"},"content":{"rendered":"<style>.pbb-demo{--pbb-bg:var(--wp--preset--color--base,#fff);--pbb-alt:var(--wp--preset--color--base-2,#f5f5f5);--pbb-ink:var(--wp--preset--color--contrast,#0a0a0a);--pbb-muted:var(--wp--preset--color--contrast-2,#525252);--pbb-line:var(--wp--preset--color--contrast-3,#d4d4d4);--pbb-accent:var(--wp--preset--color--primary,#115e59);background:var(--pbb-bg);color:var(--pbb-ink);font-size:17px;line-height:1.6}.pbb-demo[data-mode=dark]{--pbb-bg:#111716;--pbb-alt:#1c2523;--pbb-ink:#f5faf8;--pbb-muted:#b7c5c0;--pbb-line:#42524d;--pbb-accent:#8cddd0;color-scheme:dark}.pbb-demo *{box-sizing:border-box}.pbb-demo [hidden]{display:none!important}:where(.pbb-demo) :where(h1,h2,h3,p,ul){margin:0}.pbb-demo a{color:inherit;text-underline-offset:4px}.pbb-demo button,.pbb-demo input{font:inherit}.pbb-demo button{cursor:pointer}.pbb-demo :focus-visible{outline:3px solid var(--pbb-accent);outline-offset:4px}.pbb-wrap{width:min(1180px,100% - 64px);margin-inline:auto}.pbb-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--pbb-line);gap:20px}.pbb-brand{font-size:21px;font-weight:600;text-decoration:none}.pbb-navlinks{display:flex;align-items:center;gap:24px;font-size:14px}.pbb-text-button{background:none;border:0;color:inherit;min-height:44px;padding:8px}.pbb-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;padding:88px 0}.pbb-demo h1{font-size:68px;line-height:1.06;max-width:12ch;font-weight:500;letter-spacing:-.025em}.pbb-demo h2{font-size:45px;line-height:1.14;font-weight:500;max-width:20ch}.pbb-demo h3{font-size:24px;line-height:1.3;font-weight:500}.pbb-lede{font-size:21px;max-width:47ch;margin-top:28px;color:var(--pbb-muted)}.pbb-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}.pbb-demo .pbb-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--pbb-accent);border-radius:4px;background:var(--pbb-accent);color:var(--pbb-bg);padding:12px 22px;text-decoration:none;font-size:17px;font-weight:500}.pbb-demo .pbb-button--plain{background:transparent;color:var(--pbb-ink);border-color:var(--pbb-line)}.pbb-note{font-size:14px;color:var(--pbb-muted);margin-top:18px}.pbb-workbench{border:1px solid var(--pbb-line);border-radius:12px;overflow:hidden}.pbb-workbench-head{padding:15px 22px;border-bottom:1px solid var(--pbb-line);display:flex;justify-content:space-between;font-size:14px}.pbb-code{margin:0;padding:24px;background:var(--pbb-alt);font-size:14px;line-height:1.8;overflow:auto}.pbb-code em{color:var(--pbb-accent);font-style:normal}.pbb-sample{padding:28px}.pbb-sample p{color:var(--pbb-muted);font-size:14px;margin-top:10px}.pbb-section{padding:72px 0;border-top:1px solid var(--pbb-line)}.pbb-section-heading{display:flex;justify-content:space-between;gap:40px;align-items:start;margin-bottom:36px}.pbb-section-heading p{max-width:44ch;color:var(--pbb-muted)}.pbb-features{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}.pbb-feature{padding-top:22px;border-top:1px solid var(--pbb-line)}.pbb-feature p{margin-top:16px;color:var(--pbb-muted)}.pbb-estimator{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;background:var(--pbb-alt);padding:36px;border-radius:12px}.pbb-estimator label{display:block;margin-bottom:24px}.pbb-estimator input{display:block;width:100%;margin-top:12px;accent-color:var(--pbb-accent);min-height:30px}.pbb-estimator output{display:block;font-size:45px;font-weight:500;color:var(--pbb-accent);line-height:1.2;margin-top:16px}.pbb-estimator small{display:block;font-size:14px;color:var(--pbb-muted);margin-top:12px}.pbb-faq{display:grid;grid-template-columns:1fr 1.3fr;gap:72px}.pbb-faq details{border-bottom:1px solid var(--pbb-line);padding:20px 0}.pbb-faq summary{cursor:pointer;font-weight:500;min-height:44px}.pbb-faq details p{color:var(--pbb-muted);margin:8px 0 12px}.pbb-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px 0;border-top:1px solid var(--pbb-line);font-size:14px}.pbb-shared{padding:36px;background:var(--pbb-alt);border-radius:12px;margin:24px 0}.pbb-shared p{margin-top:14px;color:var(--pbb-muted)}.pbb-workspace{position:fixed;inset:0;z-index:999999;background:#fff;color:#17211e;display:flex;flex-direction:column;font-size:14px}.pbb-workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid #cbd4d0;flex-wrap:wrap}.pbb-workspace-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pbb-workspace button{font:inherit;min-height:40px;border:1px solid #a3b4ac;border-radius:4px;background:#fff;color:#17211e;padding:8px 14px}.pbb-workspace button:disabled{opacity:.45;cursor:default}.pbb-workspace-status{padding:9px 20px;background:#f1f6f3;min-height:40px}.pbb-workspace-mount{flex:1;min-height:0;display:flex}.pbb-workspace iframe{display:block;width:100%;height:100%;border:0;flex:1}.pbb-workspace-restart{padding:24px}.pbb-demo-open{overflow:hidden}@media(max-width:800px){.pbb-wrap{width:calc(100% - 40px)}.pbb-hero{grid-template-columns:1fr;gap:40px;padding:56px 0}.pbb-demo h1{font-size:45px;max-width:15ch}.pbb-demo h2{font-size:32px}.pbb-navlinks{gap:8px}.pbb-navlinks>a{display:none}.pbb-brand{font-size:17px}.pbb-section{padding:48px 0}.pbb-section-heading,.pbb-footer{display:block}.pbb-section-heading p{margin-top:20px}.pbb-features,.pbb-estimator,.pbb-faq{grid-template-columns:1fr;gap:28px}.pbb-estimator{padding:24px}.pbb-footer p{margin-bottom:12px}.pbb-workspace-bar{padding:8px 12px;gap:8px}.pbb-workspace-status{font-size:12px}.pbb-workspace-tools{gap:5px}.pbb-workspace button{padding:8px;font-size:12px}}@media(prefers-reduced-motion:reduce){.pbb-demo *{scroll-auto!important;transition:none!important}}.pbb-demo :is(h1,h2,h3){color:var(--pbb-ink)}.pbb-workspace-bar{order:3;flex:0 0 auto;min-height:36px;padding:2px 12px;justify-content:flex-end;gap:16px;font-size:12px;border-top:1px solid #dce3df;border-bottom:0;background:#f8faf9;flex-wrap:nowrap}.pbb-workspace-bar button{min-height:30px;padding:4px 8px;font-size:12px;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px}.pbb-workspace-status{order:0;display:flex;align-items:center;gap:12px;padding:4px 12px;font-size:12px;min-height:0;flex-shrink:0}.pbb-workspace-status [data-status]{flex:1}.pbb-workspace-status button{flex-shrink:0;min-height:32px;width:32px;padding:0;border:0;background:transparent;font-size:21px;line-height:1}.pbb-workspace-mount{order:1}.pbb-workspace-restart{order:2}@media(pointer:coarse){.pbb-workspace-bar button,.pbb-workspace-status button{min-height:44px}.pbb-workspace-status button{width:44px}}<\/style>\n<div class=\"pbb-demo\" data-mode=\"light\"><div class=\"pbb-wrap\"><header class=\"pbb-nav\"><a class=\"pbb-brand\" href=\"\/pbb\/\">Page Blocks Builder<\/a><nav class=\"pbb-navlinks\" aria-label=\"Demo navigation\"><a href=\"#examples\">Examples<\/a><a href=\"#questions\">Questions<\/a><button type=\"button\" class=\"pbb-text-button\" data-color-mode aria-pressed=\"false\">Dark appearance<\/button><\/nav><\/header> <section class=\"pbb-hero\" aria-labelledby=\"pbb-title\"><div><h1 id=\"pbb-title\">Your code.<br>Your canvas.<\/h1><p class=\"pbb-lede\">Try Page Blocks Builder on a real WordPress page. Edit a section, reuse it, and see your changes with the Osmium theme.<\/p><div class=\"pbb-actions\"><button type=\"button\" class=\"pbb-button\" data-launch disabled>Open the builder <span aria-hidden=\"true\">&nbsp;\u2197<\/span><\/button><a class=\"pbb-button pbb-button--plain\" href=\"#examples\">Explore examples<\/a><\/div><p class=\"pbb-note\">No signup. Automatic demo access. Yours for 2 hours.<\/p><\/div><div class=\"pbb-workbench\"><div class=\"pbb-workbench-head\"><span>A Page Block<\/span><span>HTML \u00b7 CSS \u00b7 JS<\/span><\/div><pre class=\"pbb-code\"><code><em>&lt;section class=\"your-idea\"&gt;<\/em>\n  &lt;h2&gt;Build something useful.&lt;\/h2&gt;\n  &lt;p&gt;Make every section yours.&lt;\/p&gt;\n<em>&lt;\/section&gt;<\/em>\n\n.your-idea { padding: 2rem; }<\/code><\/pre><div class=\"pbb-sample\"><h3>Build something useful.<\/h3><p>A section you can edit, save to your library, and place on another page.<\/p><\/div><\/div><\/section> <section class=\"pbb-section\" id=\"examples\" aria-labelledby=\"examples-title\"><div class=\"pbb-section-heading\"><h2 id=\"examples-title\">Start With a Small Edit.<\/h2><p>Your demo opens with sample content already in place. Change one thing, save it, and see what happens.<\/p><\/div><div class=\"pbb-features\"><article class=\"pbb-feature\"><h3>Make It Yours<\/h3><p>Change the headline in HTML, adjust the section&#8217;s CSS, and preview it at different widths.<\/p><\/article><article class=\"pbb-feature\"><h3>Reuse a Section<\/h3><p>Open the library and edit the shared announcement. Compare its linked placement with the shortcode example.<\/p><\/article><article class=\"pbb-feature\"><h3>Add an Interaction<\/h3><p>Try the calculator below. Its working copy is waiting inside your demo, with editable JavaScript.<\/p><\/article><\/div><\/section> <section class=\"pbb-section\" aria-labelledby=\"interactive-title\"><div class=\"pbb-section-heading\"><h2 id=\"interactive-title\">HTML, CSS, and a Little JavaScript.<\/h2><p>Use the sliders to plan section placements. This live example is built with Page Blocks Builder.<\/p><\/div><div class=\"pbb-estimator\" data-estimator><div><label>Sections per page: <strong data-sections-label>6<\/strong><input aria-label=\"Sections per page\" data-sections type=\"range\" min=\"1\" max=\"20\" value=\"6\"><\/label><label>Pages on your site: <strong data-pages-label>5<\/strong><input aria-label=\"Pages on your site\" data-pages type=\"range\" min=\"1\" max=\"30\" value=\"5\"><\/label><\/div><div><p>Section placements<\/p><output data-total aria-live=\"polite\">30<\/output><small>Sections \u00d7 pages. Sample planning math, not a performance claim.<\/small><\/div><\/div><\/section> <section class=\"pbb-section pbb-faq\" id=\"questions\" aria-labelledby=\"questions-title\"><div><h2 id=\"questions-title\">Before You Try It.<\/h2><p class=\"pbb-lede\">A fresh workspace. Room to experiment.<\/p><\/div><div><details><summary>Do I need an account?<\/summary><p>No signup or login form. The demo signs you in automatically. If you need the demo credentials inside the workspace, both the username and password are <code>demo<\/code>.<\/p><\/details><details><summary>What happens after 2 hours?<\/summary><p>Your session ends and its workspace is discarded. Closing or reloading this page also ends the demo. Copy any code you want to keep before leaving.<\/p><\/details><details><summary>Can other visitors see my changes?<\/summary><p>No. Each launch creates a separate WordPress workspace in your browser. Your changes do not alter this site or another visitor&#8217;s demo.<\/p><\/details><details><summary>What can I try?<\/summary><p>The page builder, HTML\/CSS\/JS editors, responsive previews, reusable library, linked blocks, shortcodes, and Osmium styling. External AI services, outgoing email, plugin installation, and PHP snippets are disabled in this demo.<\/p><\/details><\/div><\/section> <footer class=\"pbb-footer\"><p>Page Blocks Builder 3.0.0 \u00b7 Osmium 0.3.0<\/p><a href=\"https:\/\/github.com\/wpgaurav\/page-blocks-builder\" rel=\"nofollow\">View the project \u2197<\/a><\/footer><\/div> <div class=\"pbb-workspace\" id=\"pbb-workspace\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Disposable Page Blocks Builder demo\" hidden><div class=\"pbb-workspace-bar\" aria-label=\"Demo session\"><span data-timer>2-hour session<\/span><button type=\"button\" data-end>End demo<\/button><\/div><div class=\"pbb-workspace-status\" data-notice><span data-status role=\"status\"><\/span><button type=\"button\" data-dismiss-status aria-label=\"Dismiss status message\">\u00d7<\/button><\/div><div class=\"pbb-workspace-mount\" data-mount><\/div><div class=\"pbb-workspace-restart\"><button type=\"button\" data-restart hidden>Start a fresh demo<\/button><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank","meta":{"footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":8,"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/pages\/3\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/demo.gatilab.com\/pbb\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}