{"id":8798,"date":"2020-06-24T15:00:08","date_gmt":"2020-06-24T13:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8798"},"modified":"2022-02-23T10:18:58","modified_gmt":"2022-02-23T09:18:58","slug":"add-button-to-slider-revolution","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-button-to-slider-revolution\/","title":{"rendered":"How to Add a Button to Slider Revolution"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<em>This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our <a href=\"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-tutorial\/\">Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Whether they\u2019re calls to action, parts of the user interface, or simple links, buttons are an essential element of any website. When designed with care and consideration, <strong>they can help guide users through your site and improve the overall experience of your visitors<\/strong>. But besides knowing how to design an effective button, you also need to consider where you position your buttons. And an above the fold slider is always a good choice for the placement of any important website elements. So, in today\u2019s tutorial, we\u2019ll show you <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcodes-to-slider-revolution\/\">how to add buttons to Slider Revolution<\/a>. This can be done either by <strong>adding a button shortcode to the slider or by creating a new button layer<\/strong>. We\u2019ve already covered how to add shortcodes to <a href=\"https:\/\/www.sliderrevolution.com\/?utm_source=qodeinteractive.com&amp;utm_medium=content\" target=\"_blank\" rel=\"noopener\">Slider Revolution<\/a> in a dedicated article, so make sure to check that out if you\u2019re interested in <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcodes-to-slider-revolution\/\">adding other shortcodes<\/a> to your sliders.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also check out our video on how to add buttons to Slider Revolution:[\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/d_EPBL2tw6I\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text] Or, if you prefer a step-by-step text guide, read on.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Adding a Button Shortcode to Slider Revolution<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding a button to your slider via shortcode is pretty simple. But before you add the actual code to your slider, <strong>I recommend you \u2018build\u2019 a button on a test page<\/strong>, and make sure that everything looks how you\u2019d like it to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the purposes of this tutorial, we\u2019ll be using the <em><a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/evently-multi-concept-event-and-conference-theme\/\">Evently<\/a><\/em> WordPress theme. We\u2019ll build our button with the theme\u2019s custom button shortcode.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the shortcode\u2019s <strong><em>General<\/em><\/strong> settings, you can see that we have various customization options. Exactly how you set the options for your button will depend on the theme you\u2019re using and the button style you\u2019re going for.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Adding-a-button-shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Adding a button shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Adding-a-button-shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Adding-a-button-shortcode-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Adding-a-button-shortcode-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This theme\u2019s button also has <em><strong>Design<\/strong><\/em> options so you can \u2018design\u2019 the button on your own. You can <strong>pick the initial and hover colors<\/strong> for the button\u2019s background, text, and border, as well as choose a font-size, font-weight, and <strong>customize the button margin and padding<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Design-the-button-on-your-own.jpg\" class=\"attachment-full size-full\" alt=\"Design the button on your own\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Design-the-button-on-your-own.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Design-the-button-on-your-own-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Design-the-button-on-your-own-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have defined the look of your button, switch to Text editing mode and copy the button shortcode. In my case the code is <em><strong>[mkdf_button size=&#8221;small&#8221; text=&#8221;Purchase&#8221; target=&#8221;_blank&#8221; icon_pack=&#8221;&#8221; font_weight=&#8221;700&#8243; link=&#8221;https:\/\/evently.mikado-themes.com\/&#8221; color=&#8221;#ffffff&#8221; hover_color=&#8221;#ffffff&#8221; background_color=&#8221;#356bf8&#8243; hover_background_color=&#8221;#0141f5&#8243; border_color=&#8221;#356bf8&#8243; hover_border_color=&#8221;#0141f5&#8243; font_size=&#8221;13&#8243; padding=&#8221;16px 46px&#8221;]<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Copy-the-button-shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Copy the button shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Copy-the-button-shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Copy-the-button-shortcode-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Copy-the-button-shortcode-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, go to your slider and <strong>add a simple text layer<\/strong>. Then <strong>paste the code<\/strong> you previously copied into that layer. It will show up in your work frame as text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Add-a-simple-text-layer.jpg\" class=\"attachment-full size-full\" alt=\"Add a simple text layer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Add-a-simple-text-layer.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Add-a-simple-text-layer-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Add-a-simple-text-layer-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, when you save your slider and navigate to the page it\u2019s placed on the button should display correctly. Now you can play around with the button\u2019s position, responsiveness and animation.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"514\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Button.gif\" class=\"attachment-full size-full\" alt=\"Button\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;90px&#8221;][vc_widget_sidebar sidebar_id=&#8221;slider-revolution-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Adding a Button Layer to the Slider Revolution<\/h2>\n<p>[\/vc_column_text][vc_column_text]Maybe you\u2019re not a fan of the design of the buttons that came with your theme. Or maybe the theme doesn\u2019t have a predesigned button shortcode at all. Whatever the reason for your decision to create your own button in Slider Revolution, you will now learn exactly how to do that.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, add a button layer to the slider workframe. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-a-button-layer-to-the-slider-workframe.jpg\" class=\"attachment-full size-full\" alt=\"Add a button layer to the slider workframe\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-a-button-layer-to-the-slider-workframe.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-a-button-layer-to-the-slider-workframe-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-a-button-layer-to-the-slider-workframe-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you add the button,<strong> it will appear as text in your workframe<\/strong>, until you customize it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Button-as-text-in-your-workframe.jpg\" class=\"attachment-full size-full\" alt=\"Button as text in your workframe\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Button-as-text-in-your-workframe.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Button-as-text-in-your-workframe-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Button-as-text-in-your-workframe-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the right side of the screen, you will find <strong>a lot of predesigned button styles<\/strong>, and you can simply choose the one that fits your website style.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Predesigned-button-styles.jpg\" class=\"attachment-full size-full\" alt=\"Predesigned button styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Predesigned-button-styles.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Predesigned-button-styles-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Predesigned-button-styles-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Beside these common button styles, you can also go with something a bit different, like play buttons for example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Play-buttons.jpg\" class=\"attachment-full size-full\" alt=\"Play buttons\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Play-buttons.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Play-buttons-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Play-buttons-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Furthermore, you can add a <strong>shadow<\/strong> effect to your button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Add-a-shadow-effect-to-your-button.jpg\" class=\"attachment-full size-full\" alt=\"Add a shadow effect to your button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Add-a-shadow-effect-to-your-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Add-a-shadow-effect-to-your-button-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Add-a-shadow-effect-to-your-button-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have defined the basic button style, you can go and <strong>change its advanced settings to better fit your website\u2019s look<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Customizing the button is the same as customizing any other layer from the Layer Options. Everything you need is over there, from changing the button\u2019s initial look, to <strong>change how it\u2019ll display on hover, and adding animations and easing to it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Customizing-the-button.jpg\" class=\"attachment-full size-full\" alt=\"Customizing the button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Customizing-the-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Customizing-the-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Customizing-the-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s all there is to it. Once you\u2019re done with setting up your button layer, you can work on more advanced options like its responsiveness and incoming animation. Here\u2019s an example of an incoming animation from the Evently theme:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1596\" height=\"842\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/Incoming-animation-from-the-Evently-theme.gif\" class=\"attachment-full size-full\" alt=\"Incoming animation from the Evently theme\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure you check out our whole Slider Revolution series of articles to learn more about <a href=\"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-tutorial\/#animating-your-slides\">animating your slides<\/a> and making your layers responsive.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whether you create your button as a shortcode or via a Slider Revolution layer, you can easily customize its styles and try out different text to see what works best for your website visitors. But now that you\u2019ve learned these two extremely simple ways to add buttons to Slider Revolution, you can make sure that each of your slides has a call to action or a link that will let your visitors know what you\u2019d like them to do or which page on your site you\u2019d like them to visit next. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to learn how to add a button to Slider Revolution, be it a CTA or any other sort of button on your slider, you&#8217;ve come to the right place. <\/p>\n","protected":false},"author":6,"featured_media":8810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8798"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8798\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8810"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}