The Polygon Documentation

Shortcodes

In this section you can learn how to use our shortcodes

1/3 Column

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

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

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

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

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

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

Print a space

[space height="30" ]

height: height (px) of empty space

Alert Box

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

Show a formatted title

[box_title title="10.000 ITEMS FROM OUR DOOR TO YOUR IN 24HRS" font_size="22" subtitle="enjoy our great shipping service" subtitle_font_size="15" font_color="#000000" border="middle" border_color="#cdcdcd"]

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

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
content: shortcode content

Call to action newsletter

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

Show a box with icon, text and button

[call_two href="#" background_color="rgba(255,255,255,0.01)" title_text="SALE!" title_font_size="58" title_color="#7caf00" subtitle_text="UP TO 60% OFF ON ALL PRODUCTS" label_button="discover now! >" label_size="16" animate="fadeInDown"]

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

Show a call to action with phone number

[call title="OUR CUSTOMER CARE" phone="123456798" icon_theme="retinaicon-font:retina-communication-005"]

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

Code

Show a formatted text code

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

Contact Info

Show a list of contact info

[contact_info subtitle="OUR NEW YORK STORE" address="Sesame Street 45, New York" address_icon="http://localhost/yit-theme-multisite/the-polygon/wp-content/uploads/sites/17/2015/09/contact-info-map.png" phone="+39 099 8377289" phone_icon="http://localhost/yit-theme-multisite/the-polygon/wp-content/uploads/sites/17/2015/09/contact-info-phone.png" mobile_icon="none" email="[email protected]" email_icon="http://localhost/yit-theme-multisite/the-polygon/wp-content/uploads/sites/17/2015/09/contact-info-mail.png" animation_delay="0"]

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

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
percent: show percent icon or not
percent color: color of percent icon font
animate numbers: add an animation to the counter or not
animatation start number: animation start number of the counter
animatation duration: animation duration(in ms)
animatation step:

Credit Card

Show a list of available credit cards

[credit_card type="amazon, bank, generic_1, " ]

type: a comma separated list of credit cards

Dropcap

Create a dropcap

[dropcap]L[/dropcap]

Error Box

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

Highlight

Show some text with custom font and background color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[highlight text_color="#000" background_color="#9bdb00" ] Duis aute irure dolor in reprehenderit in voluptate [/highlight]velit esse cillum dolore eu fugiat nulla pariatur

text color: color of the text
background color: color of the background

Icon

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

Create an icon box

[box_section icon_theme="retinaicon-font:retina-gadgets-device-tech001" icon_size="40" color="#000000" circle_size="70" border_size="0" color_circle="#000000" title="LOVE THIS THEME"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/box_section][vc_empty_space height="60px"][box_title title="SHORTCODE ATTRIBUTES" font_size="15" border="middle" border_color="#cdcdcd"]

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

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

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

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

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

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

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

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: text of the link
link text size: font size of the link
link_icon_type: [ none | theme-icon | custom ] type of icon
link_icon_theme: awesome icon, see here a complete list of options

Notice Box

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

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

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

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

Post List

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

Create a box with prices

[price title="title" price="50" price_prefix="$" href="#" buttontext="Show" color="#81d742" last="1" centered="1"]Best product[/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

Print border line

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

Print clear

Print a clear, to undo the floating

[clear]

Progress Bar

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

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

Section with background

Create a section with custom background

[section_background background_type="image" background_image="http://localhost/yit-theme-multisite/the-polygon/wp-content/uploads/sites/17/2015/09/section-back-1.jpg"]

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

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

Sitemap

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

Print a text with a custom size

[size px="30" perc="-1" em="-1" ]The Polygon is a beatiful theme[/size]

px: pixel unit of font size
perc: percentual unit of font size
em: em unit of font size

SoundCloud player

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

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

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

Show an example of success box alert

[success animation_delay="0" animate="" ]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/success]

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 in shortcode brackets: content of special font

Tabs

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)

Tick

Insert a tick on the content

[x size="18" color="#23b10b" ]

size: size of tick
color: color of tick

Twitter

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

Show a Vimeo Video

[vimeo video_id="3109777" width="640" height="360" ]

video_id: vimeo video id
placeholder: activate placeholder image
placeholder_img: url image for placeholder

Youtube Video

Embed YouTube video player

[youtube video_id="wSBIcNmCAX0" width="640" height="360" ]

video_id: youtube video id
placeholder: activate placeholder image
placeholder_img: url image for placeholder

Blog Section

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
show thumbnails: show the thumbnails or not
show_categories: show category of post
cat_name: id categories to show
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

Team

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

Show a contact form

[contact_form name="contact-form" ]

YIT Faq

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

Testimonial

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

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

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

Product Categories Slider

List all (or some) product categories into a slider

[products_categories_slider title="Categories Shop" category="pc, ps4, wii-u, xbox-one, " per_page="-1"]

title: title of the block
items: number of items per page
category: one or more categories will be shown
show counter: whether to show the total elements numberv
autoplay: autoplay slider(yes/no)
hide empty: whether to hide the block when contains no elements
order by: sorting type (default/alphabetically/most recent/price)
sorting: sorting direction (asc/desc)
animation: animation slider
animation delay: animation delay slider

Product Categories Slider

List all (or some) product categories into a slider

[products_categories_slider title="Categories Shop" category="pc, ps4, wii-u, xbox-one, " per_page="-1"]

title: title of the block
items: number of items per page
category: one or more categories will be shown
show counter: whether to show the total elements numberv
autoplay: autoplay slider(yes/no)
hide empty: whether to hide the block when contains no elements
order by: sorting type (default/alphabetically/most recent/price)
sorting: sorting direction (asc/desc)
animation: animation slider
animation delay: animation delay slider

Products Tabs

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)
product_in_a_row_1: products show in a row
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

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
product_type: [ all / featured / on_sale ] product type
hide_free: hide free products
show_hidden: show hidden products
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

Show a single product

[single_product product_id="0" last_element="no" animation_delay="0" animate="" ]

product_id: ID of the product
size: size of the product thumbnail (small,medium or large)
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

Show products

[show_products per_page="8" hide_free="yes" show_hidden="yes" animation_delay="0" layout="grid" product_in_a_row="3" filter_type="category" category="0" show="all" orderby="rand" order="desc" animate="" ]

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
filter_type: type filter product, by category or products id
order: [ asc / desc ] sorting direction
hide free: hide free products
show hidden: show hidden 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

The Polygon Documentation

Shortcodes

General Shortcodes

Section Shortcodes

Post Type Shortcodes

Shop Shortcodes

1/3 Column

1/4 Column

2/3 Column

2/4 Column

3/4 Column

Accordion

Add Space

Alert Box

Box Title

Button

Call to action newsletter

Call to action with button

Call to action phone

Code

Contact Info

Counter

Credit Card

Dropcap

Error Box

Highlight

Icon

Icon Box

Image

Image Lightbox

Image Slider

Info Box

List Bullet

Logged User

Modal Window

Notice Box

Number Section

Parallax effect

Pie Chart

Post List

Price Box

Print border line

Print clear

Progress Bar

Quote

Section with background

Separator

Share

Sitemap

Size of text

Social

SoundCloud player

Special font

Style text

Success box

Tabs

Tick

Twitter

Vimeo Video

Youtube Video

Blog Section

Team

Contact Form

YIT Faq

Testimonial

Testimonial Slider

Add to cart

Product Categories Slider

Product Categories Slider

Products Tabs

Products Slider

Single Product

Show Products