{"id":5019,"date":"2026-08-16T20:33:20","date_gmt":"2026-08-16T20:33:20","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/side-panel-right-overlay\/"},"modified":"2026-08-16T20:40:07","modified_gmt":"2026-08-16T20:40:07","slug":"side-panel-right-overlay","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/side-panel-right-overlay\/","title":{"rendered":"Side Panel &#8211; Right Overlay"},"content":{"rendered":"<div class=\"container\">\n<div class=\"text-center\">\n<a class=\"button button-xlarge button-rounded side-panel-trigger mb-5\" href=\"#\">Open Side Panel<\/a>\n<br>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-left-overlay\/\">Left &#8211; Overlay<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-left-push\/\">Left &#8211; Pushed<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-right-overlay\/\">Right &#8211; Overlay<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel\/\">Right &#8211; Pushed<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-light\/\">Light Background<\/a>\n<\/div>\n<div class=\"line\"><\/div>\n<div class=\"row col-mb-50\">\n<div class=\"col-12\">The slide-out side panel keeps secondary navigation, quick contact forms and promotions tucked neatly off-screen until your visitors call for them. Built on the responsive Canvas grid, this overlay variant glides in from the right without pushing the page, so your main content stays exactly where it is. Combine the panel with any column layout below to organise widgets, menus and calls to action while preserving a clean, distraction-free reading experience on every device.<\/div>\n<div class=\"col-md-6\">\n<h5 class=\"wp-block-heading\">Half Width<\/h5>\nThis half-width column pairs naturally with a sibling beside it, giving you balanced two-up sections for features, services or short introductions. The fluid Canvas grid reflows each half into a full stack on smaller screens automatically.<\/div>\n<div class=\"col-md-6\">\n<h5 class=\"wp-block-heading\">Half Width<\/h5>\nUse a second half-width column to mirror the first, perfect for comparisons, paired testimonials or an image set beside its caption. Spacing utilities keep the gap between columns consistent, and the layout adapts gracefully as the viewport narrows.<\/div>\n<div class=\"w-100\"><\/div>\n<div class=\"col-md-8\">\n<h5 class=\"wp-block-heading\">2\/3 Width<\/h5>\nA two-thirds column gives your primary content room to breathe while leaving space for a complementary sidebar alongside it. This asymmetric split is ideal for article bodies, detailed product descriptions or feature walkthroughs that need the lion&#8217;s share of the width. Pair it with the one-third column shown beside it to surface related links, contact details or a newsletter prompt, and the whole arrangement collapses into a single readable stack the moment screens get tight.<\/div>\n<div class=\"col-md-4\">\n<h5 class=\"wp-block-heading\">1\/3 Width<\/h5>\nA one-third column makes a tidy sidebar for the two-thirds block beside it, holding quick links, highlights or a compact call to action. It stays narrow on desktop and stacks beneath the main content on mobile for easy reading.<\/div>\n<div class=\"w-100\"><\/div>\n<div class=\"col-md-3\">\n<h5 class=\"wp-block-heading\">1\/4 Width<\/h5>\nA quarter-width column is great for compact feature boxes, icon callouts or stat cards arranged four across, stacking neatly on smaller screens.<\/div>\n<div class=\"col-md-9\">\n<h5 class=\"wp-block-heading\">3\/4 Width<\/h5>\nA three-quarter column dedicates almost the full row to your headline content, leaving just a slim quarter beside it for supporting elements. It suits long-form copy, rich media blocks or dashboards where the main story needs maximum width without going edge to edge. The narrow companion column is perfect for a glance-able summary, advert or set of secondary links, and because everything is built on the Canvas grid, the pairing rearranges itself into a clean vertical flow on phones and tablets automatically.<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-canvas","meta":{"footnotes":""},"class_list":["post-5019","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/comments?post=5019"}],"version-history":[{"count":2,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5019\/revisions"}],"predecessor-version":[{"id":5076,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5019\/revisions\/5076"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/media?parent=5019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}