Use canvas settings to optimize your design process.
Canvas settings give you tools to fine-tune your design workflow and work with more efficiency and precision. You can open the canvas settings from the canvas bar in Webflow — click the canvas size (e.g., 1279px) next to the device breakpoints.
Settings
The following options are visible by default. Click Advanced settings to reveal more options.
Width and scale
-
Width lets you change the canvas size to a specific pixel width. This is helpful if you are optimizing for a specific viewport that is outside of the available breakpoints.
-
Scale lets you zoom in or out on the canvas. This is helpful if you're working on a smaller screen size than the breakpoint you need to work in.
Vision preview
Vision preview lets you simulate how site visitors with visual disabilities view your site and ensure your design doesn’t communicate or indicate important information only through color. Learn more about Vision preview.
Text zoom preview
Text zoom preview lets you simulate how your designs look for site visitors using text zoom in their browser or operating system preferences. Learn more about Text zoom preview.
Advanced settings
Click Advanced settings to expand the modal and reveal the following options.
Show element edges
Enable Show element edges to have an outline appear around each element that you hover over on the canvas.
Show empty elements
Show empty elements lets you control the visibility of empty elements (i.e., elements with no content or child elements inside) so you can view and select them on the canvas. Show empty elements is enabled by default.
To hide empty elements on the canvas, open Canvas settings and uncheck Show empty elements. When empty elements are hidden, you can still select them in the Navigator.
X-ray mode
X-ray mode is a grayscale view of your site’s canvas that outlines each element’s border, margin, and padding when the element is hovered over — giving you a clearer view of how elements are placed on the page.
To enable X-ray mode, open Canvas settings and check X-ray mode, or press Command (on Mac) or Control (on Windows) + Shift + X on your keyboard.
Rulers
Rulers help you accurately measure and align elements on the canvas. You have two options for rulers:
-
Pinned rulers — adds a static horizontal ruler at the bottom of the canvas, which you can use as a constant reference point for horizontal measurements
-
Pinned ruler & crosshair — adds a dynamic vertical line that intersects with the horizontal ruler, which you can move across the canvas to help horizontally and vertically align elements
To enable rulers, open Canvas settings and choose a ruler option. To disable rulers, choose No ruler. You can also press Shift + R on your keyboard to toggle rulers.
Guides
Guides (sometimes referred to as “grid overlays”) are visual alignment tools. You have two options for guides:
-
Line guide — adds vertical lines to the canvas
-
Filled guide — adds shaded vertical lines to the canvas
To enable guides, open Canvas settings and choose a guide option. To disable guides, choose No guide. You can also press Shift + G on your keyboard to toggle guides.
Toolbar
You can change the position of the canvas bar to be above the canvas (Top) or below the canvas (Bottom).