Regency Documentation

Shortcodes

In this section you can learn how to use our shortcodes

1/3 Column

Back to top

This shortcode creates one column of a third.

  • class: text field to add custom classes
  • last: [yes / no] choose yes if this column is the last element of the row
  • content: the content of the column
[one_third class="" last="yes" ][/one_third]

1/4 Column

Back to top

This shortcode creates one column of a fourth.

[one_fourth class="" last="yes" ][/one_fourth]
  • class: text field to add custom classes
  • last: [yes / no] choose yes if this column is the last element of the row
  • content: the content of the column

2/3 Column

Back to top

This shortcode creates two columns of a third.

[two_third class="" last="yes" ][/two_third]
  • class: text field to add custom classes
  • last: [yes / no] choose yes if this column is the last element of the row
  • content: the content of the column

2/4 Column

Back to top

This shortcode creates two columns of a fourth.

[two_fourth class="" last="yes" ][/two_fourth]
  • class: text field to add custom classes
  • last: [yes / no] choose yes if this column is the last element of the row
  • content: the content of the column

3/4 Column

Back to top

This shortcode creates three columns of a fourth.

[three_fourth class="" last="yes" ][/three_fourth]
  • class: text field to add custom classes
  • last: [yes / no] choose yes if this column is the last element of the row
  • content: the content of the column

Accordion

Back to top

Accordion is useful to add collapsible content panels for presenting information in a limited amount of space.

[accordion title="your_title" opened="no" animation_delay="0" class_icon_closed="plus" class_icon_opened="minus" border="true" animate="" ][/accordion]
  • title: the accordion's title
  • opened: [yes / no] whether to show the accordion opened initially
  • class_icon_opened: the icon when accordion is opened
  • class_icon_closed: the icon when accordion is closed
  • border: [yes / no] whether to show the border
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay of animation
  • content: the content of accordion

Add Space

Back to top

Print a space

[space height="30" ]
  • height: height of space box in px

Alert Box

Back to top

Show an alert box

[alert animation_delay="0" animate="" ][/alert]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay of animation
  • content: the content of accordion

Box Title

Back to top

Show a formatted title

[box_title class="" subtitle="" subtitle_font_size="15" font_size="15" border_color="#CDCDCD"
                animation_delay="0" font_alignment="center" border="middle" animate="" ][/box_title]
  • content: title of box
  • class: custom css class added to the box
  • font_size: font size for the box content
  • subtitle: subtitle of the box
  • subtitle_font_size: subtitle font size
  • border: border position
  • border_color: border color
  • font_alignment: font alignment for the box content
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Button

Back to top

Show a custom button

[button href="#" icon_size="12" class="" target="" color="flat" dimension="normal" icon="None" animation="" animate="" animation_delay="0" ]button[/button]
  • href: url of the link
  • target: target of the link
  • color: button’s look and feel [flat, ghost, ghost-white, ghost-red]
  • dimension: width of the button [large / normal / small / mini]
  • icon: awesome icon inside button
  • icon size: size of the awesome icon
  • animation: animation direction
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts
  • class: custom css class addedd to the button

Call to action newsletter

Back to top

Show a call to action with newsletter form

[newsletter_cta title="STAY UPDATE WITH OUR NEWS" incipit="" post_name="newsletter-form-cta" icon_form="f003" ]
  • title: title of the newsletter form
  • title size: title font size
  • title color: title font color
  • incipit: subtitle of the newsletter form
  • incipit size: incipit font size
  • incipit color: incipit font color
  • post_name: newsletter form selected
  • icon form: awesome icon inside the email input, look here for a complete list of options

Call to action with button

Back to top

Show a box with icon, text and button

[call_two href="#" label_button="Enjoy Now" class="call-to-action-two" colortext="#000000" icon_size="41" animation_delay="0" icon="envelope-o" animate="" ]- 50% OFF ON THE SUMMER COLLECTION[/call_two]
  • href: url of the link
  • label: label of the button
  • class: color of the text content
  • color text: awesome icon inside the email input
  • icon: awesome icon inside content
  • icon size: font size of the awesome icon

Call to action phone

Back to top

Show a call to action with phone number

[call title="OUR CUSTOMER CARE" phone="+39 397 37292"]content[/call]
  • title: title of the newsletter form
  • phone: the phone number

