Floating blocks builder

The Floating blocks builder gives you the ability to create dynamic elements that remain visible on the screen as users scroll. This powerful tool is perfect for building sticky sidebars, promotional banners, or calls-to-action that stay in a fixed position. By keeping essential information or a key button constantly in view, you can effectively guide your visitors toward important content, special offers, or the checkout process, significantly improving user engagement and conversion rates.

Features of editors in different page builders

Since all three page builders used in the WoodMart theme have significant differences in their editors, it is worth knowing exactly where the block settings options are located in each builder before creating and configuring a floating block.

Gutenberg

In Gutenberg, the floating block settings are located on the right side of the top editor bar, next to the save button. To open them, click the gear icon. Afterwards, you will see an additional block settings sidebar on the right side of the screen, which is similar to the settings for a standard builder block.

Important Note: Gutenberg has options for hiding elements on the panel, so if you do not see the gear icon, click the three vertical dots in the top-right corner of the editor, select “Floating block settings” there, and ensure that the star icon (which enables the settings element on the top bar) is active in the upper part of the sidebar that opens.

Elementor

In Elementor, the floating block settings are located in the same place as the regular page settings. To open them, click the gear icon in the center of the top panel. After doing so, you will see the block settings in the left part of the screen, which are similar to the settings of a standard builder element.

WPBakery

In WPBakery, the floating block settings are located below the content editor, in the area where the page metaboxes are usually found. The block is configured using controls similar to those used to set up a slider in this builder.

Standard floating block behavior 

By default, a newly created floating block has no fixed width, and its size depends on the content within it. It has a transparent background, is positioned in the center of the screen, and has the appearance animation disabled. Only one condition is set, which displays it on all pages. The Triggers functionality is disabled, and the block appears immediately. Closing options, such as the close button and Persistent close, are disabled by default.

List of floating block settings

Floating block settings include a powerful set of options covering size, positioning, styling, paddings, margins, borders, shadow, separate block closing configurations, and animations. A separate and crucial category is the sections for configuring the triggers and conditions under which the block will be displayed on the page. All these options can be divided into conditional categories:

• Layout. These are the options for width, height, z-index horizontal and vertical positioning that allow you to place the floating block on the screen. The height and width options also let you stretch the floating block to the screen edges, either vertically or horizontally, making it look like a sidebar or a horizontal bar. By default, the floating block’s height depends on the size of the content within it. If the block is given a fixed height, an additional “Content position” option appears. This allows you to position the content vertically if the content’s height is less than the block’s fixed height. The z-index allows you to place floating blocks on top of one another or position them above or below other elementson the website.
• Styles. This is a set of options that allows you to configure all the basic styles, similar to those found in the vast majority of regular builder elements. Using the style options, you can customize the background, border, border-radius, shadow, paddings, and margins. It is worth clarifying that, in the case of a floating block, paddings define the spacing from the edge of the block to its content, while margins define the spacing from the edge of the screen to the boundaries of the floating block.
• Animation. This option determines the effect with which the floating block will appear. By default, it uses the same “From left to right” animation as all other blocks on the site, such as the Quick-view and Add to cart blocks, and others.
• Close behavior. These options are responsible for how the floating block is closed. They cover the close button (including its design and color settings) and closing by clicking another element inside the block specified via a selector. The last option, Persistent close, determines whether the floating block can be displayed again after a user closes it, regardless of how the triggers that display the block are configured.
• Responsive. These options determine whether the floating block will be visible on a specific type of device: desktop, tablet, or mobile.
• Triggers. These are a special group of options that define the conditions for displaying the floating block, such as showing the block after a certain time spent on the page, displaying the block after a specific number of clicks, upon clicking a block with a certain selector, when scrolling the page to a specific height, and many others. Each trigger has its own sub-options and a “Trigger once” option, which specifies that this trigger can only be activated one time. The status of the trigger display is stored in a cookie with an expiration period of 7 days. You can find more information about triggers in a separate article.
• Conditions. These options determine on which pages a floating block can be displayed. This can be a single page or a varying number of pages that meet certain criteria. You can set floating blocks to appear only on the homepage or, for example, on products within a specific category. Conditions have sub-options: “Include” and “Exclude.” By manipulating these, you can, for instance, set a specific floating block to display on all pages of the site, but then use the “Exclude” setting for the My Account page where it will not be shown.

What is the difference between popups and floating blocks?

Floating blocks and popups serve fundamentally different purposes. Floating blocks are non-intrusive elements that are part of the page layout but remain fixed on the screen. They are designed to be “always on” without interrupting the user’s flow. In contrast, popups are modal windows that block the entire screen or dim the background, forcing the user to interact with them before they can continue browsing. Popups are ideal for demanding immediate attention for a single, critical action, whereas floating blocks are best for providing persistent access to information or navigation.

How to configure a floating block after it has been closed

If you plan to make changes to a floating block but it is no longer appearing on the site because it was previously closed, go to the floating settings and temporarily disable the Persistent Close option for the duration of your development work. Also, ensure that the Trigger once option is disabled in all active triggers responsible for the floating’s appearance. Once you have edited the floating, checked its content, animation, and so forth, you can revert the aforementioned options to their previous values. An alternative way to see a closed floating again (when the options mentioned above are enabled) is to open your browser in an Incognito/Private window, use a different browser, or forcefully clear the cookies for the site. Without taking these actions, the standard cookie duration is 7 days.