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%.
Please view the screencasts for this step!
Below you’ll find a list of all available shortcodes:
The row is the base of everything in the Visual Composer. It also has some options available, such as background color or image & a custom padding. Rows with custom backgrounds should only be used in full width pages for the best results.
Note that when you choose a background image for your row you will be able to choose how the background will be repeated (the default option makes it repeat, which is useful for patterns, while the cover option makes it fill the entire section). To have a parallax background, just use a background image, set it to cover and then give that row the class parallax-bg.
The padding of the row is also an interesting option. It’s actually a CSS option, so this is how you should change it:
- 0 - it adds 0 padding everywhere
- 150px - it adds 150px padding everywhere
- 150px 0 150px 0 - it adds 150px padding at the top and bottom, while leaving 0 padding for the left and right parts
- 150px 0 50px 0 - it adds 150px padding at the top, 50px at the bottom, while leaving 0 for the other two parts
You got it! There are either one or four values. One value applies to everything, while four values work like this: TOP, RIGHT, BOTTOM, LEFT
Don’t forget to add px after the number (0 doesn’t need this).
The row can also be divided into columns. There are various column combinations available in the 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. It works mostly with positive margins, but it also works with negative margins (however it’s a bit buggy at this point). And you cannot edit it once you’ve insert it on the page (but you can turn in the classic editor and edit it like that).
There are also classes to reduce space (see at the end of this section).
4. Separator with Text
Adds a custom title (bigger and better for large sections). You can have a title, a subtitle, or both. You can also choose the alignment options and add a bottom margin.
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.
7. Tabbed Content
This is a simple tabs shortcode, available in two different styles.
8. Tour Section
This shortcode is a custom content slider. Each tab is actually a slide in the slider. You can choose to auto rotate the slides, and display / hide the navigation.
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).
10. Posts Grid
This shortcode allows you to build up a custom posts grid. It has two different styles, a classic one (good for simple news) and a masonry grid style. You can choose how many items you want in it and you can also activate infinite loading (which should only be used once in a page).
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.
11. 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, available in two sizes and styles. You can also choose icons and alignment for it.
13. 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).
14. Raw JS
15. Flickr Widget
As the title suggests, it is a basic feed from a user’s latest flickr stream.
16. Pie Chart
A simple animated pie chart, available in two styles. It also offers the option to have three layers of text, (the first one is the label value which will appear inside the pie, while the title & subtitle will appear below it).
17. Progress Bars
Simple animated progress bars, for displaying certain progress or percentage.
18. 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**
19. Revolution Slider
Insert a Revolution Slider, which can also be done in the Text Box, via the shortcodes provided by the plugin.
20. 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.
21. 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.
22. Portfolio Grid
This shortcode allows you to build a portfolio grid. As you already noticed, there are no portfolio page templates in this theme, because it uses a more modern layout, with portfolios available everywhere. So using this shortcode you can choose the number of columns and the style of it.
You can also choose the portfolio categories which you want in this portfolio, thus enabling unlimited different portfolios. Please remember to tick the archive option if you want unlimited portfolios (otherwise they won’t work properly).
If you're using the categories filter option please notice that the order on the page is alphabetical and the included categories in the Portfolio Grid shortcode also need to have an alphabetical order to display the right portfolio items.
You can also have animated filtering and pagination. Please note that if you’re using a portfolio grid in a page with a sidebar, you will always get a three columns layout.
The full width portfolio is a variation of the Style #2, this is the way to achieve this:
There are two elements in a full width portfolio:
1. A full width page and a full width row, with an extra class name: row-full
2. A portfolio grid (Style #2) with an extra class name: full-width-portfolio
23. 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 can be used for any purpose, even shortcodes (in the preview there’s the social shortcode).
There are two styles of testimonials available.
25. 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
26. 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.
So these are the 25 (+13) shortcodes available in the Visual Composer. 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.
28. 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
29. 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, skype, 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).
Another cool feature of this shortcode is the header style (as it was used in the demo’s header / footer). To use it, you need to add type=”header” as a parameter and insert icon_text=”Custom text here” for each icon. For example (will take the exact example above and enhance it):
[vc_social_links twitter="http://twitter.com/yourprofile/" twitter_text="Follow me" facebook="http://facebook.com/yourprofile/" facebook_text="Like me" target="_blank" type="header"]
Doing things like above you will be able to create cool social icons to put in the header / footer.
30. 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:email@example.com"> firstname.lastname@example.org</a>
<a href="tel:460123456789">+460 123 456 789</a>
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!
32. 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.
As you’ll see in the Visual Composer, some shortcodes have the ability to add CSS animations to them. This is a cool way to add some movement to your website, make it more alive. Not all shortcodes have animations. The excluded ones are: rows, content sliders, google maps, revolution slider, pie charts, progress bars, portfolio & blog grids. Animations for these elements is disabled either because it is buggy or because it doesn’t have sense.
But all the other shortcodes from the Visual Composer interface do have the ability to put CSS animations on them. Simply choose an animation type, the speed and set a delay if needed. Your element will be now animated!