How to Create a Floating Button in Divi

There might be a time of a website visitor can’t find what they’re looking for on the page and wants to jump straight to getting in touch. With a floating button, it’s a great way to make yourself available and accessible. The floating button is always there, it suggests visitors take action without intruding on their browsing experience.

Creating floating buttons or floating action buttons in Divi is not a difficult task, we will show you how to create one step by step in this article. We will create a floating button that will take us to the phone call application when it’s clicked.

How to Create Floating Buttons in Divi

Step 1: Create a New Section and a Button

First, log in to your WordPress dashboard and edit an existing page or you can create a new one and click the Use Divi Builder button to edit the page with Divi Builder. You need to create a section for the new button module. Go into an empty space on your page and click the add new section icon , select a regular one → select the row layout and search for the button module.

Step 2: Change the Text and Give a Link to The Button

After the button is created let’s change the “Click Here” text to “Call Us” on the button. For the link, we will use “tel:phone number” action, so when the button is clicked, it will take us to the phone call application to call the number we just filled in the link option.

Step 3: Let’s Give the Button Some Style

To start customizing your button style, we need to enable the Custom Style option before, in the Design tab.

Then you can change the button color and text, give it an icon, make it more rounded, customize the on hover option, and many more.

Step 4: Make the Button Floating

After you are done with the button style, let’s make the button always float on the right side of your page by going to the Advanced tab and following these steps.

• Position Block
  • Position: Fixed
  • click the middle right on the Location box to place your button on the middle-right of your page
  • Horizontal Offset: 20px
  • Z Index: 9999 (to make the button the most upfront element on your page)

After the button is ready, Let’s try scrolling the page up and down to test if the floating button working as intended.

The Bottom Line

A floating button is a great way to make yourself available and accessible with the floating button. The floating button is always there, it suggests visitors take action without intruding on their browsing experience. We demonstrated how easy it was to create a floating button on the Divi editor, with a little setting, and viola your floating button is ready for action.