How to create a sticky button in WordPress without using plugin
In this tutorial, you will learn how to create a sticky button in your WordPress without using plugin. A sticky button is a button that remains visible on the screen as the user scrolls down the page. This is an effective way to encourage user engagement and drive conversions. The button can be placed in a prominent position, making it easily accessible and hard to miss.
There are several page builders available in WordPress, including WP Bakery, Elementor, and Divi Builder. In this tutorial, we will be using WP Bakery for a sticky button.
To create a sticky button in WordPress using WP Bakery, follow these steps:
-
- Copy the code provide
<html>
<head>
<style>
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
left: -160px;
top:250px;
width:230px;
z-index: 1100;
}
.sticky li{
border-radius: 4px;
list-style-type:none;
background-color:#FDBD59;
color:#efefef;
height:80px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-right:-70px;
}
.sticky li img{
float:right;
margin:7px 4px;
margin-right:1px;
}
.sticky li p{
padding-top:7px;
margin:0px;
line-height:16px;
font-size:11px;
float:right;
text-align: right;
background-color:#FDBD59;
}
.sticky li p a{
text-decoration:none;
color:#ffff;
font-size:18px;
}
.sticky li p a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div class="sticky-container">
<ul class="sticky">
<li>
<img src="https://madregot-echot.co.il/wp-content/uploads/2023/02/iconsupport.png" width="75" height="60">
<p style="margin-right:2px; margin-top:20px"><a href="https://madregot-echot.co.il/#contact" target="_self">צור קשר
</a></p>
</li>
</li>
</ul>
</div>
</body>
- Open your WordPress website and log in to the dashboard
- Navigate to the page where you want to add the sticky button
- Click on the WP Bakery page builder and select the Add Element option
- Scroll down and find the Custom HTML option, then click on it to add it to the page
- Paste the code you copied earlier into the custom HTML element
- Customize the code as needed to fit your website’s design and requirements
- Preview the changes and make sure the sticky button looks and functions as desired
- Save the changes and publish the page
With these simple steps, you should now have a sticky button in your WordPress website without using plugin. This button will remain visible as the user scrolls down the page, making it easier for them to take action and engage with your website