Desire 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

You can use Accordion to add collapsible content panels and show information in a shorter space.

[accordion title="Neque porro quisquam est qui dolorem ipsum ?" opened="1" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.[/accordion][accordion title="Neque porro quisquam est qui dolorem ipsum ?" opened="0" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [/accordion][accordion title="There are many variations of passages of Lorem Ipsum available!" opened="0" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [/accordion]
        
  • title: accordion's title
  • opened: [yes / no] show accordion opened at page loading or not
  • class_icon_opened: icon shown when accordion is opened
  • class_icon_closed: icon shown when accordion is closed
  • border: [yes / no] show a border 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 ] shown an animation for the element
  • animation_delay: delay for the animation
  • content: content of the accordion

Add Space

Back to top

Print a space

[space height="30" ]
  • height: height (px) of empty space

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 ] shown an animation for the element
  • animation_delay: delay for the animation
  • content: the content of box

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 the box
  • class: custom CSS class added to the box
  • font_size: font size for box content
  • subtitle: subtitle of the box
  • subtitle_font_size: font size for subtitle
  • border: border position
  • border_color: border color
  • font_alignment: font alignment for 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 ] set an animation for the element
  • animation_delay: delay time before 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
  • dimension:[ large / normal / small / mini] width of the button
  • icon: awesome icon in the button, see here 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 ] set an animation for the element
  • animation_delay: delay time before 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 UPDATED WITH OUR NEWS!" incipit="SUBSCRIBE OUR NEWSLETTER NOW" post_name="newsletter-cta" title_size="32" title_color="#383838" incipit_size="24" incipit_color="#a4a4a4" icon_form="f003" button_class="btn-ghost"]
  • title: title of the newsletter form
  • title size: font size of the title
  • title color: font color of the title
  • 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 in email input, see 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" colortext="#383838" background_color="#ffffff" font_size="32" label_size="30"]- 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"]
        <h4>STORE ADDRESS</h4>
        <p>Avenida Los Americas 195, Santa Cruz de Tenerife (ESP)</p>
        <p>Open Mon-Fri : 8AM – 7PM</p>
        [/call]
        
  • title title of the shortcode
  • background color: background color for call to action
  • phone: phone number
  • css: CSS class
  • animation: entrance animation for the call to action
  • animation delay: animation delay for call to action
  • your content: content to show in call to action

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="Catrame Street 32, Los Angeles" address_icon="http://lhdm/Desire/wp-content/uploads/sites/61/2014/11/contact_info_address1.png" phone="+39 43 865489" phone_icon="http://live.hgfh.com/Desire/wp-content/uploads/sites/61/2014/11/contact_info_phone1.png" mobile_icon="none" email="[email protected]" email_icon="http://ligfgve.gfhgf.com/Desire/wp-content/uploads/sites/61/2014/11/contact_info_email1.png" animation_delay="0" email_link="#" address_title="BUILDING ADDRESS" phone_title="OUR CUSTOMER SERVICE" 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 below number
  • text color: color of the text below the number
  • text size: size of the text below the number
  • number: number value
  • number size: font size of number
  • number color: color of the number font
  • icon type: choose among icon, image or none
  • icon url: image URL, if you want to use a custom image
  • icon size: size of the icon, if you want to use a preset icon
  • icon color: color of the icon, if you want to use a preset icon
  • percent: show percent icon or not
  • percent color: color of percent icon font
  • animate numbers: add an animation to the counter or not

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 ] shown an animation for the element
  • animation delay: delay time before the animation starts

Google Maps

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: adapt the map to the screen width
  • height: height of the map
  • address: address of the location
  • latitude: latitude of the map
  • longitude: longitude
  • zoom: zoom of the map
  • marker: marker in the map
  • style: style of the map (colors | black and white)

Highlight

Back to top

Show some text with custom font and background color

[highlight text_color="#1e73be" background_color="#dd9933" ]Lorem [/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 icon (theme-icon or custom icon)
  • icon size: font size for the icon
  • color: color of border and icon
  • circle: show circle around the icon
  • circle size: width of the circle around the icon
  • spinning: activate spinning animation
  • rotate: type of rotation

Icon Box

Back to top

Create an icon box

[box_section layout="horizontal" icon_type="simple_line" icon_theme="heart-o" icon_size="40" circle_size="70" title="LOVE THIS THEME" animation_delay="1000" icon_awesome="adjust" icon_simple_line="icon-diamond" icon_size_simple_line="30" circle_size_simple_line="70" title_size="h3" color="#797979" color_circle="#797979" color_simple_line="#afa28e" color_circle_simple_line="#afa28e"]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 layout [ horizontal | vertical ]
  • icon_type: type of the icon (theme-icon or custom) [ awesome | simple_line | custom ]
  • icon_awesome: awesome icon (if 'icon_type' is 'awesome'), look here for a complete list of options
  • icon_simple_line: simple line icon (if 'icon_type' is 'simple_line'), see 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: size of the square around the icon (if 'icon_type' is 'awesome')
  • color_circle: 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: size of the square around the icon (if 'icon_type' is 'simple_line')
  • color_circle_simple_line: 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 ] shown an animation for the element
  • animation delay: delay time before 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 ] show an animation for 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 ] show the lightbox on image click or not
  • title: caption inside the lightbox
  • align: [ left | right | center ] image alignment
  • auto height:[ true / false ] maintain image ratio 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 ] show an animation for the element
  • animation delay: delay time before 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 (milliseconds) that has to pass before a new slide is shown
  • direction: [ horizontal / vertical ] direction of the 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 ] show an animation for the element
  • animation delay: delay time before 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 ] show an animation for the element
  • animation delay: delay time before the animation starts

