Floating Elements - divianimator.com

Reference guide for using the Floating Items module in Divi.

Overview #

Floating Items is a module for placing and styling content elements within a layout. It supports images and other content types, with options for positioning, animations, borders, shadows, and filters.

The module is organized into three tabs: Content (what appears), Design (how it looks), and Advanced (CSS and behavior).

Content Tab #

Controls what the Floating Item displays.

Content Type #

Dropdown to select the type of content. Options: Image, Text, Video, or other module types.

Default: Image. Select the content type you need from the dropdown.

Image #

Appears when Content Type is set to Image. Click to upload or select an image from the media library.

Supported formats: JPG, PNG, GIF, WebP. Recommended dimensions depend on placement in layout.

Placement #

Determines where the floating item sits within its container or the layout.

Option	Behavior
Inline	Item flows with normal document layout
Floating	Item floats to left or right of content
Absolute	Item positioned absolutely within parent
Fixed	Item stays in fixed position on screen

Link #

Optional URL the item links to when clicked. Leave blank if no link needed.

Enter full URL including http:// or https://. Open in new tab option available.

Animation #

Dropdown to select entrance animation. Options vary by available animations. Set to None for no animation.

Animations play when the item appears in viewport or on page load, depending on configuration.

Element Label #

Internal label for identifying this module in the builder. Does not appear on front-end.

Useful for organizing multiple floating items. Example: "Hero Badge" or "Corner Decoration".

Design Tab #

Controls the visual appearance of the Floating Item.

Border #

Adds a border around the item.

Enable: Toggle border on/off
Style: Solid, dashed, dotted, double
Width: Border thickness in pixels
Color: Border color picker
Radius: Corner rounding in pixels

Set border radius to 50% of width/height for circular items.

Box Shadow #

Adds shadow effect around the item.

Enable: Toggle shadow on/off
Horizontal Offset: Shadow distance left/right
Vertical Offset: Shadow distance up/down
Blur: Softness of shadow edge
Spread: Size of shadow
Color: Shadow color and opacity

Filters #

Applies visual effects to the item.

Filter	Effect	Range
Brightness	Lightens or darkens the item	0-200%
Contrast	Increases or decreases color contrast	0-200%
Saturation	Increases or decreases color intensity	0-200%
Grayscale	Removes color	0-100%
Blur	Blurs the item	0-20px

Transform #

Applies 2D and 3D transformations.

Scale: Resize item (1.0 = normal, 1.5 = 150%)
Rotate: Rotation in degrees (0-360)
Translate X/Y: Move item on X and Y axes
Skew: Distort item along X or Y axis

Advanced Tab #

Controls CSS, visibility, and transitions.

CSS ID & Classes #

Assign CSS ID and class names to the module.

CSS ID: Unique identifier for the module. Use for targeting in CSS (prefix with #)
CSS Classes: Space-separated class names. Use for styling multiple modules (prefix with .)

Example: ID = "hero-badge", Classes = "floating-item light-shadow"

CSS #

Custom CSS code applied to the module. Write any valid CSS properties and values.

Example: opacity: 0.9; margin-bottom: 20px;

Visibility #

Controls when the module displays.

Option	Behavior
Show on Desktop	Module visible on desktop screens (1200px+)
Show on Tablet	Module visible on tablet screens (768-1199px)
Show on Phone	Module visible on mobile screens (below 768px)

Check/uncheck to show or hide on each device type.

Transitions #

Enables smooth transitions when module properties change (hover, focus, etc).

Enable: Toggle transitions on/off
Duration: How long the transition takes (milliseconds)
Delay: Wait time before transition starts
Timing Function: Ease curve for the transition

Example: 300ms duration for smooth hover effects.

Common Configurations #

Decorative Corner Image #

Tab	Setting	Value
Content	Content Type	Image
Content	Placement	Absolute
Design	Border	Off
Advanced	Visibility	Show all devices

Linked Badge with Shadow #

Tab	Setting	Value
Content	Content Type	Image
Content	Link	https://example.com
Design	Box Shadow	Offset 2px, Blur 8px
Design	Border Radius	50% (circular)
Advanced	Transitions	300ms ease

Animated Entrance Item #

Tab	Setting	Value
Content	Animation	Fade In
Design	Opacity	Start hidden, animate to visible
Advanced	Visibility	Show on Desktop only

Troubleshooting #

Item not appearing #

Check Visibility settings. Verify the device breakpoint is enabled. Ensure Opacity is not set to 0. Check z-index if item is behind other content.

Placement not working #

Verify Placement setting matches intent (Inline, Floating, Absolute, Fixed). Absolute placement requires a relatively-positioned parent. Fixed placement may behave unexpectedly on mobile.

Image appears stretched or distorted #

Check image dimensions. Upload higher resolution image if scaling up. Check Transform Scale value. Verify no conflicting CSS in custom CSS field.

Link not clickable #

Verify Link field contains valid URL. Check if another element is overlapping and blocking clicks. Ensure Content Type is set correctly.

Animation not playing #

Verify Animation dropdown is not set to None. Check if animation is set to trigger on scroll and element is in viewport. Clear browser cache.

Border or shadow not showing #

Verify Enable toggle is on. Check color is not transparent. Check Width/Blur values are greater than 0. Ensure no conflicting CSS is overriding.

Filters making image unrecognizable #

Adjust filter values. Reset to defaults if needed. Check Brightness and Contrast ranges. Remember Grayscale removes all color at 100%.

Item misaligned on mobile #

Check responsive breakpoint settings. Adjust Placement for mobile devices. Use Visibility settings to show different layouts per device. Test on actual mobile device.

Support #

For issues or questions about the Floating Items module, contact support@diviexpand.com or check the Divi documentation.