Floating Elements · Divi Essential
Sections that drift, tilt and breathe.
Layer any number of images over a Divi section, place each one to the percent, and let them float on scroll and on cursor. Ten motion presets, per-device control, and not one line of custom CSS.
The control surface
Everything the layer can do
Every image in the stack carries its own placement, motion and responsive rules. Nothing is shared unless you want it to be.
Placement you can feel
Set X and Y as a percentage of the section and width in pixels. The layer is pinned to the section box, so it re-flows exactly as the section does.
Ten motion presets
Gentle float, orbit, bounce, sway, zigzag, pulse, drift, spin float, pendulum and elastic pop — one dropdown per image.
Take over the motion
Switch on Custom Override for direction, travel range, rotation, duration, delay, easing, scale breathing and minimum opacity.
Real 3D tilt
Add rotateX and rotateY per image so a card leans as it drifts, instead of sliding flat across the section.
Scroll and cursor parallax
Every item gets a depth band from its place in the stack, then tracks the pointer. The layers separate the moment the page moves.
Device by device
Separate position and width for tablet and phone, hide any single image per device, or switch the whole layer off below a breakpoint.
Motion library
Ten presets, one dropdown
Each card names a preset. Every floating image around them is running one of them right now — scroll slowly and watch them separate.
Gentle Float
Soft vertical drift with a slight horizontal sway and a little scale breathing.
Orbit
A four-point elliptical path, looped with no easing so it never appears to stop.
Bounce
A sharp vertical hop on a bounce ease, over a slow horizontal glide.
Sway
Rotation anchored to the top edge, like something light hanging in a draught.
Zigzag
Four keyframes stepping up and across, then back to the origin.
Pulse
Scale and opacity pulse together over a gentle vertical drift.
Drift
Slow, unsynchronised travel on all three axes. No two loops ever line up.
Spin Float
A continuous 360° rotation laid over a vertical float.
Pendulum
A pure top-anchored swing, roughly three times wider than Sway.
Elastic Pop
Back-eased travel that overshoots its mark and settles into place.
Preset spotlight 01
Orbit and Spin Float
Orbit walks each image around a four-point ellipse; Spin Float turns it a full 360° while it rises and falls. Both read as motion with intent rather than decoration — good for hero stages, product shots and anything that should feel alive without asking for attention.
- Preset: Orbit · Spin Float
- Vertical range 30px, horizontal 25px
- Duration 6s, linear, looping forever
- Depth band taken from stack order
- z-index 1 — above the section background
Preset spotlight 02
Pendulum and Sway
Both anchor their rotation to the top edge of the image, so the movement reads as weight on a string rather than a slide. Sway adds a horizontal glide over the arc; Pendulum keeps the arc pure and swings roughly three times as far.
- Preset: Pendulum · Sway
- Rotation origin pinned to 50% 0%
- Rotation range 8°, tripled by Pendulum
- Custom Override raises it to 180°
- Pairs well with a tall, narrow crop
Stacking
In front of your content, or behind it.
Give an image a positive z-index and it floats over your copy. Leave it at zero and it slips behind, turning into texture. The container deliberately creates no stacking context of its own, so the images really do interleave with your content.
z-index 5
The keyboard and the desk shot sit above this card and can cross it as they move.
z-index 0
The gradient and the studio shot sit behind this card, reading as texture rather than content.
Responsive
Different rules for every screen
Position and width fall back to desktop until you override them, so you only touch what actually breaks. Anything still crowding a small screen can be hidden per image — or the whole layer can be switched off below a breakpoint.
- Tablet and phone X, Y and width, set only where needed
- Hide one image on tablet, on phone, or on both
- Disable the entire floating layer per device
- Unset values cascade desktop → tablet → phone
- Two images on this section are hidden below 768px
Ready when you are
Open a section. Turn on the layer.
Floating Elements lives in the Section settings, under Content → Floating Elements. Add an image, drop a pin, pick a preset. That is the whole workflow.
