Teasers

[helper type=”gap” gap_height=”30px”]
[column width=”1/3″][teaser type=”icon-box” icon=”archive” title=”Icon Teaser” button_text=”Read More” button_url=”#” button_color=”primary”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit, ante ut consequat tempor, sapien urna adipiscing leo, vitae lacinia ante nibh.[/teaser][/column][column width=”1/3″][teaser type=”image-box” image=”http://ccate.coloradowebdesign.com/wp-content/uploads/2014/03/content3.jpg” title=”Image Teaser” button_text=”Read More” button_url=”#” button_color=”default”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit, ante ut consequat tempor, sapien urna adipiscing leo, vitae lacinia ante nibh.[/teaser][/column][column width=”1/3″][teaser type=”text-box” title=”Text Teaser – Custom Colors” custom_bg_color=”#f1a733″ custom_title_color=”#fff” custom_text_color=”#fcebd2″ button_text=”Read More” button_url=”#” button_color=”info”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit, ante ut consequat tempor, sapien urna adipiscing leo, vitae lacinia ante nibh.[/teaser][/column]
[ teaser type="text-box / icon-box / image-box" image="empty / image URL / image icon URL" icon="" title="This is Teaser" custom_bg_color="" custom_title_color="" custom_text_color="" custom_icon_bg_color="" custom_icon_color="" button_text="Read More" button_url="#" button_color="default / primary / success / info / warning / danger / transparent" arrow="none / left / right / bottom" ]Content[/ teaser ]

Teaser shortcode options:

  • type* — teaser type, leave only one option:
    • text-box — simple box without image or icon;
    • icon-box — font or image icon;
    • image-box — with full width image.
  • image — image or icon URL for ‘icon-box’ and ‘image-box’ types;
  • icon — font icon name ‘icon-box’ type, optional if you use an image icon (get icon name from Fontawesome collection — pick an icon, then cut ‘fa-‘ fom the beginning, like: ‘fa-area-chart’ -> ‘area-chart’);
  • title* — teaser title;
  • custom_bg_color — optional color for background;
  • custom_title_color — optional color for title;
  • custom_text_color — optional color for text;
  • custom_icon_bg_color — optional background color for icon circle;
  • custom_icon_color — optional icon color;
  • button_text — caption on the button;
  • button_color — button color, choose one value;
  • arrow — optional arrow, choose one value.
[helper type=”separator” gap_height=””]

Button

[helper type=”gap” gap_height=”30px”]

[btn color=”default” size=”default” link=”#” target=””]Button Default[/btn] [btn color=”primary” size=”default” link=”#” target=””]Button Primary[/btn] [btn color=”success” size=”default” link=”#” target=””]Button Success[/btn] [btn color=”info” size=”default” link=”#” target=””]Button Info[/btn] [btn color=”warning” size=”default” link=”#” target=””]Button Warning[/btn] [btn color=”danger” size=”default” link=”#” target=””]Button Danger[/btn]

[btn color=”default” size=”large” link=”#” target=””]Large Button[/btn] [btn color=”primary” size=”small” link=”#” target=””]Small Button[/btn] 

[ btn color="default / primary / success / info / warning / danger / transparent" size="default / large / small" link="#" target="" ]Caption[ /btn ]

Button shortcode options:

  • color* — button color, choose one value;
  • size* — button size, choose one value;
  • link* — URL;
  • target — link target: ‘_blank’, ‘_self’, ‘_parent’.
[helper type=”separator” gap_height=””]

Tabs

[helper type=”gap” gap_height=”30px”] [tabs tab1=”Tab Title” tab2=”Tab Title” tab3=”Tab Title”] [/tabs] 
[ tabs tab1="Tab Title" tab2="Tab Title" tab3="Tab Title" ]
 [ tab tab_number="1" ]Tab Content[ /tab ]
 [ tab tab_number="2" ]Tab Content[ /tab ]
 [ tab tab_number="3" ]Tab Content[ /tab ]
[ /tabs ]

Tabs shortcode options:

  • tab#* — title for the respective tab;
  • tab_number* — pane number to associate with the correct tab.
[helper type=”separator” gap_height=””]

Accordion

[helper type=”gap” gap_height=”30px”]
Suspendisse est dolor, adipiscing eget suscipit ac, gravida nec massa. Donec commodo erat eget nisi ultricies mattis. In molestie laoreet enim, et scelerisque sapien gravida in. Phasellus vestibulum scelerisque pulvinar. Integer lacinia tristique urna at dignissim. Phasellus molestie leo orci, nec egestas est gravida a. Nulla vitae posuere lacus. Phasellus dignissim congue ullamcorper.
Suspendisse est dolor, adipiscing eget suscipit ac, gravida nec massa. Donec commodo erat eget nisi ultricies mattis. In molestie laoreet enim, et scelerisque sapien gravida in. Phasellus vestibulum scelerisque pulvinar. Integer lacinia tristique urna at dignissim. Phasellus molestie leo orci, nec egestas est gravida a. Nulla vitae posuere lacus. Phasellus dignissim congue ullamcorper.
Suspendisse est dolor, adipiscing eget suscipit ac, gravida nec massa. Donec commodo erat eget nisi ultricies mattis. In molestie laoreet enim, et scelerisque sapien gravida in. Phasellus vestibulum scelerisque pulvinar. Integer lacinia tristique urna at dignissim. Phasellus molestie leo orci, nec egestas est gravida a. Nulla vitae posuere lacus. Phasellus dignissim congue ullamcorper. 
[ accordion open_first="yes / no" ]
 	
	
 	
	
 	
	
[ /accordion ]

Tabs shortcode options:

  • open_first* — open first tab or keep it closed;
  • title* — tab title.
[helper type=”separator” gap_height=””]

Pricing Table

[helper type=”gap” gap_height=”30px”]
[column width=”1/3″][pricing_table title=”Title” price=”$99″ price_description=”monthly” button_text=”Button” button_url=”#”] [item]List Item[/item] [item]List Item[/item] [item]List Item[/item] [/pricing_table][/column] [column width=”1/3″][pricing_table title=”Title” price=”$99″ price_description=”monthly” button_text=”Button” button_url=”#”] [item]List Item[/item] [item]List Item[/item] [item]List Item[/item] [/pricing_table][/column] [column width=”1/3″][pricing_table title=”Title” price=”$99″ price_description=”monthly” button_text=”Button” button_url=”#”] [item]List Item[/item] [item]List Item[/item] [item]List Item[/item] [/pricing_table][/column] 
[ pricing_table title="Title" price="$99" price_description="monthly" button_text="Button" button_url="#" ]
 [ item ]List Item[ /item ]
 [ item ]List Item[ /item ]
 [ item ]List Item[ /item ]
[ /pricing_table ]

Tabs shortcode options:

  • title* — pricing option title;
  • price* — option price;
  • price_description* — price description;
  • button_text — text on the button;
  • button_url — URL for button link;
[helper type=”separator” gap_height=””]

Messages

[helper type=”gap” gap_height=”30px”] [alert type=”warning” close_button=”yes”]Message[/alert] [alert type=”success” close_button=”yes”]Message[/alert] [alert type=”danger” close_button=”yes”]Message[/alert] [alert type=”info” close_button=”yes”]Message[/alert] 
[ alert type="warning / success / danger / info" close_button="yes / no" ]Message[ /alert ]

Tabs shortcode options:

  • type* — message type/color;
  • close_button* — show close button or not.
[helper type=”separator” gap_height=””]

Progressbar

[helper type=”gap” gap_height=”30px”] [progressbar percentage=”25″ color=”success”]Title[/progressbar] [progressbar percentage=”50″ color=”info”]Title[/progressbar] [progressbar percentage=”75″ color=”warning”]Title[/progressbar] [progressbar percentage=”100″ color=”danger”]Title[/progressbar] 
[ progressbar percentage="50" color="success / info / warning / danger" ]Title[ /progressbar ]

Tabs shortcode options:

  • percentage* — percentage value for progressbar;
  • content* — progressbarbar title.
[helper type=”separator” gap_height=””]

Gallery

[helper type=”gap” gap_height=”25px”] 
[ gallery columns="2 / 3 / 4" ]

Tabs shortcode options:

  • columns* — number of columns.
[helper type=”separator” gap_height=””]

Staff

[helper type=”gap” gap_height=”30px”] [staff layout=”carousel” columns=”3″ show_only_ids=”92,101,107,106,108,109,110,111″] [helper type=”gap” gap_height=”35px”] [staff layout=”grid” columns=”2″ show_only_ids=”123,122″] 
[ staff layout="carousel / grid" columns="2 / 3 / 4" show_only_ids="" ]

Tabs shortcode options:

  • layout* — carousel or grid layout;
  • columns* — number of columns;
  • show_only_ids — options IDs of posts to show, example value: 56,87,114.
[helper type=”separator” gap_height=””]

Testimonials

[helper type=”gap” gap_height=”30px”] [testimonials layout=”carousel” random=”yes” columns=”1″ show_only_ids=””] [helper type=”gap” gap_height=”30px”] [testimonials layout=”grid” random=”yes” columns=”2″ show_only_ids=”113,115″] 
[ testimonials layout="carousel / grid" random="yes / no" columns="1 / 2 / 3 / 4" show_only_ids="" ]

Tabs shortcode options:

  • layout* — carousel or grid layout;
  • random* — show in random order or by date;
  • columns* — number of columns;
  • show_only_ids — optional selected ID’s of posts to show, example value: 56,87,114.
[helper type=”separator” gap_height=””]

Blog

[helper type=”gap” gap_height=”30px”] [blog layout=”carousel” posts_limit=”4″ columns=”2″] 
[ blog layout="carousel / grid" posts_limit="" columns="1 / 2 / 3 / 4" ]

Blog shortcode options:

  • layout* — carousel or grid layout;
  • posts_limit* — how many posts to show;
  • columns* — number of columns.
[helper type=”separator” gap_height=””]

Video

[helper type=”gap” gap_height=”20px”] 
[ video src="" mp4="" m4v="" webm="" ogv="" wmv="" flv="" poster="" loop="" autoplay="" preload="" ]

This is the standard WordPress shortcode, you can read about it here.

[helper type=”separator” gap_height=””]

Audio

[helper type=”gap” gap_height=”20px”] 
[ audio src="" mp3="" m4a="" ogg="" wav="" wma="" loop="" autoplay="" preload="" ]

This is the standard WordPress shortcode, you can read about it here.

[helper type=”separator” gap_height=””]

Embed

[helper type=”gap” gap_height=”10px”] 
[ embed width="auto" ][ /embed ]

This is the standard WordPress shortcode, you can read about it here.

[helper type=”separator” gap_height=””]

Helper

[helper type=”gap” gap_height=”10px”] 
[ helper type="gap / separator / clearfix" gap_height="" ]

Blog shortcode options:

  • type* — type of the helper element;
  • gap_height* — height of the gap for “gap” type.