List Bullet

Back to top

Shows list bullets 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, read 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

YIT Newsletter

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, read 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 ] show an animation for the element
  • animation delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the box

Number Section

Back to top

Show a number background with a title and some text

[numbers_sections number="3" 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 ] show an animation for the element
  • animation_delay: delay time before the animation starts
  • content inside the shortcode brackets: 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 mp4 video (optional)
  • video_upload_ogg: URL of ogg video (optional)
  • video_upload_webm: URL of webm video (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: url of the video that will be opened in the lightbox (optional)
  • label_button_video: label of the video button (optional)
  • content inside the shortcode brackets: content of the parallax, you can add also html tags

Pie Chart

Back to top

Show animated Pie Chart

[pie_chart percent="75" barcolor="#a2a2a2" trackcolor="#ededed" line_width="8" size="173" font_size="48" bar_animate="2000"]45000[/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: font size of the content
  • bar_animate: time in milliseconds for an 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 ] show an animation for the element
  • animation_delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the pie chart

Popular post box

Back to top

Shows popular posts

[popularpost items="3" excerpt="yes" excerpt_length="20" readmore="Read more..." showthumb="yes" date="yes" author="yes" comments="no" animation_delay="0" cat_name="0" animate="" ]
  • n. of items: number of posts to show
  • category: one or more categories of post to show
  • excerpt: show excerpts for each post
  • excerpt_lenght: number of words from the excerpt to show
  • readmore: text of the read more link
  • showthumb: show featured image thumb or not
  • date: show the post date or not
  • author: show the post author or not
  • comments: 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 with prices

[price title="title" price="50" price_prefix="$" price_suffix="" href="#" buttontext="Show" textcolor="#ffffff" color="#9a825d" last="no" centered="no" price_separator="." ]Lorem ipsum dolor sit amet, consectetur adipiscing eli[/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: remove margin right or not
  • centered: center price box inside container or not

Price table 3 columns

Back to top

Create a table box with 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"]
        <ul>
            <li>yes</li>
            <li class="alternative-row">no</li>
            <li></li>
        </ul>
        [/price_table]
        [price_table type="large" title="HIGLIGHT PLAN" price="$170/mo" href="#" buttontext="SIGNUP NOW" show_header="yes" show_footer="yes" ]
        <ul>
            <li>100</li>
            <li class="alternative-row">200</li>
            <li>[tick]</li>
        </ul>
        [/price_table]
        [price_table title="ADVANCED PLAN" price="$250/mo" href="#" buttontext="SIGNUP NOW" show_header="yes" show_footer="yes" price_table_position="right"]
        <ul>
            <li>200</li>
            <li class="alternative-row">400</li>
            <li></li>
        </ul>
        [/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 ] show an animation for the element
  • animation_delay: delay time before the animation starts

Price table 4 columns

Back to top

Create a table box with prices

[price_table_four]
    [price_table title="FREE PLAN" price="for free" href="#" buttontext="SIGNUP NOW" show_header="yes" show_footer="yes"][/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 ] show an animation for the element
  • animation_delay: delay time before 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 ] show an animation for the element
  • animation_delay: delay time before 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 ] show an animation for the element
  • animation delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the quote

Random Number

Back to top

Show a icon with a number 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), read 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 ] show an animation for the element
  • animation_delay: delay time before the animation starts

Recent post box

Back to top

Shows last post from 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 posts to show
  • excerpt: [ yes | no ] show an excerpt of the post
  • cat_name: list of category (comma separated)
  • showthumb: show the featured image thumb or not
  • date: show the post date or not
  • author: show the post author or not
  • comments: 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 ] show an animation of the element
  • animation_delay: delay time before the animation starts

Section with background

Back to top

Create a section with 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 in 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 ] show an animation for the element
  • animation_delay: delay time before 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, read 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 ] show share buttons like icons or text
  • show in cloud: show share buttons in a cloud box

Sitemap

Back to top

