Inserting Shortcodes into Sliders

Last Updated on

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.

In this article


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:

1
Create an empty page.
2
Add the button shortcode in Visual Composer and configure the button settings as you need.
x
Note: If you are not familiar with Visual Composer and the button shortcode, read the Visual Composer Introduction and Button shortcode articles.

Inserting shortcodes into sliders - button shortcode

3
In the Button Settings pop-up, add a unique class in the Extra Class Name setting field. In this example, we’ll add the jupiter-slider-button.

Inserting shortcodes into sliders - button settings

4
Click on the Save Changes button and publish the page.

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:

1
Open the page you created in the previous steps, right-click on the button, and then select Inspect Element. A new window will open. We are using the Chrome browser to inspect the element but it’s possible to use other browsers.

Inserting shortcodes into sliders - button inspect

x
Note: If you are not familiar with inspecting elements, read the Inspecting elements article.
2
In the new window, find the div tag which has the jupiter-slider-button class.

Inserting shortcodes into sliders - button HTML code

3
Right-click on the div tag and select Copy Element. It will copy the HTML codes for the button shortcode to your clipboard. We’ll need this in the next sections.

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

x
Note: If you are not familiar with creating sliders, read the LayerSlider official documentation.

To add the codes:

1
Click on the + Add New the in Layers section.

Inserting shortcodes into sliders - add new layer button

2
Select Dynamic Content from Posts in the Content section and insert the codes you copied in previous section. Note that you may not see the button with the correct styling, but when you check the slider on the front-end of your website, it will be displayed correctly.

Inserting shortcodes into sliders - HTML code in slider

3
Position the button in the slider and click on the Save Changes button.

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:

1
In the page you have created in the previous section, click on the Classic Mode button.

Inserting shortcodes into sliders - classic mode

2
Then select the Text tab.

Inserting shortcodes into sliders - shortcode text

3
Take a note of the button shortcode, you will need it in the next sections.

[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.

x
Note: If you are not familiar with creating sliders, read the Revolution Slider official documentation.

To add the shortcode:

1
Add a Text/HTML layer from the slide builder.

Inserting shortcodes into sliders - add layer button

2
Paste the shortcode you noted from step 3 of the Getting the Shortcode section. Note that you won’t be able to see the actual button in the slide builder but when you check the slider from the front-end, it will be displayed correctly.

Inserting shortcodes into sliders - revslider shortcode text

3
Position the button in the slider and click on Save Slide.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket