Build

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 can sit anywhere on the screen, with or without an overlay; an Offcanvas slides in from an edge.

Popups #

A popup can be a centred message, a corner notice, a bar across the page, a side panel or a full screen: newsletters, offers, logins, announcements or cookie consent. You design it in Elementor, and everything about how it behaves is in Elementor too, changing on the canvas as you adjust it.

1. Create the blockCreate Block, with Section Type set to Popup, then open it in Elementor.
2. Design itBuild the contents with any widgets. Keep it small: a popup is a message, not a page.
3. Set how it looks and behavesClick the settings icon in Elementor’s top bar. The Popup sections are explained below.
4. Decide how it opensAutomatically, with triggers, or from a button.
5. Decide whereSet its Display Conditions. A discount offer on the shop only, say.
6. Check itPublish and open Preview Changes: it shows the popup as it will sit on the screen, and plays its entrance.

Position, overlay and closing

Position and every size can be set per device, so a centred popup on a desktop can be a bottom bar on a phone. Use the device icon beside a control to switch.

The panel only shows what applies to your choices, so options appear and disappear as you go. A top bar has no Width because it is always as wide as the screen, and a popup attached to a trigger has no Overlay or Close Button. With a different position on another device, you see everything either position needs.

Opening automatically

Popup: Opening lists what can open it. Turn on any of them and it opens for whichever comes first. With none on, only a Trigger opens it.

Who sees it, and how often

Popup: Who & How Often limits a popup that opens by itself, so it appears once one of the options above is on. A Trigger button or a click on an element can always open it, and neither one counts.

Only one popup opens by itself at a time. Another that is ready waits until the first is closed, so a visitor is never met by two at once. A cookie consent popup always goes first.

Attached to a trigger: dropdowns and submenus

Choose Attached to Trigger, the last tile in Position, and the popup opens beside whatever opened it, instead of on the screen. This is how you build a dropdown on any link, button or icon, with anything inside it, since you design it in Elementor like any popup.

Only a Trigger, or When an Element Is Clicked, opens it, since it needs something to sit beside. It closes by itself, so it has no overlay or close button.

1. Create a Popup blockDesign the menu or panel inside it.
2. Attach itIn Popup: Position & Size, choose Attached to Trigger. It sizes itself to its content; set a Width or Max Width if you want.
3. Connect the triggerOn the link, button or icon, set a Trigger to Open and pick this popup. Clicking again closes it.
4. For a submenuCreate another attached popup, and put a Trigger for it inside the first. It stays open with its parent and closes with it, at any depth. Set its Side to After and Open On to Hover.

Building a menu

For rows with an icon, a label, text on the right or a chevron, build each row from a Container. A single button cannot hold all of that, and a Container takes any layout and its own hover background.

1. Make the rowAdd a Container inside the popup. Set Direction to Row, Justify Content to Space Between and Align Items to Center, then give it padding, a radius and a background under Style → Background → Hover.
2. Fill itPut the icon and label in one inner Container on the left, and the secondary text and chevron in another on the right.
3. Make it do somethingFor a row that goes to a page, set the Container's HTML Tag to a and fill in Link. For a row that opens a submenu, use Advanced → NovaKit Settings → Trigger, set the action to Open and pick the submenu's popup.
4. Add the submenuMake it another Attached to Trigger popup, with Side set to the side you want it on.

A row with a Trigger and no link inside works from the keyboard by itself. For a disabled row, dim a Container and leave out both the link and the Trigger: it does nothing when clicked, and the arrow keys skip it. A row holding a switch or a form field should not be a link, since a link cannot contain another control.

On a phone, a small dropdown is often the wrong shape. Set Position to Bottom Bar for mobile only, and the same popup opens as a sheet from the bottom edge, with an overlay.

Keyboard: opening with Enter or Space moves focus into it. Arrow keys move through the items, Home and End jump to either end, the right arrow opens a submenu and the left arrow leaves it. Esc closes it and returns to the trigger. Tabbing past the end closes it.

Styling an open trigger: while its popup is open, the trigger has the class nk-popup-trigger-open and aria-expanded="true", for your own Custom CSS.

Popups from the Library

A popup inserted from the Library brings its look and its opening rules, but not its Display Conditions, because where a popup shows belongs to your site. So one that opens by itself shows across your whole site as soon as it is inserted: set its Display Conditions straight away if that is not what you want.

Offcanvas panels #

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.

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 itChoose a variant, including Link for no box at all. Add an icon, turn on Full Width, and use Content Justify to place the text and icon, such as Space Between for a label on the left and an arrow on the right.

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. The same tag can also fill in a form field: see Quick prompts.

Or skip the link: any widget or Container can be the opener itself. Open its Advanced → NovaKit Settings → Trigger, set the action to Open, and pick the block. Handy for making a whole card clickable. If the element has no link or button inside it, NovaKit makes it reachable by keyboard, so Tab, Enter and Space all work.

What a trigger can do