Show a formatted text code

[code ]#header.fixed-header { position: fixed; }[/code]

Contact Info

Back to top

Show a list of contact info

[contact_info address="Sesame Street 45, New York" address_icon="your_icon" phone="+39 099 8377289" phone_icon="your_icon" mobile_icon="none" email="[email protected]" email_icon="your_icon" animation_delay="0" email_link="#" address_title="STORE ADDRESS" phone_title="OUR CUSTOMER CARE" email_title="DROP A LINE"]
  • title: title of the contact info
  • subtitle: subtitle of the contact info
  • address title: address title
  • address: address field label
  • address icon: address field icon
  • phone title: phone title
  • phone: phone field label
  • phone icon: phone field icon
  • mobile title: title
  • mobile: mobile field label
  • mobile icon: mobile field icon
  • fax title: fax title
  • fax: fax field label
  • fax icon: fax field icon
  • email title: email title
  • email: email field label
  • email icon: email field icon
  • email link: email link

Counter

Back to top

Show a counter

[counter text="HAPPY CUSTOMERS" number="300" number_size="60" number_color="#f7c104" percent_color="#000000" animation_start_number="0" animation_duration="2000" animation_step="10" animate="yes" text_color="#000000" text_size="60" icon_type="theme-icon" icon_theme="smile-o" icon_size="40" icon_color="#797979"]
  • text: text under the number
  • text color: color of the text under the number
  • text size: size of the text under the number
  • number: number value
  • number size: font size of the number
  • number color: color font of the number
  • icon type: wether to insert icon, image or nothing
  • icon url: image url, if you want to use use a customimage
  • icon size: size of the icon, if you want to use a predifined icon
  • icon color: color of the icon, if you want to use a predifined icon
  • percent: whether to show the percent icon
  • percent color: color font of the percent icon
  • animate numbers: whether to animate the counter

Credit Card

Back to top

Show a list of available credit cards

[credit_card type="amazon, bank, generic_1, " ]
  • type: a comma separated list of credit cards

Dropcap

Back to top

Create a dropcap

[dropcap]L[/dropcap]

Error Box

Back to top

Show an error box

[error animation_delay="5" animate="fadeIn" ]This is an error alert[/error]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Google Map

Back to top

Show a google map

[googlemap full_width="0" height="500" address="Calle Doctor José Naveiras, 46, 38004 Santa Cruz de Tenerife, Spagna" latitude="28.475172" longitude="-16.254518" zoom="15" marker="your_image" style="color"]
  • full width: whether to grow the map to the screen width
  • height:height of the map
  • address: address of the location
  • latitude: latitude of map
  • longitude: longitude
  • zoom: zoom of map
  • marker: marker of map
  • style: style of map (color | black and white)

Highlight

Back to top

Show a text with custom font and background color

[highlight text_color="#f7c104" background_color="#0a0000" ]et magnis dis parturient montes[/highlight]
  • text color: color of the text
  • background color: color of the background

Show an icon

[icon icon_size="14" color="#797979" circle_size="35" spinning="no" icon_type="theme-icon" icon_theme="envelope-o" circle="yes" rotate="normal" ]
  • icon type: type of the icon(theme-icon or custom)
  • icon size: font size of the icon
  • color: color of the border and the icon
  • circle: whether to show the circle around the icon
  • circle size: icon circle width
  • spinning: whether to active spinning animation
  • rotate: rotation type

Icon Box

Back to top

Create an icon box

