R19: How to Create a Sticky Button in Divi

by | Jun 27, 2016 | Buttons

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to Create a Sticky Button in Divi

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="http://divisoup.com">STICKY BUTTON</a></div>

You will want to change http://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:

How to Create a Sticky Button in Divi

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!