How to Create Floating Button in Elementor (2 Ways)

Updated: September 2, 2022

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) button, 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 (⚙️) button, 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.

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

4 thoughts on “How to Create Floating Button in Elementor (2 Ways)”

  1. Hello,
    Thanks for the tutorial. Really helpful. I have one problem
    I tried method 2 and tried to rotate this block using css. I have extra white box appearing. I followed method 2 from your tutorial. Please advice how to remove this white box around the button. Even your method 2 has left over white space around the button.

    Reply
  2. Hello Ved,
    Thank you for visiting our site.
    Regarding your question, how to remove the white box around the button?
    Please follow the following steps below:
    – Go to the Popup Settings -> Style Tab
    – Change the background color to transparent

    Thank you

    Reply
  3. Hello,
    Thank you this helped. I have another question. I have added a popup form to this button. At the moment, once the button is clicked the form is loaded. but incase the user closes the form. This button disappears and reloads on after refreshing the page.
    is there a way to keep the button constant? i.e after click the button remains without needing to refresh the page. I am using elementor pro.

    Reply
    • Hello Ved,

      Well, regarding your question above,
      Please follow the following steps below:
      – On the Popup Settings, go to the Advanced tab
      – Enable the Prevent Closing on Overlay option
      We hope the answer is helpful for you.

      Thank you

      Reply

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.