How To Use Off Canvas

An Off Canvas is a piece of content that sits outside the normal page and appears on top of it: a popup in the middle of the screen, or a sliding bar that moves in from an edge. Typical uses are a mobile menu panel, a newsletter or contact form, a notice for visitors, or a cart drawer in a shop.

You build the content in the Builder like a page. Its options decide how it looks, on which pages it is loaded, what opens it and how often a visitor sees it.

In this article: Create an Off Canvas · Type, Size and Position · Choose the Pages With Conditions · Open It With Triggers · Open It From a Menu Item or Button · Closing, Frequency and Other Rules · Related

Create an Off Canvas

  1. Go to Tirenoa › Off Canvas.
  2. Type a name into Enter Off Canvas Name and click Create New Off Canvas. The new item opens in the Builder.
  3. Add containers, columns and elements as on any page.
  4. Set the options in the Off Canvas Options described below and save.

The Off Canvas screen lists all items with their conditions. Each row offers Edit, Live Builder, Clone and Trash.

Note: If the menu entry is missing, the feature is switched off. An administrator can turn on Tirenoa Off Canvas under Tirenoa › Options › Post Types.

Type, Size and Position

The General tab starts with Off Canvas Type. Each type has its own set of options.

Popup Sliding Bar
Where it appears Horizontal Position (Start, Center, End) and Vertical Position (Top, Center, Bottom) Position: Top, Right, Bottom or Left edge of the window
Size Width, and Height with Fit With Content, Full Height or Custom Height Width for left and right bars, Height for top and bottom bars
Page behind it Covered by the overlay Transition: Overlap lays the bar over the page, Push moves the page aside (not for bottom bars)
Starting state Closed Default State: Closed or Open

The other design tabs work the same for both types:

  • Design: background color and image, scrollbar, border, margin, padding, Z-Index and box shadow.
  • Overlay: switch the dimmed layer behind the Off Canvas on or off, set its color or image, and decide with Page Scrollbar whether the page can still scroll.
  • Animation: entrance and exit animation with direction, speed and timing.

Choose the Pages With Conditions

The Conditions tab decides on which pages the Off Canvas is loaded. An Off Canvas that is not loaded on a page cannot be opened there by any trigger.

  • Enable Conditions set to No (the default): the Off Canvas is only loaded on pages where a menu item or a link opens it, as described under “Open It From a Menu Item or Button”.
  • Enable Conditions set to Yes without any condition: it is loaded on the entire site.
  • Enable Conditions set to Yes with conditions: click Conditions and include or exclude pages, posts, archives, the search results or the 404 page, in the same window the Layout Builder uses.

Open It With Triggers

Triggers open the Off Canvas automatically. Set each one you need to Yes on the Triggers tab. Triggers only work on pages where the Off Canvas is loaded, so enable conditions for those pages.

Trigger Opens the Off Canvas
On Page Load As soon as the page has loaded
Time On Page After the number of seconds in Time On Page Duration
On Scroll When the visitor scrolls up or down (Scroll Direction) to a Scroll Position or to an element you name in Scroll Element
On Click When the visitor clicks the element named in Element Selector, for example .open-offer or #contact-button
Exit Intent When the visitor is about to leave the page
After Inactivity After the visitor has done nothing for the seconds in Inactivity Duration
After Product Is Added to Cart After a WooCommerce product was added to the cart

Open It From a Menu Item or Button

From a menu item:

  1. Go to Appearance › Menus and open the menu your header uses.
  2. In the Tirenoa Special Menu Items box tick Off Canvas Toggle and click Add to menu. Keep the item on the top level of the menu.
  3. Open the new item, click Tirenoa Menu Options, choose your item under Off Canvas and save the menu.

Note: Special menu items only work in a menu shown by the Menu element of the Builder, for example in a header built with layouts.

From a button or any other element with a link option:

  1. Open the element and click the Dynamic Data icon next to its link option.
  2. In the Off Canvas group choose Toggle Off Canvas or Open Off Canvas.
  3. Select the Off Canvas in the box that appears and save.

Close Off Canvas from the same group turns a button inside the Off Canvas into a close button.

Closing, Frequency and Other Rules

The Close tab controls how visitors leave: Close On Overlay Click, Close On Anchor Click, Close With ESC Key, Automatically Close After Time, and the Close Button with its position, color, size, a custom icon and Show Close Button After Time.

The Rules tab limits when and to whom the Off Canvas is shown:

  • Frequency: Show every time, Show every time until user closes it, Show once, Show up to x times, Show every session, Show every day, Show every week, Show every month, or Show on specific days.
  • Published After and Published Until: a start and end date and time, in the time zone of the site.
  • Show After X Page Views and Show After X Sessions: wait until the visitor has seen a number of pages or has come back a number of times.
  • Show When Arriving From: Internal Links, External Links or Search Engine.
  • Users (All Users, Logged in users, Logged out users) with User Roles, and Device (Desktop, Tablet, Mobile).

Frequency, page views and sessions are counted in the visitor’s own browser storage. Nothing is sent to another service.

Note: Logged-in users who may publish posts (authors, editors, administrators) see an Off Canvas even outside its publishing dates. Test date and user rules in a private browser window where you are logged out.