Migrating from Slider Revolution

Slider Revolution is a visual editor; Insigne is code you write once. The mental model maps closely — module, slides, layers, timelines — but every concept becomes an attribute.

Concepts

Slider Revolution	Insigne
Module	The slider element (<insigne-slider> or [data-insigne])
Slide	A direct child element
Slide background image	<img data-bg> (a real image, with alt and srcset)
Background position / "fit"	data-focus, data-safe, fit — and it is respected on every screen
Ken Burns	kenBurns / data-ken-burns
Layer	Any element inside the slide
Layer "in" animation	data-in="recipe"
Layer "out" animation	data-out (or the entrance reversed)
Split text (chars, words, lines)	Recipe split, or data-split
Start time	data-delay (ms)
Loop animation, hover state	Recipe loop and hover frames
Slide transition	effect (40 transitions, including WebGL)
Transition pack add-on	Included: 13 WebGL effects
Particles add-on	particles
Mouse / scroll parallax	data-parallax, scrollDepth, scrollDrive
Responsive levels (5 device sizes)	Not needed: container-based layout; breakpoints when you want changes
Module JSON	InsigneSlider.create(el, spec) — your own, documented JSON

Layers

In Slider Revolution, a layer is placed at pixel coordinates for each device. In Insigne a layer is regular HTML, positioned with your CSS, so it reflows naturally:

<div>
  <img data-bg src="hero.jpg" alt="" data-focus="70% 40%">
  <div class="copy">          <!-- your CSS: position, width, typography -->
    <small data-in="fade">New collection</small>
    <h1 data-in="chars-up">Autumn / Winter</h1>
    <a class="btn" href="/shop" data-in="rise" data-delay="600">Shop now</a>
  </div>
</div>

Use container units (cqi) or clamp() for type that scales with the slider.

Timelines as data

Every entrance is a recipe — a list of frames — that you can copy and tune. See layers and the recipes reference.

Moving content out of WordPress

Export your slides' images and texts, then either render the markup in your theme template with data-insigne, or keep them as JSON and call InsigneSlider.create(). Both work in WordPress, Laravel, static sites and SPAs.