How to Create Floating Button in Elementor (2 Ways)

We’re sure that you are familiar with the button that appears in front of all screen content and typically a circular shape with its icon at the center. Well, that is the floating action button. The floating action button can trigger an action or navigate somewhere. Such as triggers for email, social media, guiding visitors to subscribe to our channel, and many more.

In Elementor, there are two methods for creating a floating action button, they are:

• By setting Z-Index
• By creating a popup

This tutorial will show you how to create a floating action button using those methods. The Elementor we use is the pro version.

How to Create the Float Action Button in Elementor

Method 1: By Setting the Z Index

You can use the free version of Elementor to create the float action button with this method. But you have to paste the button that you’ve designed on every page that you want the button to display on your site. With Elementor Pro, you can also access the Custom CSS feature, which we will use in this tutorial.

Go to your Elementor editor; you can edit your existing content (pages, posts, etc.) or create a new one. In this example, we will edit our current page. First, create a new section with a single column. Select the Button widget and drag and drop it into the canvas area from the widget panel. Next, edit the Text button and the Link. In this tutorial, we will use the button as a trigger to navigate the visitors to the Elementor website. Under that on the Alignment option, set it to the Right, and last but not least, change the button Size to Extra Small.

As you can see in the GIF above, that button is stationary in the section. Next, we will make it to move as we scroll and stay in the same place. Go to the Advanced tab. On the Layout setting, set the Width to Inline (auto), set the Position to Fixed, set the Horizontal Orientation to the Right, and adjust the Offset as you want.

Next, we are going to set the essential thing in this method. On the Z-Index field, enter the number of 9999; it will make the button always in front (floating).

Now, it’s time to rotate the floating acting button. Still on the Advanced tab, go to the CSS Classes on the Layout block, then write rotate inside the box. After that, go to the Custom CSS block and then paste this code .rotate {transform: rotate(90deg);} into the field. You can see that the button just rotated, but there is a weird gap between the side of the screen. So, let’s fix it by adjusting the Offset to -62.

Last but not least, we want to do a final little touch for this floating action button. Go to the Transform settings block, select the HOVER, go to the the Offset option and set it to 7 for each option.

Method 2: By Creating a Popup

Unlike Z-Index, create a floating action button using the Popups method only available on Elementor Pro. Well, let’s get started.

On your WordPress Dashboard, go to Templates -> Popups. Click the Add New button to create a new popup template.

Enter a template name and click the CREATE TEMPLATE button. It will bring you to the LIBRARY, which contains many popups preset. You can pick one of them or create from scratch, which is what we will do. Click the (X) icon, bringing you to the Elementor editor.

Create a new section with a single column. Select the Button widget from the widget panel, then drag and drop it into the canvas area. Go to block setting, and we’re going to apply some changes as below:

Content tab > Button

• Text button: GET ELEMENTOR
• Link: https://trk.elementor.com/5710 (you can use any link)
• Alignment: Right
• Change the button Size to Extra Small

Style tab > Button

• Make it HOVER
• Text Color: #050101
• Border Type: Solid
• Background Color: #5BC8A1
• Border Color: #8B05A5
• Border Type: Solid

Next, we’re going to edit the popup settings. Click the settings (⚙️) icon, and you will find many options that you can set. There are some changes that we applied as below:

Settings tab > Layout

• Set the Width to 166
• Position: Horizontal > Right
• Overlay: HIDE

Advanced tab

• Go to Margin setting, unlink it, and set it to -15 on the RIGHT box.

So now the design is ready, let’s click the PUBLISH button to set the display conditions and trigger. To set the display condition, click the ADD CONDITION button and select your option from the dropdown. In this example, we will set this template to display on the Entire Site. Once you have finished setting the conditions, click NEXT. On the Triggers tab, set the trigger to On Page Load by switching the toggle to YES, and set it to 10 seconds.

In this tutorial, we’re not going to set any Advanced Rules. So, click on SAVE & CLOSE. Well, now we’re done. Let’s see what it looks like.

The Bottom Line

There are several options to achieve a certain thing in Elementor. When it comes to floating button, there are two options you can use as we have covered above. If you want to have more styling options, creating a floating action button using the popup builder is a better alternative as you have options to style up the button as well as the behavior, such as the close button, duration, entrance or exit animation, and so on.