[box_section layout="horizontal" icon_type="theme-icon" icon_theme="heart-o" icon_size="40" color="#797979" title="LOVE THIS THEME" class="box-sections" animation_delay="0" circle_size="70" color_circle="#797979"]Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.[/box_section]
  • layout: type of the layout [horizontal | vertical ]
  • icon_type: type of the icon (theme-icon or custom) [awesome | simple_line | custom]
  • icon_awesome: the awesome icon (if 'icon_type' is 'awesome'), look here for a complete list of options
  • icon_simple_line: the simple libe icon (if 'icon_type' is 'simple_line'), look here for a complete list of options
  • icon_custom: url of the icon ('icon_type' is 'custom')
  • icon_size: size of the awesome icon (if 'icon_type' is 'awesome')
  • color: color of the awesome icon (if 'icon_type' is 'awesome')
  • circle_size: the dimension of the square around the icon (if 'icon_type' is 'awesome')
  • color_circle: the color of the square around the icon (if 'icon_type' is 'awesome')
  • icon_size_simple_line: size of the simple line icon (if 'icon_type' is 'simple_line')
  • color_simple_line: color of the simple line icon (if 'icon_type' is 'simple_line')
  • circle_size_simple_line: the dimension of the square around the icon (if 'icon_type' is 'simple_line')
  • color_circle_simple_line: the color of the square around the icon (if 'icon_type' is 'simple_line')
  • title: title of the icon box
  • title_size: font size if the title [ h2 | h3 | h4 | h5 | h6 ]
  • class: custom class added to the blog section ( use as default 'box-sections')
  • link: url of the link
  • link_title: title of the link
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Image

Back to top

Show an image

[img src="your_image" alt="your_title" width="200" height="61" animate="fadeIn" ]
  • src: absolute path of the image
  • alt: alternate text
  • width: image width
  • height: image height
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element

Image Lightbox

Back to top

Create an image lightbox

[image url="the_url_of_image" link="#" title="Medium" size="medium" lightbox="true" align="left" autoheight="true" animation_delay="0"]
  • url: absolute path of the image
  • link: address of the link
  • size: [ small | medium | large | fullwidth ]type list of size
  • target: [ _blank | _parent | _self | _top ] target of link
  • lightbox: [ true / false ] whether to show the lightbox on image click
  • title: caption inside the lightbox
  • align: [ left | right | center ] image alignment
  • auto height:[ true / false ] whether to maintain image ratio
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Image Slider

Back to top

Show an image slider

[images_slider effect="fade" width="0" height="200" speed="8000" direction="horizontal" animation_delay="0" animate="swing"]the_url_of_image[/images_slider]
  • effect:[ fade / slide ] animation type
  • width: width of the images
  • height: height of slider box
  • speed: time(millisecond) to wich slide change
  • direction:[ horizontal / vertical ] direction of slide(when effect attribute is ‘slide’)
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Info Box

Back to top

Show an info box

[info animation_delay="0" animate="" ]INFO[/info]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

List Bullet

Back to top

Shows list bullet with custom icon

[list_bullet icon="star" animation_delay="0" icon_color="#f7c104"]
  • Quisque nec mi eu nibh aliquam elementum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet.
  • Ut cursus nisl sit amet sapien dignissim at adipiscing lectus ornare dieus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet.
[/list_bullet]
  • icon: awesome icon showed near the text, look here for a complete list of options
  • icon_color: awesome icon color

Logged User

Back to top

Shows logged user info

[logged_user before="Hello " after="" display="display_name" ]
  • before: text before user info
  • after: text after user info
  • display: the info to wicth display

Newsletter Form

Back to top

Shows a newsletter form

[newsletter_form title="Newsletter Form" description="insert your email" post_name="form-newsletter-popup" icon_form="f003" ]
  • title: title of the newsletter form
  • title_size: font size of the title
  • title_color: color of the title
  • description: description of the newsletter form
  • description_size: font size of the description of the newsletter form
  • description_color: color of the description of the newsletter form
  • post_name: slug of the newsletter form
  • button style: style of the button [flat | ghost | ghost-white | ghost-red ]
  • icon_form: awesome icon, look here for a complete list of options

Notice Box

Back to top

Shows a notice box

[notice animation_delay="0" animate="" ]content of box[/notice]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts
  • content inside the shortcode brackets: the content of the box

Number Section

Back to top

Show a number background with a title and text

[numbers_sections number="1" title="Title of section" last="no" animation_delay="0" animate="" ]this is your content[/numbers_sections]
  • number: the number to shop
  • title: the title of the section
  • last: [yes / no] choose yes if this box is the last element of the row
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts
  • content inside the shortcode brackets: the content of the box

Parallax effect

Back to top

Create a fancy full-width parallax effect

