How to create a Floating button with Divi’s Position Options.

So welcome to another new tutorial. And today we’ll see how to make a floating button in Divi using Divi’s Position Options. Now Fixed buttons are very useful to increase sales and conversions. So It’s super simple and let’s get started.

Keep in mind that not only buttons you can make anything floating with Divi’s position options.

So, first of all, open up a page with Divi Builder and go to any button Settings. Then go to the Advanced tab and find Positions Panel click on it so you’ll see something like this.

Now Choose the position type as Fixed.

Now Choose the location for the button on anywhere of the page you want, just click on the box and your button will be fixed at that location on the screen you set.

Now you’ll see that your button is fixed but it might be having an issue that’s passing underneath of the other elements on the page so let’s fix it. For this go the Row Settings where the module is located and then go that Column settings where the module is located and then go to Advanced tab and open up Positions Panel and from there set the z-index to full value.

Now have a look at your button again you’ll see better results. And now let’s add some spacing because it’s at the very end of the screen and doesn’t look good.

Now go to button Module Settings and then open up the Position panel and from there add Vertical Offset as 20px and Horizontal Offset as 30px.

Final Preview

By Samar Jamil

I provide beautiful and creative Divi Child Themes, Layouts and Sections for everyone to create beautiful websites with ease using Divi.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

 

You would also like one from these

How to Enhance your Divi Shop Module

How to Enhance your Divi Shop Module

Hey Everyone, what's going on?  It's been a long time haven't posted any tutorial, but today I've got a special tutorial that'll fix your problem with the Divi Shop Module. Yeah, the Divi Shop Module is very limited because you only have 3 things to show such as...

How to show a Divi Module on Column Hover + Free Layouts

How to show a Divi Module on Column Hover + Free Layouts

Yoyo! What's going on? Welcoming you to my new Divi Tutorial and in this one, I'll be showing you how to show a Divi Module only then when you'll hover over to a column. I think you didn't understand but don't worry I've designed some Layouts for you which you can...

SamarJ

A site where you can find some awesome resources for the Divi theme and WordPress.

SamarJ

A site where you can find some awesome resources for the Divi theme and WordPress.

Donate

Buy me a coffeeBuy me a coffee

Copyright © 2020 SamarJ

Pin It on Pinterest

Share This