WordPress

How to add Call to Action Button under Slider in WordPress

add Call to Action Button under Slider in WordPress

Call to action button is very important for any business to redirect the user for any specific task. You can add a button in your slider and it will redirect the user in another page. If you sell any service or products then you can add the CTA button with the download or bye link. So it will be a very good user experience for your visitors. Add Call to Action Button under Slider in WordPress can increase your audience engagement and conversion rate.

Here in this article we will show you how easily you can add Call to Action Button under Slider in WordPress using  Soliloquy Slider Plugin.

Initially you need to install and active this plugin in your website. After activating the you need to create slider.

Create Slider

Go to your WordPress dashboard then Soliloquy » Add New. Give a title of your slider and add some image for the slider to show. You can drag and drop image from your local file directory or can browse image. After adding the images just click on the publish button.

 

After publishing the slider in your right side screen some code and information will appear. You will need this information later to add this slider in any pages or posts.

add Call to Action Button under Slider in WordPress

 

Install and Activate Soliloquy’s Custom CSS Addon

Custom CSS addon is necessary to add CTA in WordPress slider. We need Soliloquy’s custom CSS addon to create our CTA in our slider. From the dashboard go to  Soliloquy > Addons then install and activate the Custom CSS addon.

 

Add CSS to Create a Call-to-Action Button

In Soliloquy slider Misc tab we will find the field to add Custom CSS code. Just add this little code snippets there.

soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
   background:none !important;
   background-color:none !important;
   text-shadow: none !important;
}
 
.soliloquy-caption-inside a {
   width: 200px;
   display: block;
   background-color: red;
   padding: 10px 15px;
   margin-bottom: 200px;
   border-radius: 3px;
   color: #ffffff;
   text-decoration: none;
}
.soliloquy-caption-inside a:hover {
   width: 200px;
   display: block;
   background-color: black;
   padding: 10px 15px;
   margin-bottom: 200px;
   border-radius: 3px;
   color: #ffffff;
   text-decoration: none;
}

Add HTML for Call-to-Action Button

Now we need to open the image tab of our slider and then need to edit the metadata of the image. Click on the modify image slide option and a new window appear. We need to add this code in the caption field.

<a href="http://www.domain.com/">Call-to-Action</a>

replace ‘domain.com’ with your website domain name and you can change the Call to Action text. We have to repeat this step for all the images you have in our slider. That’s it we have our CTA button in our slider.

Add slider to any page or post

In our First step we mentioned some code and information to remember to add slider in any post or page. Copy that code and open a post or page in the editor and paste that code and publish the page or post. Now go to your website and you can see your slider with call to action button in action.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *