Adding Floating Buttons to Your Website with Elementor

floating button（Floating Button, sometimes called Floating Action Button (FAB), is a user interface element that hovers on a web page and is often used to guide users to perform key actions. In this article, we will take you to understand the core function of the floating button, use scenarios, and explain the steps to add.

What is a floating button?

Floating buttons are a common web interaction element, usually fixed in a corner or edge position on a page and displayed continuously as the page scrolls.

A few of its key features are listed below:

• highlight: Floating buttonsresuspensionAbove the content of the page, always visible and easy for users to click on at any time.
• important operation: Usually used to host important actions such as contacting customer service, initiating a chat or adding new content.
• Material Design style: Google's Material Design guidelines standardize it, often with animation and visual appeal.
• icon recognition: Floating buttons usually contain an icon, such as a plus sign for "Add", a pencil for "Edit", etc.
• interactivity: Buttons can display different states based on user actions, such as default, pressed, focused or disabled, to enhance interactive feedback.

Common Usage Scenarios

For example, Jan has just opened a flower store. In order not to miss out on any potential customers, she added a floating button that makes it easy for visitors to contact the shopkeeper at any time, no matter which page of the site they visit.

Other cases:

• Create new content: Floating buttons are commonly used in mail or notes apps to quickly create new content.
• Quick navigation: In some screens, floating buttons can jump to specific areas or pages.
• trigger operation: Used to add new tasks in the Task Management class of applications.

Methods for adding floating buttons

Note: Floating buttons are templates, not widgets or normal elements. They are used in the WordPress Add it in the backend, not in the Elementor directly in the editor.

The following is a description of the adding steps.

Adding a Floating Button: Complete Steps

The following is an example of creating a "Chat with Customer Service" floating button. This button is implemented based on Elementor's floating button template.

⚠️ draw attention to sth.: Floating buttons must use a preset template, and while it is possible to customize the content, it is not possible to create a new template from scratch.

Step 1: Create a template

Floating buttons are based on templates, so a template must be created first.

• log in WordPress Backstage, enter:Templates > Floating Buttons(Templates > Floating Buttons)

• The Create Floating Elements panel will open on the right.

💡 Tip: Once you have created your first floating element, you can continue to add more floating buttons at any time by clicking Template > New.

• Click [Add New Floating Element] (Add New Floating Element)

• The page will open the template gallery and automatically switch to the "Floating Buttons" category.

• Hover over your favorite template and click on [Insert

• The template will be loaded into the Elementor In the editor canvas

🔔 Reminder: visitors to your site will initially see only the Messenger icon. It's only when clicked that the full floating button interface expands.

Step 2: Edit the content of the floating button

Different templates provide different setup items, the following is an example setup flow:

• Setting up a customer service account to receive chats
  • In the panel, find the Username fieldEnter the customer service account that will receive the conversation
  • When the visitor clicks on the chat button, the message will be sent to the account

📚 Want to learn how to get usernames for social apps? See the official document How can I create smart links from my widgets?

• Setting the customer service name displayed in the top bar
  • Open the Top Bar settings.
  • Enter in the [Name] field:Alex Smith

• Setting up nicknames in message bubbles
  • Open the Message Bubble settings.
  • Enter in the [Name] field:Alex.

• Adjusting styles and shapes
  • Switch to the Style tab.
  • Open the Chat Box settings.
  • Through the "Corners" drop-down menu, select "orbicular" to change the shape of the chat box

• Adjusting the position of floating buttons
  • Switch to the Advanced tab.
  • Settings"Horizontal Position"forLeft
  • Settings"Vertical Position"forCenter

• After finishing editing, click [Publish] (Publish) in the upper right corner

Step 3: Setting the Display Range for Floating Buttons (Elementor Pro)

Elementor Pro Users can set which pages the floating buttons are displayed on. The recommended setting isSite-wide Displayso that the action button is available on every page.

wrap-up

floating buttonFloating Buttons are not only a design element, but also an important feature that helps users to complete their operations efficiently. Whether it's to increase interaction, provide quick support, or improve the overall functionality of a page, Floating Buttons have real meaning.

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: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off