Canvas Docs

Site-Wide Settings

A few settings change the whole site at once: whether pages run edge to edge or sit in a frame, whether visitors can switch to dark mode, what the search returns, how the WordPress login page looks, and whether content animates in as visitors scroll. Each one starts at the behaviour you already have, so nothing changes until you choose to.

How To Use A Boxed Layout

Starting screenCanvasTheme OptionsGeneral, then Layout.

Choose Boxed under Site Layout. On wide screens the site sits in a centred frame with a soft shadow, and the background shows around it. Set Background Color, and optionally a Background Image: choose Tile for a pattern, Cover for one large image, or Fixed for an image that stays still while the page scrolls. On phones and tablets the frame fills the screen, so a boxed site reads the same there as a stretched one.

How To Let Visitors Switch To Dark Mode

Starting screenCanvasTheme OptionsColor Scheme, then Dark Mode.

  1. Switch on Dark Mode Switch. Visitors can now flip between the light and dark colour schemes, and their choice is remembered in their browser and applied before the page appears, so a returning visitor never sees a flash of the wrong scheme.
  2. Choose the Default Scheme a visitor sees until they choose: Light keeps the scheme each page is designed with, Dark starts every visitor in dark mode, and Device setting follows the visitor's operating system.
  3. Choose where the switch appears under Switch Placement. The floating button sits in a bottom corner of every page, set by Floating Button Position; the header switch is the Canvas Color Scheme Toggle block, which you add to your header in the Site Editor, next to the search or cart icons.

While the switch is on, it replaces the Adaptive Color Scheme option; choose Device setting as the default to keep following the operating system. If you set a dark version of your logo in General, it shows in dark mode.

How To Choose What The Site Search Returns

Starting screenCanvasTheme OptionsGeneral, then Search.

Tick the content types the search should return, for example only Posts and Products. Leave every box unticked to search everything WordPress searches by default. A search form that already asks for one type, such as a product search in the shop sidebar, keeps its own choice.

How To Brand The Login Page

Starting screenCanvasTheme OptionsGeneral, then Login Page.

Switch on Brand the Login Page. The WordPress logo is replaced by your site logo and links to your home page. To fine-tune it:

  • Login Logo uses a different logo from the site's, such as a white version for a dark background.
  • Logo Width sets its size.
  • Background Color and Background Image dress the screen behind the form.
  • Button and Link Color colours the Log In button and the links; leave it empty to use the Primary Color from Colors.

How To Control Scroll Animations

Starting screenCanvasTheme OptionsMisc, then Animations.

Many designs fade or slide content in as it scrolls into view. Visitors whose device asks for less motion already see that content still, without any setting. Turn off Entrance Animations to keep the content still for everyone, or change Animation Duration to make every entrance faster or slower; 1000 is one second.

Pitfalls

  • The boxed frame does not show. The frame appears on screens 1200 pixels wide and above; on narrower screens the page fills the width by design.
  • The login logo is hard to see. Your logo is dark on a dark background. Upload a light version as Login Logo.
Was this page helpful?