Nori for Elementor v0.24.4
Support Get Nori on WordPress.org
Modules

Modules

Every module here ships in the plugin. Open one to try it on its own; this page runs the plugin's real code. Switch on only the ones you need, and see using modules together for the few that wait for, step aside for or team up with each other.

Classes + module [ ◻ ]

Buttons

One class makes a complete button: primary, secondary, outline or text, or a sliding gradient. Add a size (small or large) and btn-pill-np or btn-sharp-np for round or square corners if you like, then Button effects like Ripple Fill or Text Roll, or fx-hover-lift-np.

.btn-primary-np · .btn-lg-np · .btn-overlay-fx-np

Open demo →
Get started Book a call
4 LOOKS • SM · LG · PILL • 4 EFFECTS
Module [ ⤓ ]

Slide-Fade-Blur entrance

When a container scrolls into view, its children slide up, fade in and sharpen one after another. The stagger clears itself afterwards so hover effects stay instant.

.slide-fade-blur-np · .cascade-item-np

Open demo →
+0.08s · 0px Blur
+0.16s · 2px Blur
+0.24s · 5px Blur
↑ TRAVEL: +32PX UPWARD THRESHOLD: 0.12 (88% VIEWPORT)
Module [ ⤒ ]

Exit-Fade-Up scroll fade

Elements fade in from below as they arrive and drift up and out as they leave the top of the screen. Use this or Slide-Fade-Blur on an element, not both.

.exit-fade-up-np

Open demo →
⤒ TOP 20% EXIT DISSOLVE OPACITY 0.0 · SCALE 0.96
✦ ACTIVE IN-VIEW ZONE 100% VISIBLE (0PX PARALLAX)
⤓ BOTTOM 15% ENTRANCE TRANSLATEY (+40PX)
Module [ ⇄ ]

Marquee

A seamless looping ticker that pauses on hover and focus and has a pause button. The duplicated copies are hidden from screen readers and search engines.

.custom-marquee-np

Open demo →
⚡ 0-Jank CSS Loop 🔄 Dynamic Cloner ⏸ Pause on Hover ♿ ARIA Hidden ⚡ 0-Jank CSS Loop 🔄 Dynamic Cloner ⏸ Pause on Hover ♿ ARIA Hidden
Module [ ⬒ ]

Smart header

Hides the header while you scroll down and brings it back when you scroll up or tab into it. Handles the WordPress admin bar.

.main-header-np

Open demo →
Module [ ☰ ]

Mobile menu

On phones the header's menu becomes a button. It opens a rounded card under a rounded header, or a full-width sheet under a square one, with keyboard and screen reader support.

.menu-toggle-np .mobile-menu-np .menu-links-np

Open demo →
Module [ ⧉ ]

Lightbox

Opens images, MP4s, YouTube and Vimeo (including unlisted links) in an overlay. Locks scrolling, closes with ESC and returns keyboard focus.

.open-lightbox-np

Open demo →
Modules [ ▶ T ]

Video & big type

Background video that behaves on real pages, video playing inside your letters, headlines that fill the full width, words that rise into place and a framed video that opens as you scroll. Built on Elementor's own Background Video element.

.bg-video-np .video-text-np .fit-text-np .split-reveal-np .scroll-expand-np

Open demo →
Module [ ◉ ]

Accessibility enhancements

A two-tone focus ring that stays visible on light and dark backgrounds, labels for icon-only social and logo links, and hidden decorative icons.

Site-wide, no class needed

Open demo →
On light SAME RING
On dark STILL VISIBLE
Module [ ⛨ ]

Form spam protection

Stop form spam without a CAPTCHA. No puzzles and no "I'm not a robot" for your visitors: an invisible honeypot, a one-time pass your server checks and a too-fast-to-be-human check turn bots away quietly, and you can see what was blocked.

Elementor Pro and Atomic forms, no class needed

Open demo →
NAME / EMAIL FIELD HUMAN INPUT ✓
_ANTISPAM_HP TRAP BLOCKED BOT ⛔
VELOCITY: 0.38S < 1.2S RATE REJECTED ⚡
Module + class [ ⇢ ]

