Fusion Builder Elements List

07/20/2017
IMPORTANT NOTE – This Fusion Builder Elements list has been updated for version 5.0.

Below is a complete list of all elements included in the Fusion Builder, as well as the available parameters for each one. To find what your looking for easily, we’ve arranged the elements in an alphabetically ordered table. Just click the element you’d like to view and you’ll be automatically redirected to the specific element’s section.

How To Customize Elements Manually

If you’d like to customize elements manually in the Default Editor, then you’ll need to do it in a specific way. First, locate the snippet of the element you’d like to edit. You’ll find what each element’s snippet looks like in their specific sections below. Then, you have to insert the value you’d like to use between the parameters’ quotation marks. For example, color=”green”, with color=”” being the parameter, and green being the value.

With most parameters, you can leave it blank to apply the setting you’ve set in the Fusion Theme Options. If the default option is available, you can enter that instead.

Fusion Builder Elements

Below is an alphabetically ordered table of our Fusion Builder elements. Simply click the element you’d like to view to be automatically directed to its corresponding section. You’ll find everything you need to know about an element in its corresponding section such as a short description, a link to a live sample, its code snippet, and all its available parameters.

Woo ShortcodesYoutube

Alert Blog Button Checklist Code Block Columns Container
Content Boxes Countdown Counter Boxes Counter Circles Dropcap Events FAQ
Flip Boxes Font Awesome Icon Fusion Slider Gallery Google Map Highlight Image Carousel
Image Frame Layer Slider Lightbox Menu Anchor Modal Modal Text Link NextPage
One Page Text Link Person Popover Portfolio Post Slider Pricing Table Progress Bar
Recent Posts Revolution Slider Section Separator Separator Sharing Box Slider Social Links
Soundcloud Table Tabs Tagline Box Testimonials Text Block Title
Toggles Tooltip User Login User Lost Password User Register Vimeo Widget Area
Woo Carousel Woo Featured

Alert ElementBack To Top

The Alert element lets you display important information, alerts or messages to your viewers. These alerts can be easily dismissed, if the viewer chooses to. View its parameters below.

Click here to see the Alert Element in action!