[parallax height="495" image="" color="#ffffff" overlay_opacity="20" hover_color="#dd9933" valign="center" halign="center" effect="bounceInDown" border_bottom="5" video_upload_mp4="" video_upload_ogg="" video_upload_webm=""  video_button="no" video_button_style="" video_url="#" label_button_video=""]
Here your html code[/parallax]
  • height: the height of the parallax
  • image: the url of the background image
  • color: content text color
  • overlay_opacity: [0 - 100] opacity of overlay
  • valign: [top | center | bottom] vertical aligment
  • halign: [left | center | right] horizontal aligment
  • effect: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation type of the content
  • border_bottom: [0 - 10] the size of the bottom border
  • video_upload_mp4: url of video mp4 (optional)
  • video_upload_ogg: url of video ogg (optional)
  • video_upload_webm: url of video webm (optional)
  • video_button: [ yes | no ] choose yes if you want show a button in a video parallax (optional)
  • video_button_style: [flat | ghost | ghost-red | ghost-white ] the style of video button (optional)
  • video_url: the url of the video that will be opened in the lightbox (optional)
  • label_button_video: the label of the video button (optional)
  • content inside the shortcode brackets: the content of the parallax, you can add also html tags

Pie Chart

Back to top

Show animated Pie Chart

[pie_chart percent="75" barcolor="#ef1e25" trackcolor="#f2f2f2" line_width="3" size="150" font_size="12" bar_animate="2000" animation_delay="0" animate="" ][/pie_chart]
  • percent: the percent value of chart
  • barcolor: the color of the circular bar
  • trackcolor: the color of the track for the bar
  • line_width: width of the bar line in px.
  • size: size of the pie chart in px. It will always be a square.
  • font_size: the font size of the content
  • bar_animate: time in milliseconds for a eased animation of the bar growing
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts
  • content inside the shortcode brackets: the content of the pie chart

Popular post box

Back to top

Shows popular posts

[popularpost items="3" excerpt="no" showthumb="no" date="no" author="no" comments="no" cat_name="null" ]
  • items: number of post to show
  • excerpt_length: number of words of the excerpt to show
  • readmore: text of the read more link
  • showthumb: whether to show the featured image thumb or not
  • date: whether to show the post date or not
  • author: whether to show the post author or not
  • comments: whether to show the post comments or not

Post List

Back to top

Show a list of posts

[posts items="3" title="Posts List" cat="null" ]
  • cat: category names comma separated
  • items:number of items
  • title:title of the list

Price Box

Back to top

Create a box of prices

[price title="title" price="" price_prefix="$" price_suffix="" href="#" buttontext="Show" textcolor="#000000"
color="#ffffff" last="no" centered="no" price_separator="." ][/price]
  • title: title of the price box
  • price: price value
  • price_separator: char separator for decimal part (‘.’/’,’)
  • price_prefix: text before price
  • price_suffix: text after price
  • href: url of the link button
  • buttontext: text of button
  • textcolor: color of the text
  • color: background color of price box
  • last: whether to remove margin right
  • centered: whether to center price box inside container

Price table 3 columns

Back to top

Create a table box of prices

[price_table_three]
    [price_table title="JUNIOR PLAN" price="$120/mo" href="#" buttontext="SIGNUP NOW" show_header="yes"
show_footer="yes" price_table_position="left"][/price_table]
    [price_table type="larg e" title="HIGLIGHT PLAN" price="$170/mo" href="#" buttontext="SIGNUP NOW"
show_header="yes" show_footer="yes" ][/price_table]
    [price_table title="ADVANCED PLAN" price="$250/mo" href="#" buttontext="SIGNUP NOW" show_header="yes"
show_footer="yes" price_table_position="right"][/price_table]
    [/price_table_three]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Price table 4 columns

Back to top

Create a table box of prices

[price_table_four]
    [price_table title="" price="" href="#" buttontext="" show_header="no" show_footer="no"][/price_table]
    [price_table title="JUNIOR PLAN" price="$120/mo" href="#" buttontext="SIGNUP NOW" show_header="yes"
show_footer="yes" price_table_position="left"][/price_table]
    [price_table type="large" title="HIGLIGHT PLAN" price="$170/mo href="#" buttontext="SIGNUP NOW"
show_header="yes" show_footer="yes"][/price_table]
    [price_table title="ADVANCED PLAN" price="$250/mo" href="#" buttontext="SIGNUP NOW" show_header="yes"
show_footer="yes" price_table_position="right"][/price_table]
[/price_table_four]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Progress Bar