Print website sitemap (the sitemap can be configured in 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="30" perc="-1" em="-1" ]Desire is a beatiful theme[/size]
  • px: pixel unit of font size
  • perc: percentual unit of font size
  • em: em unit of font size

Social

Back to top

Print a simple icon link for social networks

[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), read 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 to use an 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 text

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

Success box

Back to top

Show an example of success box alert

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

Create 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 items to show
  • class: container CSS class
  • time: show tweet time or not
  • animate: show type of animation
  • animation_delay: delay time before an 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 YouTube video player

[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 post list blog

[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 the number of elements to show
  • enable slider: activate the slider or not
  • show thumbnails: show the thumbnails or not
  • show date: show the date or not
  • show title: show the title or not
  • show author: show the author or not
  • show comments: show comments or not
  • animate: type of animation
  • animation delay: delay time before an animation starts

YIT Team

Back to top

Print a team box

[team_section nitems="-1" items_per_row="4" show_role="1" show_social="1" team="team"]
  • team: set team to show
  • number of members: number of team members to show
  • members per row: number of team members to show on each row
  • show role: show the role of each single member
  • show social: show social links for each single member

Contact Form

Back to top

Show a contact form

[contact_form name="contact-form" ]

YIT Faq

Back to top

Show the frontend of the FAQ

[faq filter="1" text_filterable="Filter to" category="0, 64, 63, 65, "]
  • filterable: enable FAQ filtering
  • text for filterable: text to show in filterable mode
  • category: FAQ categories to show

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 items to show
  • height: height of the slider
  • speed: time (milliseconds) before slider moves to next page

Testimonial

Back to top

Show all posts in testimonial post types

[testimonial items="-1" animation_delay="0" cat="0" style="square" animate="" ]
  • items: number of items to show
  • cat: post categories to show
  • style: [ square / comic ] type of layout
  • animate: type of animation
  • animation delay: delay time before 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 items to show
  • excerpt: limited number of words to show in excerpt
  • height: height of the slider
  • speed: animation speed (milliseconds)
  • timeout: time (milliseconds) that has to pass before sliding to the next testimonial
  • pagination speed: time (milliseconds) that has to pass before moving to the next page
  • navigation: enable navigation or not
  • pagination: enable pagination or not
  • autoplay: play slider automatically
  • cat: post categories to show

Add to cart

Back to top

List all (or limited) product categories

[yit_add_to_cart id="1030" attribute_id="" show_price="yes" show_cart="yes" show_quantity="yes" default_quantity="1" ]
  • id: product id
  • attribute id: attribute id
  • show price: show price of the item(s)
  • show cart: show cart button

Categories Slider

Back to top

List all (or some) 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: title for categories slider
  • category: a comma separated list of category IDs
  • per page: number of items per page
  • show counter: show the number of products next to the category title
  • hide empty: show hidden products or not
  • style: [ white / black ] hover background color style
  • discovery text: text for the button link
  • order by: order field
  • order: [ asc / desc ] sorting direction
  • animation delay: delay time before the animation starts

Product Categories

Back to top

List all (or some) 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: title for product categories
  • category: a comma separated list of category IDs
  • per page: number of items per page
  • show counter: show the number of products next to the category title
  • hide empty: show hidden products or not
  • style: [ white / black ] hover background color style
  • discovery text: text for button link
  • order by: order field
  • order: [ asc / desc ] sorting 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 product tabs
  • category: show all or selected categories
  • per page: number of items per page
  • show: type of products (all/featured/on sale)
  • hide empty: show hidden products
  • style: [ white / black ] hover background color style
  • discovery text: text for button link
  • order by: order by [ default / alphabetically / most recent / price / sales ]
  • order: [ asc / desc ] sorting direction

Products Slider

Back to top

Show 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 categories
  • per page: number of items per page
  • layout: [ default / slideup / classic ] layout type
  • product_type: [ all / featured / on_sale ] product type
  • order by: [ rand / title / date / price / sales ] order field
  • order: [ asc / desc ] sorting direction
  • autoplay: automatically play the slider
  • animation delay: delay time before the animation starts

Single Product

Back to top

Show a single product

[single_product product_id="0" last_element="no" animation_delay="0" animate="" ]
  • product_id: ID of the product
  • last_element: ['yes' | 'no'] 'yes' if this is the last element of a sequence of products
  • 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 ] show an animation for the element
  • animation delay: delay time before the animation starts

Show Products

Back to top

Show products

[show_products per_page="8" product_in_a_row="4" 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
  • product_in_a_row: number of items per row
  • layout: [ default / elegant / alternative ] select the layout of products
  • category: show all or selected categories
  • show: [ all / featured / on_sale ] type of products to show
  • order by: [ rand / alphabetically / most recent / price / sales] product sorting
  • order: [ asc / desc ] sorting direction
  • hide free: hide free products
  • show hidden: show hidden products