Panarea 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

Animated Banner

Back to top

Create animated banner

[banner width="0" height="100" url="#" target="no" title="" subtitle="" title_size="14" title_size_hover="11"
                subtitle_size="11" subtitle_size_hover="14" icon_size="35" icon_size_hover="50" background="" background_image="" border=""
                color_icon="" color_title="" color_subtitle="" background_hover="" border_hover="" color_icon_hover="" color_title_hover=""
                color_subtitle_hover="" animation_delay="0" type="switch-text" icon="None" style="no" animate="" style="no" ]
  • type: [switch-text, zoom-left, zoom-icon, top-entry, left-entry-zoom, rotate-zoom, zoom-box, small-to-big] the type of the animation
  • width: (in px 0 = 100%) width of the banner
  • height: (in px) height of the banner
  • url: the url of the link
  • target: [yes / no] the target of the link
  • title: banner's title
  • subtitle: banner's subtitle
  • icon: awesome icon inside banner, look here for a complete list of options
  • style: [ no | grey | orange] predefinied style
  • title_size: the font size of the title
  • title_size_hover: the font size of the title when mouse is hover
  • subtitle_size: the font size of the subtitle
  • subtitle_size_hover: the font size of the subtitle when mouse is hover
  • icon_size: the font size of the awesome icon
  • icon_size_hover: the font size of the awesome icon when mouse is hover
  • background: the background color of the banner
  • background_hover: the background color of the banner when mouse is hover
  • background_image: the background color of the banner when mouse is hover
  • border: the border color of the banner
  • border_hover: the border color of the banner
  • color_title: the border color of the banner
  • color_title_hover: the color of the title when mouse is hover
  • color_subtitle: the color of the subtitle
  • color_subtitle_hover: the color of the subtitle when mouse is hover
  • color_icon: the color of the icon
  • color_icon_hover: the color of the icon when mouse is hover
  • 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 font size of the title when mouse is hover

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

Buttton

Back to top

Show a custom button

[button href="#" color="flat" dimension="normal" icon="phone" icon_size="18" class="margin-right"]BUY THEME[/button][button href="#" color="alternative" dimension="normal" icon="phone" icon_size="20"]BUY THEME[/button]
  • href: url of the link
  • target: target of the link
  • color: button’s look and feel
  • dimension:[ large / normal / small / mini] width of the button
  • icon: awesome icon inside button, look here for a complete list of options
  • 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: the color of the text
  • icon: awesome icon inside content, look here for a complete list of options
  • icon size: font size of the awesome icon

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 title="CONTACT INFO" subtitle="OUR NEW YORK STORE" address="Sesame Street 45, New York" phone="+39 099 8377289" email="[email protected]" address_icon="map-marker" phone_icon="phone" email_icon="envelope-o" mobile_icon="None" fax_icon="None"]
  • title: title of the contact info
  • subtitle: subtitle of the contact info
  • address: address field label
  • address icon: address field icon
  • phone: phone field label
  • phone icon: phone field icon
  • mobile: mobile field label
  • mobile icon: mobile field icon
  • fax: fax field label
  • fax icon: fax field icon
  • email: email field label
  • email icon: email field icon

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" ]error[/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="no" height="500" src="//maps.google.it/?ll=41.29085,12.71216&spn=27.24047,49.350586&t=m&z=5" address="PADDINGTON STREET 135B, NEW YORK" info="WE\' OPEN MONDAY_FRYDAY 8:00 A.M._7:30 P.M. EST" ]
  • full width: whether to grow the map to the screen width
  • height:height of the map
  • url button: url of the button
  • address: address of the location
  • info: description of the location
  • 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

Highlight

Back to top

Show a text with custom font and background color

