#### Nielsen Documentation

# Shortcodes

In this section you can learn how to use our shortcodes

#### General Shortcodes

- 1/3 Column
- 1/4 Column
- 2/3 Column
- 3/4 Column
- Accordion
- Add Space
- Alert Box
- Box title
- Button
- Call to action newsletter
- Call to action with button
- Call to action alternative
- Call to action phone
- Code
- Contact Info
- Counter
- Credit Card
- Dropcap
- Google Maps
- Highlight
- Icon
- Icon Box
- Image
- Image Lightbox
- Image Slider
- Info Box
- Last Post Box
- List Bullet
- Logged User
- Modal Window
- Newsletter Form
- Notice Box
- Number Sections
- Parallax Effect
- Pie Chart
- Posts List
- Price Box
- Price table 3 column
- Price table 4 column
- Print Border Line
- Print Clear
- Progress Bar
- Quote
- Section with background
- Separator
- Share
- Sitemap
- Size of text
- Social
- Sound Cloud PLayer
- Special Font
- Style Text
- Success Box
- Tabs
- Tick
- Twitter
- Vimeo Video
- Youtube Video

#### Section Shortcodes

- Blog

#### Post Type Shortcodes

- Contact Form
- Logos Slider
- Portfolio
- Testimonials
- Testimonials Slider

#### Shop Shortcodes

- Add to cart
- Categories Sliders
- Product Categories
- Show Categories
- Products Tabs
- Products Slider
- Rating
- Reset Woocommerce loop
- Single Product
- Single Product Two
- Show the products

#### 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="your class" subtitle="subtitle" subtitle_font_size="15" font_size="15" border_color="#f2f2f2" animation_delay="0"
                    font_alignment="center" border="middle" animate="" ]title[/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
- newsletter form: newsletter form selected
- icon form: awesome icon inside the email input, look here for a complete list of options
- form button class: newsletter form button class

#### Call to action with button

Back to top

Show a box with icon, text and button

    [call_two href="#" background_color="#ffffff" title_text="up to 50% off on the winter collection" title_font_size="18" title_color="#6d6c6c" subtitle_text="Enjoy your christmas shopping on Nielsen" subtitle_font_size="14" subtitle_color="#5b5a5a" label_button="enjoy the special sales" label_size="14" class="call-to-action-two" animation_delay="0" animate="" ]

- url: url of the link
- background color: the background color of cta
- title text: the title of cta
- title font size: title font size
- title font color: the color of title
- subtitle text: the subtitle of cta
- subtitle font size: subtitle font size
- subtitle font color: the color of subtitle
- label button: label of button
- label font size: label font size
- css class: custom css class
- animation: [ 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

#### Call to action with button alternative

Back to top

Show a box with icon, text and button

    [call_four href="#" background_color="#ffffff" title_text="up to 50% off on the winter collection" title_font_size="18" title_color="#6d6c6c" subtitle_text="Enjoy your christmas shopping on Nielsen" subtitle_font_size="14" subtitle_color="#5b5a5a" label_button="enjoy the special sales" label_size="14" class="call-to-action-two" animation_delay="0" animate="" ]

- url: url of the link
- background color: the background color of cta
- title text: the title of cta
- title font size: title font size
- title font color: the color of title
- subtitle text: the subtitle of cta
- subtitle font size: subtitle font size
- subtitle font color: the color of subtitle
- label button: label of button
- label font size: label font size
- css class: custom css class
- animation: [ 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

#### Call to action phone

Back to top

Show a call to action with phone number

    [call title="OUR CUSTOMER CARE" phone="+39 397 37292" icon_theme="retinaicon-font:retina-communication-005"]

- title: title of the newsletter form
- phone: the phone number
- icon: the icon for number
- css class: custom css class
- animation: [ 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: your content

#### Code

Back to top

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="info@info.it" 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="DAYS" text_color="#363636" text_size="16" number="200" number_size="52" number_color="#363636" percent="0" percent_color="#6d6c6c" icon_type="none" icon_size="55" icon_color="#000000" animate="1" animation_start_number="0" animation_duration="1000" animation_step="10"]

- 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]

#### 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

#### Icon

Back to top

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="retinaicon-font:retina-food-053" icon_size="40" color="#747474" circle_size="70" color_circle="#747474" title="LOVE THIS THEME" animation_delay="1000" icon_awesome="adjust" icon_simple_line="icon-diamond" icon_size_simple_line="30" color_simple_line="#000000" circle_size_simple_line="70" color_circle_simple_line="#797979" title_size="h3"]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 | retina_icon | custom]
- icon_awesome: the awesome icon (if 'icon_type' is 'awesome'), look here for a complete list of options
- retina_icon: the retina icon (if 'icon_type' is 'retina_icon'), 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')
- icon_color: color of the icon (if 'icon_type' is 'awesome' or 'retina_icon')
- square_size: the dimension of the square around the icon
- border_color: the color of the square around the icon
- title: title of the icon box
- title_tag: 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

