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
  • 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)
  • You can insert buttons or icon shortcodes into the message boxes.
  • Can be inserted in any column width to control the size



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, large
  • target = one of these values: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • 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
  • border_width = Custom setting. In pixels (px), ex: 1px.
  • border_color = Custom setting that sets the border color. hex code #000000, or rgba values like rgba(0,0,0,0.4)
  • text_color = Custom setting that sets the text color. hex code #000000, or rgba values like rgba(0,0,0,0.4)
  • shadow = one of those 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)



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 = the id of the category from which you want the posts to be displayed. Use a , for multiple categories
  • exclude_cats = the id 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



Checklist Short CodeBack To Top

  • icon = any of the font awesome icon values excluding 4.0 and DO NOT USE THE “fa-” portion only the icon name
  • iconcolor = hex code #000000
  • circle = one of these values: yes, no



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



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



Content Box Short CodeBack To Top

  • layout = one of these values: icon-with-title, icon-on-top, icon-on-side, icon-boxed
  • iconcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlecolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlebordercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • backgroundcolor = this should be transparent for all layouts except for “icon-boxed”
  • title = Your custom title text
  • icon = name of font awesome icon (tablet), or you can insert an image URL of a custom icon you uploaded. If you use this make sure there is no “image=” value
  • 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, _parent for parent frame, _top for full body
  • 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)



Counter Circle Short CodeBack To Top

  • filledcolor and unfilled color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • size = the overall diameter of the circle in pixels. Ex: 220
  • 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



Counter Box Short CodeBack To Top

  • value = the number you want the animation to fill up to
  • unit = insert a unit for the counter, ex: %
  • insert your text in-between the open/close tags



Dropcap Short CodeBack To Top

  • simply insert the letter or word you want to be the dropcap



Full Width Short CodeBack To Top

  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • 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 color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • 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.



Flexslider Short CodeBack To Top

  • layout = one of these values: posts (pulls blog posts), attachments (pulls images attached to the page), 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 you want to display
  • 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



Font Awesome Icon Short CodeBack To Top

  • icon = one of these font awesome icons, without the word “icon”, so it would look like icon=”smile”, not icon=”icon-smile”
  • circle = one of these values: yes, no
  • size = one of these values: large, medium, small
  • iconcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlecolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlebordercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • 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)



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



Highlight Short CodeBack To Top

  • color = hex code #000000, or color name black
  • insert the text you want to be highlighted in-between the opening and closing tags where the “…” shows



Image Frame Short CodeBack To Top

  • lightbox = one of these values: yes, no
  • style = 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)
  • alt = the text description of the image
  • src = the path of the image you want to make appear, starting with http:// and usually ending on .jpg, .png or .gif



Image Carousel Short CodeBack To Top

  • 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



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



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



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



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
  • insert your text in-between the open/close tags where it says “Your title Here”



Person Short CodeBack To Top

  • name = 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
  • title = your custom text
  • facebook, twitter, linkedin, dribbble = The links to the social profiles of the team member, including http://
  • linktarget = one of these values: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • can be inserted in any column width to control the size



Pricing Table Short CodeBack To Top

  • type = one of these values: 1, 2
  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • bordercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • dividercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • title = your custom column title text
  • currency = your currency, e.g. $, €
  • price = number like 29.99
  • time = text like monthly, yearly, daily or any other text
  • the button shortcode works like the regular button shortcode



Recent Work Short CodeBack To Top

  • layout = one of these values: grid, grid-with-excerpts, carousel
  • 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_words = 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)



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)



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



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.



Separator Short CodeBack To Top

  • style = one of these values: none, shadow, double, single, dashed, dotted or leave empty for no style
  • top = a number – if positive (like 40) it will increase spacing, if negative (like -40) it will decrease spacing
  • bottom = a number – if positive (like 40) it will increase spacing, if negative (like -40) it will decrease spacing



Sharing Box Short CodeBack To Top

  • tagline = your custom text
  • 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
  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”



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



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



Social Links Short CodeBack To Top

  • colorscheme = one of these values: dark, light
  • linktarget = one of these values: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • all the social links = add your custom link to your profiles including http://



Tab Short CodeBack To Top

  • layout = one of these values: horizontal, vertical
  • 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



Toggle & Accordion 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
  • Important: If you wrap the toggles in the accordian tag, then only one section will open at a time. If you do not use the accordian tag, then multiple sections will open at a time.



Testimonial Short CodeBack To Top

  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • textcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • name = the name of the person who gave the testimonial
  • gender = one of these values: male, female. This will show a male or female icon
  • 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, _parent for parent frame, _top for full body
  • 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 tyo only have one testimonial in-between the [testimonials] [/testimonials] tags



Title Short CodeBack To Top

  • size = one of these values: 1, 2, 3, 4, 5, 6. These numbers correspond with H1-H6 heading sizes



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 color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • highlightposition = one of these values: left, right, top, bottom
  • 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, _parent for parent frame, _top for full body
  • buttoncolor = one of those values: green, darkgreen, orange, pink, brown, lightgray, darkgray, blue, red, lightred
  • buttoncolor = or leave it blank and the values you have entered in theme options will take over
  • 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)



Tooltip Short CodeBack To Top

  • title = your custom text that will show in the text popup
  • 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”



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.



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.



WooCommerce Featured Slider Short CodeBack To Top

  • this shortcode automatically pulls your featured products, the ones that are “starred” in your products list



WooCommerce Product Carousel Short CodeBack To Top

  • 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



WooCommerce Default Short CodeBack To Top

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