Caprina | Shortcodes

The purpose of this “Shortcodes” page is to demonstrate various possibles with custom shortcodes and Visual Composer elements. Visual Composer is a WordPress plugin that allows you to have a much cleaner interface, as well user-friendly and interactive, when building your pages / posts.

“Visual Composer is a drag and drop frontend and backend page builder that will save you tons of time working on our site content. You’ll be able to take full control of your WordPress site, and build any layout you can imagine – no programming knowledge required!“ – from the plugin overview on CodeCanyon.

In short, it’s handy, helpful and convenient. Though it’s completely optional, it’s included with our theme and many of our shortcodes will be included within it. It’s also valued at $34.00 and comes free (and packaged) with Self Titled.

Carousel Gallery

This is an example of a Gallery being embedded in the page.

2 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis purus scelerisque justo laoreet efficitur. Pellentesque pretium, ante id placerat facilisis, metus massa semper felis, quis semper justo nisl non ante. In viverra, metus eu semper malesuada, nibh augue fringilla turpis, sed aliquet sem urna non justo.

Suspendisse non pellentesque dolor, id laoreet arcu. Donec tempor egestas commodo. Cras malesuada tempor velit, dignissim rutrum sapien sollicitudin eget. Nunc at quam et velit sagittis consectetur molestie eget justo. Vivamus sollicitudin ipsum vitae metus lacinia feugiat. Aliquam auctor nisi id enim porta, eget imperdiet erat tristique.

3 Columns

Fusce iaculis quam lacus, quis posuere massa lacinia quis. Phasellus est orci, volutpat eget mollis sed, hendrerit ac ipsum. In non tortor vel enim suscipit feugiat. Integer ut odio risus. Donec feugiat tempus eros euismod venenatis.

Cras pellentesque consequat nisi, imperdiet finibus magna fringilla aliquet. Suspendisse potenti. Nullam tempus tincidunt dignissim. Duis cursus, velit non ultrices fringilla, tortor odio dictum nulla, ut fringilla risus lacus sit amet leo.

In placerat id enim id cursus. Ut eget tortor faucibus, porta nunc eget, efficitur leo. Morbi condimentum auctor leo vitae consectetur. Pellentesque fringilla tristique semper. In et nibh at ligula tincidunt commodo.

4 Columns

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

6 Columns

I’m a text block. Click the edit button to change.

Buttons

There are tons of options available to your buttons, as well customizations! Squared, round, circular, with icons, or without icons, custom colours, you name it you can do it. Visual composer provides you an unlimited resource of tools.

Standard (Square) Tabs

There are various styles of Tabbed content available, as well an unlimited amount of colour schemes that can be customized to suit your specific needs. Extending that is also the ability to have rounded, non-rounded, squared, outlined or custom styles.

Tab 1

In viverra, metus eu semper malesuada, nibh augue fringilla turpis, sed aliquet sem urna non justo. Suspendisse non pellentesque dolor, id laoreet arcu. Donec tempor egestas commodo. Cras malesuada tempor velit, dignissim rutrum sapien sollicitudin eget. Nunc at quam et velit sagittis consectetur molestie eget justo. Vivamus sollicitudin ipsum vitae metus lacinia feugiat.

These are called “Tour Tabs” when the tabs are aligned left like this. Just like the other tabs, you can assign an unlimited number of tabs, different colours, sizes, multiple styles and looks so you can customize them to suit your specific needs.

Section 1

Example Tab #1

Section 2

Example Tab #2

Section 3

Example Tab #3

Tour (Modern + Round) Tabs

Section 1

Example Tab #1

Section 2

Example Tab #2

Section 3

Example Tab #3

Tour (Flat + Rounded) Tabs

Section 1

Example Tab #1

Section 2

Example Tab #2

Section 3

Example Tab #3

Heading with Custom Font

Create an unlimited number of headings within a page/post and with each one create unique colours, sizes, spacing, assign Google Web Fonts and more! This can be done on a per-heading basis when using the Visual Composer Custom Headings.

Pie Chart Example

Line Chart Example

Alert / Message Boxes

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Error” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Error” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Error” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Rounded Informational” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Square Informational” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Round Informational” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Success” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Informational” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Informational Classic” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Warning Classic” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Success Classic” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available. This specific box is a “Error Classic” message.

This is an alert / message box. Fully customizable. Square, Rounded, Round, with Icons or without, plus many other options available.

Icons! Lots and Lots of Icons!!

It comes jammed packed with hundreds of icons! Customize the colour, size and effects on each individual icon.

Video Embeds (YouTube, Vimeo, MP4, etc)

Embed or enter the URL to your videos on YouTube, Vimeo, MP4, etc. Fully responsive and customizable.

Toggles

Just like many of the other features, there are multiple options, colour settings, shapes (Round, Rounded, Square), styles such as Standard, Modern, Flat and even custom so you can create your own toggle styles. Here’s a few examples.

Classic FAQ Toggles

Toggle Example Number One

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Two

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Three

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Four

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Five

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Six

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Example Number Seven

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Classic (Square) Accordion

Toggle Table Example Number One

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Two

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Three

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Four

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Five

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Classic FAQ Toggles

Simple Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Round Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Round Outline Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Rounded Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Rounded Outline Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Square Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Square Outline Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Arrow Toggle Style Example

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Flat (Square) Accordion

Toggle Table Example Number One

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Two

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Three

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Four

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Toggle Table Example Number Five

This is an example of some toggle content. You can of course use whatever you’d like to use here for your text. Just like everything else, it’s extremely customizable.

Social Networks

Of course, you could install any additional plugins, Jetpack, Social Share there are literally hundreds (if not thousands) if Social Network and Sharing plugins available on WordPress.org. With Visual Composer, you have these for conventional use.

Shortcodes

Carousel Gallery

2 Columns

3 Columns

4 Columns

6 Columns

Buttons

Standard (Square) Tabs

Modern (Round) Tabs

Flat (Rounded) Tabs

Classic (Square) Tabs

Tour (Classic + Square) Tabs

Example Tab #1

Example Tab #2

Example Tab #3

Tour (Modern + Round) Tabs

Example Tab #1

Example Tab #2

Example Tab #3

Tour (Flat + Rounded) Tabs

Example Tab #1

Example Tab #2

Example Tab #3

Heading with Custom Font

Pie Chart Example

Line Chart Example

Alert / Message Boxes

Icons! Lots and Lots of Icons!!

Video Embeds (YouTube, Vimeo, MP4, etc)

Toggles

Classic FAQ Toggles

Toggle Example Number One

Toggle Example Number Two

Toggle Example Number Three

Toggle Example Number Four

Toggle Example Number Five

Toggle Example Number Six

Toggle Example Number Seven

Classic (Square) Accordion

Classic FAQ Toggles

Simple Toggle Style Example

Round Toggle Style Example

Round Outline Toggle Style Example

Rounded Toggle Style Example

Rounded Outline Toggle Style Example

Square Toggle Style Example

Square Outline Toggle Style Example

Arrow Toggle Style Example

Flat (Square) Accordion

Social Networks

Google Maps