Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Recipe #19 is hopefully the first of many tutorials I will create based on Recipe Requests from the Divi community, How to create a sticky button in Divi. Last week I implemented a form where you can suggest recipes you want me to create and I added a sticky button to the right hand side of Divi Soup pages to make it easy for people to find the request form. It seems this button sparked some interest and Wendy Lovatt added it to the request list.
You can see an example on the right hand side of this very page or, if I have removed it because I am getting to many requests ( 
) you can see a demo here.
Here you go Wendy, enjoy!
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes
An active child theme (we are going to be editing a little PHP so a child theme is a ‘must have’ for this recipe)
FTP or cPanel access to upload your modified PHP file (or you can edit in Appearance > Editor)
Cooking time
This should take you around 10 minutes max.
Preparation
You will also want to BACK UP before you begin, it’s not a good idea to start editing PHP without a back up.
Method
So the first thing we need to do is add a small code snippet to one of our child theme PHP files. You can add this code to either the header.php or footer.php, in this recipe I am going to add it to the footer.php as this file is generated automatically by (most of) the child theme generators/makers so it makes it a little easier.
Either open your footer.php file in a text editor and when edited re-upload via FTP or cPanel, or open in your WordPress dashboard from Apperance > Editor
Scroll down right to the bottom of the footer.php file and add the following code right before the closing </body> and </html> tags:
<div id="ds-sticky-button"> <a href="https://divisoup.com">STICKY BUTTON</a></div>
You will want to change https://divisoup.com to the page you want the button to redirect to once clicked and STICKY BUTTON to the text you want the button to display.
It should look something like this:
Now for the CSS. Open up your child theme stylesheet and add the following CSS based on where you want the button:
STICKY BUTTON RIGHT CSS
/*STICKY BUTTON RIGHT*/
/*This places the button where we want it*/
#ds-sticky-button {
position: fixed;
right: -195px !important; /*Positions the button to the right of the page*/
top: 200px; /*Sets the distance of the button from the top of page*/
width: 200px !important; /*Sets dimensions of the button*/
height: 25px !important; /*Sets dimensions of the button*/
z-index:99999; /*Keeps the button on top*/
transform: rotate(90deg); /*Rotates the button*/
transform-origin: left top 0; /*Places the button after rotation*/
}
/*Styles the link text to make it look like a button - You can edit all these values to match your design*/
#ds-sticky-button a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
border: 1px solid #fff;
color: #ffffff;
font-size: 16px;
background: #ff6600;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
/*Styles the button on hover - You can edit all these values to match your design*/
#ds-sticky-button a:hover {
background: #000000;
text-decoration: none;
}
/*Moves the button up a bit on smaller screens - You can adjust this to get the button where you want it or just remove it if you don't want to change the location*/
@media only screen and (max-width: 980px) {
#ds-sticky-button {
top: 100px !important;
}
}
STICKY BUTTON LEFT CSS
/*STICKY BUTTON LEFT*/
/*This places the button where we want it*/
#ds-sticky-button {
position: fixed;
left: 0 !important; /*Positions the button to the left of the page*/
top: 300px; /*Sets the distance of the button from the top of page*/
width: 200px !important; /*Sets dimensions of the button*/
height: 25px !important; /*Sets dimensions of the button*/
z-index:99999; /*Keeps the button on top*/
transform: rotate(-90deg); /*Rotates the button*/
transform-origin: left top 0; /*Places the button after rotation*/
}
/*Styles the link text to make it look like a button - You can edit all these values to match your design*/
#ds-sticky-button a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
border: 1px solid #fff;
color: #ffffff;
font-size: 16px;
background: #ff6600;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
/*Styles the button on hover - You can edit all these values to match your design*/
#ds-sticky-button a:hover {
background: #000000;
text-decoration: none;
}
/*Moves the button up a bit on smaller screens - You can adjust this to get the button where you want it or just remove it if you don't want to change the location*/
@media only screen and (max-width: 980px) {
#ds-sticky-button {
top: 200px !important;
}
}
STICKY BUTTON BOTTOM RIGHT CSS
/*STICKY BOTTOM RIGHT*/
/*This places the button where we want it*/
#ds-sticky-button {
position: fixed;
right: -50px !important; /*Positions the button to the right of the page*/
bottom: 0; /*Sets the distance of the button from the bottom of page*/
width: 200px !important; /*Sets dimensions of the button*/
height: 25px !important; /*Sets dimensions of the button*/
z-index:99999; /*Keeps the button on top*/
}
/*Styles the link text to make it look like a button - You can edit all these values to match your design*/
#ds-sticky-button a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
border: 1px solid #fff;
color: #ffffff;
font-size: 16px;
background: #ff6600;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
/*Styles the button on hover - You can edit all these values to match your design*/
#ds-sticky-button a:hover {
background: #000000;
text-decoration: none;
}
STICKY BUTTON BOTTOM LEFT CSS
/*STICKY BOTTOM LEFT*/
/*This places the button where we want it*/
#ds-sticky-button {
position: fixed;
left: 0 !important; /*Positions the button to the left of the page*/
bottom: 0; /*Sets the distance of the button from the bottom of page*/
width: 200px !important; /*Sets dimensions of the button*/
height: 25px !important; /*Sets dimensions of the button*/
z-index:99999; /*Keeps the button on top*/
}
/*Styles the link text to make it look like a button - You can edit all these values to match your design*/
#ds-sticky-button a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
border: 1px solid #fff;
color: #ffffff;
font-size: 16px;
background: #ff6600;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
/*Styles the button on hover - You can edit all these values to match your design*/
#ds-sticky-button a:hover {
background: #000000;
text-decoration: none;
}
Where you place your button will depend on the other elements you have on your pages. I deliberately have not included an option to place the button at the top of the page as this will start to mess with your menus and won’t be good for user experience.
Also, it is impossible to anticipate how the CSS may be affected by your individual set up so if the button is not quite in the correct place for you then you may need to adjust the top, right, bottom or left values to get it exactly where you want it.
The versions of this button that stick to the bottom of the page can be a little annoying on mobile, so if you want to hide the button on smaller screens add the following CSS too.
HIDE ON MOBILE CSS
/*Hides the button on smaller screens*/
@media only screen and (max-width: 980px) { /*adjust the max width value to hide the button on the screen sizes of your choice*/
#ds-sticky-button {
display: none;
}
}
And that’s it.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
no preview?????
As it mentions in the recipe, there is an example on the right side of this very page. Also, please do not attempt to post comments with long strings of random characters. All comments are moderated and you will likely get blocked for doing that. Thanks!
Hi,
Is it possible to change the text orientation? See it is like this: https://www.screencast.com/t/LuzrAlV0xw
The sticky button left and sticky button right are oriented that way
Works perfectly. Would it be possible to have an icon/image instead of text on the button?
Yes, use the icons in the design settings and then just add a space in the title field
Hi, am using the sticky button to trigger the display of a feedback form on a popup. Am wondering how I could hide the sticky button once the form would have been submitted..Am using Caldera forms..
To add that sort of functionality you would need to edit the core files of the plugin, which I would not recommend. You can try contacting their developers for other suggestions.
Is it possible to add show delay e.g.. only after 50% of page scroll?
You can add any CSS to customize it as you wish, including a transition-delay property.
It must be me…it didn’t work.
I added the code to the Child Theme footer.php and the CSS code, but nothing appears on the page. Any ideas would help.
What should appear is a “Questions” tab.
Thanks.
I would need to see a link please Don
Hi Michelle, thanks for sharing this. I have one slight problem: the button is not visible on Chrome. IE, Safari, FF are working on Mac and Windows, even Chrome on Windows is ok, just Chrome on Mac shows nothing. Any suggestions are highly appreciated…
Apologies Peter but I do not use Mac so cannot test for you, suggest posting in the Facebook groups where there are lots of Mac users
No problem Michelle, I´ll head over to FB and ask there.
Thanks so much Michelle, works like a charm
Most welcome
Does this still work? cant see the example………
Yes it does still work but I have since removed it from this site
Will this work on a Bigcommerce store website?
I am not sure what that is but the code is specific to Divi.
Awesome, thank you. Now, just an idea, would it be too hard utilizing this to get something like http://gtb.com (where one side of the site is “sticky” while the other one scrolls normally). I imagine it would be staged as a large sticky area covering a 50% of the width or something?
I don’t see anything sticky on that page Haris?
Great solution. Thank you. I tried it an it works fine.
Thank you, thank you!! I JUST had a client ask for this very thing and was planning on spending hours figuring it out. Thanks to you it’s done before breakfast and the client will be thrilled. I can’t tell you how grateful I am!
That’s great Heather, if it helps just one person I am a happy bunny
Thanks Michelle,
Would that work with an image ?
Yes it would Alex
Indeed it is working well
Thanks again…
One trick : For those who wants the sticky button only on selected pages of their website, just put the code /* STICKY BUTTON*/ in a code module on the selected pages, it works perfectly.
One question: I tried to use it with multiple buttons in order to make kind of a menu but the link zone of the buttons is not the whole button (except for the last loaded button). Weird, isn’t it? Do you, by any chance, have an idea on how to fix that ?
(example of the problem :
Tbh Alex for a menu you would be better using the FW menu module and adding to the relevant pages or even a text module with hand coded links.
Thanks Michelle,
I had to adjust my values to right: -295px and width: 300px – I think I had too much text and it was overlapping. But I just love this! Thank you so much
Welcome Darlene
I had the same problem and then I found this easy fix. Thanks Michelle and Darlene!
Thank you Michelle,
I used plugin PullOut Widgets for WordPress [work well] for sticky button, but your solution is better.
Great, thanks Deana!