Avada Shortcode List

Below is a list of all the Avada shortcodes along with the different customization options for each one. The shortcode list below follows the same list you see in the visual editor. The values for shortcodes has to always go in-between the quotations ” “. For example, color=”green”





Alert Message Short CodeBack To Top

  • type = one of these values: general, error, success, notice, custom.
  • IMPORTANT: only the custom type can use the custom options.
  • accent_color = hex code #000000
  • background_color = hex code #000000
  • border_size = a pixel value, ex: 1px
  • icon = a font awesome icon value. ex: fa-glass
  • box_shadow = one of these values: yes, no
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Button Short CodeBack To Top

  • link = the link you want the button to go to, including http://
  • color = one of those values: custom, green, darkgreen, orange, pink, brown, lightgray, darkgray, blue, red, lightred. Choose “custom” for advanced options, leave blank for theme option values.
  • size = one of those values: small, medium, large, xlarge
  • type = one of those values: flat, 3d
  • shape = one of those values: square, pill, round
  • target = one of these values: _blank for new window, _self for same window
  • title = set a title attribute for the link the button consists of
  • gradient_colors = sets the top and bottom colors of the background gradient. hex code #000000, or rgba values like rgba(0,0,0,0.4) ex: #333333|#444444
  • gradient_hover_colors = sets the top and bottom hover colors of the background gradient. hex code #000000, or rgba values like rgba(0,0,0,0.4) ex: #333333|#444444
  • accent_color = sets the color of the button border, divider, text and icon. hex code #000000, or rgba values like rgba(0,0,0,0.4)
  • acccent_hover_color = sets the hover color of the button border, divider, text and icon. hex code #000000, or rgba values like rgba(0,0,0,0.4)
  • bevel_color = Custom setting only. Set the bevel color of 3D buttons. hex code #000000
  • border_width = Custom setting. In pixels (px), ex: 1px.
  • shadow = one of those values: yes, no
  • icon = a font awesome icon value. ex: fa-glass
  • icon_divider = one of these values: yes, no
  • icon_position = one of these values: left, right
  • modal = the unique name of the modal shortcode you already created that allows the button to trigger the modal
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Blog Short CodeBack To Top

  • number_posts = numerical value to show how many posts you want per page, example is 5. can also be -1 which means all posts will be displayed on one page
  • cat_slug = slug name of the category from which you want the posts to be displayed. Use a , for multiple categories
  • exclude_cats = slug name of the category you want to exclude. Use a , for multiple categories
  • title = one of these values: yes, no. This will show or hide the title
  • thumbnail = one of these values: yes, no. This will show or hide the image thumbnail
  • excerpt = one of these values: yes, no. This will show or hide the excerpt
  • excerpt_words = numerical value to show how many characters your excerpt will be
  • meta_all = one of these values: yes, no. This will show or hide all meta info
  • meta_author = one of these values: yes, no. This will show or hide the meta author
  • meta_categories = one of these values: yes, no. This will show or hide the meta categories
  • meta_comments = one of these values: yes, no. This will show or hide the meta comments
  • meta_date = one of these values: yes, no. This will show or hide the meta date
  • meta_link = one of these values: yes, no. This will show or hide the meta link
  • paging = one of these values: yes, no. This will show or hide pagination
  • scrolling = one of these values: pagination or infinite
  • strip_HTML = one of these values: yes, no. This will show or hide HTML in the excertps
  • blog_grid_columns = one of these values: 2, 3, 4. Controls the column width of blog grid layout
  • layout = one of these values: large, medium, large alternate, medium alternate, grid, timeline
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Checklist Short CodeBack To Top

  • icon = a font awesome icon value. ex: fa-glass
  • circle = one of these values: yes, no
  • size = one of these values: small, medium, large
  • iconcolor = hex code #000000
  • circlecolor = hex code #000000
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



  • picture_size = one of these values: fixed, auto
  • link = the link you want the image to go to, including http://
  • linktarget = one of these values: _blank for new window, _self for same window
  • image = the URL path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • alt = the text description of the image
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Column Short CodeBack To Top

  • last = one of these values: yes, no
  • If you want four columns you’d use four sets of [one_fourth] shortcodes.
  • Each set contains and open tag [one_fourth] and a closing tag [/one_fourth]. Your content goes between the open/close tag.
  • Important: last=”" always has to be set. For example, if you’re using one half + one half, the first one half is last=”no” and the second is last=”yes”.
  • Important: Column shortcodes are used in addition with the other shortcodes when you want to keep your content within a specfic column. You always need to use a full set, so if you are using 1/4 column, you need to use 1/4 + 1/4 + 1/4 + 1/4 to make a full set. Another example is using a 2/3 + 1/3
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Content Box Short CodeBack To Top

  • layout = one of these values: icon-with-title, icon-on-top, icon-on-side, icon-boxed
  • columns = one of these values: 1, 2, 3, 4
  • title = Your custom title text
  • backgroundcolor = this should be transparent for all layouts except for “icon-boxed”. hex code #000000 or leave blank for theme options
  • icon = a font awesome icon value. ex: fa-glass
  • iconcolor = hex code #000000 or leave blank for theme options
  • circlecolor = hex code #000000 or leave blank for theme options
  • circlebordercolor = hex code #000000 or leave blank for theme options
  • iconflip = one of these values: none, horizontal, vertical
  • iconrotate = one of these values: none, 90, 180, 270
  • iconspin = one of these values: yes, no
  • image = this is for custom images. Make sure there is no “icon=” value. This is the URL path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • image_width = this is for custom icon images, you can set a custom width in pixels but without the px. Ex: 35
  • image_height = this is for custom icon images, you can set a custom height in pixels but without the px. Ex: 35
  • link = the link you want the “Learn More” text to go to, including http://
  • linktarget = one of these values: _blank for new window, _self for same window
  • linktext = Your custom link text (like “Learn More”)
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Counter Circle Short CodeBack To Top

  • filledcolor and unfilled color = hex code #000000 or leave blank for theme options
  • size = the overall diameter of the circle in pixels. Ex: 220
  • scales = one of these values, yes, no
  • countdown = one of these values, yes, no
  • speed = the time it takes for the animation to complete. Ex: 1500
  • value = the number you want the animation to fill up to
  • use a % (75%), font awesome icon, numerical scale value (7/10) or text title for the description inside the circle
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Counter Box Short CodeBack To Top

  • columns = one of these values: 1, 2, 3, 4
  • value = the number you want the animation to fill up to
  • unit = insert a unit for the counter, ex: %
  • unit_pos = one of these values: prefix, suffix
  • icon = a font awesome icon value. ex: fa-glass
  • border = one of these values: yes, no
  • color = hex code #000000 or leave blank for theme options
  • direction = one of these values: up, down
  • insert your text in-between the open/close tags
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Dropcap Short CodeBack To Top

  • color = hex code #000000 or leave blank for theme options
  • boxed = one of these values: yes, no
  • boxed_radius = a pixel value, ex: 4px
  • simply insert the letter or word you want to be the dropcap
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Flip Box Short CodeBack To Top

  • columns = one of these values: 1, 2, 3, 4
  • title_front = your custom title text for the front side
  • title_back = your custom title text for the back side
  • text_front = your custom body text for the front side
  • border_color = hex code #000000 or leave blank for theme options
  • border_radius = a pixel value, ex: 4px
  • border_size = In pixels (px), ex: 1px.
  • background_color_front = hex code #000000 or leave blank for theme options
  • title_front_color = hex code #000000 or leave blank for theme options
  • text_front_color = hex code #000000 or leave blank for theme options
  • background_color_back = hex code #000000 or leave blank for theme options
  • title_back_color = hex code #000000 or leave blank for theme options
  • text_back_color = hex code #000000 or leave blank for theme options
  • icon = a font awesome icon value. ex: fa-glass
  • icon_color = hex code #000000 or leave blank for theme options
  • circle = one of these values: yes, no
  • circlecolor = hex code #000000 or leave blank for theme options
  • circlebordercolor = hex code #000000 or leave blank for theme options
  • iconflip = one of these values: none, horizontal, vertical
  • iconrotate = one of these values: none, 90, 180, 270
  • iconspin = one of these values: yes, no
  • image = this is for custom images. Make sure there is no “icon=” value. This is the URL path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • image_width = this is for custom icon images, you can set a custom width in pixels but without the px. Ex: 35
  • image_height = this is for custom icon images, you can set a custom height in pixels but without the px. Ex: 35
  • animation_type = this is only for the icon in the box. one of these values: bounce, fade, flash, shake, slide
  • animation_direction = this is only for the icon in the box. one of these values: down, right, left, up
  • animation_speed = this is only for the icon in the box. numerical value from .1 (slowest) to 1 (fastest)
  • you can put text or buttons in-between the opening and closing flip box parameter
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Full Width Short CodeBack To Top

  • menu_anchor = the unique name you give the corresponding menu item. See the One Page section of our docs.
  • backgroundcolor = hex code #000000 or leave blank for theme options
  • backgroundimage = the path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • backgroundrepeat = one of these values: no-repeat, repeat-y, repeat-x
  • backgroundposition = a pixel amount, percetage or top, center, bottom, left, right. Something like “top left” or “100% 50px”
  • backgroundattachment = one of these values: fixed, scroll
  • bordersize = a pixel value like 5px
  • bordercolor = hex code #000000 or leave blank for theme options
  • borderstyle = one of these values: solid, dashed, dotted
  • paddingtop = a pixel value like 5px
  • paddingbottom = a pixel value like 5px
  • Important: It can be used with any page template, but if you want your background 100% of browser window, then you need to use it with the 100% Width page template.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Fusion Slider Short CodeBack To Top

  • name = the unique name you give the slider
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Font Awesome Icon Short CodeBack To Top

  • icon = a font awesome icon value. ex: fa-glass
  • circle = one of these values: yes, no
  • size = one of these values: large, medium, small
  • iconcolor = hex code #000000 or leave blank for theme options
  • circlecolor = hex code #000000 or leave blank for theme options
  • circlebordercolor = hex code #000000 or leave blank for theme options
  • iconflip = one of these values: none, horizontal, vertical
  • iconrotate = one of these values: none, 90, 180, 270
  • iconspin = one of these values: yes, no
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Google Map Short CodeBack To Top

  • address = your physical address. to have multiple map markers, separate two addresses with a vertical line |. Ex: 579 Allen Road Basking Ridge, NJ 07920 | Mount Arlington, NJ 07856
  • type = one of these values: roadmap, terrain, hybrid, sattellite
  • map_style = one of these values: default, theme, custom. Choose custom to use advanced color options.
  • overlay_color = Custom styling setting only. hex code #000000
  • infobox = Custom styling setting only. one of these values: default, custom. Choose custom to use advanced options.
  • infobox_background_color = Custom styling setting only. hex code #000000
  • infobox_text_colors = Custom styling setting only. hex code #000000
  • infobox_content = Custom styling setting only. Type in custom info box content to replace address string. For multiple addresses, separate info box contents by using the | symbol. ex: InfoBox 1|InfoBox 2|InfoBox 3
  • icon = Custom styling setting only. Use full image urls for custom marker icons or input “theme” for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all. ex: Icon 1|Icon 2|Icon 3
  • width = a pixel (px) or percentage (%) value
  • height = a pixel (px) or percentage (%) value
  • zoom = a number that represents the map zoom level
  • scrollwheel = one of these values: yes, no. This will turn the mouse scrolling on or off
  • scale = one of these values: yes, no. This will show or hide the scale graphic
  • zoom_pancontrol = one of these values: yes, no. This will show or hide the zoom controls
  • popup = one of these values: yes, no. This will show or hide the map popup graphic. If set to “no”, then the popup will show on click.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Highlight Short CodeBack To Top

  • color = hex code #000000 or leave blank for theme options
  • rounded = one of these values: yes, no. This will show rounded corners on the highlight box
  • insert the text you want to be highlighted in-between the opening and closing tags where the “…” shows
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Image Frame Short CodeBack To Top

  • lightbox = one of these values: yes, no
  • style_type = one of these values: none, border, glow, dropshadow, bottomshadow
  • bordercolor = hex code #000000
  • bordersize = a pixel value like 5px
  • stylecolor = hex code #000000, this value only controls the glow and dropshadow style color
  • align = one of these values; left, right. This will align the image to the left or right to allow your text to wrap around it.
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • src = the path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • alt = the text description of the image
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Image Carousel Short CodeBack To Top

  • picture_size = one of these values: fixed, auto
  • lightbox = one of these values: yes or no
  • link = the link you want the image to go to, including http://. If lightbox option is set to yes, you must add the full image link for it to show in the lightbox.
  • linktarget = one of these values: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • image = the URL path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • You can combine them with column shortcodes to specify the size
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Layer Slider Short CodeBack To Top

  • id = the individual id of the layer slider you created
  • Each layer slider you make gets it’s own unique ID for this shortcode
  • Sliders can be assigned via page/post options; or via this shortcode
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



