Would you like to create a floating button with the Z index on Elementor ?
We're sure you're familiar with the button that appears in front of all screen content and usually has a circular shape and an icon in the center. Well, that's the floating action button.
The floating action button can trigger an action or send you sailing somewhere. Such as triggers for emails, social networks, orientation of visiteurs to subscribe to a channel, and many others.
In Elementor, there are two methods to create a floating action button, they are as follows:
- By setting Z-Index
- By creating a popup window -Popup-
In this tutorial we will only show you how to create a floating action button by setting the Z index. And we will use the pro version to make it happen.
But first, find out: How to install Elementor on WordPress
How to Create the Floating Action Button in Elementor
You can use the free version ofElementor to create the floating action button with this method. But, you need to paste the button you designed on each page where you want the button to display on your website.
With Elementor Pro, you can also access the feature Custom CSS, which we will use in this tutorial.
Go to your Elementor editor; you can modify your existing content (pages, articles, etc…) or create a new one. In this tutorial, we are going to modify a page.
First, create a new section with a single column. Select the Button widget and drag and drop it into the editing area from the widget panel. Then change the button texts and link.
In this tutorial, we will use the button as a trigger to push the visiteurs to navigate the Website Elementor. Then, on the option Alignment, set it to the right et, Finally, change the size of the On button Very large.
As you can see in the GIF above, this button is stationary in the section. Next, we'll make it move as we scroll while keeping it in the same position.
Go to the tab Advanced. In the parameter Layout, set the width on Inline (car), define the position on Fixed, define horizontal orientation on right and adjust it shift As you wish.
Next, we will define the essentials in this method. In the field Z-Index, enter the number 9999 ; it will make the button always in front (floating).
Now it's time to rotate the floating action button. Always under the tab Advanced, access css classes from the block Layout, then write rotate inside.
See also: Elementor: Introducing the Best WordPress Page Builder
After that go to the block Custom CSS , then paste the following code into the field:
.rotate.rotate
{transform: rotate(90deg);}You can see that the knob has just rotated, but there is a weird gap between the side of the screen. So, let's fix it by adjusting the shift at -92
Finally, we're going to do one last little touch for this floating action button. Access the block Transformer, select it OVERVIEW, access the option shift and set each option to 7.
There are several options to achieve a certain thing in Elementor. When it comes to the floating button, there are two options you can use. Here we have covered only one method, the other method will be another tutorial.
Read also: Elementor: How to migrate a WordPress website
If you wish to have more styling options, creating a floating action button using Popup's builder will be a better alternative as you will have options to customize the button as well as the behavior, like button closing time, duration, entry or exit animation, etc.
You have just completed this task easily. Just preview your tablet and smartphone work, trying to change the margins to match each device.
Get Elementor Pro Now!
Conclusion
So ! That's it for this article that shows you how to apply a Zoom effect on a profile card. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
