Floating Elements Effects is a Divi Essential extension that lets you add animated floating images to any of the 105+ Divi Essential modules. Images hover, drift, bounce, orbit, or rotate over your module content — adding depth, motion, and visual storytelling to hero sections, feature areas, team sections, and more.
10 ready-made animation presets get you started instantly. Every parameter is fully customizable — position, size, rotation, easing, opacity, duration, delay — all from the Divi visual builder. Zero code required.
⚠️ Important: Floating Elements Effects is an Extension, not a module. It adds a Floating Elements panel to the Design tab of every Divi Essential module. It does not appear as a standalone module in the Divi Builder and does not work on native Divi modules.
How to Enable
Step 1: Go to WordPress Admin → Divi Essential → Extensions
Step 2: Find Floating Elements Effects and toggle it On — no additional configuration needed at this stage
Step 3: Open any Divi Section in the Divi Builder (click the section settings icon)
Step 4: Go to the Design tab → Floating Elements section
Step 5: Toggle Enable Floating Elements on, click + Add Floating Image, upload your image, and configure Settings + Animation tabs
Settings Reference
💡 Each floating image has two tabs of settings: Settings (position & size) and Animation (motion & timing). Both are documented below.
Enable Floating Elements
Type: Toggle Default: Off Activates the floating elements layer on the section or module. All image cards and the "+ Add Floating Image" button appear once this is enabled.
Floating Images
Each floating image appears as a named card (Image 1, Image 2, etc.) with its assigned preset name shown below. Cards can be duplicated, deleted, or reordered. Each card has two tabs — Settings and Animation.
Settings Tab
Controls where the floating image is placed and how it looks within the section.
Image
Type: Image Upload / Change Image button Upload the image to animate. Supported formats: PNG, JPG, SVG, GIF. Once uploaded, a Change Image button replaces the upload area. Transparent PNG files integrate most seamlessly with any background.
X Position
Type: Slider Unit: % Default: 20% Horizontal position of the floating image within the section (left to right). 0% = left edge, 100% = right edge.
Y Position
Type: Slider Unit: % Default: 20% Vertical position of the floating image within the section (top to bottom). 0% = top, 100% = bottom.
Width
Type: Slider Unit: px Default: 200px Sets the display width of the floating image. Height scales proportionally to maintain aspect ratio.
Z-Index
Type: Slider Default: 1 Controls the stacking order of the floating image relative to other content. Higher values place the image in front; lower values push it behind. Use carefully to avoid covering text or interactive elements.
Border Radius
Type: Slider Unit: px Default: 0px Rounds the corners of the floating image. Increase for pill or circular shapes — set to a large value (e.g., 999px) for a perfect circle.
+ Add Floating Image
Type: Button Adds a new floating image card to the section. Each card is fully independent — different image, position, size, and animation settings.
Animation Tab
Controls how each floating image moves. Settings here are independent per image card.
Preset
Type: Dropdown Default: Gentle Float Choose from 10 presets that define the base animation behavior:
| Preset | Description |
|---|---|
| Gentle Float | Smooth vertical bob with subtle rotation — default and most versatile |
| Orbit | Circular path around a fixed anchor point |
| Bounce | Springy vertical bounce motion |
| Sway | Horizontal pendulum-like motion |
| Zigzag | Quick diagonal staggered path |
| Pulse | Scale breathing combined with opacity shift |
| Drift | Slow lateral drift with subtle fade |
| Spin Float | Rotation combined with vertical float |
| Pendulum | Arc swing from a fixed top anchor point |
| Elastic Pop | Snappy scale with overshoot easing |
Custom Override
Type: Toggle Default: Off When enabled, all individual Animation settings (Direction, Vertical Range, Horizontal Range, Rotation, Duration, Delay, Easing) become editable — overriding the selected preset's defaults with your own values. The chosen Preset still sets the animation style; Custom Override lets you fine-tune its parameters.
Movement
(Visible and editable when Custom Override is ON)
Direction
Type: Dropdown Default: Both (X + Y) Sets the axis of movement for the animation:
- Both (X + Y) — image moves both horizontally and vertically simultaneously
- X only — horizontal movement only
- Y only — vertical movement only
Vertical Range
Type: Slider Unit: px Default: 30px How far the image moves vertically per animation cycle. Higher values = larger up-and-down travel distance.
Horizontal Range
Type: Slider Unit: px Default: 25px How far the image moves horizontally per animation cycle. Higher values = larger left-and-right travel distance.
Rotation
Type: Slider Unit: degrees (°) Default: 8° The amount of rotation applied during each animation cycle. At 8°, the image gently tilts as it floats. Higher values create a more dramatic spinning effect.
Timing
(Visible and editable when Custom Override is ON)
Duration
Type: Slider Unit: seconds (s) Default: 6s How long one full animation cycle takes. Lower = faster, snappier motion. Higher = slower, more relaxed floating feel.
Delay
Type: Slider Unit: seconds (s) Default: 0s Wait time before the animation begins after the page loads. Stagger delays across multiple images (0s, 0.5s, 1s) to avoid all elements moving in perfect sync.
Easing
Type: Dropdown Controls the acceleration curve of the animation — how the image speeds up and slows down within each cycle:
- Linear, Ease, Ease In, Ease Out, Ease In Out, Elastic, Bounce, Back
Pro Tips
💡 Use transparent PNGs for seamless integration Solid-background images look out of place floating over a section. Always export floating images as transparent PNGs — they blend naturally with any module background color or gradient.
💡 Stack 3–4 elements with different delays Adding multiple floating images with staggered Delay values (0s, 0.5s, 1s, 1.5s) creates a natural, organic feel. When all images move in perfect sync, it looks mechanical.
💡 Blur background elements for depth of field If you have multiple floating images at different visual "depths", add a CSS blur filter to the more distant ones. Sharper foreground + blurred background creates convincing depth of field without 3D tools.
💡 Keep mobile disabled for decorative elements Floating images are purely decorative in most cases. On mobile, they frequently overlap text and degrade the layout. Leave Enable on Mobile off unless the image is essential to the content.
💡 Use Elastic Pop preset for attention-grabbing badges If you're floating a "New" badge, a sale tag, or a star rating — the Elastic Pop preset's snappy overshoot easing draws the eye naturally without feeling cheap.
💡 Orbit preset works beautifully for icon clusters Use Orbit with small icons (32–48px) circling around a central module — great for feature sections showing technology logos or skill icons orbiting a central product image.
FAQ
Q: Does Floating Elements Effects work on native Divi modules (Blurb, CTA, etc.)? A
A: No. It works exclusively on Divi Essential modules (105+). Native Divi modules do not get the Floating Elements panel.
Q: How many floating images can I add per module?
A: Multiple images can be added per module with fully independent settings for each. For performance and visual clarity, 3–6 elements per module is recommended.
Q: Do floating elements affect the module's layout or content?
A: No. Floating images are positioned as an overlay layer on top of the module container. They do not shift or affect any module content, text, or layout.
Q: Can I use animated GIFs as floating elements?
A: Yes — animated GIFs are supported. Keep file size under 500KB to avoid performance impact.
Q: Will floating elements be visible in the Divi Builder editor?
A: Yes — floating elements render inside the builder so you can position and preview them before publishing.
Q: Should I enable floating elements on mobile?
A: In most cases, no. Decorative floating images frequently overlap text on small screens. Only enable on mobile if the image is intentional and you have tested the layout carefully on multiple screen sizes.
Q: Will search engines index the floating images?
A: The images are in the DOM and technically crawlable. Use empty alt attributes (alt="") to signal to search engines that the images are decorative, not content.