Available Element Parameters


  • type – Choose from general, error, success, notice, or custom. Sets the alert type.
  • accent_color – Accepts a hexcode ( #000000 ). Sets the border, text and icon color.
  • background_color – Accept a hexcode ( #000000 ). Sets the background color.
  • border_size – Accepts a pixel value. For example, 1px. Sets border width.
  • icon – A font awesome icon value. For example, fa-glass.
  • box_shadow – Choose from yes, or no. This will show or hide a box shadow below the alert box.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the content you’d like to display between the [fusion_alert][/fusion_alert] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Blog ElementBack To Top

The Blog element lets you display specific blog posts in different layouts and in any section of your page. You can also customize its styling as you’d like. View its parameters below.

Click here to see the Blog Element in action!

Available Element Parameters


  • layout – Choose from large, medium, large alternate, medium alternate, grid, timeline, or masonry. Sets the layout.
  • blog_grid_columns – Choose from 2, 3, 4, 5, or 6. Sets the number of grid columns.
  • blog_grid_columns_spacing – Accepts a numerical value. For example, 30. Sets the column spacing between blog grid posts.
  • number_posts – Choose from 1 – 25. Set to -1 to display all posts. Sets how many blog posts are displayed.
  • offset – Accepts a numerical value. For example, 1. Sets how many posts to skip.
  • pull_by – Define how posts should be loaded. Accepts: category or tag as the value here.
  • cat_slug – The slug name of the blog post category to display. Use a comma for multiple categories.
  • exclude_cats – The slug name of the blog post category to exclude. Use a comma for multiple categories.
  • tag_slug – The slug name of the blog post tag to display. Use a comma for multiple tags.
  • exclude_tags – The slug name of the blog post tag to exclude. Use a comma for multiple tags.
  • orderby – Choose from date, title, name, author, comment_count, modified, or rand. Sets the posts’ order.
  • order – Choose between DESC or ASC. Sets the blog posts’ sorting order.
  • thumbnail – Choose from yes, or no. Show or hide the featured image.
  • title – Choose from yes, or no. Show or hide the title.
  • title_link – Choose from yes, or no. Link the title to the single post page.
  • excerpt – Choose from yes, or no. Select yes to show excerpt, or choose no to show full content.
  • excerpt_length – Accepts a numerical value. For example, 15. Sets how many characters/words to display on excerpt.
  • strip_html – Choose from yes, or no. Show or hide HTML in excerpts.
  • meta_all – Choose from yes, or no. Show or hide all meta information.
  • meta_author – Choose from yes, or no. Show or hide author.
  • meta_categories – Choose from yes, or no. Show or hide categories.
  • meta_comments – Choose from yes, or no. Show or hide comments.
  • meta_date – Choose from yes, or no. Show or hide date.
  • meta_link – Choose from yes, or no. Show or hide ‘Read More’ link.
  • meta_tags – Choose from yes, or no. Show or hide tags.
  • paging – Choose from yes, or no. Show or hide posts pagination.
  • scrolling – Choose from pagination, infinite, or load_more_button. Sets the type of pagination.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Button ElementBack To Top

The Button element lets you display a button that opens links or modals. You can extensively customize the button’s styling to your liking. View its parameters below.

Click here to see the Button Element in action!

Available Element Parameters


  • link – The URL you want the button to link to. For example, http://www.example.com/.
  • title – Set a title attribute for the button link. For example, Home.
  • target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • link_attributes – This allows you to add additional attributes to the anchor tag. e.g. rel=’nofollow’
  • alignment – Choose from left, center, or right. Sets the button’s alignment.
  • modal – The unique class name of the Modal Element the button will trigger. Learn more here.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • color – Choose from default, custom, green, darkgreen, orange, blue, red, pink, darkgray, or lightgray. You can also use your custom color schemes. Sets the button’s color theme.
  • button_gradient_top_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background’s top gradient color.
  • button_gradient_bottom_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background’s bottom gradient color. Leave blank for solid color.
  • button_gradient_top_color_hover – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background’s top gradient color when hovered.
  • button_gradient_bottom_color_hover – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background’s bottom gradient color when hovered.
  • accent_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button border, divider, text and icon color.
  • acccent_hover_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button border, divider, text and icon hover color.
  • type – Choose from default, flat, or 3d. Sets the button’s type.
  • bevel_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button’s bevel color when set to 3D.
  • border_width – Accepts pixel values, for example, 1px. Sets the border width.
  • size – Choose from default, small, medium, large, or xlarge. Sets the button’s size.
  • stretch – Choose from default, yes, or no. Enables or disables the button spanning the full width of it’s container.
  • shape – Choose from default, square, pill, or round. Sets the button’s shape.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_position – Choose from left, or right. Sets the icon’s position on the button.
  • icon_divider – Choose from yes, or no. Show or hide a divider between icon and text.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the button text between the [fusion_button][/fusion_button] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Checklist ElementBack To Top

The Checklist element lets you display a simple checklist on your page. You can select custom icons and their styling. View its parameters below.

Click here to see the Checklist Element in action!

The Checklist Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


  • icon – A font awesome icon value. For example, fa-glass.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color for all list items.
  • circle – Choose from default, yes, or no. Sets if the icon is circular.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color for all list items.
  • size – Accepts a pixel value. For example, 5px. Sets the item’s size
  • custom content – Insert the list content you’d like to display between the [fusion_checklist][/fusion_checklist] tags.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Code Block ElementBack To Top

The Code Block element lets you add HTML or CSS code to the page without WordPress changing the format. View its parameters below.

Click here to see the Code Block Element in action!

Available Element Parameters


  • custom content – Enter your custom code between the [fusion_code][/fusion_code] tags.

Column ElementBack To Top

The Column element lets you add 1/1 to 1/6 columns on your page so you can organize your content better. View its parameters below.

Click here to see the Column Element in action!

Available Element Parameters


  • type – Choose from 1_6, 1_5, 1_4, 1_3, 2_5, 1_2, 3_5, 2_3, 3_4, 4_5, 5_6, or 4_4. Sets the size of the column.
  • background_position – Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom.
  • background_color – Accepts a hexcode ( #000000 ). Sets the background color of the column.
  • border_size – Accepts a pixel value. For example, 5px. Sets the border’s size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the column border’s color.
  • border_style – Choose from solid, dashed, or dotted. Sets the border style.
  • border_position – Choose from all, top, right, bottom or left. Sets which side of the column will have a border.
  • spacing – Accepts a percentage or numerical value. For example, 20 or 14%. Sets the margin added to the column.
  • background_image – The URL path of your background image. For example, http://www.sample.com/image.jpg.
  • background_repeat – Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • padding – Accepts a pixel value. For example, 5px. Sets the column padding.
  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • center_content – Choose from yes, or no. This will enable or disable center alignment for column content. The container the column is in must have equal heights enabled.
  • min_height – Choose from yes, or no. Disable or enable equal heights on the column if it’s inside a container that has equal heights enabled.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
  • link – The URL path you want the column to direct to when clicked. For example, http://www.example.com/.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Container ElementBack To Top

The Container Element lets you add a fully customizable container on the page. Containers are required to add columns and elements. View its parameters below.

Click here to see the Container Element in action!

Available Element Parameters


  • hundred_percent – Choose from yes, or no. Sets if the interior content is 100% width or contained to the site width setting. Select yes for full width, and no for site width.
  • equal_height_columns – Choose fromyes, or no. Sets all the column elements inside the container to be equal heights.
  • menu_anchor – The unique name you give a menu item. Learn more here.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • background_color – Accepts a hexcode ( #000000 ). Sets the icon’s BG color.
  • background_image – The URL path of the background image you’d like to display. For example, http://www.sample.com/image.jpg
  • background_position – Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background’s position.
  • background_repeat – Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • fade – Choose from yes, or no. Sets the image to fade and blur on scroll. Works for images only.
  • background_parallax – Choose from none, fixed, up, down, left, or right. Sets how the background image scrolls and responds.
  • enable_mobile – Choose from yes or no. Enable or disable parallax on mobile. Please be aware this may cause slowdowns.
  • parallax_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • video_mp4 – The URL path of your MP4 video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
  • video_url – The URL path of a YouTube or Vimeo video.
  • video_aspect_ratio – Accepts a numerical value. For example, 16:9, 4:3, or 16:10. Sets the video’s aspect ratio.
  • video_loop – Choose from yes, or no. Enable or disable video loop.
  • video_mute – Choose from yes, or no. Mute or unmute audio.
  • overlay_color – Accepts a hexcode ( #000000 ). Sets the video’s overlay color.
  • overlay_opacity – Can be a numerical value from 0.1 to 1. Sets the color’s opacity level. 1 is equivalent to 100% opacity.
  • video_preview_image – The URL path of the preview image you’d like to display. For example, http://www.sample.com/image.jpg
  • border_size – Accepts a pixel value. For example, 5px. Sets the border’s size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • border_style – Choose from solid, dashed, or dotted. Sets the border’s style.
  • padding_top – Accepts a numerical value. For example, 20. Sets the top padding.
  • padding_bottom – Accepts a numerical value. For example, 20. Sets the bottom padding.
  • padding_left – Accepts a numerical value. For example, 20. Sets the left padding.
  • padding_right – Accepts a numerical value. For example, 20. Sets the right padding.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Content Boxes ElementBack To Top

The Content Boxes element lets you add stylish content boxes that are integrated with font awesome or image icons. View its parameters below.

Click here to see the Content Boxes Element in action!

The Content Boxes Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • layout – Choose from icon-with-title, icon-on-top, icon-on-side, icon-boxed, clean-vertical, clean-horizontal, timeline-vertical, or timeline-horizontal. Sets the layout.
  • title_size – Accepts a pixel value. For example, 5px. Sets the title’s font size.
  • title_color – Accepts a hexcode ( #000000 ). Sets the title’s font color.
  • body_color – Accepts a hexcode ( #000000 ). Sets the body’s font color.
  • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background color.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • icon_circle – Choose from default, yes, or no. Enable or disable icon’s background.
  • icon_circle_radius – Accepts a pixel or percentage value. For example, 1px or 50%. Sets the icon background’s radius.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circlebordersize – Accepts a pixel value. For example, 1px. Sets icon background’s inner border size.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s inner border color.
  • outercirclebordersize – Accepts a pixel value. For example, 1px. Sets the icon background’s outer border size.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s outer border color.
  • icon_size – Accepts a pixel value. For example, 5px. Sets the icon’s size.
  • icon_hover_type – Choose from default, none, fade, slide, or pulsate. Sets the icon’s animation type on hover.
  • hover_accent_color – Accepts a hexcode ( #000000 ). Sets the hover animation’s accent color.
  • link_type – Choose from default, text, button-bar, or button. Sets the link type displayed on the content box.
  • link_area – Choose from default, link-icon, or box. Sets which area the link will be assigned to.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • icon_align – Choose from left, or right. Sets the content’s alignment. This parameter is for icon-with-title and icon-on-side layouts only.
  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_delay – Accepts a numerical value. For example, 1 for 1 second, or 0.6 for 600 miliseconds. Sets the delay between transitions.
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • title – The content box’s title.
  • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background color.
  • icon – A font awesome icon value. For example, fa-glass.
  • iconflip – Choose from none, horizontal,or vertical. Sets how the icon is flipped.
  • iconrotate – Choose from 90, 180, 270,or none. Sets the icon’s rotation angle.
  • iconspin – Choose from yes, or no. Enable or disable the icon’s spinning animation.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circlebordersize – Accepts a pixel value. For example, 1px. Sets icon background’s inner border size.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s inner border color.
  • outercirclebordersize – Accepts a pixel value. For example, 1px. Sets the icon background’s outer border size.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s outer border color.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg. icon must not be set.
  • image_width – Accepts a numerical value. For example, 35. Set image’s width.
  • image_height – Accepts a numerical value. For example, 35. Set image’s height.
  • link – The URL you want the custom link text to direct to. For example, http://www.example.com/.
  • linktext – The custom link text. For example, Learn More.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the content boxes’ content between the [fusion_content_box][/fusion_content_box] tags.

Countdown ElementBack To Top

The Countdown Element lets you display an informative and convenient countdown timer for your events. View its parameters below.

Click here to see the Countdown Element in action!

Available Element Parameters


  • countdown_end – Accepts a SQL time format (YYYY-MM-DD HH:MM:SS) value. For example, 2016-05-10 12:30:00. Sets the end date and time of the countdown.
  • timezone – Choose from default, site_time, or user_time. Set which timezone to use for the countdown calculation.
  • show_weeks – Choose from default, yes, or no. Show or hide weeks.
  • border_radius – Accepts a pixel value. For example, 1px. Sets the border’s radius.
  • heading_text – The heading text you’d like to display.
  • subheading_text – The subheading text you’d like to display.
  • link_url – The URL the link text directs to. For example, http://www.sample.com.
  • link_text – The link text to display. For example, ‘More Info’.
  • link_target – Can be one of these values: _blank or _self .
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • background_color – Accepts a hexcode ( #000000 ). Sets the countdown wrapping box’s background color.
  • background_image – The URL of the background image you’d like to display. For example, http://www.sample.com/image.jpg.
  • background_position – Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background image’s position.
  • background_repeat – Choose from default, no-repeat, repeat, repeat-y, or repeat-x. Sets how the background image repeats.
  • counter_box_color – Accepts a hexcode ( #000000 ). Sets the background color.
  • counter_text_color – Accepts a hexcode ( #000000 ). Sets the timer’s font color.
  • heading_text_color – Accepts a hexcode ( #000000 ). Sets the heading’s font color.
  • subheading_text_color – Accepts a hexcode ( #000000 ). Sets the subheading color.
  • link_text_color – Accepts a hexcode ( #000000 ). Sets the link color.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Counter Boxes ElementBack To Top

The Counter Boxes Element lets you display animated counter boxes that are perfect for displaying statistics and data on the page. View its parameters below.

Click here to see the Counter Boxes Element in action!

The Counter Boxes Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • columns – Choose from 1, 2, 3, 4, 5 or 6. Sets the number of columns.
  • color – Accepts a hexcode ( #000000 ). Sets the value and icon color.
  • title_size – Accepts a pixel value. For example, 20px. Sets the value and icon size.
  • icon_size – Accepts a pixel value. For example, 5px. Sets the icon’s size.
  • icon_top – Choose from default, no or yes. Sets the icon’s position.
  • body_color – Accepts a hexcode ( #000000 ). Sets the body’s font color.
  • body_size – Accepts a pixel value. For example, 5px. Sets the body’s font size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the border color.
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • value – Accepts a numerical value. For example, 100. Sets the value the counter will count up or down to.
  • delimiter – Accepts a symbol. For example, comma ( , ) or period ( . ). Sets a delimiter digit for readability.
  • unit – Accepts a symbol. For example, % or $. Sets the unit for the counter.
  • unit_pos – Choose from prefix or suffix. Sets the unit’s position.
  • icon – A font awesome icon value. For example, fa-glass.
  • direction – Choose from up or down. Sets the counter’s count direction.
  • custom content – Insert the counter boxes’ content between the [fusion_counter_box][/fusion_counter_box] tags.

Counter Circles ElementBack To Top

The Counter Circles element lets you display animated counter circles that are perfect for displaying statistics and data on the page. View its parameters below.

Click here to see the Counter Circles Element in action!

The Counter Circles Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • value – Accepts a numerical value. For example, 100. Sets the value the counter will count up or down to.
  • filledcolor – Accepts a hexcode ( #000000 ). Sets the filled area’s color.
  • unfilledcolor – Accepts a hexcode ( #000000 ). Sets the unfilled area’s color.
  • size – Accepts a numerical value. For example, 220. Set the circle’s size
  • scales – Choose from yes, or no. Show or hide the scale around the circle.
  • countdown – Choose from yes, or no. Select yes to animate the fill animation counter clockwise. Select no to animate it clockwise.
  • speed – Accepts a numerical value. For example, 1500. Set how fast the fill animation animates.
  • custom content – Insert the counter circle’s content between the [fusion_counter_circle][/fusion_counter_circle] tags.

Dropcap ElementBack To Top

The Dropcap element lets you display a dropcap in your paragraphs and sentences. This element includes styling options. View its parameters below.

Click here to see the Dropcap Element in action!

The Dropcap Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


  • boxed – Choose from yes, or no. Display a background on the dropcap.
  • boxed_radius – Accepts a pixel value. For example, 4px. Sets the background’s radius.
  • color – Accepts a hexcode ( #000000 ). Sets the body font’s color.
  • custom content – Insert the dropcap letter between the [fusion_dropcap][/fusion_dropcap] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Events ElementBack To Top

The Events Element lets you display your Events Calendar posts on any section of you page. You can select element visibility, as well. View its parameters below.

Click here to see the Events Element in action!

Available Element Parameters


  • cat_slug – The slug name of the events category you’d like to display. Use a comma for multiple categories.
  • number_posts – Accepts a numerical value. For example, 7. Sets the number of events to display.
  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • picture_size – Choose from cover, or auto. Choose cover to resize the image to cover the container, or choose auto to use the image’s original resolution.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

FAQ ElementBack To Top

The FAQ Element lets you display FAQ items on the page. You can use this element with any column layout. View its parameters below.

Click here to see the FAQ Element in action!

Available Element Parameters


  • filters – Choose from default, show, yes-without-all, or hide. Disable or enable filters.
  • featured_image – Choose from default, yes or no. Show or hide featured images
  • cat_slug – The slug name of the FAQ category to display on the page. Use a comma for multiple categories.
  • exclude_cats – The slug name of the FAQ category to exclude. Use a comma for multiple categories.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Flip Boxes ElementBack To Top

The Flip Boxes element lets you display information on the front of the flip box, as well as the back. Hover on it to view the back section. View its parameters below.

Click here to see the Flip Boxes Element in action!

The Flip Box Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • title_front -The title of the front side of the flip box.
  • title_back – The title of the back side of the flip box.
  • text_front – The body text of the front side of the flip box.
  • background_color_front – Accepts a hexcode ( #000000 ). Sets the front side’s background color.
  • title_front_color – Accepts a hexcode ( #000000 ). Sets the front side’s title color.
  • text_front_color – Accepts a hexcode ( #000000 ). Sets the front side’s body color.
  • background_color_back – Accepts a hexcode ( #000000 ). Sets the back side’s background color.
  • title_back_color – Accepts a hexcode ( #000000 ). Sets the back side’s title color.
  • text_back_color – Accepts a hexcode ( #000000 ). Sets the back side’s text color.
  • border_size – Accepts a pixel value. For example, 4px. Sets the border’s size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • border_radius – Accepts a pixel value. Example, 4px. Sets the border’s radius.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_color – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circle – Choose from yes, or no. Show or hide the icon’s circular background.
  • circle_color – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circle_border_color – Accepts a hexcode ( #000000 ). Sets the icon background’s border color.
  • icon_flip – Choose from none, horizontal, or vertical. Set’s the icon’s flip direction.
  • icon_rotate – Choose from none, 90, 180, or 270. Sets the icon’s rotation angle.
  • icon_spin – Choose from yes, or no. This will enable or disable the icon’s spinning animation feature.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg. icon must not be set.
  • image_width – Accepts a numerical value. For example, 35. Set the custom image’s width in pixels.
  • image_height – Accepts a numerical value. For example, 35. Set the custom image’s height in pixels.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the flipboxes’ backside content between the [fusion_flip_box][/fusion_flip_box] tags.

Font Awesome Icon ElementBack To Top

The Font Awesome Icon Element lets you display Font Awesome icons anywhere on your page. You can customize its styling and animations. View its parameters below.

Click here to see the Font Awesome Icon Element in action!

Available Element Parameters


  • icon – A font awesome icon value. For example, fa-glass.
  • size – Accepts a pixel value. For example, 18px. Sets icon size.
  • flip – Choose from none, horizontal, or vertical. Set’s the icon’s flip direction.
  • rotate – Choose from none, 90, 180, or 270. Sets the icon’s rotation angle.
  • spin – Choose from yes, or no. This will enable or disable the icon’s spinning animation feature.
  • alignment – Choose from left, right, or center. Sets the icon’s alignment.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • circle – Choose from yes, or no. Enables or disables the icon’s background.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon’s border color.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Fusion Slider ElementBack To Top

The Fusion Slider element lets you add a Fusion Slider to any section of your page. You have to create a Fusion Slider first before using this element. View its parameters below.

Click here to see the Fusion Slider Element in action!

Available Element Parameters


  • name – This is the element name you’ve assigned to an existing Fusion Slider.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
The Gallery element allows you quickly add a collection of images to your page and offers a variety of styling options. View its parameters below.

Click here to see the Gallery Element in action!

Available Element Parameters


  • image_ids – This takes a comma separated list of image IDs to be added to the gallery.
  • layout – Choose between grid and masonry.
  • picture_size – Choose your image size from: Fixed and Auto. Fixed will use a theme generated image size for all images in the gallery. Auto will use the natural image size and scale down automatically to fit your columns as needed.
  • columns – Set the number of columns your gallery will have. It can range from 1 – 6
  • hover_type – Set if your images will have a hover animation. Choose from: none, zoomin, zoomout and liftup
  • column_spacing_all – Set the the desired space between your gallery images. e.g. 10px
  • show_titles – Choose how the image titles should be displayed. You can select from: none, under_image, in_lightbox or both Note: The title used will be the title set in your WordPress Media Library settings.
  • lightbox – Choose if you want to open the images in a lightbox on click. Choose from: yes or no
  • hide_on_mobile – Choose what screen sizes your element can be viewed on. This is a comma separated list. Choose any combination of the following: small-visibility, medium-visibility, large-visibility
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Google Map ElementBack To Top

The Google Map Element lets you add a Google Map to any section of your page. You can customize its styling and appearance. View its parameters below.

Click here to see the Google Map Element in action!

Available Element Parameters


  • address – The address you’d like to display. To have multiple map markers, separate two addresses with a vertical line. For example, ( Address1 | Address2 ).
  • type – Choose from roadmap, terrain, hybrid, or satellite. Sets the type of Google Map to display.
  • width – Accepts a pixel value. For example, 35. Sets the map’s width.
  • height – Accepts a pixel value. For example, 35. Sets the map’s height.
  • zoom – Choose from 1-25. Sets the zoom level.
  • scrollwheel – Choose from yes, or no. Enable or disable scrolling.
  • scale – Choose from yes, or no. Show or hide map scale.
  • zoom_pancontrol – Choose from yes, or no. Show or hide the zoom controls.
  • animation – Choose from yes, or no. Enable or disable animation for address pins.
  • popup – Choose from yes, or no. Show or hide the map popup. Choose no to show popup on click.
  • map_style – Choose from default, theme, or custom. Sets the Google Map’s style.
  • overlay_color – Accepts a hexcode ( #000000 ) or RGBA values ( rgba(0,0,0,0) ). Sets the map’s overlay color.
  • infobox_content – The custom content to replace address string. For multiple addresses, separate them with a vertical line ( Info1|Info2 ).
  • infobox – Choose from default, or custom. Sets the infobox’s style.
  • infobox_text_color – Accepts a hexcode ( #000000 ). Sets the infobox’s text color.
  • infobox_background_color – Accepts a hexcode ( #000000 ). Sets the infobox’s background color.
  • icon – The image URL for custom marker icons, or input theme for our custom marker. For multiple icons, separate them with a vertical line ( Icon1|Icon2 ).
  • hide_on_mobile – Can be one or all of these values: mobile-visibility, tablet-visibility, or desktop-visibility. Sets the element’s visibility.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Highlight ElementBack To Top

The Highlight element lets you highlight words, sentences or paragraphs to draw your viewers attention to important details. View its parameters below.

Click here to see the Highlight Element in action!

The Highlight Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


  • color – Accepts a hexcode ( #000000 ). Sets the highlight color.
  • rounded – Choose from yes, or no. Enable or disable rounded corners on the highlight.
  • custom content – Insert the content you’d like to highlight between the [fusion_highlight][/fusion_highlight] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Image Carousel ElementBack To Top

The Image Carousel Element lets you upload images and add them into an image carousel on the page. View its parameters below.

Click here to see the Image Carousel Element in action!

The Image Carousel Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • Bulk Image UploadThis options is only available in the Fusion Builder interface and not as a shortcode param. This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.
  • picture_size – Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets how the image responds on hover.
  • autoplay – Choose from yes, or no. Enable or disable autoplay.
  • columns – Choose from 1 – 6. Sets the number of columns to display.
  • column_spacing – Accepts a numerical value. For example, 35. Sets column spacing.
  • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll though the number of visible items.
  • show_nav – Choose from yes, or no. Show or hide navigation buttons.
  • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag control. If this is enabled, links will be disabled.
  • border – Choose from yes, or no. Enable or disable image borders.
  • lightbox – Choose from yes, or no. Enable or disable the image’s lightbox feature.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • link – The URL path where the image links to. For example, http://www.example.com/. If lightbox is enabled, use the uploaded image’s URL to display it in a lightbox.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • image – URL path of your image. For example, http://www.sample.com/image.jpg.
  • alt – The alternative text that will be displayed if the image can’t be viewed.

Image Frame ElementBack To Top

The Image Frame Element lets you add an image on your page. You can customize its styling and appearance, and display the image in a lightbox. View its parameters below.

Click here to see the Image Frame Element in action!

Available Element Parameters


  • image_id – The uploaded image’s attachment ID.
  • style_type – Choose from none, glow, dropshadow, or bottomshadow. Set the frame’s style type.
  • stylecolor – Accepts a hexcode ( #000000 ). Sets the style color for all style types except for the border style.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the image’s hover effect animation.
  • bordersize – Accepts a pixel value. For example, 5px. Sets the border’s size.
  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • borderradius – Accepts a pixel value. For example, 5px. Sets the radius of the image frame’s border.
  • align – Choose from left, right, or center. Sets image’s alignment.
  • lightbox – Choose from yes, or no. Show or hide the image in a lightbox.
  • gallery_id – The name of the lightbox gallery this image frame should belong to. Learn more here.
  • lightbox_image – The URL path of the lightbox image to be displayed. For example, http://www.sample.com/image.jpg.
  • alt – The alternative title text that will show up in the lightbox if the image cannot be viewed.
  • link – The URL path the image links to. For example, http://www.sample.com. Lightbox must be disabled.
  • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • custom content – Insert the image you’d like to display between the [fusion_imageframe][/fusion_imageframe] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Layer Slider ElementBack To Top

The Layer Slider Element lets you add a Layer Slider on any page. You must first create a Layer Slider before you can use this element. View its parameters below.

Click here to see the Layer Slider Element in action!

Available Element Parameters


  • id – Insert the unique slider name of the Layer Slider you’ve created.

Lightbox ElementBack To Top

The Lightbox Element lets you upload an image to display on a lightbox. You can also upload a different thumbnail image to display. View its parameters below.

Click here to see the Lightbox Element in action!

The Lightbox Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


  • title – The lightbox description below the image.
  • href – The URL path of the image you’d like to display in a lightbox. For example, http://www.sample.com/image.jpg
  • data-rel – The lightbox library in use.
  • img src – The URL path of the thumbnail image that will trigger the lightbox. For example, http://www.sample.com/image.jpg
  • alt – The alternate text in case the image cannot be viewed.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Menu Anchor ElementBack To Top

The Menu Anchor Element lets you add an anchor to a section of your page, then scroll to it when the corresponding link is triggered. View its parameters below.

Click here to see the Menu Anchor Element in action!

Available Element Parameters


  • name – The unique name of the ID to use on your one page menu. Learn more here.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

Modal ElementBack To Top

The Modal Element lets you add a modal popup element to the page. The modal must be triggered by a button, text link or image. View its parameters below.

Click here to see the Modal Element in action!

Available Element Parameters


  • name – The modal’s unique identifier. Learn more here.
  • title – The heading title of the modal.
  • size – Choose from large, or small. Sets the modal’s size.
  • background – Accepts a hexcode ( #000000 ). Sets the modal’s background color.
  • border_color – Accepts a hexcode ( #000000 ). Sets the modal’s border color.
  • show_footer – Choose from yes, or no. Show or hide the modal’s footer.
  • custom content – Insert the modal’s content between the [fusion_modal][/fusion_modal] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
The Modal Text Link Element lets you add a string of text or an image. You can then insert a modal’s unique identifier to trigger it. View its parameters below.

Click here to see the Modal Text Link Element in action!

The Modal Text Link Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


  • name – The unique identifier of the Modal Element you’ve created. Learn more here.
  • custom content – Insert the modal’s content between the [fusion_modal_text_link][/fusion_modal_text_link] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

NextPage ElementBack To Top

This element will add the WordPress <!–nextpage–> tag to your content to add pagination.

There Are No Element Parameters Needed

The One Page Text Link element allows your to trigger anchor links from anywhere on the page. Click the one page text link to automatically scroll to the anchor link. View its parameters below.

Click here to see the One Page Text Link Element in action!

Available Element Parameters


  • link – The unique identifier of the anchor link to scroll to on click.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Person ElementBack To Top

The Person Element lets you add a team member’s profile to the page. You can add a profile picture and social links. View its parameters below.

Click here to see the Person Element in action!

Available Element Parameters


  • name – The profile name. For example, John Doe.
  • title – The title or position. For example, CEO.
  • picture – The URL path of the custom image to be displayed. For example, http://www.sample.com/image.jpg.
  • pic_link – The URL path where the image links to. For example, http://www.sample.com/
  • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • pic_style – Choose from none, glow, dropshadow, or bottomshadow. Sets the picture’s style type.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the picture’s hover type animation.
  • background_color – Accepts a hexcode ( #000000 ). Sets the background color.
  • content_alignment – Choose from default, left, right, or center. Sets the content’s text alignment.
  • pic_style_color – Accepts a hexcode ( #000000 ). Sets the style color for all style types except for the border.
  • pic_bordersize – Accepts a pixel value. For example, 1px. Sets the border size.
  • pic_bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • pic_borderradius – Accepts a pixel value. For example, 1px. Sets the border’s radius.
  • icon_position – Choose from default, top, or bottom. Sets the icon’s position.
  • social_icon_boxed – Choose from default, yes, or no. Enable or disable the icon’s boxed background.
  • social_icon_boxed_radius – Accepts a pixel value. For example, 1px. Sets the icon background’s radius.
  • social_icon_boxed_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s box colors. Use one color, or individual colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
  • social_icon_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
  • social_icon_tooltip – Choose from default, left, right, top, bottom, or none. Sets the icon tooltip position.
  • email – The email address. For example, johndoe@example.com.
  • social links – The custom URL path to your various social media profiles. For example, http://www.facebook.com/johndoe.
  • custom content – Insert the profile description between the [fusion_person][/fusion_person] tags.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Popover ElementBack To Top

The Popover Element lets you display an informative popover on text, buttons or images. This element also has styling options. View its parameters below.

Click here to see the Popover Element in action!

The Popover Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


  • title – The popover’s title.
  • content – The content displayed inside the popover.
  • trigger – Choose from click, or hover. Sets the mouse action to trigger the popover.
  • placement – Choose from default, top, left, right, or bottom. Sets the popover’s position on the triggering content.
  • title_bg_color – Accepts a hexcode ( #000000 ). Sets the heading’s background color.
  • content_bg_color – Accepts a hexcode ( #000000 ). Sets the background color.
  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • textcolor – Accepts a hexcode ( #000000 ). Sets the text’s color.
  • custom content – Insert the triggering you’d like to highlight between the [highlight][/highlight] tags. Learn more here.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Portfolio ElementBack To Top

The Portfolio Element lets you add your portfolio posts to your page. You can customize its layout and styling to your liking. View its parameters below.

Click here to see the Portfolio Element in action!

Available Element Parameters


  • layout – Choose from carousel, grid or masonry. Sets the portfolio’s layout.
  • picture_size – Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
  • text_layout – Choose from no_text, boxed, or unboxed. Enable or disable a boxed text layout for grid-with-text layout.
  • columns – Choose from 1 – 6. Sets the number of columns to be displayed. Only works with grid or grid-with-text layouts.
  • one_column_text_position – Choose from below, orfloated. Choose below to display title and content below the featured image, or floated to display them next to the featured image. Column must be set to 1.
  • column_spacing – Accepts a numerical value. For example, 7. Sets column spacing.
  • portfolio_title_display – Choose from default, all, title, cats, or none. Sets which details to display.
  • portfolio_text_alignment – Choose from default, left, center or right. Sets the content’s text alignment.
  • portfolio_layout_padding – Accepts a numerical value. For example, 5px. Sets the content’s padding for boxed layout.
  • filters – Choose from yes, yes-without-all,or no. Show or hide the filters.
  • pull_by – Define how posts should be loaded. Accepts: category or tag as the value here.
  • cat_slug – The portfolio categories to display. Use a comma for multiple categories.
  • exclude_cats – The portfolio categories to exclude. Use a comma to exclude multiple portfolio categories.
  • tag_slug – The slug name of the Portfolio post tag to display. Use a comma for multiple tags.
  • exclude_tags – The slug name of the Portfolio post tag to exclude. Use a comma for multiple tags.
  • number_posts – Accepts a numerical value. For example, 7. Sets how many portfolio posts to display on the page.
  • pagination_type – Choose from default, pagination, infinite, load-more-button, or none. Sets the pagination type.
  • hide_url_params -Choose from “On/Off”. When enabled, this will remove the Portfolio query string added to the single post page, when navigating from a Portfolio element with specific categories or tags included/excluded. More details on this can be found here.
  • offset – Accepts a numerical value. For example, 1. Sets how many posts to skip.
  • content_length – Choose from default, excerpt, or full-content. Choose excerpt to display the excerpt, or full-content to display the full content.
  • excerpt_length – Accepts a numerical value. For example, 15. Sets how many words or characters the excerpt will be.
  • strip_html – Choose from yes, or no. Show or hide HTML content in the excerpt.
  • carousel_layout – Choose from title_on_rollover, or title_below_image. Sets the title position for carousel layout.
  • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll number of visible items.
  • autoplay – Choose from yes, or no. Enable or disable carousel autoplay.
  • show_nav – Choose from yes, or no. Show or hide navigation buttons.
  • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag on carousel.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Post Slider ElementBack To Top

The Post Slider Element lets you add a slider consisting of blog posts to the page. You can select what layout to use, as well. View its parameters below.

Click here to see the Post Slider Element in action!

Available Element Parameters


  • layout – Choose from posts, posts-with-excerpt, or attachments. Choose posts to pulls blog posts. Choose attachments to pulls images attached to the post. Choose posts-with-excerpt to pulls blog posts with excerpts.
  • excerpt – Accepts a numerical value. For example, 15. Sets how many words or characters the excerpt will be for post-with-excerpt layout.
  • category – The blog category to display.
  • limit – Accepts a numerical value. For example, 3. Sets the number of slides to display on the slider.
  • lightbox – Choose from yes, or no. Enable or disable the lightbox for the attachments layout.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Pricing Table ElementBack To Top

The Pricing Table Element lets you add a stylish pricing table to display subscription deals or price packages. View its parameters below.

Click here to see the Pricing Table Element in action!

Available Element Parameters


  • type – Choose from 1, or 2. Sets the pricing table’s style.
  • backgroundcolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color.
  • bordercolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table’s border color.
  • dividercolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the divider color.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • columns – Accepts a numerical value. For example, 3. Sets the number of pricing table columns.
  • title – The custom column title text. For example, Standard Pricing.
  • standout – Choose from yes, or no. Sets the specified column as featured.
  • currency – Accepts symbols.For example, $, or €. Sets the currency.
  • price – Accepts a numerical value. For example, 29.99. Sets price.
  • time – The time or duration. For example, monthly, yearly, or daily.
  • custom content – Insert the pricing table’s content between the [fusion_pricing_row][/fusion_pricing_row] tags.
  • custom content – Insert the footer’s content between the [fusion_pricing_footer][/fusion_pricing_footer] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Progress Bar ElementBack To Top

The Progress Bar Element lets you add a functional progress bar to display information such as skills, statuses, and the like. You can also customize its styling. View its parameters below.

Click here to see the Progress Bar Element in action!

Available Element Parameters


  • height – Accepts a pixel value. For example, 10px. Set the progress bar’s height.
  • text_position – Choose from default, on_bar, above_bar, and below_bar. Sets the text position relative to the progress bar.
  • show_percentage – Choose from yes or no. Show or hide the filled area value.
  • unit – Accepts an alphanumeric value or symbols. For example, % or cm. Sets the unit of measurement.
  • percentage – Choose from 1 – 100. Set the filled area percentage value.
  • filledcolor – Accepts a hexcode ( #000000 ). Sets the filled area’s color.
  • filledbordersize – Accepts a numerical value. For example, 1. Sets the filled area’s border size.
  • filledbordercolor – Accepts a hexcode ( #000000 ). Sets the filled area’s border color.
  • unfilledcolor – Accepts a hexcode ( #000000 ). Sets the unfilled area’s color.
  • striped – Choose from yes, or no. Show or hide fill’s striped pattern.
  • animated_stripes – Choose from yes, or no. Enable or disable the fill’s stripped pattern animation.
  • textcolor – Accepts a hexcode ( #000000 ). Sets the text’s color.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • custom content – Insert the progress bar text between the [fusion_progress][/fusion_progress] tags.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Recent Posts ElementBack To Top

The Recent Posts Element lets you add your blog posts to your page. You can customize its layout and styling to your liking. View its parameters below.

Click here to see the Recent Posts Element in action!

Available Element Parameters


  • layout – Choose from default, thumbnails-on-side, or date-on-side. Sets the blog’s post layout.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the picture’s hover effect type.
  • columns – Choose from 1 – 6. Sets the number of displayed columns.
  • number_posts – Accepts a numerical value. For example, 7. Sets how many posts are displayed. Use -1 to display all.
  • offset – Accepts a numerical value. For example, 1. Sets how many posts to skip.
  • pull_by – Define how posts should be loaded. Accepts: category or tag as the value here.
  • cat_slug – The slug name of the blog category you’d like to display. Use a comma for multiple categories.
  • exclude_cats – The slug name of the blog category to exclude. Use a comma for multiple categories.
  • tag_slug – The slug name of the blog post tag to display. Use a comma for multiple tags.
  • exclude_tags – The slug name of the blog post tag to exclude. Use a comma for multiple tags.
  • thumbnail – Choose from yes, or no. Show or hide the featured image.
  • title – Choose from yes, or no. Show or hide the title.
  • meta – Choose from yes, or no. Show or hide the meta data.
  • excerpt – Choose from yes, or no. Show or hide the excerpt.
  • excerpt_length – Accepts a numerical value. For example, 15. Sets how many words or characters the excerpt will be.
  • strip_html – Choose from yes, or no. Show or hide HTML content in the excerpt.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Revolution Slider ElementBack To Top

The Revolution Slider Element lets you add a Revolution Slider to your page. You must first create Revolution slides and sliders before you can add them to the page. View its parameters below.

Click here to see the Revolution Slider Element in action!

Available Element Parameters


  • alias – The unique slider name of the Revolution Slider you’ve created. Learn more here.

Section Separator ElementBack To Top

The Section Separator Element lets you add a separator with a divider candy to your page. You can use this element to add spacing between elements and sections. View its parameters below.

Click here to see the Section Separator Element in action!

Available Element Parameters


  • divider_type – Choose from triangle, slant, bigtriangle, rounded-split, curved, big-half-circle, or clouds. Sets the style of the section separator.
  • divider_style – Choose from left, center, or right. Sets the section separator’s horizontal position.
  • divider_candy – Choose from top, or bottom. Sets the separator’s vertical position.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_color – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • bordersize – Accepts a numerical value. For example, 1. Set the border size.
  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background’s color.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Separator ElementBack To Top

The Separator Element lets you add a simple separator to your page. You can select different styles for it, or use it to add or remove padding between elements. View its parameters below.

Click here to see the Separator Element in action!

Available Element Parameters


  • style_type – Choose from default, none, single, double, single|dashed, double|dashed, single|dotted, double|dotted, or shadow. Sets the separator’s style.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • sep_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the separator’s color.
  • top_margin – Accepts a numerical value. For example, 40. Set the top margin.
  • bottom_margin – Accepts a numerical value. For example, 40. Set the separator’s bottom margin.
  • border_size – Accepts a numerical value. For example, 1px. Set the border size.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_circle – Choose from default, yes, or no. Show or hide the icon’s background.
  • icon_circle_color – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • width – Accepts a pixel or percentage value. For example, 1px, or 50%. Sets the separator width. Leave blank for full width.
  • alignment – Choose from center, left, or right. Sets the separator’s alignment. Can only be used when a width is set.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Sharing Box ElementBack To Top

The Sharing Box Element lets you add a sharing box to your page, usually to blog posts. This allows your users to share your post or page using their social media accounts. View its parameters below.

Click here to see the Sharing Box Element in action!

Available Element Parameters


  • tagline – The tagline text. For example, Share This Story, Choose Your Platform!
  • tagline_color – Accepts a hexcode ( #000000 ). Sets the tagline color.
  • backgroundcolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background’s color.
  • title – The custom title that will be shared. For example, My Blog Post.
  • link – The URL path that will be shared. For example, http://www.example.com/.
  • description – The description text that will be shared.
  • icons_boxed – Choose from default, yes, or no. Enable or disable icon’s background.
  • icons_boxed_radius – Accepts a pixel value. For example, 4px. Sets the social icon’s background radius.
  • color_type – Choose from default, custom or brand. Choose custom to use custom social icon colors, or choose brand to automatically use the social icon brand colors.
  • icon_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
  • box_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom background colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
  • tooltip_placement – Choose from default, left, right, top, or bottom. Sets the tooltip’s position relative to the social icon.
  • pinterest_image – The URL path of the image that will be shared on Pinterest. For example, http://www.sample.com/image.jpg.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Slider ElementBack To Top

The Slider Element lets you add images into a simple slider. This element is very versatile, and you can use it to display client logos, products, and the like. View its parameters below.

Click here to see the Slider Element in action!

The Slider Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
  • width – Accepts a pixel or percentage value. For example, 1px, or 50%. Set the image or video width. Leave blank for full width.
  • height – Accepts a pixel or percentage value. For example, 1px, or 50%. Set the image or video height. Leave blank for full width.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • type – Choose from video, or image. Sets the slide type.
  • link – The URL path where the image links to. For example, http://www.example.com/
  • lightbox – Choose from yes, or no. Enable or disable the lightbox.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • custom content – Insert the image or video URL between the [fusion_slide][/fusion_slide] tags.

Social Links ElementBack To Top

The Social Links Element lets you add social links to the page. You can add your own social links to the element so your viewers can find your social network profiles. View its parameters below.

Click here to see the Social Links Element in action!

Available Element Parameters


  • icons_boxed – Choose from default, yes, or no. Enable or disable boxed icons.
  • icons_boxed_radius – Accepts a pixel value. For example, 1px. Sets the border radius.
  • color_type – Choose from default, custom or brand. Choose custom to use custom social icon colors, or choose brand to automatically use the social icon brand colors.
  • icon_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom colors. Separate colors with a vertical line ( #AA0000|#00AA00 ). Leave Blank for Theme Options selection.
  • box_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s custom box colors. Separate colors with a vertical line ( #AA0000|#00AA00 ). Leave Blank for Theme Options selection.
  • tooltip_placement – Choose from default, left, right, top, or bottom. Sets the tooltip’s position relative to the social icon.
  • various social links – The custom URL path to various social media profiles. For example, http://www.facebook.com/johndoe.
  • email – The email address. For example, johndoe@example.com.
  • show_custom – Choose from yes, or no. Show or hide custom social icons. Learn more here.
  • alignment – Choose from default, left, center, or right. Sets the icon’s alignment.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Soundcloud ElementBack To Top

The Soundcloud Element lets you embed a SoundCloud track to the page. You can choose the layout of the track, as well as display various metadata. View its parameters below.

Click here to see the Soundcloud Element in action!

Available Element Parameters


  • url – The URL path of the SoundCloud track to embed. For example, http://api.soundcloud.com/tracks/110813479.
  • layout – Choose from classic, or visual. Set the SoundCloud’s layout.
  • comments – Choose from yes, or no. Show or hide comments.
  • show_related – Choose from yes, or no. Show or hide related items.
  • show_user – Choose from yes, or no. Show or hide the track’s author.
  • auto_play – Choose from yes, or no. Enable or disable autoplay.
  • color – Accepts a hexcode ( #000000 ). Sets the track’s color.
  • width – Accepts a pixel or percentage value. For example, 1px. Sets the width.
  • height – Accepts a pixel or percentage value. For example, 1px. Sets the height.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Table ElementBack To Top

The Table Element allows you to display a simple table on your page. You can add rows and columns to add more content. View its parameters below.

Click here to see the Table Element in action!

Available Element Parameters

Custom Content Goes Here
Custom Content Here

 

  • class – Choose from table-1, or table-2. Sets the table’s design.
  • align – Choose from left, right or center. Sets the content alignment.
  • custom content – Insert the column heading between the [th][/th] tags.
  • custom content – Insert the column content between the [td][/td] tags.

Tab ElementBack To Top

The Tab Element allows you to display a considerable amount of information into tabs. You can display the tabs either horizontally or vertically. View its parameters below.

Click here to see the Tab Element in action!

The Tab Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters

Parent Settings
  • design – Choose from classic, or clean. Sets the tabs design.
  • layout – Choose from horizontal, or vertical. Sets the tabs layout.
  • justified – Choose from yes, or no. Set the tabs to span full width of it’s container.
  • backgroundcolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the active tab’s background color.
  • inactivecolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the inactive tab’s background color.
  • bordercolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the tab’s border color.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
  • title – The title of the tab.
  • icon – A font awesome icon value. For example, fa-glass.
  • custom content – Insert tab content between the [fusion_tab][/fusion_tab] tags.

Tagline Box ElementBack To Top

The Tagline Box element allows you to display a professional looking tagline box that you can use as a notice or a promotional box. You can customize its styling to your liking. View its parameters below.

Click here to see the Tagline Box Element in action!

Available Element Parameters


  • backgroundcolor – Accept a hexcode ( #000000 ). Sets the background color.
  • shadow – Choose from yes, or no. Show or hide a shadow below the tagline box.
  • shadowopacity – Can be a numerical value from 0.1 to 1. Sets the shadow’s opacity level. 1 is equivalent to 100% opacity.
  • border – Accepts a numerical value. For example, 1. Set the border size.
  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color
  • highlightposition – Choose from none, left, right, top, or bottom. Sets the highlight border’s position.
  • content_alignment – Choose from left, center, or right. Sets the content’s alignment.
  • link – The URL path where the button links to. For example, http://www.example.com/
  • button – The custom button text. For example, Click Here.
  • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • modal – The unique identifier of the Modal Element you’ve created that allows the button to trigger the modal.
  • button_size – Choose from default, small, medium, large, or xlarge. Sets the size of the button.
  • button_type – Choose from default, flat, 3d. Sets the button’s type.
  • button_shape – Choose from default, square, pill, or round. Sets the button’s shape.
  • buttoncolor – Choose from default, green, darkgreen, orange, blue, red, pink, darkgray, or lightgray.
  • title – The custom title text.
  • description – The custom description text.
  • custom content – Insert additional content between the [fusion_tagline_box][/fusion_tagline_box] tags.
  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Testimonial ElementBack To Top

The Testimonial Element allows you to display your customers’ testimonials and feedback on the page. This element is great for showing your viewers any positive comments you’ve received. View its parameters below.

Click here to see the Testimonial Element in action!

The Testimonial Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
  • design – Choose from classic, or clean. Sets the testimonial’s design.
  • backgroundcolor – Accept a hexcode ( #000000 ). Sets the background color.
  • textcolor – Accept a hexcode ( #000000 ). Sets the text color.
  • random – Choose from default, yes, or no. This will enable or disable the randomization of the testimonial order.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
    • name – The client’s name. For example, John.
    • avatar – Choose from male, female, none, or image. Sets the avatar.
    • image – The URL path of the custom avatar image. For example, http://www.sample.com.
    • image_border_radius – Accepts a pixel value. For example, 1px. Sets the border’s radius size.
    • company – The client’s company name. For example, ThemeFusion.
    • link – the URL path of the company. For example, http://www.theme-fusion.com/.
    • target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
    • custom content – Insert the testimonial between the [fusion_testimonials][/fusion_testimonials] tags.

Textblock ElementBack To Top

The Text Block element allows you to display plain text or HTML markups on the page. This element can be used with any of our available column elements. View its parameters below.

Click here to see the Textblock Element in action!

Available Element Parameters


      • custom content – Insert the custom text content between the [fusion_text][/fusion_text] tags.

Title ElementBack To Top

The Title element allows you to display a plain title text on the page. You can choose sizes from H1 – H6, as well as other styling options such as separator, color, etc. View its parameters below.

Click here to see the Title Element in action!

Available Element Parameters


      • custom content – Insert the custom title between the [fusion_title][/fusion_title] tags.
      • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
      • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • size – Choose from 1, 2, 3, 4, 5, or 6. These numbers represent H1-H6 heading sizes, respectively.
      • content_align – Choose from left, or right. Sets the heading’s alignment.
      • style_type – Choose from default, single solid, double solid, underline solid, single dashed, double dashed, underline dashed, single dotted, double dotted, underline dotted or none. Sets the separator style.
      • sep_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Toggle ElementBack To Top

The Toggle Element allows you to display content in tabs that your viewers can toggle open or close. This saves space on your page and keeps it neat. View its parameters below.

Click here to see the Toggle Element in action!

The Toggle Element is considered a Child Element. To learn more about Child Elements, click here.

Available Element Parameters


Parent Settings
      • open_multiple – Allows you to have multiple open toggles at once. When enabled, the toggle requires a click to be closed.
      • boxed_mode – Choose from default, yes, or no. Provides the options to have a boxed layout for your Toggles.
      • border_size – Provides the option to set a pixel size for the border width.
      • border_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
      • background_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
      • hover_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
      • divider_line – Choose from default, yes, or no. Choose to display a divider line between each item.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
Child Settings
      • title – The custom title text of the toggle item.
      • open – Choose from yes, or no. Sets if the toggle item is open or close by default.
      • custom content – Insert toggle’s content between the [fusion_accordion][/fusion_accordion] tags.

Tooltip ElementBack To Top

The Tooltip element lets you display important information, alerts or messages to your viewers. These tooltips can be triggered by click or hover. View its parameters below.

Click here to see the Tooltip Element in action!

The Tooltip Element is considered a Content Based Element. To learn more about Content Based Elements, click here.

Available Element Parameters


      • title – The tooltip’s title.
      • placement – Choose from top, left, right, or bottom. Sets the tooltip’s position.
      • trigger – Choose from click, or hover. Sets the tooltip’s trigger.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

User Login ElementBack To Top

The User Login Element lets you display a login form on any page. You can also customize its styling to your liking. View its parameters below.

Click here to see the User Login Element in action!

Available Element Parameters


      • text_align – Choose from default, textflow, or center. Sets the text alignment.
      • heading – The heading text.
      • heading_color – Accepts a hexcode ( #000000 ). Sets the heading text’s color.
      • caption – The caption text.
      • caption_color – Accepts a hexcode ( #000000 ). Sets the caption text’s color.
      • button_fullwidth – Choose from default, yes, or no. Sets wether or not the button will span full width.
      • form_background_color – Accepts a hexcode ( #000000 ). Sets the form wrapping box’s background color.
      • link_color – Accepts a hexcode ( #000000 ). Sets the link’s text color.
      • redirection_link – The URL to which the user is redirected to after form submission. Leave empty to use the same page. For example, http://www.example.com/
      • register_link – The URL that the Register link redirects to. For example, http://www.example.com/register.
      • lost_password_link – The URL that the Lost Password link redirects to. For example, http://www.example.com/lost-password
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

User Lost Password ElementBack To Top

The User Lost Password Element lets you display a ‘Lost Password?’ form on any page. You can also customize its styling to your liking. View its parameters below.

Click here to see the User Lost Password Element in action!

Available Element Parameters


      • text_align – Choose from default, textflow, or center. Sets the text alignment.
      • heading – The heading text.
      • heading_color – Accepts a hexcode ( #000000 ). Sets the heading text’s color.
      • caption – The caption text.
      • caption_color – Accepts a hexcode ( #000000 ). Sets the caption text’s color.
      • button_fullwidth – Choose from default, yes, or no. Sets wether or not the button will span full width.
      • form_background_color – Accepts a hexcode ( #000000 ). Sets the form wrapping box’s background color.
      • link_color – Accepts a hexcode ( #000000 ). Sets the link’s text color.
      • redirection_link – The URL to which the user is redirected to after form submission. Leave empty to use the same page. For example, http://www.example.com/
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

User Register ElementBack To Top

The User Register Element lets you display a registration form on any page. You can also customize its styling to your liking. View its parameters below.

Click here to see the User Register Element in action!

Available Element Parameters


      • text_align – Choose from default, textflow, or center. Sets the text alignment.
      • heading – The heading text.
      • heading_color – Accepts a hexcode ( #000000 ). Sets the heading text’s color.
      • caption – The caption text.
      • caption_color – Accepts a hexcode ( #000000 ). Sets the caption text’s color.
      • button_fullwidth – Choose from default, yes, or no. Sets wether or not the button will span full width.
      • form_background_color – Accepts a hexcode ( #000000 ). Sets the form wrapping box’s background color.
      • link_color – Accepts a hexcode ( #000000 ). Sets the link’s text color.
      • redirection_link – The URL to which the user is redirected to after form submission. Leave empty to use the same page. For example, http://www.example.com/
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Vimeo ElementBack To Top

The Vimeo element lets you embed a Vimeo video anywhere on the page. You can also customize its width and height dimensions, and other styling options. View its parameters below.

Click here to see the Vimeo Element in action!

Available Element Parameters


      • id – The Video ID of the video you want to insert. For example, the Video ID for https://vimeo.com/75230326 is 75230326.
      • alignment – Set the alignment of your video. Leave empty to use the text flow, or set as left, center or right.
      • width – Accepts a pixel or percentage value. For example, 1px, or 50%. Sets video width. Leave Blank for Full Width.
      • height – Accepts a pixel or percentage value. For example, 1px, or 50%. Sets video height. Leave Blank for Full Height.
      • autoplay – Choose from yes, or no. This will enable or disable autoplay.
      • api_params – Any additional vimeo video parameter option. To view the parameters Vimeo offers, follow this link.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

Widget Area ElementBack To Top

The Widget Area element lets you add any widget element anywhere on the page. You can use this element with any column element. View its parameters below.

Click here to see the Widget Area Element in action!

Available Element Parameters


      • name – The name of the Widget Section you’d like to display.
      • background_color – Accepts a hexcode ( #000000 ). Sets the widget area’s background color.
      • padding – Accepts a pixel value. For example, 5px. Sets the padding.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

WooCommerce Carousel ElementBack To Top

The WooCommerce Carousel Element lets you display WooCommerce products in a carousel. Use this to stylishly display your products in an animated carousel. View its parameters below.

Click here to see the WooCommerce Carousel Element in action!

Available Element Parameters


      • picture_size – Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
      • cat_slug – The slug name of the WooCommerce category to display. Use a comma for multiple categories.
      • number_posts – Accepts a numerical value. For example, 7. Sets how many products to display.
      • carousel_layout – Choose from title_on_rollover, or title_below_image. Sets the carousel’s layout.
      • autoplay – Choose from yes, or no. This will enable or disable autoplay.
      • columns – Choose from 1 – 6. Sets the maximum number of columns to display.
      • column_spacing – Accepts a numerical value. For example, 35. Sets the space between columns.
      • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll though the number of visible items.
      • navigation – Choose from yes, or no. This will show or hide the navigation buttons.
      • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag control.
      • show_cats – Choose from yes, or no. This will show or hide the categories.
      • show_price – Choose from yes, or no. This will show or hide the rollover price.
      • show_buttons – Choose from yes, or no. This will show or hide the rollover buttons.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

WooCommerce Featured Slider ElementBack To Top

The WooCommerce Featured Slider element lets you display your featured WooCommerce products in a slider. Use this to draw attention to your most popular products or promotions. View its parameters below.

Click here to see the WooCommerce Featured Slider Element in action!

Available Element Parameters


      • picture_size – Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
      • carousel_layout – Choose from title_on_rollover, or title_below_image. Sets the carousel’s layout.
      • autoplay – Choose from yes, or no. This will enable or disable autoplay.
      • columns – Choose from 1 – 6. Sets the maximum number of columns to display.
      • column_spacing – Accepts a numerical value. For example, 35. Sets the space between columns.
      • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll though the number of visible items.
      • show_nav – Choose from yes, or no. This will show or hide the navigation buttons.
      • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag control.
      • show_cats – Choose from yes, or no. This will show or hide the categories.
      • show_price – Choose from yes, or no. This will show or hide the rollover price.
      • show_buttons – Choose from yes, or no. This will show or hide the rollover buttons.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

WooCommerce Shortcodes ElementBack To Top

The Woocommerce shortcodes element lets you use Woocommerce’s various shortcodes. To learn more about each shortcode bundled with WooCommerce, please follow this link.

Click here to see the WooCommerce Shortcodes Elements in action!

Youtube ElementBack To Top

The Youtube element lets you embed Youtube videos on your page. You can also set it’s height and width dimensions. View its parameters below.

Click here to see the Youtube Element in action!

Available Element Parameters


      • id – The id of the Youtube video you want to insert. For example, the video ID for http://www.youtube.com/LOfeCR7KqUs is LOfeCR7KqUs.
      • alignment – Set the alignment of your video. Leave empty to use the text flow, or set as left, center or right.
      • width –  Accepts a numerical value. For example, 600. Sets the video’s width.
      • height –  Accepts a numerical value. For example, 350. Sets the video’s height.
      • autoplay – Choose from yes, or no. This will enable or disable autoplay.
      • api_params – An additonal vimeo video paramter option. To view the parameters Youtube offers, follow this link.
      • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
8 Likes
Proudly Serving Over 350000 Satisfied Users!