Build
Elementor
How NovaSpark extends Elementor — its own widgets, template library, dynamic content and motion tools.
NovaSpark is built on the free version of Elementor. Nothing in the theme needs Elementor Pro. What it adds is a set of widgets, a template library, dynamic content sources, and motion controls that appear inside the editor you already use.
The NS widget categories #
Open the widget panel and NovaSpark’s widgets appear in three groups:
| Category | Contains |
|---|---|
| NovaKit Elements | General-purpose widgets — headings, buttons, menus, sliders, pricing, counters. |
| NovaKit Post Elements | Widgets that read from the current post. Use these in single-post templates. |
| NovaKit Form | Form fields and form shells. |
Every widget is listed in the Widget reference.
The NovaKit Library #
Inside the Elementor editor, next to the and folder buttons, is a round NS button. It opens a library of ready-made designs you can insert and then edit.
| Tab | What it holds |
|---|---|
| Blocks | Single sections — a hero, a team grid, an FAQ, a call to action. |
| Pages | Whole page layouts. |
| Templates | Structural starting points for Global Blocks — headers, cards, popups, mega menus. |
Inserting a library item copies it into your page. Editing it afterwards changes only your copy — the library is a starting point, not a link.
Dynamic Tags #
A Dynamic Tag fills a field from your site instead of from text you type. Anywhere you see the small dynamic icon beside a field, you can click it and choose a source.
This is what makes templates work: a Card that shows “Post Title” draws the right title for each post, rather than the same one every time.
| Group | Available |
|---|---|
| Post | Title, Content, Excerpt, Date, Permalink, Terms, Reading Time, Author Name, Author Avatar, Featured Image, Page Title, Adjacent Post Title and URL (the previous or next post, optionally in the same category) |
| Archive | Archive Title, Archive Description, Current Term Name, Search Query, Results Count ({total} results, Showing {from}–{to} of {total}), Page Number (Page {page} of {pages}), Term Name, Term Count and Term URL (the post's category — a card's “View all” — or the archive's own), Post Type Archive URL |
| Site | Site Title, Tagline, URL, Logo |
| User | Name, First Name, Email, Avatar, Account URL |
| ACF | Text, Image, URL, Colour and Gallery fields — including fields attached to a taxonomy, read from the archive's term or the post's term |
| Other | Current Date/Time, Trigger Link, Testimonial Text, Testimonial Image |
ACF tags are how you use your own fields. Add a field to a post type, then pull it into a design with the matching ACF tag — no code, and the field appears wherever you place it.
NovaKit Motion #
Select any element, open the Advanced tab, and you will find NovaKit Motion directly under Layout. It has three tabs, and an element can use all three at once — a card can rise in as it enters, lean toward the pointer, and drift as the page scrolls.
Effects you turn on or off — Stagger, Then Loop, Mouse Track, 3D Tilt, Magnetic, Cursor on Hover, Sticky, Hold in Place, Scroll Scene, Text Scrub and the rest — each sit behind a pencil button, like Elementor’s own Typography. Click the pencil to turn the effect on and set it up; the arrow beside it turns it off again. Their options stay out of the panel until then.
Entrance #
How the element arrives.
| Setting | What it does |
|---|---|
| Entrance | Reveal animates the element in. Split Text animates text by line, word or character, and Mask Each slides each piece up from behind its own edge. Timeline plays the element’s children in order: each child keeps its own Reveal or Split Text, and its Delay is the gap after the one before (or set its Sequence Position). |
| Starts When | Scrolled into view — with a page transition on, what is already on screen waits for it and plays as the page appears; Page intro finished, which plays right after the page transition wherever the element is; or Its item becomes active, for an element inside an Accordion, Tabs or Swapper item — it plays each time that item opens, and plays an Animation Out when another item takes over. |
| Effect | Over twenty presets in groups — Fade, Zoom, Blur, 3D, Rotate & Skew, Clip & Mask — or Custom. |
| Customize | Opens the selected effect’s own values — opacity, offset, scale, rotation, 3D rotation, skew, blur, clip and anchor point — to adjust. Choosing another effect starts again from its values; choosing Custom keeps the ones you had, so any preset can be the start of your own. |
| Duration, Delay, Easing | Timing. Custom curve takes a cubic-bezier, such as 0.22, 1, 0.36, 1. |
| Plays | Once, Every time it enters, or And reverses when it leaves. |
| Stagger | Animates the children one after another, so a grid arrives item by item. Start from the first, last, centre, edges, or at random. |
| Then Loop | Keeps moving after the entrance — Float, Pulse, Spin, Wiggle or Breathe — for shapes, badges and glows. It pauses while off screen. |
Interaction #
How the element reacts to the visitor.
| Setting | What it does |
|---|---|
| Interaction | Hover or Click, with an effect (Grow, Shrink, Lift, Sink, Tilt, Pop) and the same Customize panel as the entrance. Its Easing also takes a Custom curve, as the entrance does. |
| Triggered By | This element, its Parent container — hovering anywhere on a card can move its title, image and arrow together — or a Custom selector: a class or ID, matched by the nearest parent however far up, or else the first match on the page. |
| Hidden Until Triggered | The element rests invisible and fades in on the trigger, together with its effect — or alone with Fade Only. With Parent container, a card reveals its button when hovered. It stays visible on touch screens, which cannot hover, unless Hidden on Touch Screens Too is on; keyboard focus inside it always shows it; in the editor it shows faint and outlined. |
| Mouse Track | Drifts with or against the pointer, measured over the element, its parent container, or the whole page. |
| 3D Tilt | Leans toward the pointer, with an optional glare and depth layers that move the other way. |
| Magnetic | Pulls toward the pointer once it comes within reach. On a widget, the button, icon or image inside moves rather than the whole column. |
| Cursor on Hover | Changes the site cursor over this element: grow, a text label (with its own typography and circle size), any icon from your icon library or an uploaded SVG (with its circle and icon size), a colour it fades to, or hide it with a soft fade and blur, and optionally stick to the element. It previews in the editor canvas too, beside your normal pointer. Media preview shows an image or a video (choose which with Show) that follows the pointer; elements in the same container act as one list and swap their media as the pointer moves between them. |
Cursor on Hover needs the site cursor. Turn on Custom Cursor under Theme Options → Motion. Media preview works without it. Mouse and cursor effects only run on desktop, since a touch screen has no pointer.
Scroll #
How the element moves as the page scrolls.
| Setting | What it does |
|---|---|
| Sticky | Pins the element while the page scrolls past it, with an offset, an end point and an optional different offset when scrolling up. |
| Scroll Animation | Keyframes played by the scroll. Pick a Recipe (Parallax, Slide In, Fade In, In & Out, Into Focus, Tilt Up, Children One by One, and held scenes such as Zoom Out Hero and Expand to Full Bleed), then change any keyframe on the track: click the track to add one, drag one to move it, choose what changes under Animate, and set its opacity, movement (px, %, vw/vh), scale, rotation, 3D tilt, skew, blur, clip and rounded corners, with the easing into it. Plays says when, in words (while it crosses the screen, as it enters, as it leaves, or starts when its top reaches 80% down the screen), measured on the element, its container, its section, a selector or the whole page. Hold in Place keeps its section on screen while it plays through. A Container can animate its children one by one. Smoothing and Snap to Keyframes set the feel, and Preview At shows any point of it in the editor. |
| Scroll Scene | Pins the element and plays its children’s animations in step with the scroll. |
| Text Scrub | Fills text in word by word, or line by line, as you scroll — colour or opacity. |
| Velocity Skew | Leans the element with the speed of the scroll, and settles when scrolling stops. |
| Image Distortion | Ripples an image with the speed of the scroll. |
| Horizontal Track | Containers only. Pins the container and slides its row of items sideways as you scroll down. |
| Page Background Here | Containers only. Changes the page background colour while this container is on screen. |
When two effects want the same thing #
Two effects cannot both move an element up and down at once. When they would, the panel says so under the tab concerned, the tab’s dot turns amber, and the page plays only the stronger one, in this order:
- Pinning — Sticky, Horizontal Track, or a pinned Scroll Scene
- Mouse effects
- Hover or Click
- Then Loop
- Velocity Skew and Scroll Animation
The rest of the weaker effect still plays — a sticky element keeps its entrance fade, and loses only the movement. An entrance and a hover can share a property, because one finishes before the other starts. To keep both, put one effect on a parent container.
What previews in the editor. Entrances (Timelines too — editing a child replays the sequence), Hover and Click, mouse effects, loops and Cursor on Hover play on the editor canvas, and Scroll Animation’s Preview At shows any point of its scroll; turn off Live Preview in Editor if the editor feels slow. The Scroll tab runs on the live page and in Elementor’s Preview only, so the content stays visible and editable while you build.
Elementor’s own Motion Effects are still there, under Elementor’s section of the Advanced tab. If an element has both an Elementor Entrance Animation and a NovaKit entrance, the panel asks you to clear one — both animate the same wrapper.
Copying motion to other elements #
Right-click a widget or Container and choose Copy NovaKit Motion, then right-click another and choose Paste NovaKit Motion. The target gets exactly the copied motion — all three tabs, on every device, dynamic tags included — and nothing else about it changes. Select several elements first to paste to all of them at once. The copy stays available on your other pages, and a single undo puts the target back as it was.
Less is more. Animating everything makes a page feel slow. Reveal on section headings and one hero element is usually enough.
Pages built with the earlier, single Motion Type menu move to the new tabs on their own when you update. Nothing changes on the page; the NovaKit Data Updater notice in your dashboard reports it, and keeps the previous version restorable for 30 days.
Header Zone #
Any Container can be pinned to a light or dark appearance regardless of the site mode. Select the Container, open Advanced → NovaKit Settings, and set it under Light & Dark.
This is what makes a light header readable over a dark section, and it is what the header’s Adaptive appearance reads to decide which way to flip. See Position and appearance.
Container Mask #
Elementor gives every widget a Mask; NovaKit adds one to the Container. Select the Container and open Advanced → Mask.
| Mask | What it does |
|---|---|
| Shape | Cuts the container to one of Elementor’s shapes (circle, blob, hexagon…). Size (Fit, Fill or a custom scale), Position and Repeat place it, per device. |
| Image | Any PNG, WebP or SVG. Its transparency is the mask: solid areas show the container, transparent areas cut it away. Same Size, Position and Repeat. |
| Fade Edges | The container fades out toward the bottom, top, left or right, two opposite edges, or all four. Fade Length sets how far in the fade reaches, in % or px. Useful for a row of logos sliding past, or a hero image melting into the page. |
The mask cuts the whole container, including its border, its shadow and anything that sticks out past its edges, such as a dropdown. Mask the container around the content you want cut, not the one holding a menu.
Opacity #
Every widget and Container has an Opacity setting, which Elementor Free lacks: open Advanced → NovaKit Settings → Opacity and set a percentage, per device. In the editor an element never shows below 30%, so one set to 0 can still be selected; the live page shows the real value. To reveal something on hover, use NovaKit Motion's Hidden Until Triggered instead.
Dashed Border #
A dashed outline whose dashes march around a Container, as modern SaaS sites draw their page frames and cards. Select the Container and open Style → Dashed Border: choose the sides (all, one, or a pair), dash and gap length, thickness, corner radius (match it to the Container’s own), colour for light and dark, and whether the dashes move clockwise, counter-clockwise or stay still, and how fast.
The lines between a grid’s items can march too: in the Container’s Dividers, set the style to Dashed and turn on Animate. Both stand still for visitors who prefer reduced motion.
Turning widgets off #
To tidy the widget panel, use Elementor’s own element manager — Elementor → Settings — which lets you switch individual widgets off, NovaSpark’s included. NovaSpark does not add a second screen for this.