HubSpot Bridge

Design your form freely with Elementor's Atomic form and still send every entry to HubSpot. Paste the HubSpot embed code; Nori gives you a class and tells you which fields the form needs.

.hs-bridge-a1b2c-np · one class per form

Open demo →
Module [ ∿ ]

Smooth scroll

Momentum scrolling powered by Lenis, bundled in the plugin with no CDN. In-page links glide too. Off for visitors who prefer reduced motion. This site uses it.

Site-wide, no class needed

Open demo →
STEPPED TICKS LENIS INERTIAL INTERPOLATION (0.1 LERP)
Buttons

Buttons

One class makes a complete button. Pick a look, then add a size, round or square corners or an effect only if you want them. Every class is an ordinary Elementor class with Hover (which also covers keyboard focus) and Active (pressed) states, so you can restyle any of them in the editor.

1 · Look pick one
2 · Size optional
3 · Shape optional
4 · Effects combine any

Starter colors · hover or Tab to the button
Classes to add in Elementor
btn-primary-np

    The four looks

    .btn-primary-np

    Accent fill, dark text. Your main call to action. Fills dark on hover.

    .btn-secondary-np

    Dark fill, light text. For the second most important action.

    .btn-outline-np

    Transparent with a border that fills on hover.

    .btn-text-np

    Just the label. Pairs with the Sliding Underline.

    Gradient Shift and Text Roll

    .btn-gradient-np

    Five colors that slide across the button on hover and focus.

    .btn-gradient-outline-np

    The same gradient as an outline that follows the corner radius.

    .btn-roll-np

    Text and icon roll up while copies roll in. Works with any look, any icon and the other effects.

    Also for any element

    A card with fx-hover-lift-np

    .fx-hover-lift-np lifts anything 2px on hover or focus, with no shadow. Put it on cards, images or buttons.

    Slide-Fade-Blur entrance

    Viewport-triggered staggered entrance. As you scroll down the page, child elements smoothly cascade into view with 80ms sequential stagger, +32px upward travel, and blur resolution once entering the detection zone.

    ○ WAITING FOR SCROLL INTO VIEW
    Observer Depth:
    [ Viewport Fold Spacer · Real Scroll Track ]

    Scroll Down ↓ to Test Cascade Entrance

    The cascade target container is positioned directly below. Watch the dashed line at the bottom of the screen—as soon as the container crosses it, the 80ms sequential cascade triggers!

    [ CASCADE TARGET · 80ms STAGGER ]

    Production Viewport Entrance Stagger

    Every child element below is staged with progressive 80ms delays. Watch them sequentially de-blur and elevate from +32px into crisp alignment.

    CARD 01 (+0.24s)

    Zero-Jank Execution

    IntersectionObserver observes parent once and unobserves on entry.

    CARD 02 (+0.32s)

    Instant Hover Cleanup

    Inline delays are stripped after 700ms so button hovers remain snappy.

    CARD 03 (+0.40s)

    Builder Safe

    Bypassed inside Elementor editor mode to avoid visual builder freezes.

    ✓ Cascade complete. Scroll up to re-test, or click "Re-Arm & Top".

    Exit-Fade-Up scroll fade

    Continuous scroll-driven dual-zone parallax. Elements dissolve to 0% opacity and shift -30px upward as they leave the top 20% of the screen, and fade in smoothly from the bottom 200px.

    Scroll: 0px · Zone: Active Mid-Zone
    Scroll down to watch top exit dissolve and bottom entrance fade.
    ▲ SECTION 1 · TOP EXIT CANDIDATE

    Hero Statement Header

    This block starts at 100% opacity. Scroll down just ~200px: as its bottom edge crosses the top 20% dashed line, it smoothly dissolves to 0% opacity and lifts -30px!

    ● SECTION 2 · DUAL-ZONE PARALLAX

    Continuous Mid-Page Parallax

    Approaches from the bottom 200px entrance zone (fading 0% → 100%), locks at solid 100% in the center viewport, and dissolves to 0% as it leaves the top 20% zone.

    Bottom Entry

    Enters smoothly from +40px below.

    Mid-Zone Lock

    100% solid opacity during active reading.

    Top Dissolve

    Lifts -30px into transparent exit.

    ▼ SECTION 3 · DEEP TERMINUS

    Parallax Runway Complete

    You have scrolled through the full parallax journey.

    Marquee

    Smooth ticker loop with automatic clone count calculation, duplicate ID stripping, and WCAG hover-pause.

    Live Marquee Stage

    Speed: 25s
    ⚡ High-Performance WordPress 🛡️ Defensive Snippets ♿ Pause button + hidden copies 🎨 67 Global Classes 📱 Mobile Responsive Breakpoints

    * Hover your mouse over the ticker to test the automatic accessibility pause feature.

    Video & big type

    Four modules for full-width, video-led pages, used by the Billboard and Lens page templates. The video ones build on Elementor 4's own Background Video element: you pick the video in Elementor as usual, and a Nori class adds what a real page needs.

    .video-text-np + .fit-text-np

    The video plays inside the letters, and the name fills the full width at any screen size. On a phone a long name stacks its words. The words stay real text, so screen readers and search engines read them.

    Alder Creek

    .bg-video-np

    A tint keeps text readable over the video, the play and pause buttons sit in a small pill, the video pauses when it scrolls off screen, and visitors who prefer less motion get a still frame with a Play button. On phones you can skip the video entirely.

    Plumbing · Bend, Oregon

    Need a plumber today?

    Book a visit

    .split-reveal-np

    Each word rises out of its own mask, one after another, when the heading scrolls into view.

    Plumbing done calmly, cleanly and right the first time.

    .scroll-expand-np

    A framed, rounded panel opens to the full width as it scrolls up the screen. Scroll the page to see it.

    Opens as you scroll

    Demo video: the short abstract loop that ships with the plugin for the Billboard and Lens templates. In the plugin, the tint, its shape, playing on phones and pausing off screen are settings, and the tint color is an Elementor variable.

    Smart header

    The header slides away while visitors scroll down, so they see more of the page, and comes back the moment they scroll up or tab into it. For logged-in users it allows for the WordPress admin bar, so it never hides behind it or peeks out.

    Try it

    Scroll inside the frame, or use the buttons. Switch the admin bar on to see the header make room for it.

    WordPress admin bar (32px on desktop)
    Howdy, Administrator ▾
    Your site header
    Features Documentation Shown
    ↕ Scroll inside this box, or use the buttons above.

    Scrolling down

    The header stays at the top of the screen. As visitors scroll down to read, it slides out of the way.

    Scrolling up

    Scroll up a little and it's back, so the menu is never more than a flick away. Tiny movements are ignored, so it doesn't flicker.

    The WordPress admin bar

    When you're logged in, WordPress shows its admin bar at the top (32px, or 46px on phones). Smart Header sits below it and hides fully past it, so the two never overlap.

    That's it

    The end of the demo. Switch the admin bar on or off at any point and the header follows.

    Mobile menu

    On phones (and optionally tablets) the header's links fold into a menu button. The menu matches the header it lives in: a rounded card floating just below a rounded bar, or a full-width sheet under a square header. The button is a real button for keyboards and screen readers; Esc, a tap outside or picking a link closes it, and the page stays put while it's open.

    Try it

    Tap the menu button inside the phone, or press Tab to reach it and Enter to open it. Switch the header style to see the menu follow it.

    Juniper Bakery Order ahead

    Menu closed.

    Lightbox

    Zero-plugin modal player supporting YouTube, Vimeo (with privacy hashes), HTML5 MP4, and WebP imagery.

    Modal Trigger Test

    Click any media trigger to open the high-performance cinema lightbox.

    Accessibility enhancements

    The module draws a two-tone focus ring (a dark outline with a light halo) so keyboard focus stays visible on light and dark backgrounds alike, with no per-section setup. Press Tab to try it on both cards.

    Light background

    Press Tab to focus.

    Dark background

    The same ring, still clearly visible.

    Form spam protection

    Stop spam without a CAPTCHA. Your visitors never pick traffic lights or tick "I'm not a robot", and no third-party script watches them. Bots are turned away quietly.

    How it works

    1. 1 · An invisible honeypotNori adds a hidden field that people never see or reach with the keyboard. Bots fill in every field they find, so a filled honeypot means a bot.
    2. 2 · Too fast to be humanA person needs a few seconds to fill in a form. A form sent within 1.2 seconds (you can change it) with no typing or clicking is dropped.
    3. 3 · A pass your server checksAfter the page loads, the visitor's browser quietly gets a one-time pass from your site and sends it with the entry. Your server turns away entries without a valid pass, so bots that post straight to WordPress without opening the page are stopped, and the timing is checked there again. Works with page caching, on Elementor Pro forms and Atomic forms.
    4. 4 · Limits for the persistent onesOptional limits on how often one visitor can send the form (5 times in 10 minutes by default) and on links in an entry (3 by default). IP addresses are never stored.
    5. 5 · See what was blockedWP Admin shows how many entries were blocked and why. Only the time, the reason and the page are kept. A test mode logs without blocking, so you can check nothing real is caught.
    6. 6 · Nothing for visitors to doReal visitors just press Send. Works on Elementor Pro forms and Atomic forms as soon as the module is on.

    A CAPTCHA

    • Visitors solve a puzzle or tick a box
    • Loads a third-party script and cookies
    • Hard for screen reader and keyboard users
    • Some visitors give up before sending

    Nori

    • Nothing to solve, nothing to tick
    • No third-party script, no tracking
    • Invisible to people and assistive tech
    • A few kilobytes of plain JavaScript

    Try it

    This form uses the same checks. Wait a moment, then send it as a person, or let a "bot" fill in the hidden field.

    HubSpot Bridge

    Build the form you actually want with Elementor's Atomic form (any layout, fonts and animation) and still send every entry to HubSpot. No HubSpot styling to fight, no iframe, and nothing to change in HubSpot.

    1. Full design freedomYour form is an ordinary Atomic form, styled with your classes and variables. HubSpot never touches its design.
    2. Nothing to set up in HubSpotUse the form you already have. Nori reads its fields from the embed code, and which ones are required.
    3. One class per formEach bridge gets its own class, like hs-bridge-a1b2c-np, so two forms on one page never mix up.
    4. HubSpot first, then ElementorThe entry goes to HubSpot with the visitor's tracking cookie. Only when HubSpot accepts it does Elementor send its email and show the success message.

    The one rule: your Atomic form's fields must match your HubSpot form. Each HubSpot field needs an input in your Atomic form with the same ID: select the input, open Settings, and set ID to the HubSpot field name, like email or firstname. The input must be a kind that can hold the value (an email input for email, a select with the same option values for a dropdown). If a required HubSpot field has no matching input, or the Atomic form can't provide it, HubSpot rejects the entry. The generator below lists exactly what your form needs.

    Make your bridge

    Paste your HubSpot form's embed code (in HubSpot: open the form, Share, Embed code). You get a ready-to-paste script for your site's header, the class for your form and the fields it needs. Or let the plugin do it all. Nothing you paste here is saved or sent anywhere.

    What happens on submit

    A simulated Atomic form with a bridge class. The IDs e-form-first-name and e-form-email fill HubSpot's firstname and email.

    .hs-bridge-a1b2c-np
    1. Spam checkWaiting
    2. Sent to HubSpotWaiting
    3. Elementor email and success messageWaiting

    Smooth scroll

    This whole site runs on the same smooth scroll module the plugin ships: Lenis, bundled locally, off for visitors who prefer reduced motion. Switch it off to feel the difference.

    Smooth scroll on this page

    Checking…

    Open the side-by-side showcase
    Action completed
    ✦ CASCADE OBSERVER TRIGGER LINE (-180px FROM BOTTOM)
    ▲ TOP 20% EXIT DISSOLVE ZONE (opacity → 0, translateY → -30px)
    ▼ BOTTOM 200px ENTRANCE ZONE (opacity 0 → 1)