#### Modal Window

Back to top

Create a modal window

    [modal title="THE SECRET OF OUR SUCCESS" opener="button" button_text_opener="Open Modal" button_style="normal" link_text_opener="Open Modal" link_icon_type="none" link_icon_theme="adjust" link_text_size="17"]content[/modal]

- title: modal title
- opener: [ button | text | image ] type of modal opener
- button text opener: text of the button
- button style:[normal | alternative] style of the button
- image opener: url of the image
- link text opener: the text of the link
- link text size: font size of the link
- link_icon_type: [ none | theme-icon | custom ]the type of the icon
- link_icon_theme: awesome icon, look here for a complete list of options

#### Newsletter Form

Back to top

Shows a newsletter form

    [newsletter_form title="" title_size="32" title_color="#000000" description="" description_size="24" description_color="#555555" button_class="btn-flat-red" post_name="newsletter-widget" 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="01" title="Marketing =Solution=" last="0"]Quisque nec mi eu nibh aliquam elementum. Ut cursus nisl sit amet sapien dignissim at adipiscing lectus ornare lorem lorem dieus.[/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_poster: the poster of video
- video_button: [ yes | no ] choose yes if you want show a button in a video parallax (optional)
- video_button_style: [ghost | flat-red | flat-orage ] 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

#### 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

#### Print border line

Back to top

Print a border

    [border animation_delay="0" animate="" ]

- 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

#### Print clear

Back to top

Print a clear, to undo the floating

    [clear]

#### 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
- font color: color 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

#### 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

#### Tabs

Back to top

Create a content with tabs.

    [tabs tab1="tab1" tab2="tab2" tab3="tab3"][tab id="tab1"]Your content 1[/tab][tab id="tab2"]Your content 2[/tab][tab id="tab3"]Your content 3[/tab][/tabs]

- tab*: category names comma separated

#### Tick

Back to top

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
- categories: select categories for posts blog
- show thumbnails: whether to show the thumbnail
- show date: whether to show the date
- alternative date style: alternative style for 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" ]

#### 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" animate="" ]

- items: number of the items to show
- cat: the categories of posts to show
- 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

Show add to cart for one product

    [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="1" hide_empty="1" orderby="menu_order" order="desc" autoplay="true" category="0, "]

- title: categories slider title
- category: a comma separated list of categories id
- show counter: show the number of products near the category title
- hide empty: whether to show hidden products
- order: order field
- sortimg: [ asc / desc ] order direction
- animation delay: the delay to which the animation starts
- autoplay: enable slider autoplay

#### Product Categories

Back to top

List all (or limited) product categories

    [products_categories category="0, " hide_empty="1" show_counter="1" orderby="menu_order" order="desc"]

- 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
- order by: order field
- order: [ asc / desc ] order direction

#### Show Categories

Back to top

List all (or limited) product categories

    [show_category category="bags"]

- category: a comma separated list of categories id

#### 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 title="" per_page="12" hide_free="no" show_hidden="no" animation_delay="0" product_in_a_row="4" category="null" product_type="all" orderby="rand" order="desc" autoplay="true" animate="" ]

- category: a comma separated list of category name
- per page: number of items per page
- visible: number of visible items
- product_type: [ all / featured / on_sale ] prodcut type
- order by: [ rand / title / date / price / sales ] order field
- order: [ asc / desc ] order direction
- hide_free: hide free products
- show_hidden: show hidden products
- autoplay: whether to automatically start slider
- 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

#### 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

#### Single Product Two

Back to top

Show a single product

    [single_product_two product_id="1391" animation_delay="0" border="none" animate="" ]

- product_id: the id of the product
- border: select if you want border [ none | right | left ]
- 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" 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
- 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