Consectetur adipiscing elit. Etiam quis leo at mauris faucibus suscipit. Sed orci arcu, tincidunt at commodo in, consectetur sed enim. Vestibulum aliquet justo rutrum magna tincidunt fringilla. In eget nisl in justo mattis accumsan eu nec magna, [highlight text_color="#000" background_color="#a4bc48" ]Mestibulum aliquet justo rutrum[/highlight] magna tincidunt fringilla eget aliquet mi mattis eu. [highlight text_color="#a4bc48" background_color="#0a0000" ]et magnis dis parturient montes[/highlight] et magnis dis parturient montes
  • 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="QUOTE ICON" 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]
  • icon type: type of the icon(theme-icon or custom)
  • icon url: url of the icon(if icon type is custom)
  • icon theme: the awesome icon(if icon type is theme-icon), look here for a complete list of options
  • icon size: size of the awesome icon(if icon type is theme-icon)
  • icon color: color of the awesome icon(if icon type is theme-icon)
  • title: title of the icon box
  • title size: font size if the title
  • class: custom class added to the blog section
  • 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="http://yourinspirationtheme.com/demo/panarea/wp-content/themes/Panarea/theme/assets/images/logo.png" alt="Panarea" 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="http://yourinspirationtheme.com/demo/Panarea/files/2014/05/43-900x506.jpg" 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"]http://yourinspirationtheme.com/demo/Panarea/files/2014/04/flexi0031.jpg[/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

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 | alternative | 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="2" excerpt="yes" showthumb="yes" date="yes" author="yes" comments="yes" 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="#a4bc48" 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 list of posts

[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

Post List

Back to top

Show a list of posts

[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: circle 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: animation type
  • 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="no" 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: animation type
  • animation delay: the delay to which the animation starts

Portfolio Section

Back to top

Print a portfolio slider

[portfolio_section nitems="-1" enable_hover="yes" enable_title="yes" enable_categories="yes" excluded_ids="" animation_delay="0" portfolios="pinterest" animate="" ]
  • nitems: set how many elements to show
  • portfolios: the portfolio to wich show details
  • enable hover: enable hover properties
  • enable title: enable title on hover
  • enable categories: enable categories on hover
  • excluded ids: a comma separated list of ids to exclude

Contact Form

Back to top

Show a contact form

[contact_form name="contact-form" ]

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

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: animation type
  • 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

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="no" 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="no" 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/best sellers/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 ] 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 ]

Show Reviews

Back to top

Show review of the users

[review_slider title="Reviews" description="Lorem ipsum dolor sit amet, consectetur" items="8" show_avatar="yes" show_rating="yes" speed="500" timeout="5000" id="107" ]
  • id: product id
  • title: product reviews title
  • description: product reviews description
  • items: number of items to show
  • show avatar: whether to show user avatar
  • show rating: whether to show review rating
  • speed: time(millisecond) to wich slide change
  • timeout: time(millisecond) to wait until slide change

Show Products

Back to top

Show the products

[show_products per_page="8" hide_free="yes" show_hidden="yes" animation_delay="500" layout="default" category="baby" show="all" orderby="rand" order="desc" animate="flash" ]
  • per page: number of items per page
  • layout: [ default / slideup / classic ] select the layout of products
  • category: whether to show all or chosen category
  • show: [ all / featured / on_sale ] the kind of products
  • order by: [ rand / alphabetically / most recent / price / sales] sorting type
  • order: [ asc / desc ] sorting direction
  • hide free: whether to hide free product
  • show hidden: whether to show hidden product
  • 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

Add a swiper products slider

Back to top

Add a swiper products slider

[swiper_products_slider title="Product Swiper" per_page="12" hide_free="yes" show_hidden="yes" height="" autoplay="yes" play_speed="3000" category="baby,woman" product_type="all" orderby="rand" order="desc" columns="3" ]
  • title: product swiper title
  • category: a comma separated list of category name
  • columns: number of columns to show in container
  • per page: number of items per page
  • hide free: whether to hide free product
  • show hidden: whether to show hidden product
  • height: image height
  • autoplay: whether to automatically start the slider
  • play speed: time(millisecond) to wich slide change
  • product type:[ all | featured | on_sale] the products type
  • order by: [ rand / alphabetically / most recent / price / sales] sorting type
  • order: [ asc / desc ] sorting direction