Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
WordPress Slider with Call-to-Action Button

How to Create a WordPress Slider with Call-to-Action Button

by Waseem Abbas on August 18, 2016
Share This Post

Do you want to add a call-to-action button to your WordPress slider? Sometimes you’ll want to have a button on your slider that visitors can press to redirects them to another page on your site. In this article, we will share how to create a WordPress slider with a call-to-action button.

To create a WordPress slider with call-to-action button, you will need to follow these steps:

  • Step 1. Install and activate Soliloquy Slider Plugin
  • Step 2. Create a new slider using Soliloquy plugin
  • Step 3. Install and activate the Soliloquy’s Custom CSS addon
  • Step 4. Add CSS to create a call-to-action button
  • Step 5. Add the HTML for your call-to-action button
  • Step 6. Add the slider to a post or page

By the end of this tutorial, you will have a slider with a call-to-action button that looks like this:

WordPress Slider with Call-to-Action Button

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

Soliloquy Button

First thing you need to do is install and activate the Soliloquy Slider plugin. You can learn more about how to install a WordPress plugin here.

Step 2: Create a New Slider using Soliloquy Plugin

After activating the Soliloquy Slider plugin, simply go to Soliloquy » Add New from your WordPress backend to create a new slider.

Add Title

Start by adding a title to your slider. In the Native Slider section, you’ll need to add your images. You can drag and drop the images, or browse to them.

Add Images

After adding the images, you can hit the Publish button.

You will see a new sidebar widget appear on the right side of the screen with the shortcode and some other information. You will need this information in the next steps to add this slider to a post or page, so remember this for later.

Copy Shortcode

Step 3: Install and Activate Soliloquy’s Custom CSS Addon

To add the call-to-action button to your WordPress slider, you’ll need Soliloquy’s Custom CSS addon.

This addon works with all Soliloquy licenses. Go ahead to Soliloquy » Addons to install and activate the Custom CSS addon.

CSS Addon

Once activated, you are ready to add your custom CSS for the call-to-action button.

Step 4: Add CSS to Create a Call-to-Action Button

You can edit your Soliloquy slider and go to the Misc tab. There is a new field for Custom CSS. You should add the following CSS in this field:


.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;
}

This CSS will override the Caption class so you can use it for a call-to-action button instead.

Step 5: Add HTML for Call-to-Action Button

Now you need to go back to the Images tab and click on the pencil icon of the first image. A window will pop up to edit the meta data of the slider image.

Edit Image

Add the following code in the Caption field:


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

Replace “http://www.mysite.com/” with your own link, and change the Call-to-Action text with the text that you want to appear on your button.

Now you will have a call-to-action button on your slider! Repeat this step for all the slider images where you want to add a call-to-action button.

Step 6: Add the Slider to a Post or Page

Remember the Soliloquy Slider Code from Step #2? Copy that shortcode to your clipboard.

Copy Shortcode

Now you can go to edit or add a new post or page. Paste the shortcode in the editor, and click on the Publish button.

Paste Shortcode

Now visit your website to see your WordPress slider with call-to-action button in action!

WordPress Slider with Call-to-Action Button

We hope this article helped you to learn how to create a WordPress slider with call-to-action button. You may also want to check out our guide on how to create a featured content slider in WordPress.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This Post
Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

[i]
[i]