Skip to content
NovaSpark Docs v1.0.0
Live Demo Support

Build

Popup & Offcanvas

Popups and slide-in panels, designed in Elementor and opened by whatever you choose.

Both are Global Blocks that sit above the page rather than in it. A Popup appears centred over the content; an Offcanvas slides in from an edge.

Popups #

Building a popup, start to finish.
  1. Create the blockCreate Block, with Section Type set to Popup.
  2. Design itKeep it small. A popup is a message, not a page.
  3. Set its sizeIn Section Settings, set Width and Min Height. Both accept any CSS value, so 600px and 90vw both work.
  4. Decide how it opensEither automatically, or from a trigger — both below.

Opening automatically

Turn on Auto-open on Page Load in Section Settings.

The Section Settings box on a Popup block, showing width, min height, auto-open, delay, device toggles and frequency.
Popup sizing and auto-open behaviour live in Section Settings.
SettingWhat it does
DelaySeconds before it appears. A few seconds beats appearing instantly.
Show on Desktop / Tablet / MobileWhich screen sizes it may open on. Turning it off on mobile is common.
FrequencyHow often the same visitor sees it: Every page load, Once per session, Once every N days, or Once, ever.
DaysThe N, when frequency is set to days.

Every page load is rarely the right choice. It shows the popup again on every single page a visitor opens. Once per session is almost always what people actually mean.

Use Display Conditions to control where it can appear — a discount offer on the shop only, say. Frequency controls how often, conditions control where.

Offcanvas panels #

Building an offcanvas panel, and wiring up its trigger.

Same idea, sliding in from an edge. Typical uses are a mobile navigation drawer, a cart, or a filter panel.

  1. Create the blockWith Section Type set to Offcanvas.
  2. Set its sizeWidth and Height in Section Settings, both accepting any CSS value.
  3. Design the contentsA menu, a search field, contact details — whatever the drawer is for.
  4. Add a triggerOffcanvas panels do not open on their own. See below.

Opening them with a Trigger #

The NovaKit Trigger widget is a button that opens a popup or offcanvas.

The NovaKit Trigger widget selected in Elementor with its dropdown open, listing available popup and offcanvas blocks.
NovaKit Trigger opens a block you pick from the dropdown.
  1. Edit where the button belongsUsually the header, so drag it into your header block.
  2. Add NovaKit TriggerSearch the widget panel for NovaKit Trigger.
  3. Choose what it opensPick your popup or offcanvas block from the dropdown.
  4. Style itGive it an icon or a label like any other button.

A block with no way to open it is invisible. If an offcanvas never appears, the usual cause is no trigger pointing at it — unlike popups, they have no auto-open.

You can also open one from any element: give the element a link and use the Trigger Link dynamic tag, which produces the right link for a chosen block. Useful for turning a menu item or an image into an opener.

Esc