Show Or Hide Side Panels In The Web Editor
Learn how to use sidebar visibility controls in the Web Editor to hide or restore both side panels, show only the left or right panel, and focus on the page canvas when needed.
This guide explains how to control side-panel visibility inside the Admin Web Editor.
Use it when you want to:
- create more space for the page canvas
- hide both side panels for a cleaner editing view
- keep only the left or right panel open
- understand why sidebar controls can behave differently on smaller screens
Before You Start
Open the Web Editor from System > Platform Customization.
Then open a page in the builder workspace.
Why Sidebar Visibility Controls Matter
The Web Editor uses side panels for tools and editing controls.
These panels are useful, but they can also reduce the amount of space available for the page canvas.
Use sidebar visibility controls when you want to focus more on the page itself while still keeping the tools close by.
Use The Main Sidebar Toggle
The main sidebar toggle controls the left and right side panels together.
Use it when you want a quick way to switch between:
- a full editing layout with both side panels visible
- a cleaner layout with both side panels hidden
Depending on the current state, the same control can also help restore both sidebars after they were hidden.
Use Left-Only Or Right-Only Sidebar Options
The sidebar visibility controls can also include extra options for controlling each side separately.
Use these options when you want to:
- keep only the left panel open for tools such as AI Assistant or Outline
- keep only the right panel open for block editing or theme work
- hide one panel without losing the other
This is useful when you need a little more space but still want one side of the builder available.
Understand Mixed Sidebar States
The builder can be in more than one sidebar state.
Examples include:
- both side panels visible
- both side panels hidden
- only the left panel visible
- only the right panel visible
OpenMirai can change the main sidebar icon or tooltip text to match the current state so you can understand what will happen before you click.
Use Sidebar Controls To Focus On The Canvas
If you are reviewing layout, spacing, or overall flow, hiding one or both side panels can make the canvas easier to inspect.
This is especially helpful when:
- the page has many sections
- you are checking visual balance across the full page
- you want to compare spacing without the side panels taking up room
After that, you can reopen the side panels and continue editing.
What To Expect On Smaller Screens
On smaller screens, sidebars can be more limited and may be closed by default.
Because of this:
- some sidebar controls can be unavailable
- the side panels may not stay open the same way they do on larger screens
- the builder may give priority to canvas space
If the sidebar buttons seem limited, this is usually because the current screen width is using a more compact layout.
What To Do Next
- hide both panels when you want the cleanest possible canvas view
- keep only the left panel open when you are using Outline or AI Assistant
- keep only the right panel open when you are adjusting settings for a selected block
- reopen both panels when you want the full editing workspace again
Use The Floating Toolbar In The Web Editor
Learn how to use the floating toolbar in the Web Editor to save changes, switch editor display style, adjust page width, change zoom, clear the canvas, and move through edit history more quickly.
Test Page Layout At Different Device Widths In The Web Editor
Learn how to use the breakpoint switcher in the Web Editor to preview your page at mobile, tablet, and desktop-style widths, manage extra breakpoint buttons, and understand active or disabled breakpoint states.