Nova Hero Slider

Nova Hero Slider Documentation

Overview

Nova Hero Slider is a performance-first hero slider for modern WordPress websites. It’s designed for smooth motion, clean UX, and lightweight animations — with support for both Gutenberg and Elementor.

Installation

Install via WordPress (recommended)

  1. Go to WordPress → Plugins → Add New
  2. Click Upload Plugin
  3. Select nova-hero-slider.zip
  4. Click Install Now
  5. Click Activate

Update

Install via WordPress (recommended)

When you receive an updated ZIP:

  1. Go to Plugins
  2. Deactivate Nova Hero Slider (optional but recommended)
  3. Delete the old version
  4. Upload the new ZIP
  5. Activate again

Quick Start

Create a Hero Slider

When you receive an updated ZIP:

You can use Nova Hero Slider in two ways:

    • Gutenberg (Block Editor)
    • Elementor (Widget)

    Choose the method that matches your workflow.

Using Nova Hero Slider with Gutenberg

  1. Edit a page in Gutenberg
  2. Click + Add Block
  3. Search for Nova Hero Slider
  4. Insert the Block

Add slides

Inside the slider block, add Hero Slide blocks (one per slide).
Each slide can include:

  • an image

  • title & subtitle

  • button text and link

  • optional per-slide settings (motion, scene, content alignment, etc.)

Per-slide settings

Per-slide settings

Select a Hero Slide block to configure per-slide options such as:

  • Content alignment (inherit / left / center / right)

  • Scene & motion overrides (if available)

  • Transition speed

  • Slide button/link

Using Nova Hero Slider with Elementor

Add the widget

  1. Edit a page with Elementor
  2. Search for Nova Hero Slider
  3. Drag the widget into your layout

Add slides

In the widget panel:

  • Add slides using the Slides repeater

  • Configure title, subtitle, image, button, and per-slide design options

Elementor supports advanced per-slide customization, including:

  • Motion direction and intensity

  • Scene pacing

  • Content alignment

  • Media and overlay behavior

Features

Autoplay

Enable autoplay to automatically rotate slides

Best practices

  • Use a delay of 5000–8000ms for most hero sections

  • Keep transition speed around 350–550ms for a premium feel

Parallax (scroll)

Parallax adds depth by moving the hero background slightly on scroll.

Notes

  • Subtle strength looks more premium

  • Parallax is automatically disabled when prefers-reduced-motion is enabled

Ken Burns

A subtle motion effect applied to images.

Notes

  • CSS-first, lightweight

  • Automatically paused when out of view or when reduced motion is enable

Motion & Scene (per-slide)

Depending on your configuration:

  • Motion controls direction (left/right/up/down)

  • Scene controls pacing and intensity

If a slide does not define motion/scene, the slider uses the global defaults.

Troubleshooting

Autoplay doesn’t start

  • Check that autoplay is enabled in slider settings.

  • In Elementor editor mode, autoplay may be disabled by design (to keep editing stable).

Parallax looks “stuck” in a builder preview

In builder environments (especially iframe-based previews), scroll behavior differs from the front-end.
Nova Hero Slider includes logic to handle this in most cases — test on the published page for final validation.

Images look cropped

This is usually due to object-fit and hero height settings.
Try:

  • using a larger source image

  • adjusting hero height

  • changing background position

Slide alignment doesn’t change per slide

If you are using Gutenberg, make sure:

  • you selected the Hero Slide block (not the parent slider block)

  • you changed Content alignment in the slide panel

  • the page is updated and cache is cleared

FAQ

Does it work with any theme?

Yes. Nova Hero Slider is designed to be theme-friendly and work in modern WordPress environments.

Does it require jQuery?

No. Nova Hero Slider is built without jQuery.

Is it mobile-friendly?

Yes. Touch navigation and responsive rendering are built in.

Does it support reduced motion?

Yes. If a visitor has prefers-reduced-motion enabled, motion-heavy effects are reduced or disabled.

Support

For support, contact:
contact@lddigitalwork.com

When contacting support, please include:

  • Your WordPress version

  • Your theme name

  • Whether you’re using Gutenberg or Elementor

  • A screenshot or short screen recording of the issue

Changelog

See changelog.txt included with the plugin.