As already explained, the theme 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: The frond editor of Visual Composer doesn’t work with this theme.
Below you’ll find a list of all available shortcodes:
A simple row, the holder of multiple columns.
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
4. Section Titles
Adds a custom title.
5. Message Box
A simple text box with four style options.
6. Single Image
If you’re looking to add an image as a module inside a column, please use this shortcode. It features smart resizing and it’s the perfect way to add images to the theme.
This is a simple tabs shortcode.
This is a simple accordion shortcode.
9. 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).
10. Raw JS
11. Flickr Widget
As the title suggests, it is a basic feed from a user’s latest flickr stream.
12. 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.
13. 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
14. 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).
OTHER SHORTCODES (non-VC)
15. Portfolio Grid
If you want an alternate style for your portfolios, or simply want to add a grid here and there, you can use this simple shortcode.
[vc_portfolio_grid no="4" cols="2" ratio="16:9" cat=""]
Here's a breakdown of the attributes:
- no - the number of portfolio items that will be loaded in the grid
- cols - possible values are: 1, 2, 3 or 4
- ratio - since the grid is composed of thumbnails with the same size, you need to specify an aspect ratio for your grid in order for the thumbnails to be resized at same size (available options: 16:9, 4:3, 1:1 and 2:3)
- cat - an optional property, allows you to choose the displayed portfolio categories by entering one or more category slugs, separated by commas
- el_class - an optional class for the entire
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! Here's how the gallery shortcode looks like in the Classic Editor:
There are a few options available for the grid gallery and it goes like this:
- columns - the number of columns in the grid
- ratio - the aspect ratio of a thumbnail (defaults to 1:1 - square images)
Here's an example on how this properties would look like in the shortcode:
[gallery ids="1,2,3" columns="4" ratio="4:3"]
To change a grid gallery into a slider, 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.
17. 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
18. 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: behance, bitbucket, codepen, delicious, deviantart, digg, dribbble, dropbox, facebook, flickr, foursquare, github, googleplus, instagram, lastfm, pinterest, reddit, skype, soundcloud, steam, spotify, stumbleupon, tumblr, twitter, vimeo, vine, vk, xing, yahoo, youtube, rss, email. 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).
The buttons are an easy shortcode which can be added manually like the shortcodes above.
[button label="Text on Buton" href="#" target="_self" style="dark" size="normal"]
Here's a breakdown of the attributes:
- label - the actual text which will be on the button
- href - the url
- target - the target window (it can be either _self or _blank)
- style - there are two styles available: dark and light
- size - there are three sizes: small, normal and large
- el_class - as a final property, you can add your custom class here if you want to further style your thumbnail via custom css
The icons are another easy shortcode which can be added manually like the shortcodes above. The icons shortcode is based on the Font Awesome library, so all the icons & classes there are also available here.
[icon name="icon-name" size="2x" color="#000" margin="25"]
Here's a breakdown of the attributes:
- name - the icon's name, taken from here: http://fontawesome.io/icons/
- size - possible values are: lg, 2x, 3x, 4x or 5x
- color - a hexadecimal value for the icon's color
- margin - it refers to the icon's bottom margin
- el_class - your own custom class, if you want to extend the icon with one of the original classes for example
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" class="fancybox fancybox.iframe"><img alt="" src="http://yourwebsite.com/path_to_thumbnail_img.jpg" /></a>
B. Iframe wrapped in a button (using the button shortcode):
[button style="light" size="large" href="https://player.vimeo.com/video/68732853" label="Watch Video" el_class="fancybox fancybox.iframe"]
C. Iframe wrapped in a text link:
<a href="//player.vimeo.com/video/90444206" class="fancybox fancybox.iframe">Your Text</a>
D. Image wrapped in a button (using the button shortcode):
[button style="light" size="large" href="http://yourwebsite.com/path_to_large_img.jpg" label="View Image" el_class="fancybox"]
And so on.. These are just a few examples - for the full capabilities please go here: http://fancyapps.com/fancybox/
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!