How to Create a Floating Button in Divi

Updated: April 18, 2022

If a website visitor can’t find what they’re looking for on the page or wants to jump straight to getting in touch, it’s 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.

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, login to your WordPress dashboard and edit an existing page or you can create a new one and click 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 floating on the right side of your page, go to the Advanced tab then click on the Position block, change the Position option to Fixed → click the middle right on the Location box to place your button on the middle right of your page → adjust the Horizontal Offset to 20px to make the button not sticking to the right of the browser → adjust the Z Index to 9999 to make the button most upfront element in 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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general