Nielsen Documentation

Shortcodes

In this section you can learn how to use our shortcodes

1/3 Column

Back to top

This shortcode creates one column of a third.

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

1/4 Column

Back to top

This shortcode creates one column of a fourth.

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

2/3 Column

Back to top

This shortcode creates two columns of a third.

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

2/4 Column

Back to top

This shortcode creates two columns of a fourth.

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

3/4 Column

Back to top

This shortcode creates three columns of a fourth.

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

Accordion

Back to top

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

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

Add Space

Back to top

Print a space

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

Alert Box

Back to top

Show an alert box

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

Box Title

Back to top

Show a formatted title

[box_title class="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

Show a formatted text code

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

Contact Info

Back to top

Show a list of contact info

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

Counter

Back to top

Show a counter

[counter text="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

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

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

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

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

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