Royal Shortcodes

There are several shortcodes which can be used in Royal theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

[alert] - insert the alert block with custom title and message;

Example: [alert type="success" title="Well done - Success alert box!"] Your message![/alert]
Shortcode Description & Attributes: title — add the title of message; type — sets type of your massage (allowed values: success, error, info, warning).

[block id= " "] - inserts statick block. Read more here;

[blockquote] - inserts the blockquote;
Shortcode Description & Attributes: class — add the title of button (allowed values: style2).

[button] - inserts the button;

Example: [button type=" " size=" " icon= " " title=" " href=" "]
Shortcode Description & Attributes: title — add the title of button; href — add your destination url here; icon — add icon on your button; size — sets a size of your button (allowed values: big, medium, small). type — sets a general view of your button (allowed values: bordered, filled).

[counter init_value=" " final_value=" "] - displays counter;

[dropcap] - inserts dropcap;
Shortcode Description & Attributes: style — light, dark.

[etheme_products title=" " ids="" skus="" type=" " products=" " limit=" " columns=" " categories="" desktop="" notebook="" tablet="" phones=""] - displays products.
Shortcode Description & Attributes: Depending on attributes displays products as slider or grid.
title — title for products; ids — display products by id; skus — display products by sku; type — set type of products view (allowed values: grid, slider); products — specify what products you want to display (allowed values: featured, new, sale, bestsellings); columns — controls how many columns wide the products should be before wrapping (allowed values:3, 4, 5). For grid type only! limit — sets products quantity; categories — displays products from specific category by category id. desktop — sets products quantity per row in the slider for desktop version For slider type only!; notebook — sets products quantity per row in the slider for notebook. For slider type only! tablet — sets products quantity per row in the slider for tablet. For slider type only!; phones — sets products quantity per row in the slider for phones. For slider type only!.

[googlechart] - inserts chart with assigned attributes;

Example: [googlechart title="Pie Chart" type="pie" labels="Magento|Wordpress|Prestashop" data="41,32,27" data_colours="fc715b,73dd93,feed84"]
Shortcode Description & Attributes: If you need to represent data graphically you can use shortcode for the charts creating.
title — sets the title associated with a content block. type — sets of chart type (allowed values: pie, pie2d, line, xyline, scatter). labels — display the text associated with a slice, line or point (separate each value with the “pipe” symbol). data — specify data for your chart (separate each value with the “comma” symbol for pie, pie2d, line types of charts and with “pipe” symbol for xyline, scatter). data_colours — defining individual slice, line, point color (separate each value with the “comma” symbol).

[checklist] - inserts the unordered list. Should be used together in a specific order;

[portfolio] - inserts Recent Projects slider;

[qrcode] - inserts the qrcode;
Shortcode Description & Attributes: size — size of QR Code (in pixels); selt_link — sets link to page with this QR Code; lightbox — if you want to show QR Code as lightbox; title — title for lightbox link.

[share] - inserts social icons (facebook, twitter, mail, pinterest, google+);

[title subtitle=""] - inserts the title and subtitle line;

[toggle_block][toggle] - shortcodes to create block with toggles. Should be used together in a specific order;

[vimeo], [youtube] - inserts the video from vimeo or youtube.

Example: [vimeo src="http://player.vimeo.com/video/22439234"] [youtube src="http://www.youtube.com/embed/mcixldqDIEQ"]
Shortcode Description & Attributes: src — specifies the URL of video; width — sets the width of your video (specify a size in pixels); height — sets the height of your video (specify a size in pixels).

Pricing tables

To create pricing tables you may add following code:

<div class="pricing-table columns4">
	<ul>
		<li class="row-title">Free</li>
		<li class="row-price">$19</li>
		<li>512 mb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul>
		<li class="row-title">Econom</li>
		<li class="row-price">$29</li>
		<li>1 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul class="selected-column">
		<li class="row-title">Premium</li>
		<li class="row-price">$59</li>
		<li>2 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
	<ul>
		<li class="row-title">Advanced</li>
		<li class="row-price">$79</li>
		<li>4 gb</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
		<li><a href="#" class="button">Add to Cart</a></li>
	</ul>
</div>

Key lines of code are explained below:

<div class="pricing-table columns4"> - general view of your table: namber of culumn, design. You may also use: columns3, columns5, style3, style2.

<ul class="selected-column"> - hightlights column.

<li class="row-title"> - add this class to set title for your column.

<li class="row-price"> - add this class to add row with price.

You can also use WPBakery Page Builder element Pricing Table, select desired style and following code as content:

<ul>
<li class="row-title">Free</li>
<li class="row-price"><sup class="currency">$</sup>19<sup>00</sup><sub>per month</sub></li>
<li>512 mb</li>
<li>0.6 GHz</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a class="button" href="#">Add to Cart</a></li>
</ul>

Widgets and Static Blocks Royal Shortcodes