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.
1 thought on “How to Create a Floating Button in Divi”
Hello Hendri,
I need your expertise in the following, which I am new to. WP and I have used only DIVII since I started. 4-5 years. ago.
I need to design a new website similar to this website: https://verveseniorliving.com
I need to perform in particular like these 3 pages:
1-Home page HEADER
2- Each location Header
3-Map with locatiions
But I don’t know what theme can have the capabilities to do these things. is it DIVI and a particular pre-made layout? or Elementor. and particular template or theme. Also, I have an account with Envato to download any WP theme, honestly. I don’t know which way to go and kind of lost here
This is my email address if you can email me some advice
constructiononlineplatform1@gmail.com
Thanks
George