Build
Widget reference
NovaSpark's 55 Elementor widgets, grouped into six families.
NovaSpark adds 55 widgets to Elementor. They are listed here by family rather than one by one: widgets in a family share the same controls and the same way of working, so once you have used one the rest follow.
Every widget has the usual Elementor Content, Style and Advanced tabs, and every one respects your Design colours and fonts unless you override them.
Site structure #
The pieces a header or footer is made of. These read your real site data, so they need no content typed into them.
Worked example: NovaKit Menu
- Drag it inSearch the widget panel for NovaKit Menu and drop it into your header block.
- Choose the menuPick one of your WordPress menus. Create them at Appearance → Menus.
- Set the layoutHorizontal for a normal header, vertical for a sidebar or offcanvas.
- Style itThe Style tab covers link colour, spacing, the hover effect and the dropdown panel.
Mega menus are configured on the menu items themselves, not here — see Mega Menu.
| Widget | What it does |
|---|---|
| NovaKit Menu | A WordPress menu, with mega menu support. |
| NovaKit Mobile Menu | The small-screen menu, as an accordion drawer. |
| NovaKit Site Logo | Your logo from Theme Options, with a dark-mode variant. |
| NovaKit Breadcrumbs | The trail showing where a visitor is. |
| NovaKit Dark Mode Toggle | A switch between light and dark: one button, or a Switcher with Light, Dark and System (follows the visitor’s device). Switch Animation can sweep the new look over the old one, as a Wipe from any side or a Circle from the button or the centre of the screen, with its own duration and easing. |
| NovaKit Social Icons | A row of links to your profiles. |
Content blocks #
The building blocks of a page. You type the content into these.
Worked example: NovaKit Feature Card
- Add the widgetSearch for NovaKit Feature Card.
- Fill in the contentAn icon or image, a title and some text.
- Pick a layoutThe Layout control changes where the icon sits relative to the text.
- Add a hover effectChoose one under Style — lift, zoom or an overlay fade.
- Repeat across a rowPut three in a horizontal Container for a features section.
| Widget | What it does |
|---|---|
| NovaKit Heading | A heading with gradient fill, an eyebrow line and split-text animation. |
| NovaKit Button | A button with hover effects and icon options. |
| NovaKit Icon | A single icon from any installed set. |
| NovaKit Image | An image with a dark-mode twin, hover effects, a caption, a badge and the lightbox. Aspect Ratio has the usual shapes, or Custom with your own width and height (4 and 5 for a portrait tile), per device. |
| NovaKit Video | A video from the Media Library, a file URL, YouTube or Vimeo, cropped to fit any frame the way an image is: pick an Aspect Ratio (or Custom), then Fit Cover and a Focal Point. It plays automatically (muted, and paused while off screen), on hover, on click with a play button, in the lightbox, or scrubbed by the scroll: the film moves forward and back with the page, its section held in place while it plays through. Visitors who prefer less motion get a play button instead of autoplay. |
| NovaKit Wordmark | A giant word or logo for a footer or a hero, fitted edge to edge at every screen size. Fill it Solid, Fade (a gradient to transparent), Outline, or Pixels: the word or logo drawn as a grid of cells, square, rounded or round, with random cells twinkling and the cells near the pointer lighting up. Solid and Fade can take a Stroke too, with its own Light and Dark colours. Crop & Fade shows only the top of the word and melts its edges into the page: the bottom, the top, both, the left, the right, both sides or all four. An SVG logo left in its original fill can be recoloured in Light and Dark, like the Site Logo. The word stays real text for screen readers and search engines. |
| NovaKit Accordion | Collapsible panels — the usual FAQ pattern. Each panel is a container you design in place, like any other. |
| NovaKit Tabs | Tabbed panels, or a two-state switcher such as monthly/yearly pricing. Each panel is a container you design in place — or set Panels to Elsewhere (Connected) for the tab row alone, driving a slider elsewhere on the page. Each tab can carry an icon, a description and a trailing icon. |
| NovaKit Feature Card | Icon, title and text, with hover effects. |
| NovaKit Team | A person — photo, name, role, links. |
| NovaKit Brands | A logo strip, static or scrolling. |
| NovaKit Metrics | A row of figures with labels. |
| NovaKit Counter | A number that counts up when scrolled into view. |
| NovaKit Rating | A star rating. |
| NovaKit Price | A price, with currency and period. Follows a monthly/yearly switcher. |
| NovaKit Pricing Card | One pricing plan. |
| NovaKit Pricing Table | Several plans compared side by side. |
Loops and sliders #
Widgets that draw the same shape repeatedly, from your content. Most work with a Card or Slide template.
Worked example: NovaKit Smart Loops
- Add the widgetSearch for NovaKit Smart Loops and drop it where the list should go.
- Choose what to showSet the post type, and narrow it by category or tag if you want.
- Choose how manySet how many items, and whether to paginate.
- Pick a card styleClassic, Overlay, List or Timeline — or Custom Template to use a Card you designed.
- Set the containerGrid or carousel, and how many columns.
| Widget | What it does |
|---|---|
| NovaKit Loop Grid | Posts drawn by your own Card template: the archive or search being viewed (Current Query), a Custom Query, posts related to the one on screen, or posts you pick. Paginates with numbers, Previous / Next, Load More or infinite scroll — real links, so search engines reach every page — and Card Rules swap in another Card template at chosen positions — a featured first card, every fourth one wide — each able to span several columns or rows for a magazine layout. Shows a message or a template when there are no posts. See Archive templates. |
| NovaKit Post Container | A container bound to one post: design anything inside it, and every Dynamic Tag within — Post Title, Featured Image, ACF fields, Post Permalink — shows that post. The current post, a chosen one, or the Nth of a query (latest, oldest, A–Z, menu order or random, optionally of chosen terms); random containers sharing a Random Pool never repeat a post. The editor shows the post too. |
| NovaKit Filter | Narrows a Loop Grid by a taxonomy's terms or an ACF field (Select, Checkbox, Radio, Button Group, True / False, or a Number as a from–to range). Pills, plain text, underlined text, checkboxes, radio buttons or a dropdown; with Multiple Selection on, chosen pills can show a ×. Horizontal — wrapping, or scrolling with arrows — or vertical with “Show more”. Applies at once or with an Apply button; “Show more” and Apply have their own alignment, typography, colours, border and shadow. See Filters. |
| NovaKit Search | Searches a Loop Grid as the visitor types, or the whole site through the Search Results page. Optional suggestions: matching posts in a dropdown, each a link to its post. |
| NovaKit Sort | Lets the visitor reorder a Loop Grid — Newest, Oldest, Title and more — as a dropdown or pills. |
| NovaKit Active Filters | The choices narrowing a Loop Grid, as chips with a × each, and “Clear all”. |
| NovaKit Results Count | “24 results” or “Showing 13–24 of 48” for a Loop Grid, kept up to date as it is filtered. |
| NovaKit Smart Loops | Any post type as a grid, list or carousel. |
| NovaKit Carousel | A slider of slides or posts. |
| NovaKit Swapper | Cross-fades between panels rather than sliding. Each slide is a container you design in place. |
| NovaKit Loop Swapper | The same swap, with each slide drawn from a Slide template — for slides you pick by hand, or one per post. |
| NovaKit Slider Navigation | Arrows for a slider, placeable anywhere on the page. |
| NovaKit Slider Pagination | Dots, numbers or a progress bar for a slider. |
| NovaKit Testimonials | Your testimonials, in four skins and four arrangements. |
| NovaKit Case Studies | A case-study listing. |
| NovaKit Repeater Loop | Repeats a design over an ACF repeater field. |
| NovaKit Template | Inserts a Global Block into a page. |
| NovaKit Trigger | A button that opens a popup or offcanvas, or answers a cookie consent popup. It has every style and hover option the Button widget has. |
| Consent Options | Cookie categories with a switch each, for a cookie consent popup. |
Slider arrows and dots are separate widgets on purpose. That lets you put them anywhere — beside a heading, under the slider, in the next column — instead of only where the slider allows. Tabs and accordions can drive a slider the same way. See Connecting widgets.
Motion #
Two widgets built around scrolling. Both need room to work, so give them a full section.
| Widget | What it does |
|---|---|
| NovaKit Pinned Panels | Pins a section while panels advance through it as the visitor scrolls. |
| NovaKit Scroll Swap | Holds media in place while the text beside it swaps, or the reverse. |
Both have a single-column fallback on mobile, where pinning would trap the visitor. Neither previews on the editor canvas — use Elementor’s Preview.
Mascot is motion of a different kind: an animated character that follows the pointer and changes expression with what the visitor does, with 26 bodies to choose from.
Post elements #
These read from whichever post is being viewed, so they belong in a Single Post/Page template. On an ordinary page they have nothing to read and show nothing.
| Widget | What it does |
|---|---|
| NovaKit Post Content | The post’s writing. Every single template needs this. |
| NovaKit Post Meta | Date, author, comment count, reading time, views. |
| NovaKit Post Terms | Categories and tags. |
| NovaKit Post Share | Share buttons. |
| NovaKit Post Navigation | Previous and next post links. |
| NovaKit Post Author Bio | The author’s photo, bio and social links. |
| NovaKit Comments | The comment list and form. |
Forms #
NovaSpark styles forms rather than replacing your form plugin. There are two routes: one widget that holds a whole form, or a NovaKit Form with individual field widgets inside it. Both produce the same markup.
The settings, the engines and the full walkthroughs are on Forms. This is the widget list.
| Widget | What it does |
|---|---|
| NovaKit Form | A form you lay out yourself: field widgets inside a container, arranged with every flex and grid control. Works with each engine below. |
| NovaKit Contact Form | A whole Contact Form 7 form in one widget — pick the form, list the fields, done. |
| NovaKit Newsletter | The same, for a Mailchimp sign-up. |
| NovaKit Auth | The same, for sign in, registration and password reset. |
| NovaKit Field: Text / Textarea / Select / Date / Upload / Hidden | Individual inputs, for NovaKit Form. |
| NovaKit Field: Choices | Radio buttons or checkboxes. |
| NovaKit Field: Acceptance | A consent tick box. |
| NovaKit Newsletter Field | One Mailchimp merge tag. The tag is the field name. |
| NovaKit Account Field | One field in a sign-in, registration or reset form. |
| NovaKit Form: Submit | The button. Without it a form cannot be sent. |
| NovaKit Form: Message | Where the success or error text appears. |
NovaKit Form holds a real container. Its fields sit in a Fields container you arrange like any other — which is why they can be laid out in columns, nested, or placed beside an image. See Forms.
Turning elements off #
Every NovaKit element can be switched off at NovaSpark → Elements. An element that is off leaves the Elementor panel and stops loading on your site. Switch it back on and it returns exactly as it was, settings included.
- Each element shows where it is used. Click the line under its name to list the pages, templates and Global Blocks that use it, each with a link to edit it.
- Turn off unused switches off every element no page uses, in one step. Untick any you plan to use later.
- Changes are saved together. Flip as many switches as you like, then press Save changes. Before anything a page uses is switched off, the screen names those pages and asks first.
An element that is off disappears from every page that uses it. Nothing is deleted — the element is still in the page — but it does not show until you switch it back on.
This is the same list as Elementor → Element Manager. Switching a NovaKit element off in either place switches it off in both. Elements that arrive with a NovaSpark update start switched on.
When you import a demo
The import options include Turn off unused elements, ticked by default. Ticked, it switches off the elements the demo does not use. It only ever switches elements off: any you had already switched off stay off, and an element any page on your site uses is never left off. Untick it to keep your elements exactly as they are.
Afterwards the Elements screen shows which demo the change came from, and a Restore button brings that state back if you change your mind later.