{"id":5011,"date":"2026-08-16T20:33:17","date_gmt":"2026-08-16T20:33:17","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/side-panel\/"},"modified":"2026-08-20T18:42:20","modified_gmt":"2026-08-20T18:42:20","slug":"side-panel","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/side-panel\/","title":{"rendered":"Side Panel"},"content":{"rendered":"
\n
\nOpen Side Panel<\/a>\n
\nLeft – Overlay<\/a>\nLeft – Pushed<\/a>\nRight – Overlay<\/a>\nRight – Pushed<\/a>\nLight Background<\/a>\n<\/div>\n
<\/div>\n
\n
The side panel reveals extra content without crowding your main layout. Slide it in from the left or right, choosing an overlay or a push effect, and fill it with menus, search fields, shopping carts, or rich media. Built on the fully responsive Canvas grid system, every panel adapts cleanly across desktops, tablets, and phones, keeping navigation tidy and your primary content firmly in focus on any screen size you choose to target today.<\/div>\n
\n
Half Width<\/h5>\nSplit your layout into two equal halves and place complementary content side by side. This half-width column keeps text, images, and calls to action balanced, then stacks gracefully on smaller screens for comfortable mobile reading.<\/div>\n
\n
Half Width<\/h5>\nPair this half-width column with its sibling to create a clean, symmetrical section. Ideal for feature comparisons, intro paragraphs, or image and text pairings that collapse neatly into a single column on phones.<\/div>\n
<\/div>\n
\n
2\/3 Width<\/h5>\nThis two-thirds column gives your primary message all the space it deserves while still leaving room for a supporting sidebar alongside it. Use it for detailed feature descriptions, long-form copy, or media-rich showcases. The fluid Canvas grid keeps proportions intact on large displays and reflows the wider and narrower columns into a single readable stack once the viewport shrinks to tablet or mobile widths for you.<\/div>\n
\n
1\/3 Width<\/h5>\nA one-third column works perfectly as a sidebar beside wider content. Drop in quick links, highlights, or a short callout, and it lines up neatly until the layout stacks for smaller screens.<\/div>\n
<\/div>\n
\n
1\/4 Width<\/h5>\nThis compact one-quarter column suits small widgets, stats, or icon blocks. Four of them sit evenly in a row, then stack cleanly on mobile screens for you.<\/div>\n
\n
3\/4 Width<\/h5>\nThe three-quarter column carries the bulk of your content while a slim partner column handles secondary details. It is the workhorse layout for articles, product pages, and dashboards alike. Like every Canvas column it scales fluidly across breakpoints, holding its proportion on wide monitors and folding into a clean single-column flow the moment the screen narrows toward tablet and mobile viewport sizes here.<\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Explore more Elements<\/h4>\n<\/div>\n\n
<\/i>
Shop<\/h5><\/a><\/div>
<\/i>
Blog<\/h5><\/a><\/div>
<\/i>
Events<\/h5><\/a><\/div>
<\/i>
Contact Forms<\/h5><\/a><\/div>
<\/i>
Modal onLoad<\/h5><\/a><\/div>
<\/i>
Side Panel<\/h5><\/a><\/div>
<\/i>
Animations<\/h5><\/a><\/div>
<\/i>
Buttons<\/h5><\/a><\/div>
<\/i>
Carousel<\/h5><\/a><\/div>
<\/i>
Clients<\/h5><\/a><\/div>
<\/i>
Columns<\/h5><\/a><\/div>
<\/i>
Counters<\/h5><\/a><\/div>
<\/i>
Read MoreElement<\/span><\/h5><\/a><\/div>
<\/i>
Dividers<\/h5><\/a><\/div>
<\/i>
Icon Boxes<\/h5><\/a><\/div>
<\/i>
Gallery<\/h5><\/a><\/div>
<\/i>
Headings<\/h5><\/a><\/div>
<\/i>
Icon Lists<\/h5><\/a><\/div>
<\/i>
Gradients<\/h5><\/a><\/div>
<\/i>
Lightbox<\/h5><\/a><\/div>
<\/i>
Overlays<\/h5><\/a><\/div>
<\/i>
File Uploads<\/h5><\/a><\/div>
<\/i>
Lists & Cards<\/h5><\/a><\/div>
<\/i>
Maps<\/h5><\/a><\/div>
<\/i>
Media Embeds<\/h5><\/a><\/div>
<\/i>
Modal Boxes<\/h5><\/a><\/div>
<\/i>
Notifications<\/h5><\/a><\/div>
<\/i>
Navigations<\/h5><\/a><\/div>
<\/i>
Pagination<\/h5><\/a><\/div>
<\/i>
Progress Bars<\/h5><\/a><\/div>
<\/i>
Shape Dividers<\/h5><\/a><\/div>
<\/i>
Pricing<\/h5><\/a><\/div>
<\/i>
Process Steps<\/h5><\/a><\/div>
<\/i>
Promo Boxes<\/h5><\/a><\/div>
<\/i>
Blockquotes<\/h5><\/a><\/div>
<\/i>
Responsive<\/h5><\/a><\/div>
<\/i>
Sections<\/h5><\/a><\/div>
<\/i>
Social Icons<\/h5><\/a><\/div>
<\/i>
Hover Animations<\/h5><\/a><\/div>
<\/i>
Alerts<\/h5><\/a><\/div>
<\/i>
Styled Icons<\/h5><\/a><\/div>
<\/i>
Tables<\/h5><\/a><\/div>
<\/i>
Tabs<\/h5><\/a><\/div>
<\/i>
Testimonials<\/h5><\/a><\/div>
<\/i>
Thumbnails<\/h5><\/a><\/div>
<\/i>
Toggles<\/h5><\/a><\/div>
<\/i>
Lazy Loading<\/h5><\/a><\/div>
<\/i>
Flip Cards<\/h5><\/a><\/div>
<\/i>
Cascading Images<\/h5><\/a><\/div>
<\/i>
Before\/After<\/h5><\/a><\/div>
<\/i>
Video Facade<\/h5><\/a><\/div>
<\/i>
GDPR<\/h5><\/a><\/div>
<\/i>
Cart Quantity<\/h5><\/a><\/div>
<\/i>
Circle Stack<\/h5><\/a><\/div>
<\/i>
Image Sliders<\/h5><\/a><\/div>
<\/i>
Ticker<\/h5><\/a><\/div>
<\/i>
AJAX Button<\/h5><\/a><\/div>
<\/i>
Conditional<\/h5><\/a><\/div>
<\/i>
Code Highlighter<\/h5><\/a><\/div>
<\/i>
Custom Cursor<\/h5><\/a><\/div>
<\/i>
Hover Parallax<\/h5><\/a><\/div>
<\/i>
Mode Switcher<\/h5><\/a><\/div>
<\/i>
Image Hotspots<\/h5><\/a><\/div>
<\/i>
Filters<\/h5><\/a><\/div>