How to add a Floating Bar in Elementor

A Floating Bar is a banner that is fixed at the top or bottom of a web page and is often used to display promotional information, important announcements, or calls to action (CTAs) to attract visitors' attention without interrupting the browsing experience.

Note that the Floating Bar is a template, not a widget (Widget) or other elements. It must be in the WordPress Add it in the backend, you can't add it in the Elementor created directly in the editor.

Common Usage Scenarios

Case example:
Jan owns a clothing store. The weather forecast shows rain in the coming weeks and she adds a floating bar to her website to remind visitors that they sell umbrellas. This floating bar is displayed at the bottom of all pages.

Other usage scenarios::

• Promotions: discount codes can be displayed in the floating bar
• Navigational jumps: directing users to new sections or special pages
• Action Trigger: Setup CTA button that directs the user to subscribe or click on the chat feature

Adding a Floating Bar: A Step-by-Step Guide

Below is a complete example where we create a floating bar that directs the user to chat with customer service. This floating bar is done based on a predefined template provided by Elementor.

Attention:

• Floating Bar is created based on an existing template
• Content is customizable, but the structure must be selected from the template library

Step 1: Create a floating template

Since Floating Bar is a template type, you have to create a template first.

• log in WordPress Backstage, enter:
  Templates > Floating Elements

• Click the button on the right:Add New Floating Element

• Select from the drop-down menu:Floating Bars

• (Optional) Name the floating bar, e.g. "Umbrella Promotional Bar".

• strike (on the keyboard)Create Floating Element

The system automatically opens Elementor template libraryand jump to the Floating Bars category. At this point you must select a template from among them.

Tip: Templates marked with "Pro" are available only for Elementor Pro User Usage.

Step 2: Insert the template

• Hover over a favorite template and click on theInsert

• The template is loaded in the Elementor editor.

Step 3: Edit the content of the floating bar

The floating bar can be freely adjusted according to the selected template in theicon (computing), text, CTA buttons, and positions, among other things.

The following is the operation in the example:

1. Modification of the icon

• Find the panel in the Icon icon field

• Click the icon button on the right to open the icon gallery

• Search for and select the umbrella icon and click "Insert".

2. Modification of the text of the banner

• locate Announcement (content of announcement) field
• The modification reads:Check out our umbrellas.(Storm coming? Come check out our umbrellas.)

3. Setting the CTA button

• show (a ticket) CTA button field

• Modify the button text to:Stay dry!

• Add jump page links to button links

4. Modification of display location

• Switch to Advanced tab

• Click on the bottom icon (which represents placing the floating bar at the bottom of the page)

• When previewing, you will see the floating bar appear at the bottom of the browser

Step 4: Publish and set display conditions

• Click the Publish button in the upper right corner.

• In the pop-up window click on theAdd Condition

If you are using the Elementor Pro, you can set in which pages, articles, categories the floating bar will be displayed. For example: show it only on the home page, or show it on the product page.

• After setting the conditions, clickSave & Close

In this case, the Floating Bar will appear on the specified page to attract the visitor's attention.

wrap-up

Floating Bar is a non-intrusive front-end prompt suitable for displaying promotions, announcements and interactive buttons. It relies on templates to create, but has freedom of content and style. Use Elementor Pro users can set the display conditions and page ranges to make them fit better with the website's style.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off