LayerSlider and Revolution Slider are two premium plugins that come bundled n with our theme. These plugins are extremely powerful and allow you to create different types of sliders. One of the most frequently asked questions is about inserting shortcodes into sliders.
In this article, we’ll explain how to add a button shortcode into the LayerSlider and Revolution slider.
Adding the Button Shortcode
At first, we’ll need to add the shortcode into a page to be able to get the shortcode or generated HTML codes. Revolution Slider accepts both Jupiter shortcodes and HTML codes but LayerSlider only accepts HTML codes.
To add the button shortcode:
Inserting the Button in LayerSlider
LayerSlider does not accept the Jupiter shortcodes so we’ll need to get the generated HTML from the front-end of the website.
Getting the Generated HTML Code
To get the HTML code of the button:
<div id="mk-button-2" class="mk-button-container _ relative inline left jupiter-slider-button"><a class="mk-button js-smooth-scroll mk-button--dimension-three mk-button--size-small mk-button--corner-pointed text-color-light _ relative text-center font-weight-700 no-backface letter-spacing-1 inline" href="#" target="_self"><span class="mk-button--text">Button</span></a></div>
Adding the Codes into the Slider
Now that we have the HTML codes of the button, we can add it as an element in the slider. We assume that you are already familiar with creating a basic slider so we’ll explain how to add the codes.
To add the codes:
Inserting the Button into the Revolution Slider
Revolution Slider accepts the Jupiter shortcodes so you can add the shortcodes directly into the slides.
Getting the Shortcode Code
To get the button shortcode:
[mk_button el_class="jupiter-slider-button"]Button[/mk_button]
Adding the Codes into the Slider
Now that you have the button shortcode, you can insert it as an element into the slider. We assume that you are already familiar with creating a basic slider so we’ll only explain how to add the codes.
To add the shortcode: