Despacho Documentation

Shortcodes

In this section you can learn how to use our shortcodes

1/3 Column

Back to top

This shortcode creates one column of a third.

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

1/4 Column

Back to top

This shortcode creates one column of a fourth.

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

2/3 Column

Back to top

This shortcode creates two columns of a third.

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

2/4 Column

Back to top

This shortcode creates two columns of a fourth.

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

3/4 Column

Back to top

This shortcode creates three columns of a fourth.

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

Accordion

Back to top

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

[accordion title="Neque porro quisquam est qui dolorem ipsum ?" opened="1" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.[/accordion][accordion title="Neque porro quisquam est qui dolorem ipsum ?" opened="0" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [/accordion][accordion title="There are many variations of passages of Lorem Ipsum available!" opened="0" class_icon_closed="plus" class_icon_opened="minus" border="true"]Lorem
            Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [/accordion]
        
  • title: accordion's title
  • opened: [yes / no] show accordion opened at page loading or not
  • class_icon_opened: icon shown when accordion is opened
  • class_icon_closed: icon shown when accordion is closed
  • border: [yes / no] show a border or not
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] shown an animation for the element
  • animation_delay: delay for the animation
  • content: content of the accordion

Add Space

Back to top

Print a space

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

Alert Box

Back to top

Show an alert box

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

Box Title

Back to top

Show a formatted title

[box_title 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

Back to top

Show a custom button

[button href="#" icon_size="12" class="" target="" color="flat" dimension="normal" icon="None" animation="" animate="" animation_delay="0" ]button[/button]
  • href: URL of the link
  • target: target of the link
  • color: button’s look and feel
  • dimension:[ large / normal / small / mini] width of the button
  • icon: awesome icon in the button, see here a complete list of options
  • icon size: size of the awesome icon
  • animation: animation direction
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] set an animation for the element
  • animation_delay: delay time before animation starts
  • class: custom CSS class addedd to the button
  • content: shortcode content

Call to action newsletter

Back to top

Show a call to action with newsletter form

[newsletter_cta title="STAY UPDATED WITH OUR NEWS!" incipit="SUBSCRIBE OUR NEWSLETTER NOW" post_name="newsletter-cta" title_size="32" title_color="#383838" incipit_size="24" incipit_color="#a4a4a4" icon_form="f003" button_class="btn-ghost"]
  • title: title of the newsletter form
  • title size: font size of the title
  • title color: font color of the title
  • incipit: subtitle of the newsletter form
  • incipit size: incipit font size
  • incipit color: incipit font color
  • post_name: newsletter form selected
  • icon form: awesome icon in email input, see here for a complete list of options

Call to action with button

Back to top

Show a box with icon, text and button

[call_two href="#" 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

Back to top

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

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 subtitle="OUR NEW YORK STORE" address="Sesame Street 45, New York" address_icon="http://localhost/yit-theme-multisite/despacho/wp-content/uploads/sites/17/2015/09/contact-info-map.png" phone="+39 099 8377289" phone_icon="http://localhost/yit-theme-multisite/despacho/wp-content/uploads/sites/17/2015/09/contact-info-phone.png" mobile_icon="none" email="[email protected]" email_icon="http://localhost/yit-theme-multisite/despacho/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

Back to top

Show a counter

[counter text="HAPPY CUSTOMERS" number="300" number_size="60" number_color="#f7c104" percent_color="#000000" animation_start_number="0" animation_duration="2000" animation_step="10" animate="yes" text_color="#000000" text_size="60" icon_type="theme-icon" icon_theme="smile-o" icon_size="40" icon_color="#797979"]
  • text: text below number
  • text color: color of the text below the number
  • text size: size of the text below the number
  • number: number value
  • number size: font size of number
  • number color: color of the number font
  • 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

Back to top

Show a list of available credit cards

[credit_card type="amazon, bank, generic_1, " ]
  • type: a comma separated list of credit cards

Dropcap

Back to top

Create a dropcap

[dropcap]L[/dropcap]

Error Box

Back to top

Show an error box

[error animation_delay="5" animate="fadeIn" ]This is an error alert[/error]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] shown an animation for the element
  • animation delay: delay time before the animation starts

Highlight

Back to top

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

Show an icon

[icon icon_size="14" color="#797979" circle_size="35" spinning="no" icon_type="theme-icon" icon_theme="envelope-o" circle="yes" rotate="normal" ]
  • icon type: type of icon (theme-icon or custom icon)
  • icon size: font size for the icon
  • color: color of border and icon
  • circle: show circle around the icon
  • circle size: width of the circle around the icon
  • spinning: activate spinning animation
  • rotate: type of rotation

Icon Box

Back to top

Create an icon box

[box_section 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

Back to top

Show an image

[img src="your_image" alt="your_title" width="200" height="61" animate="fadeIn" ]
  • src: absolute path of the image
  • alt: alternate text
  • width: image width
  • height: image height
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element

Image Lightbox

Back to top

Create an image lightbox

[image url="the_url_of_image" link="#" title="Medium" size="medium" lightbox="true" align="left" autoheight="true" animation_delay="0"]
  • url: absolute path of the image
  • link: address of the link
  • size: [ small | medium | large | fullwidth ] type list of size
  • target: [ _blank | _parent | _self | _top ] target of link
  • lightbox: [ true / false ] show the lightbox on image click or not
  • title: caption inside the lightbox
  • align: [ left | right | center ] image alignment
  • auto height:[ true / false ] maintain image ratio or not
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation delay: delay time before the animation starts

Image Slider

Back to top

Show an image slider

[images_slider effect="fade" width="0" height="200" speed="8000" direction="horizontal" animation_delay="0" animate="swing"]the_url_of_image[/images_slider]
  • effect:[ fade / slide ] animation type
  • width: width of the images
  • height: height of slider box
  • speed: time (milliseconds) that has to pass before a new slide is shown
  • direction: [ horizontal / vertical ] direction of the slide (when effect attribute is "slide")
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation delay: delay time before the animation starts

Info Box

Back to top

Show an info box

[info animation_delay="0" animate="" ]INFO[/info]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation delay: delay time before the animation starts

List Bullet

Back to top

Shows list bullets with custom icon

[list_bullet icon="star" animation_delay="0" icon_color="#f7c104"]
  • Quisque nec mi eu nibh aliquam elementum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet.
  • Ut cursus nisl sit amet sapien dignissim at adipiscing lectus ornare dieus.
  • Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit amet.
[/list_bullet]
  • icon: awesome icon showed near the text, read here for a complete list of options
  • icon_color: awesome icon color

Logged User

Back to top

Shows logged user info

[logged_user before="Hello " after="" display="display_name" ]
  • before: text before user info
  • after: text after user info
  • display: the info to wicth display

Notice Box

Back to top

Shows a notice box

[notice animation_delay="0" animate="" ]content of box[/notice]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the box

Number Section

Back to top

Show a number background with a title and some text

[numbers_sections number="3" title="Title of section" last="no" animation_delay="0" animate="" ]this is your content[/numbers_sections]
  • number: the number to shop
  • title: the title of the section
  • last: [yes / no] choose yes if this box is the last element of the row
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation_delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the box

Parallax effect

Back to top

Create a fancy full-width parallax effect

[parallax height="495" image="" color="#ffffff" overlay_opacity="20" hover_color="#dd9933" valign="center" halign="center" effect="bounceInDown" border_bottom="5" video_upload_mp4="" video_upload_ogg="" video_upload_webm=""  video_button="no" video_button_style="" video_url="#" label_button_video=""]
Here your html code[/parallax]
  • height: the height of the parallax
  • image: the URL of the background image
  • color: content text color
  • overlay_opacity: [0 - 100] opacity of overlay
  • valign: [ top | center | bottom ] vertical aligment
  • halign: [ left | center | right ] horizontal aligment
  • effect: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] the animation type of the content
  • border_bottom: [0 - 10] the size of the bottom border
  • video_upload_mp4: URL of mp4 video (optional)
  • video_upload_ogg: URL of ogg video (optional)
  • video_upload_webm: URL of webm video (optional)
  • video_button: [ yes | no ] choose yes if you want show a button in a video parallax (optional)
  • video_button_style: [ flat | ghost | ghost-red | ghost-white ] the style of video button (optional)
  • video_url: url of the video that will be opened in the lightbox (optional)
  • label_button_video: label of the video button (optional)
  • content inside the shortcode brackets: content of the parallax, you can add also html tags

Pie Chart

Back to top

Show animated Pie Chart

[pie_chart percent="75" barcolor="#a2a2a2" trackcolor="#ededed" line_width="8" size="173" font_size="48" bar_animate="2000"]45000[/pie_chart]
  • percent: the percent value of chart
  • barcolor: the color of the circular bar
  • trackcolor: the color of the track for the bar
  • line_width: width of the bar line in px.
  • size: size of the pie chart in px. It will always be a square.
  • font_size: font size of the content
  • bar_animate: time in milliseconds for an eased animation of the bar growing
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation_delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the pie chart

Post List

Back to top

Show a list of posts

[posts items="3" title="Posts List" cat="null" ]
  • cat: category names (comma separated)
  • items: number of items
  • title: title of the list

Price Box

Back to top

Create a box with prices

[price title="title" price="50" price_prefix="$" 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

Progress Bar

Back to top

Animated Bar

[progress_bar title="ILLUSTRATOR" percent="70" barcolor="#f7c104" trackcolor="#f2f2f2"
line_height="35" font_size="17" speed="fast" text_position="after"]
  • title: title of the progress bar
  • percent: percent value
  • barcolor: color of the bar
  • trackcolor: color of the track
  • line_height: line height value
  • font size: font size of the text
  • text_position: text position [before | inside | after]
  • speed: animation speed type [fast | normal | slow ]
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation_delay: delay time before the animation starts

Quote

Back to top

Shows a quote

[quote author="" animation_delay="0" animate="" ]this is the content[/quote]
  • author: the author of the quote
  • animate: [ none , bounce , flash , pulse , shake , swing , tada , wobble , bounceIn , bounceInDown , bounceInLeft , bounceInRight, bounceInUp , fadeIn , fadeInDown , fadeInDownBig , fadeInLeft , fadeInLeftBig , fadeInRight , fadeInRightBig , fadeInUp , fadeInUpBig , flip , flipInX , flipInY , lightSpeedIn , rotateIn , rotateInDownLeft , rotateInDownRight , rotateInUpLeft , rotateInUpRight , rollIn ] show an animation for the element
  • animation delay: delay time before the animation starts
  • content inside the shortcode brackets: content of the quote

Section with background

Back to top

Create a section with custom background

[section_background background_type="image" background_image="http://localhost/yit-theme-multisite/despacho/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

Back to top

Show a line

[separator color="#cdcdcd" margin_top="40" margin_bottom="40" style="single"]
  • style: style of the separator [single | double | dotted | dashed]
  • color: separator color
  • margin_top: CSS property margin top [0-999] px
  • margin_bottom: CSS property margin bottom [0-999] px

Share

Back to top

Print share buttons

[share title="share" class="" show_in_cloud="yes" icon_share="reply" socials="facebook,twitter,google,pinterest" size="" icon_type="icon" ]
  • title: share title
  • icon share: awesome icon, read here for a complete list of options
  • size: icon size
  • class: a custom class
  • socials: a comma separated list of share buttons
  • icon type: [ icon / text ] show share buttons like icons or text
  • show in cloud: show share buttons in a cloud box

Sitemap

Back to top

Print website sitemap (the sitemap can be configured in Plugins > Layout if YIT_Sidebar plugin is active)

[sitemap title="Sitemap" ]
  • title: sitemap title

Size of text

Back to top

Print a text with a custom size

[size px="30" perc="-1" em="-1" ]Despacho is a beatiful theme[/size]
  • px: pixel unit of font size
  • perc: percentual unit of font size
  • em: em unit of font size

Social

Back to top

Print a simple icon link for social networks

[social icon_size="34" color="#b1b1b1" color_hover="#000000" href="#" icon_type="icon" icon_social="pinterest" circle="no"]
  • icon_type: [ icon | text ] type of the icon
  • icon_social: awesome icon (if icon type is icon), read here for a complete list of options
  • icon_size: size of the awesome icon (if icon type is theme-icon) [9-90]px
  • color: color of the awesome icon (if icon type is theme-icon)
  • color_hover: color of the awesome icon whene mouse is hover (if icon type is theme-icon)
  • circle: [ yes | no ] whether to show circile around icon (if icon type is theme-icon)
  • circle_size: square dimension (if circle is 'yes')
  • circle_border_size: border size of circle (if circle is 'yes')
  • href: address of link
  • target: [ _blank | _parent | _top ] target of link
  • title: title of social

SoundCloud player

Back to top

Show the audio player of SoundCloud

[soundcloud iframe="yes" url="" auto_play="no" show_artwork="yes" show_comments="yes" color="#ff7700" ]
  • iframe: [ no | yes ] if you want to use an iframe
  • url: URL of the source
  • auto_play: [ no | yes ] if the track starts when the page is loaded
  • show_artwork: [ no | yes ] if you want show artwork
  • show_comments: [ no | yes ] if you want show comments
  • color: the background color

Special font

Back to top

Select a special font of text

[special_font size="12" unit="px" ][/special_font]
  • unit: [em , px , pt , cm , in] unit
  • size: size of font
  • content inside the shortcode brackets: the content of the special font

Style text

Back to top

Add a css color style to text

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

Success box

Back to top

Show an example of success box alert

[success 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

Create content with tabs.

[tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"][tab id="tab1"]Your content 1[/tab][tab id="tab2"]Your content 2[/tab][/tabs]
  • tab*: category names (comma separated)

Insert a tick on the content

[x size="18" color="#23b10b" ]
  • size: size of tick
  • color: color of tick

Twitter

Back to top

Print a list of last tweets

[twitter username="" consumer_key="" consumer_secret="" access_token="" access_token_secret="" items="5"
class="last-tweets-widget" time="yes" animation_delay="0" animate="" ]
  • username: Twitter username
  • consumer key: field required by Twitter api
  • consumer secret: field required by Twitter api
  • access token: field required by Twitter api
  • access token secret: field required by Twitter api
  • items: number of items to show
  • class: container CSS class
  • time: show tweet time or not
  • animate: show type of animation
  • animation_delay: delay time before an animation starts

Vimeo Video

Back to top

Show a Vimeo Video

[vimeo video_id="3109777" width="640" height="360" ]
  • video_id: vimeo video id
  • placeholder: activate placeholder image
  • placeholder_img: url image for placeholder

Youtube Video

Back to top

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

Back to top

Print a post list blog

[blog_section nitems="-1" enable_slider="yes" enable_thumbnails="yes" enable_date="yes" enable_title="yes" enable_author="yes" enable_comments="yes" animation_delay="0" animate="" ]
  • number of items: set the number of elements to show
  • 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

Print a team box

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

Contact Form

Back to top

Show a contact form

[contact_form name="contact-form" ]

YIT Faq

Back to top

Show the frontend of the FAQ

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

Testimonial

Back to top

Show all posts in testimonial post types

[testimonial items="-1" animation_delay="0" cat="0" style="square" animate="" ]
  • items: number of items to show
  • cat: post categories to show
  • style: [ square / comic ] type of layout
  • animate: type of animation
  • animation delay: delay time before the animation starts

Testimonial Slider

Back to top

Show a slider with testimonials

[testimonial_slider items="-1" excerpt="32" speed="500" timeout="5000" cat="0" ]
  • items: number of items to show
  • excerpt: limited number of words to show in excerpt
  • height: height of the slider
  • speed: animation speed (milliseconds)
  • timeout: time (milliseconds) that has to pass before sliding to the next testimonial
  • pagination speed: time (milliseconds) that has to pass before moving to the next page
  • navigation: enable navigation or not
  • pagination: enable pagination or not
  • autoplay: play slider automatically
  • cat: post categories to show

Add to cart

Back to top

List all (or limited) product categories

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

Product Categories Slider

Back to top

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

Back to top

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

Back to top

List products in tabs

[products_tabs title_1="Man" per_page_1="10" title_2="Woman" per_page_2="10" category_1="man" show_1="all" orderby_1="rand" order_1="desc" category_2="woman" show_2="all" orderby_2="rand" order_2="desc"]
  • title: title of product tabs
  • category: show all or selected categories
  • per page: number of items per page
  • show: type of products (all/featured/on sale)
  • 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

Back to top

Show products in a slider

[products_slider per_page="8" category="vintage,woman" layout="default" product_type="all" orderby="rand" order="desc" autoplay="true" animation_delay="0"]
  • category: a comma separated list of categories
  • per page: number of items per page
  • 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

Back to top

Show a single product

[single_product product_id="0" last_element="no" animation_delay="0" animate="" ]
  • product_id: ID of the product
  • 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

Back to top

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