How to Add Floating in Bricks Builder Using BricksFly

BricksFly Floating Element allows you to place decorative images anywhere within your layout and apply continuous movement effects. You can control each item’s position, size, stacking order, animation style, and smooth scrolling behavior directly from the Bricks Builder editor.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Floating in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under General, toggle on Floating.

Step 1: Add Floating Items

Elements: Allows you to add, remove, duplicate, reorder, and manage the items displayed as floating elements.

Add Items: Adds a new floating item. After adding an item, click it to configure its image, position, animation, and other settings. For this example, one item is selected, but you can add as many items as needed.

Step 2: Configure Each Floating Item

Image: Allows you to upload or select the image displayed as the floating element.

Size: Controls the width or overall size of the floating image. In this example, no size value is specified.

Horizontal Orientation: Selects the horizontal side used to position the floating element, such as left or right. For this example, the horizontal position is set to Right.

Offset: Controls the distance between the floating element and the selected horizontal side. Increasing the value moves the element farther away from that side. However, in this example, the Offset field is left blank.

Vertical Orientation: Selects the vertical side used to position the floating element, such as top or bottom. For this example, the position is set to Top.

Offset: Controls the distance between the floating element and the selected vertical side. Increasing the value moves the element farther away from that side. However, in this example, no offset value is specified.

Z-Index: Controls the stacking order of the floating element. An element with a higher Z-index appears in front of elements with a lower value. In this example, the value is set to 1, but you can enter any value based on your preference.

Live Animation: Enables or disables continuous movement on the floating element. When enabled, the image remains animated to create a more dynamic appearance. Available options include:

• Float Y: Moves the floating element continuously up and down along the vertical axis. This creates a gentle floating effect.
• Float X: Moves the floating element continuously from left to right along the horizontal axis.
• Spin: Continuously rotates the floating element around its center.
• Scale: Continuously increases and decreases the size of the floating element, creating a smooth pulsing effect.
• Wiggle: Moves or rotates the floating element slightly from side to side, creating a playful shaking effect.

In this example, Float Y is selected.

Enable Scroll Smoother: Connects the floating element with the website’s smooth scrolling behavior. When enabled, the element moves more smoothly while visitors scroll through the page. However, in this example, the option is disabled.

Final Result