You can also use text to trigger a lightbox (you can also use a button shortcode instead of the text)
  • title = the text description that will show up in the lightbox
  • href = the link of the image, video or website you want to open in the lightbox
  • rel = needs to stay as “prettyPhoto” for the lightbox to work
  • alt = the text title that will show up in the lightbox
  • src = the small image that will trigger the lightbox
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



  • name = the unique name you give the corresponding menu item. See the One Page section of our docs.



  • name = the unique name you give the modal to trigger it via button, text link or image
  • title = the heading title text you want to display
  • size = one of these values: large, small
  • background = hex code #000000 or leave blank for theme options
  • border_color = hex code #000000 or leave blank for theme options
  • show_footer = one of these values: yes, no
  • When you create a modal shortcode, you have to give it a unique name in the name=”" field. This unique name has to be inserted in a button shortcode or modal text link shortcode on the same page for it to work. The modal content does not show up on the page until it is triggered by the button or modal text link. First you create your modal and give it a unique name, then you add the content inside of the modal. Once it is complete, you insert the unique name in the modal=”" field for the button shortcode, or the name=”" field for the modal text link shortcode. For Example: create a modal with a name=”myModal”. To trigger that modal with a button, you must insert modal=”myModal” inside the button shortcode, or name=”myModal” inside the modal link shortcode.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



  • name = the unique name of the modal shortcode you already created that allows the text link to trigger the modal
  • insert the text that triggers the modal popup box in-between the open/close tags where it says “Text Link Here”
  • Link can also be HTML markup for an image
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Post Short CodeBack To Top

  • layout = one of these values: posts (pulls blog posts), attachments (pulls images attached to the page and shows thumbnail navigation), posts-with-excerpt (pulls blog posts with excerpts)
  • excerpt = numerical value, the number of words you want to show in the excerpt, only use with the “posts-with-excerpt” layout
  • category = the slug of the category you want to display
  • limit = number of slides, a number
  • id = the id of the page or post
  • lightbox = one of these values: yes or no (only works with attachments layout)
  • please note: attachment layout will only pull images attached to the page or images from a post. You can use a page or post id as well
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Popover Short CodeBack To Top

  • title = the title text that shows in the popup box
  • title_bg_color = hex code #000000 or leave blank for theme options
  • content = the text that shows in the popup box
  • content_bg_color = hex code #000000 or leave blank for theme options
  • bordercolor = hex code #000000 or leave blank for theme options
  • textcolor = hex code #000000 or leave blank for theme options
  • trigger = one of these values: click, hover
  • placement = one of these values: default, top, left, right, bottom
  • insert the text that triggers the popup in-between the open/close tags where it says “Trigger Text”
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Progress Bar Short CodeBack To Top

  • percentage = the number you want the animation to fill up to, ex: 60
  • unit = the type of unit you want to display, ex: %
  • filledcolor = hex code e.g #000 for background color of filled area in progress bar
  • unfilledcolor = hex code e.g #000 for background color of unfilled area in progress bar
  • striped = one of these values: yes, no
  • animated_stripes = one of these values: yes, no
  • textcolor = hex code e.g #000 for background color of unfilled area in progress bar
  • insert your text in-between the open/close tags where it says “Your title Here”
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Person Short CodeBack To Top

  • name = your custom text
  • title = your custom text
  • picture = the path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • pic_link = the URL the picture will link to, ex: http://example.com.
  • pic_style = one of these values: none, border, glow, dropshadow, bottomshadow
  • pic_style_color = hex code #000000, this value only controls the glow and dropshadow style color
  • pic_bordersize = In pixels (px), ex: 1px. Leave blank for theme option selection./li>
  • pic_bordercolor = hex code #000000 or leave blank for theme options
  • social_icon_boxed = one of these values, yes, no
  • social_icon_boxed_radius = a pixel value, ex: 4px
  • social_icon_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • social_icon_box_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • social_icon_tooltip = one of these values: left, right, top, bottom
  • all the social links = add your custom link to your profiles including http://
  • show_custom = one of these values: yes, no. Will display your custom social icon from theme options.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Pricing Table Short CodeBack To Top

  • type = one of these values: 1, 2
  • backgroundcolor = hex code #000000 or rgba values like rgba(0,0,0,0.4)
  • bordercolor = hex code #000000 or rgba values like rgba(0,0,0,0.4)
  • dividercolor = hex code #000000 or rgba values like rgba(0,0,0,0.4)
  • title = your custom column title text
  • standout = one of these values: yes, no. Will allow the column to standout as featured.
  • currency = your currency, e.g. $, €
  • currency_position = one of these values: left, right
  • price = number like 29.99
  • time = text like monthly, yearly, daily or any other text
  • the button shortcode works like the regular button shortcode
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Recent Work Short CodeBack To Top

  • layout = one of these values: grid, grid-with-excerpts, carousel
  • picture_size = one of these values: fixed, auto
  • filters = one of these values: yes, no. This will show or hide the filters
  • columns = a number, like 4
  • cat_slug = the slug of the category you want to display
  • number_posts= a number, like 8
  • excerpt_length = a number, like 15
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Recent Posts Short CodeBack To Top

  • layout = one of these values: thumbnails-on-side, default, date-on-side
  • columns = a number, like 4
  • number_posts= a number, like 8
  • cat_slug = the slug of the category you want to display
  • exclude_cats = the slug of the category you want to exclude
  • thumbnail = one of these values: yes, no. This will show or hide the image thumbnail
  • title = one of these values: yes, no. This will show or hide the title
  • meta = one of these values: yes, no. This will show or hide the meta data
  • excerpt = one of these values: yes, no. This will show or hide the excerpt
  • excerpt_words = a number, like 15
  • strip_html = one of these values: yes, no. True will show or hide HTML content in the excerpt
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Revolution Slider Short CodeBack To Top

  • insert the unique slider name directly after rev_slider in the above shortcode
  • Each revolution slider you make gets it’s own unique name for this shortcode
  • Sliders can be assigned via page/post options; or via this shortcode
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Section Separator Short CodeBack To Top

  • this shortcode should be used in conjunction with the full_width shortcode
  • divider_candy = Controls if the arrow points up or down. One of these values: top, bottom
  • icon = the name of the font awesome icon, leave blank for no icon
  • icon_color = controls the icon color, hex code #000000
  • bordersize = controls the border size. In pixels (px), ex: 1px.
  • bordercolor = controls the border color, hex code #000000. This should match the color value of the fullwidth section you are using it with.
  • backgroundcolor = controls the background color, hex code #000000. This should match the color value of the fullwidth section you are using it with.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Separator Short CodeBack To Top

  • style_type = one of these values: none, single border solid, double border solid, single border dashed, double border dashed, single border dotted, double border dotted, shadow
  • top_margin = a number – if positive (like 40) it will increase spacing, if negative (like -40) it will decrease spacing
  • bottom_margin = a number – if positive (like 40) it will increase spacing, if negative (like -40) it will decrease spacing
  • sep_color = hex code #000000 or rgba values like rgba(0,0,0,0.4)
  • icon = a font awesome icon value. ex: fa-glass
  • width = In pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Sharing Box Short CodeBack To Top

  • tagline = your custom text
  • tagline_color = hex code #000000
  • title = the custom title of the blog post you want to share
  • link = the actual link that will be shared on that platform, including http://
  • description = the custom description you want to share on those platforms
  • pinterest_image = the URL path of the image you want to share on Pinterest, starting with http:// and usually ending on .jpg, .png or .gif
  • icons_boxed = one of these values, yes, no
  • icons_boxed_radius = a pixel value, ex: 4px
  • icon_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • box_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • tooltip_placement = one of these values: left, right, top, bottom
  • backgroundcolor = hex code #000000 or rgba values like rgba(0,0,0,0.4)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Slider Short CodeBack To Top

  • width = a pixel or percentage value, like 100% or 500px
  • height = a pixel or percentage value, like 100% or 500px
  • type = “video” if video, nothing if image
  • link = the link you want your image to link to
  • linktarget = one of these values: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • for regular image slides, you need to insert your image URL in the “image link here” section between the opening and closing tags
  • vimeo and youtube shortcode works like the regular vimeo shortcode
  • lightbox = one of these values: yes or no
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Soundcloud Short CodeBack To Top

  • url = the URL of the soundcloud track you want to embed
  • comments = one of these values: yes, no
  • auto_play = one of these values: yes, no
  • color = a hexa color without the # hashtag (e.g. ff9988, not #ff9988)
  • width = a pixel or percentage value, like 100% or 500px
  • height = a pixel or percentage value, like 100% or 500px
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Social Links Short CodeBack To Top

  • icons_boxed = one of these values, yes, no
  • icons_boxed_radius = a pixel value, ex: 4px
  • icon_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • box_colors = hex code #000000. Use one value for all, or unique colors for each with |. ex: #000|#fff
  • tooltip_placement = one of these values: left, right, top, bottom
  • all the social links = add your custom link to your profiles including http://
  • show_custom = one of these values: yes, no. Will display your custom social icon from theme options.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Tab Short CodeBack To Top

  • layout = one of these values: horizontal, vertical
  • justified = one of these values: yes, no
  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • inactivecolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • fusion_tab title = the title of the tabbed section
  • you can put text, lists, short codes and regular html in the tab content area. jQuery driven shortcodes might cause problems and won’t work
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Toggle Short CodeBack To Top

  • title = the heading/title of the individual accordion item
  • open = one of these values: yes, no. It determines which accordion-item should be open by default on page load
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Testimonial Short CodeBack To Top

  • backgroundcolor = hex code #000000, or rgba values like rgba(0,0,0,0.4) or “transparent”
  • textcolor = hex code #000000, or rgba values like rgba(0,0,0,0.4) or “transparent”
  • name = the name of the person who gave the testimonial
  • avatar = one of these values: male, female, none, image. If image is used, you will also have image=”" option
  • image = 40px max width. The URL path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif
  • company = the company name of the person who gave the testimonial
  • link = the link of the Company, including http://
  • linktarget = one of these values: _blank for new window, _self for same window
  • insert the testimonial text where it says “Testimonial Goes Here
  • you can add as many testimonies as you like by copying and pasting the testimonial portion of the shortcode
  • if you do not want a slider, then make sure to only have one testimonial in-between the [testimonials] [/testimonials] tags
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Title Short CodeBack To Top

  • size = one of these values: 1, 2, 3, 4, 5, 6. These numbers correspond with H1-H6 heading sizes
  • content_align = one of these values: left, right
  • style_type = one of these values: single, double, underlined. Combined with: solid, dashed, dotted
  • size = one of these values: 1, 2, 3, 4, 5, 6. These numbers correspond with H1-H6 heading sizes
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Tagline Box Short CodeBack To Top

  • backgroundcolor | bordercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • shadow = one of these values: yes, no
  • shadowopacity = sets the level of opacity from 0.1 up to 1. 1 equals 100%
  • border = a pixel value, like 1px
  • bordercolor = hex code #000000, or rgba values like rgba(0,0,0,0.4) or “transparent”
  • highlightposition = one of these values: left, right, top, bottom
  • content_alignment = one of these values: left, center, right
  • link = the link you want the button to go to, including http://
  • linktarget = one of these values: _blank for new window, _self for same window
  • modal = the unique name of the modal shortcode you already created that allows the button to trigger the modal
  • button_size = one of those values: small, medium, large, xlarge
  • button_shape = one of those values: square, pill, round
  • button_type = one of those values: flat, 3d
  • buttoncolor = one of those values: green, darkgreen, orange, pink, brown, lightgray, darkgray, blue, red, lightred. Leave it blank for theme option selections.
  • button, title, description = your custom text
  • animation_type = one of these values: bounce, fade, flash, shake, slide
  • animation_direction = one of these values: down, right, left, up
  • animation_speed = numerical value from .1 (slowest) to 1 (fastest)
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Tooltip Short CodeBack To Top

  • title = your custom text that will show in the text popup
  • placement = one of these values: default, top, left, right, bottom
  • trigger = one of these values: default, click, hover
  • the text you want to trigger the tooltip, needs to be in-between the opening and closing tags where it says “Hover over this text for Tooltip”
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



