This theme is full of shortcodes! Inside the custom page builder you can achieve whatever you want, as everything is easy to use, customize and understand.
It uses a slightly modified version of the popular Visual Composer plugin, with some default shortcodes and custom build ones as well.
Note 1: Not all of the original VC shortcodes are available in this theme, but everything what you see in the online demo can be achieved with shortcodes.
Note 2: At the time of writing this, the front editor of the Visual Composer plugin doesn’t work well with the theme (there are a couple of big bugs and conflicts). This will be fixed in the future, but in the meantime just use the regular backend editor, which works 100%.
Below you’ll find a list of all available shortcodes:
The row is the base of everything in the Visual Composer.
2. Text Block
This is the most basic shortcode of them all. Whenever you need some text or add a custom shortcode (not available in here), or an iframe, or anything which uses text / HTML, use this shortcode.
This is a simple blank separator. You can choose both a top or a bottom margin so please experiment with this to see what works when. Not everything works all the time, so that’s why there are two options. You can also put a border on the divider.
4. Separator with Text
Adds a custom title (bigger and better for large sections). You can have a title and an optional border.
5. Message Box
A simple text box with three style options.
6. Single Image
If you’re looking to add an image in your text block, please use the WordPress default media uploader for this purpose (see this article for more info: http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages). If you’re looking for standalone images which open more complex links and allow for size definement, use this shortcode.
This is a simple tabs shortcode, available in two different styles. Each tab can have an icon near the title.
This is a simple accordion shortcode, available in two different styles. Another cool feature is the ability to choose how it reacts on click (as a toggle or as a regular accordion).
9. Posts Carousel
This shortcode allows you to build up a custom posts carousel. You can choose how many items to appear in the list and also the number of columns. If you choose more items than the columns number you’ll get the carousel manually rotating through the posts.
With the “build query” option you can also build a complex query in order to create unlimited blogs on your theme. You should only work with the post type, because portfolios have their own shortcode. You can choose categories, tags, individual posts, authors, etc.. Using this builder you can really divide your blog posts into custom blogs, each with it’s own functionality.
10. Widgetised Sidebar
If you have some awesome WordPress widgets that can’t be embedded in any place other than a sidebar, you can use this shortcode to choose a custom sidebar (which you create in the Theme Options).
This is a simple button, with different styling options.
12. Raw HTML
If you want to add raw html code to the site this is the way to do it (although you can add simple stuff like iframes and tables into the text blocks).
13. Raw JS
14. Flickr Widget
As the title suggests, it is a basic feed from a user’s latest flickr stream.
15. Pricing Tables
Simple pricing table, which offers the ability to have any kind of content inside. The contents of the inner pricing tables are given inside when you create the shortcode, so you’ll just have to duplicate what you see there in order to multiply your columns. I want to write a tip here though - it’s about the way the pricing is created, since it may not be that obvious. Well, in the title property, everything which you write wrapped in a single asterix sign (*content*) will become superscripted, while everything that is wrapped in two asterix signs (**content**)will become subscripted. That’s why in the example you see there you’ll get the following: *$*99**/month**
16. Revolution Slider
Insert a Revolution Slider, which can also be done in the Text Box, via the shortcodes provided by the plugin.
17. Icon Text Block
This is a regular text block which provides an icon available in four different styles. You can also wrap the icon in a link which can point to anywhere you want.
18. Contact Form
A simple Contact Form with various options. If you want a more complex contact form you should use a popular plugin, such as Contact Form 7.
19. Portfolio Carousel
This is just like the blog carousel, but it display posts from the portfolio instead.
20. Promo Box
A simple text box which provides certain background styling.
21. Team Member
A simple team member, which can be used in any other way (it’s basically a text block with an image at the top). The content should be used to insert the social shortcode.
22. Twitter Widget
A simple twitter feed widget. The widget is simple, but the process of using it is a bit complicated because of twitter and their recent API changes. The thing is, you can’t display twitter feeds on your site now without an API key. But it’s not impossible to get this key either... If you go to Settings > Twitter Feed Auth you’ll notice some weird fields. Those are the fields that you actually need to complete and if you give a read to the description you’ll understand what you have to do. I’ve found this discussion on the Twitter forums and i thought that it’s a good resource on this topic: https://dev.twitter.com/discussions/631.
23. WordPress Widgets
There are 13 default WordPress widgets which can normally be used only in widget areas, but with the Visual Composer you can use them anywhere you want.
But more than this, you also have some shortcodes which are not available in the composer, but can be added easily as regular shortcodes via a Text Block or the classic editor.
All these shortcodes have the ability to select a custom class. This class can be useful for extra editing (there are already some classes available, but you can create custom CSS code and apply it to certain shortcodes by using the custom class field).
The gallery shortcode is a basic WordPress shortcode which in this theme translates into a slideshow or a grid. You can add a gallery by hitting the “Add Media button” and following the instructions there. The columns do work with this theme, so you can style the gallery exactly like you want.
Another cool feature of this theme is that you can turn a WP gallery into a shortcode, so you can easily insert sliders absolutely everywhere you want! To change a grid gallery into a slider, go to the “Classic Editor” and you’ll see the gallery shortcode like this (just an example):
You need to simply add type=”slider” as a parameter, like this:[gallery ids="1,2,3" type="slider"]
If you want to add captions either to the galleries or sliders, simply caption the images that you want to have a caption in the WordPress gallery creator. All images with a caption added in the backend will feature a caption on the site.
25. Self Hosted Video & Audio
While embedded videos (or maps) can be added via iframes (all these sites such as YouTube, Vimeo, Google Maps, offer embedding options via iframes, so there’s no need for custom built shortcodes). So while embedded videos have their own method, you can also add custom videos using the WordPress video shortcode. More info here: https://codex.wordpress.org/Video_Shortcode & https://codex.wordpress.org/Audio_Shortcode
26. Social Icons
The social icons are an easy shortcode which can be added manually like the shortcodes above.
[vc_social_links twitter="http://twitter.com/yourprofile/" facebook="http://facebook.com/yourprofile/" target="_blank"]
Each new attribute represents an url, and these are the possible values: twitter, facebook, dribbble, vimeo, linkedin, behance, pinterest, delicious, digg, youtube, cloud, github, flickr, gplus, tumblr, stumbleupon, lastfm, evernote, picasa, googlecircles, instagram, xing, soundcloud, aim, steam, dropbox, mail, rss. All these social icons are available for use in this theme.
Don’t forget the target property which can be either _blank (opens links in new windows) or _self (opens links in the same window, default).
27. Email / Phone Info
Not exactly a shortcode, but i’ve used this in the header and need to write about it here. It’s actually pure HTML code and it looks like this:
<a href="mailto:firstname.lastname@example.org"><a href="mailto:email@example.com">firstname.lastname@example.org</a></a> <a href="tel:460123456789">+460 123 456 789</a><span>Your Address Here</span>
To create a ligthbox gallery use WordPress galleries and configure the gallery exactly like you wish. To create a lightbox image, simply put an image linked to the large version and it will transform into a lightbox.
To create an iframe which loads an iframe or use a button to open an image into a lightbox, use these codes:
A. Iframe wrapped in a thumbnail
<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe"><img alt="" src="http://yourwebsite.com/path_to_thumbnail_img.jpg" /></a>
B. Iframe wrapped in a button
<a href="//player.vimeo.com/video/90480436?title=0&byline=0&portrait=0&color=e5493a" data-fancybox-type="iframe">Your Label</a>
C. Iframe wrapped in a text link
<a data-fancybox-type="iframe" href="//player.vimeo.com/video/90444206?title=0&byline=0&portrait=0&color=e5493a">Your Text</a>
D. Image wrapped in a button
<a href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>
E. Image wrapped in a text link
<a href="http://yourwebsite.com/path_to_thumbnail_img.jpg">Your Text</a>
Using this method above you can use the ligthbox exactly as you wish. These are the available options.
Make sure than when embedding content from video sites and such, you only take the href or src from the embedding code. Don’t put everything in there!
29. Video / audio playlists
Just as you add a video or an audio file to any page, you can now add full media playlists as content. When inserting media, along with the old gallery button you can now see two other buttons, which will guide you through an easy way to add the playlists on your pages.