Back to top

Animated Bar

[progress_bar title="ILLUSTRATOR" percent="70" barcolor="#f7c104" trackcolor="#f2f2f2"
line_height="35" font_size="17" speed="fast" text_position="after"]
  • title: title of the progress bar
  • percent: percent value
  • barcolor: color of the bar
  • trackcolor: color of the track
  • line_height: line height value
  • font size: font size of the text
  • text_position: text position [before | inside | after]
  • speed: animation speed type [fast | normal | slow ]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Quote

Back to top

Shows a quote

[quote author="" animation_delay="0" animate="" ]this is the content[/quote]
  • author: the author of the quote
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts
  • content inside the shortcode brackets: the content of the quote

Random Number

Back to top

Show a icon with a numerb and a block text

[random_numbers icon_size="60" color="#f7c104" circle_size="100" text="Satisfied Customers" number="60"
last="no" animation_delay="100" icon_type="theme-icon" icon_theme="group" animate="fadeInUp" ]
  • icon_type:[ custom / theme-icon] type of the icon
  • icon_theme: the awesome icon(if icon type is theme-icon), look here for a complete list of options
  • icon_url: url of the icon (if icon type is custom)
  • icon_size: size of the awesome icon (if icon type is theme-icon)
  • color: color of the awesome icon (if icon type is theme-icon)
  • circle_size: size of circle around the icon
  • text: number value
  • number: text under the number
  • last: whether to remove the margin right
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Recent post box

Back to top

Shows last post of a specific category

[recentpost items="3" excerpt="no" showthumb="no" date="no" author="no"
comments="no" animation_delay="0" cat_name="null" animate="" ]
  • items: number of post to show
  • excerpt: [yes | no] show the excerpt of the post
  • cat_name: list of category comma separated
  • showthumb: whether to show the featured image thumb or not
  • date: whether to show the post date or not
  • author: whether to show the post author or not
  • comments: whether to show the post comments or not
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Section with background

Back to top

Create section with a custom background

[section_background background_type="color" background_color="#f8f8f8" background_image="" animation_delay="0" animate="fadeInDown"]
  • background type: [color | image] type of the background
  • background color: color of background (when background type is ‘color’)
  • background image: image of background (when background type is ‘image’)
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Separator

Back to top

Show a line

[separator color="#cdcdcd" margin_top="40" margin_bottom="40" style="single"]
  • style: style of the separator [single | double | dotted | dashed]
  • color: separator color
  • margin_top: css property margin top [0-999]px
  • margin_bottom: css property margin bottom [0-999]px

Share

Back to top

Print share buttons

[share title="share" class="" show_in_cloud="yes" icon_share="reply" socials="facebook,twitter,google,pinterest" size="" icon_type="icon" ]
  • title: share title
  • icon share: awesome icon, look here for a complete list of options
  • size: icon size
  • class: a custom class
  • socials: a comma separated list of share buttons
  • icon type: [ icon / text ] whether to show share buttons like icons or text
  • show in cloud: whether to show share buttons inside a cloud box

Sitemap

Back to top

Print website sitemap (the sitemap can be configured in YIT Plugins -> Layout if YIT_Sidebar plugin is active)

[sitemap title="Sitemap" ]
  • title: sitemap title

Size of text

Back to top

Print a text with a custom size

[size px="45" perc="-1" em="-1" ]size of text[/size]
  • px: pixel unit of width
  • perc: percentual unit of width
  • em: em unit of width

Social

Back to top

Print a simple icon link for social

[social icon_size="34" color="#b1b1b1" color_hover="#000000" href="#" icon_type="icon" icon_social="pinterest" circle="no"]
  • icon_type:[icon | text] type of the icon
  • icon_social: awesome icon (if icon type is icon), look here for a complete list of options
  • icon_size: size of the awesome icon (if icon type is theme-icon) [9-90]px
  • color: color of the awesome icon (if icon type is theme-icon)
  • color_hover: color of the awesome icon whene mouse is hover (if icon type is theme-icon)
  • circle:[yes | no] whether to show circile around icon (if icon type is theme-icon)
  • circle_size: square dimension (if circle is 'yes')
  • circle_border_size: border size of circle (if circle is 'yes')
  • href: address of link
  • target:[_blank | _parent | _top] target of link
  • title: title of social

