{"id":8780,"date":"2020-06-23T15:00:03","date_gmt":"2020-06-23T13:00:03","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8780"},"modified":"2021-10-06T13:24:07","modified_gmt":"2021-10-06T11:24:07","slug":"add-shortcodes-to-slider-revolution","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-shortcodes-to-slider-revolution\/","title":{"rendered":"How to Add Shortcodes to Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One of the great things about WordPress is that it uses these little things called shortcodes, which help users add all the amazing elements to their website<\/strong>. They are handy, light, easy to use, and extremely important for any WordPress admin. So today, we\u2019re going to talk about how to add shortcodes to Slider Revolution<\/a>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

What Are Shortcodes?<\/h2>\n

[\/vc_column_text][vc_column_text]In WordPress, shortcodes are little pieces of code that can be placed in your website\u2019s backend to add a certain element, functionality or design feature<\/strong>. They can be used to add galleries, videos, layout elements, page sections with icons or illustrations, infographics like pie charts, counters, etc. Of course, they can be used for sliders, as well. Premium WordPress themes<\/a> usually feature a great selection of custom shortcodes that users can add to their pages<\/strong> – or sliders – in just a few clicks.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why Add Shortcodes to Slider Revolution<\/h2>\n

[\/vc_column_text][vc_column_text]Slider Revolution has almost endless creative possibilities. Still, sometimes it\u2019s easier to just copy a previously styled shortcode to your slider than it is to build the layers all by yourself from scratch. Just think about it: when you want to create a complex element in Slider Revolution, you can do so using multiple layers that overlap and come together to create that element. However, this also means you have to animate every single layer separately, even if you want them all to have the same animation<\/strong>. If, on the other hand, you use a previously stylized shortcode and add it to the slider as a layer, you won\u2019t have to go through all that hassle. It\u2019s clear that this method is a massive time-saver, so let\u2019s check out how to add shortcodes to Slider Revolution. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Shortcodes to Your Slider<\/h2>\n

[\/vc_column_text][vc_column_text]Before you get started, you should, obviously, choose the shortcode you want to use and test it out<\/strong>, just to make sure it makes a good fit for your needs. Access the shortcode in your backend and insert it in some random test page. You can then copy it using the Text editor mode and paste it in your slider – but more on that later. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Our Goodwish theme<\/a> can serve as a good example of using shortcodes in sliders. Specifically, the Ecology Home<\/a>, as seen below:[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"How <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This sort of thing could certainly be built using shortcodes on the page, without using the plugin, but we wanted to animate it and we found Slider Revolution to be perfect for this.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We can see that the left side of the slider features some text and a CTA button (adding buttons in Slider Revolution<\/a> is another straightforward process). On the other side, we have an infographic element with a animated counter. This was added using our custom Pie Chart shortcode<\/strong><\/em>, combined with some text above it and a rectangular shape for the background. An element like this can be created in Slider Revolution layer by layer, using one layer for the thin circle, another layer for the bold one, a layer for the percentage and one more for the title text below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]So not only would we have to add four different layers, but we would also have to animate them, one by one. The Pie Chart shortcode, however, has its own animations, so when you insert the shortcode into the slider workframe, you get all the functionality along with it. It comes with basic\/general options like the Type of Central text<\/em> where you can choose between a percentage and a title; below that we have a field for the value of the percentage, and the third one is for setting the title below the circle. If you don\u2019t want to keep the predefined style, you can choose your own title tag. There\u2019s also an option for adding text, but in our example the slider didn\u2019t use any.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Pie Charts shortcode, there is a separate \u201cDesign Options\u201d tab. This is where you can choose the preferred colors for the element<\/strong>. You can also change the sizes and the margin below the chart if you don\u2019t like the default settings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Choose <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once that you have defined all the elements of your shortcode, and also checked it on the live page<\/strong>, you can copy the code by switching to the text editing mode. In our case, the code is [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”]<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Copy <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now is the time to add the shortcode to the slider. Simply paste it in a text layer in Slider Revolution and set the layer options like you would for any other layer.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Paste <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And that\u2019s pretty much all there is to it. The shortcode in the text layer transforms into the infographic element from our example in the Goodwish theme, and any other shortcode you decide to use will do the same.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”81px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]Adding shortcodes to Slider Revolution sliders can be immensely helpful in cases like the one we discussed today. As we saw, it saves you a lot of time you\u2019d otherwise be wasting on creating separate layers, plus you get full control of the stylization and customization. All you need to do is find a shortcode that works for you and tweak it a bit to fit your needs. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Did you know that you can actually add shortcodes to Slider Revolution sliders? This method of adding content to your sliders is a massive time-saver. <\/p>\n","protected":false},"author":6,"featured_media":8786,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8780","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\/8780","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=8780"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8780\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8786"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}