The Omniverse Floating Blocks Builder allows you to create dynamic elements that remain visible on the screen as users scroll. This tool is perfect for sticky sidebars, promotional banners, or calls-to-action that stay in a fixed position. By keeping key content or buttons constantly visible, you can guide visitors toward important information, offers, or checkout processes, improving engagement and conversions.
Quick Steps to Create a Custom Floating Block #
- Go to Dashboard → Floating Blocks.
- Click the Add New button.
- Select a predefined floating block category (optional) and enter a block name.
- Click Create Floating Block.
- Build your block using sections and special elements in your page builder.
- Configure triggers and conditions to control where and when the floating block appears.
Floating Block Editor in Different Page Builders #
Gutenberg:
- Settings are on the right side of the top editor bar, next to the Save button. Click the gear icon to open the sidebar.
- If the gear icon is hidden, click the three vertical dots → Floating Block Settings, and ensure the star icon is active to enable the panel.
Elementor:
- Settings are located in the page settings panel. Click the gear icon in the top panel to open the left sidebar settings.
WPBakery:
- Settings are located below the content editor in the metabox area, similar to slider configuration.
Default Floating Block Behavior #
By default, a newly created floating block:
- Has no fixed width; size depends on content.
- Uses a transparent background.
- Is positioned in the center of the screen.
- Has appearance animation disabled.
- Appears on all pages with no triggers enabled.
- Has closing options (close button, Persistent Close) disabled.
Floating Block Settings Overview #
Floating blocks have extensive options, grouped as follows:
1. Layout
- Set width, height, z-index, and screen positioning.
- Stretch block to edges for sidebars or horizontal bars.
- If height is fixed, adjust content vertical alignment.
- z-index controls stacking order of multiple blocks.
2. Styles
- Configure background, border, border-radius, shadow, padding, and margins.
- Padding = spacing from block edge to content;
- Margin = spacing from block edge to screen edge.
3. Animation
- Control how the block appears (default: slide left-to-right).
4. Close Behavior
- Close button customization, selector-based closure, and Persistent Close.
5. Responsive
- Control visibility on desktop, tablet, or mobile devices.
6. Triggers
- Define display conditions, such as time on page, clicks, or scroll position.
- Each trigger has a Trigger Once option and uses cookies (7-day expiration).
7. Conditions
- Control where blocks appear using Include and Exclude rules.
- Examples: only on homepage, specific product category, or excluding account pages.
Difference Between Popups and Floating Blocks #
| Feature | Popup | Floating Block |
|---|---|---|
| Interaction | Interrupts user | Non-intrusive, part of layout |
| Overlay | Yes | No |
| Concurrency | One at a time | Multiple simultaneously |
| Triggers | Active by default | Optional, usually immediate |
| Persistent Close | Usually enabled | Usually disabled |
| Purpose | Data capture, time-sensitive promotions | Permanent CTAs, informational bars |
Key Takeaway:
- Popups demand immediate attention.
- Floating blocks provide persistent access without interrupting browsing.
Configuring a Floating Block After It Has Been Closed #
If a floating block is no longer visible due to closure:
- Temporarily disable Persistent Close in the block settings.
- Ensure Trigger Once is disabled for active triggers.
- Edit and verify your block (content, animations, triggers).
- Re-enable previous settings after testing.
Alternative ways to preview closed blocks:
- Open the site in Incognito/Private mode.
- Use a different browser.
- Clear cookies for the site (default duration: 7 days).