SoundCloud player

Back to top

Show the audio player of SoundCloud

[soundcloud iframe="yes" url="" auto_play="no" show_artwork="yes" show_comments="yes" color="#ff7700" ]
  • iframe: [no | yes] if you want use a iframe
  • url: url of the source
  • auto_play: [no | yes] if the track starts when the page is loaded
  • show_artwork: [no | yes] if you want show artwork
  • show_comments: [no | yes] if you want show comments
  • color: the background color

Special font

Back to top

Select a special font of text

[special_font size="12" unit="px" ][/special_font]
  • unit: [em , px , pt , cm , in] unit
  • size: size of font
  • content inside the shortcode brackets: the content of the special font

Style text

Back to top

Add a css color style to a text

[style color="" ][/style]
  • color: the color of the content
  • content inside the shortcode brackets: the content of the style text

Success box

Back to top

Show an example of success box alert

[success]The item was added in your cart[/success]
  • content inside the shortcode brackets: the content of the special font

Create a content with tabs.

[tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"]
            						[tab id="tab1"]Your content 1[/tab]
                                    [tab id="tab2"]Your content 2[/tab]
            [/tabs]
  • tab*: category names comma separated

Insert a tick on the content

[x size="18" color="#23b10b" ]
  • size: size of tick
  • color: color of tick

Twitter

Back to top

Print a list of last tweets

[twitter username="" consumer_key="" consumer_secret="" access_token="" access_token_secret="" items="5"
class="last-tweets-widget" time="yes" animation_delay="0" animate="" ]
  • username: twitter username
  • consumer key: field required by twitter api
  • consumer secret: field required by twitter api
  • access token: field required by twitter api
  • access token secret: field required by twitter api
  • items: number of item to show
  • class: container css class
  • time: whether to show time
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation_delay: the delay to which the animation starts

Vimeo Video

Back to top

Show a Vimeo Video

[vimeo video_id="3109777" width="640" height="360" ]
  • video_id: vimeo video id
  • width: width of the video
  • height: height of the video

Youtube Video

Back to top

Embed the player youtube video

[youtube video_id="wSBIcNmCAX0" width="640" height="360" ]
  • video_id: youtube video id
  • width: width of the video
  • height: height of the video

Blog Section

Back to top

Print a blog slider

[blog_section nitems="-1" enable_slider="yes" enable_thumbnails="yes" enable_date="yes" enable_title="yes" enable_author="yes" enable_comments="yes" animation_delay="0" animate="" ]
  • number of items: set how many elements to show
  • enable slider: whether to activate the slider
  • show thumbnails: whether to show the thumbnail
  • show date: whether to show the date
  • show title: whether to show the title
  • show author: whether to show the author
  • show comments: whether to show the comments
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Contact Form

Back to top

Show a contact form

[contact_form name="contact-form" ]

Feature Tab

Back to top

Show the frontend of the Feature Tab

[feature_tab name="features-tab-1" ]

Logos Slider

Back to top

Show a slider with logos

[logos_slider title="Our Partners" items="-1" height="50" speed="500" ]
  • title: title of the slider
  • items: number of the items to show
  • height: nheight of the slider
  • speed: time(millisecond) after slide move to next page
  • active_bw: Activate or not the gray to color effect on hover

Portfolio

Back to top

Show the frontend of the Portfolio

[portfolio name="filterable4" ]
  • name: portfolio name

Testimonial

Back to top

Show all post on testimonials post types

[testimonial items="-1" animation_delay="0" cat="0" style="square" animate="" ]
  • items: number of the items to show
  • cat: the categories of posts to show
  • style: [ square / comic ] layout type
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Testimonial Slider

Back to top

Show a slider with testimonials

[testimonial_slider items="-1" excerpt="32" speed="500" timeout="5000" cat="0" ]
  • items: number of the items to show
  • excerpt: number limit words of excerpt
  • height: height of the slider
  • speed: animation speed(ms)
  • timeout: time(millisecond) to wait until slide change
  • pagination speed: time(ms) to move to the next page
  • navigation: whether to enable navigation
  • pagination: whether to enable pagination
  • autoplay: whether to start slider automatically
  • cat: the categories of posts to show
  • show_border: whether to enable border

Add to cart

Back to top

List all (or limited) product categories

[yit_add_to_cart id="567" attribute_id="10" show_price="yes" show_cart="yes" ]
  • id: product id
  • attribute id: attribute id
  • show price: whether to show price
  • show cart: whether to show cart button

Categories Slider

Back to top

List all (or limited) product categories

[products_categories_slider per_page="-1" show_counter="yes" hide_empty="yes" style="black" discovery_text="DISCOVERY NOW" orderby="menu_order" order="desc" animation_delay="0" category="37, 45, 19, 44, 38, 48, 17, "]
  • title: categories slider title
  • category: a comma separated list of categories id
  • per page: number of items per page
  • show counter: show the number of products near the category title
  • hide empty: whether to show hidden products
  • style: [ white / black ] hover background color tyle
  • discovery text: button link text
  • order by: order field
  • order: [ asc / desc ] order direction
  • animation delay: the delay to which the animation starts

Product Categories

Back to top

List all (or limited) product categories

[products_categories per_page="-1" hide_empty="yes" show_counter="yes" discovery_text="DISCOVERY NOW" style="black" orderby="menu_order" order="desc" category="45, 19, 44, 17, "]
  • title: product categories title
  • category: a comma separated list of categories id
  • per page: number of items per page
  • show counter: show the number of products near the category title
  • hide empty: whether to show hidden products
  • style: [ white / black ] hover background color tyle
  • discovery text: button link text
  • order by: order field
  • order: [ asc / desc ] order direction

Products Tabs

Back to top

List products in tabs

[products_tabs title_1="Man" per_page_1="10" title_2="Woman" per_page_2="10" category_1="man" show_1="all" orderby_1="rand" order_1="desc" category_2="woman" show_2="all" orderby_2="rand" order_2="desc"]
  • title: title of products tabs
  • category: whether to show all or chosen categories
  • per page: number of items per page
  • show: the kind of products(all/featured/on sale)
  • hide empty: whether to show hidden products
  • style: [ white / black ] hover background color tyle
  • discovery text: button link text
  • order by: [ default / alphabetically / most recent / price / sales] order by
  • order: [ asc / desc ] order direction

Products Slider

Back to top

List products in a slider

[products_slider per_page="8" category="vintage,woman" layout="default" product_type="all" orderby="rand" order="desc" autoplay="true" animation_delay="0"]
  • category: a comma separated list of category name
  • per page: number of items per page
  • layout: [ default / slideup / classic ] layout type
  • product_type: [ all / featured / on_sale ] prodcut type
  • order by: [ rand / title / date / price / sales ] order field
  • order: [ asc / desc ] order direction
  • autoplay: whether to automatically start slider
  • animation delay: the delay to which the animation starts

Reset Woocommerce Loop

Back to top

Reset woocommerce loop

[reset_woocommerce_loop ]

Single Product

Back to top

Show a single product

[single_product product_id="0" last_element="no" animation_delay="0" animate="" ]
  • product_id: the id of the product
  • last_element: yes if this is the last element of the single product sequence ['yes' | 'no']
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation of the element
  • animation delay: the delay to which the animation starts

Show Products

Back to top

Show the products

[show_products per_page="8" product_in_a_row="4" hide_free="yes" show_hidden="yes" animation_delay="500" layout="default" category="baby" filter_type="category" show="all" orderby="rand" order="desc" animate="flash" ]
  • product_in_a_row: number of items per row
  • layout: [ default / elegant / alternative ] select the layout of products
  • filter_type: [ ids / category ] wheter to filter by products ids or other options described below
  • ids a comma seprated list of products id (if filter_type is set to "ids")
  • per_page: number of items per page (if filter_type is set to "category")
  • category: whether to show all or chosen category (if filter_type is set to "category")
  • show: [ all / featured / on_sale ] the kind of products (if filter_type is set to "category")
  • hide free: whether to hide free product (if filter_type is set to "category")
  • show hidden: whether to show hidden product (if filter_type is set to "category")
  • order by: [ rand / alphabetically / most recent / price / sales] sorting type
  • order: [ asc / desc ] sorting direction