Table Short CodeBack To Top

  • class = one of these values: table-1, table-2. Both offer a slightly different design style
  • simply fill your data into the rows and columns as the above example shows



Vimeo Short CodeBack To Top

  • id = the id of the video you want to add, you get this id number from vimeo, example: the Video ID for https://vimeo.com/75230326 is 75230326
  • width = a pixel or percentage value, like 100% or 500
  • height = a pixel or percentage value, like 100% or 500
  • autoplay = one of these values: yes or no
  • api_params = an additonal vimeo video paramter option. Vimeo offers these parameters here.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.



Youtube Short CodeBack To Top

  • id = the id of the video you want to add, you get this id number from youtube, example: the Video ID for http://www.youtube.com/LOfeCR7KqUs is LOfeCR7KqUs
  • width = a pixel or percentage value, like 100% or 500
  • height = a pixel or percentage value, like 100% or 500
  • autoplay = one of these values: yes or no
  • api_params = an additonal youtube video paramter option. Youtube offers these parameters here.
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.



WooCommerce Featured Slider Short CodeBack To Top

  • this shortcode automatically pulls your featured products, the ones that are “starred” in your products list
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



WooCommerce Product Carousel Short CodeBack To Top

  • picture_size = one of these values: fixed, auto
  • cat_slug = the id of the category from which you want the posts to be displayed
  • number_posts = a numerical value, like 5 to show the number of posts
  • show_cats = one of these values: yes, no. This will show or hide the category buttons
  • show_price = one of these values: yes, no. This will show or hide the rollover price
  • show_buttons = one of these values: yes, no. This will show or hide the rollover buttons
  • class = add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id = add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.



WooCommerce Default Short CodeBack To Top

  • There are several short codes that are bundled with WooCommerce, please see this link for info on each.
73 Likes
Proudly Serving Over 90000 Satisfied Users!