Fusion Builder Elements List

Fusion Builder Elements List

31/10/2018
Fusion Builder

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.

The Fusion Builder Elements list is valid for Avada 5.7.2 (Released on November 8th, 2018)

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.

Alert

Blog

Button

Chart

Checklist

Codeblock

Content Boxes

Countdown

Counter Boxes

Counter Circles

Events

FAQ

Flip Boxes

Font Awesome Icon

Fusion Slider

Gallery

Google Map

Image

Image Before & After

Image Carousel

Layer Slider

Lightbox

Menu Anchor

Modal

Modal Text Link

Person

Portfiolo

Post Slider

Pricing Table

Progress Bar

Recent Posts

Section Separator

Separator

Sharing Box

Slider

Social Links

Soundcloud

Syntax Highlighter

Table

Tabs

Tagline Box

Testimonials

Text Block

Title

Toggles

User Login

User Lost Password

User Register

Vimeo

Widget Area

Woo Carousel

Woo Featured Products

Woo Shortcodes

Youtube

Containers

Columns

Nested Columns

Fusion Builder Alert Element

Alert

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

Copy to Clipboard
  • 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.
  • class - Add a custom class to the wrapping HTML element for further css customization.
  • id - Add a custom id to the wrapping HTML element for further css customization.

Fusion Builder Blog Element

Blog

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

Copy to Clipboard
    • 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_column_spacing - Accepts a numerical value. For example, 30. Sets the column spacing between blog grid posts.
    • equal_heights - Choose from yes, or no. Sets to yes to display grid boxes with equal heights per row.
    • 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 blog 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.

    • scrolling - Choose from pagination, infinite, or load_more_button. Sets the type of pagination.
    • grid_box_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color for the grid boxes.
    • grid_element_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of borders/date box/timeline dots and arrows for the grid boxes.
    • grid_separator_style_type - Choose from Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, and Shadow. Sets the line style color of grid separators.
    • grid_separator_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line style color of grid separators.
    • padding_top - Accepts a pixel value. For example, 5px. Sets the top padding for the blog text when using grid / masonry or timeline layout.
    • padding_right - Accepts a pixel value. For example, 5px. Sets the right padding for the blog text when using grid / masonry or timeline layout.
    • padding_bottom - Accepts a pixel value. For example, 5px. Sets the bottom padding for the blog text when using grid / masonry or timeline layout.
    • padding_left - Accepts a pixel value. For example, 5px. Sets the left padding for the blog text when using grid / masonry or timeline 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.
    • id - Add a custom id to the wrapping HTML element for further css customization.

    Fusion Builder Button Element

    Button

    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

    Copy to Clipboard
      • 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.
      • class - Add a custom class to the wrapping HTML element for further css customization.
      • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.

      Fusion Builder Chart Element

      Chart

      The Chart element lets you display amazing chart types such as Bar, Horizontal Bar, Line, Pie, Doughnut, Radar, or Polar Area that are perfect for displaying statistics and data on the page. View its parameters below. Click here to see the Chart Element in action!

      Available Element Parameters

      Copy to Clipboard

      Parent Settings

        • title - Insert text that will be displayed as title for the chart. The chart title utilizes all the H4 typography settings in Theme Options except for top and bottom margins.
        • chart_type - Choose from bar, horizontalBar, line, pie, doughnut, radar, or polarArea. Sets the chart type to be used.
        • chart_legend_position - Choose from top, right, bottom, left, or off. Sets the chart legend position.
        • x_axis_label - Insert custom text for X axis label.
        • y_axis_label - Insert custom text for Y axis label.
        • show_tooltips - Choose from default, yes, or no. Set whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.
        • chart_border_type - Choose from smooth, non_smooth, or stepped. Sets the border type for line charts.
        • chart_fill - Choose from start, end, origin, or off. Sets how line chart should be filled.
        • chart_point_style - Choose from circle, cross, crossRot, dash, line, rect, rectRounded, star, or triangle. Sets the point style for line charts.
        • chart_point_size - Accepts a numeric value from 0 to 20. For example, 3. Sets the point size for line charts.
        • chart_point_bg_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the point background color for line charts.
        • chart_point_border_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the point border color for line charts.
        • chart_bg_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background of the chart.
        • padding_top - Accepts a pixel value. For example, 5px. Sets the top padding of the chart.
        • padding_right - Accepts a pixel value. For example, 5px. Sets the right padding of the chart.
        • padding_bottom - Accepts a pixel value. For example, 5px. Sets the bottom padding of the chart.
        • padding_left - Accepts a pixel value. For example, 5px. Sets the left padding of the chart.
        • chart_axis_text_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the text color of the x-axis and y-axis.
          • chart_gridline_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the chart background grid lines and values.
          • x_axis_labels - Insert text for the data set. If multiple values, separate them by using | as delimiter. For example, Val 1|Val 2|Val 3. Sets the x-axis labels.
          • legend_text_colors - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #ffffff|#ffffff|#ffffff. Sets the legend text color.
          • bg_colors - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #00bcd4|#8bc34a|#ff9800. Sets the background color of the legend and chart values.
          • border_colors - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #00bcd4|#8bc34a|#ff9800. Sets the border color of the chart values.
          • chart_border_size - Accepts a numerical value. For example, 4. Sets the border size of the chart values.
          • 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 - Insert text that will be displayed as title for the data set.
            • legend_text_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the legend text color.
            • background_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color of the chart values and the legend.
            • border_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the border color of the chart values.
            • values - Insert values for the data set. If multiple values, separate them by using | as delimiter. For example, 5|10|15.

            Fusion Builder Checklist Element

            Checklist

            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

            Copy to Clipboard
            • 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
            • 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.
            • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.

            Fusion Builder Code Block Element

            Codeblock

            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

            Copy to Clipboard

            Fusion Builder Columns

            Columns

            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

            Copy to Clipboard
              • 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.
              • layout - 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 layout of the column.
              • spacing - Accepts a percentage or numerical value. For example, 20 or 14%. Sets the margin added to the column.
              • 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.
              • link - The URL path you want the column to direct to when clicked. For example, http://www.example.com/.
              • target - Choose from _self or _blank. _self = open in same browser tab, _blank = open in new browser. Tab. Sets how you want the link to open.
              • 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.
              • 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 background color of the column.
              • background_image - The URL path of your background image. 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.
              • background_repeat - Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
              • hover_type - Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
              • 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.
              • 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_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.
              • id - Add a custom id to the wrapping HTML element for further css customization.

              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

              Copy to Clipboard
                • 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.
                • hundred_percent_height - Choose from yes, or no. Sets if the container should be fixed to 100% height of the viewport.
                • hundred_percent_height_scroll - Choose from yes, or no. Sets the container to a collection of 100% height containers that share scrolling navigation.
                • hundred_percent_height_center_content - Choose from yes, or no. Sets to center the content vertically on 100% height containers.
                • 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_webm - The URL path of your WebM video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
                  • video_ogv - The URL path of your OGV video file. This is optional.
                  • 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.
                  • 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.
                  • 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.
                  • padding_top - Accepts a numerical value. For example, 20. Sets the top padding.
                  • padding_right - Accepts a numerical value. For example, 20. Sets the right 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.
                  • 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

                  Copy to Clipboard

                  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.
                  • columns - Choose from 1 - 6. Sets the number of columns per row.
                  • title_size - Accepts a pixel value. For example, 5px. Sets the title's font size.
                  • heading_size - Choose from 1, 2, 3, 4, 5, or 6. Sets the title size, H1-H6.
                  • 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.
                  • 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.
                  • 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.
                  • 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_type - Choose from default, text, button-bar, or button. Sets the link type displayed on the content box.
                  • button_span - Choose from default, yes, or no. Set to have the button span the full width.
                  • 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.
                  • 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.

                  Convert Plus ElementBack To Top

                  The Convert Plus element lets you add professional modal, info bar, or slide in that will help you generate more leads and get more email subscribers. You must first create modals, info bars, or sliders using the Convert Plus plugin. View its parameters below.

                  Available Element Parameters

                  Copy to Clipboard
                    • convert_plus_module - Choose from modal, info_bar, or slide_in. Sets the module you want to use.
                    • modal_id - Add the id of the Modal you want to use.
                    • slide_in_id - Add the id of the Slide In you want to use.
                    • info_bar_id - Add the id of the Info Bar you want to use.
                    • display - Choose from trigger or inline.
                    • custom content - Insert the Convert Plus' content between the [fusion_convert_plus][/fusion_convert_plus]

                      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

                    Copy to Clipboard
                      • 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

                        Copy to Clipboard

                        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 - A font awesome icon value. For example, fa-glass.
                          • 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
                                Copy to Clipboard

                                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

                              Copy to Clipboard

                              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
                                    Copy to Clipboard

                                    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

                                  Copy to Clipboard
                                    • 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
                                      Copy to Clipboard

                                      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

                                      Copy to Clipboard
                                      • cat_slug - The slug name of the events category you'd like to display. Use a comma for multiple categories.
                                      • past_events - Choose from yes or no. Set to yes if you want the past events to be displayed.
                                      • 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.
                                      • column_spacing - Accepts a numerical value. For example, 3. Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing.
                                      • 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.
                                      • padding_top - Accepts a pixel value. For example, 5px. Sets the top padding for the event contents.
                                      • padding_right - Accepts a pixel value. For example, 5px. Sets the right padding for the event contents.
                                      • padding_bottom - Accepts a pixel value. For example, 5px. Sets the bottom padding for the event contents.
                                      • padding_left - Accepts a pixel value. For example, 5px. Sets the left padding for the event contents.
                                      • content_length - Choose between default, no_text, excerpt, or full_content. Sets how to display the post excerpt.
                                      • excerpt_length - Accepts a numerical value. For example, 30. Sets the number of words/characters you want to show in the excerpt.
                                      • strip_html - Choose from default, yes, or no. Allows you to strip HTML from the post excerpt.
                                      • pagination - Choose between no, 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.

                                      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

                                      Copy to Clipboard
                                        • 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.
                                        • orderby - Choose from date, title, menu_order, name, author, comment_count, modified, or rand. Sets the FAQs order.
                                        • order - Choose between DESC or ASC. Sets the FAQs’ sorting order.
                                        • type - Choose from default, toggles, or accordions. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
                                        • boxed_mode - Choose from default, yes, or no. Provides the options to have a boxed layout for your FAQs.
                                        • border_size - Provides the option to set a pixel size for the border width for FAQ item.
                                        • border_color - Accepts a hexcode ( #000000 ). Sets the border color for FAQ item.
                                        • background_color - Accepts a hexcode ( #000000 ). Sets the background color for FAQ item.
                                          • hover_color - Accepts a hexcode ( #000000 ). Sets the background hover color for FAQ item.
                                          • divider_line - Choose from default, yes, or no. Choose to display a divider line between each item.
                                          • icon_size - Accepts a pixel value. For example, 5px. Sets the icon’s size.
                                          • icon_color - Accepts a hexcode ( #000000 ). Sets the icon’s color.
                                          • icon_boxed_mode - Choose from default, yes, or no. Choose to display icon in boxed mode.
                                          • icon_alignment - Choose from default, left, or right. Sets the FAQ 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.

                                          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

                                          Copy to Clipboard

                                          Parent Settings

                                            • columns - Choose from 1 - 6. Sets the number of columns per row.
                                            • 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.
                                            • 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
                                                  Copy to Clipboard

                                                  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

                                                Copy to Clipboard
                                                  • 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.
                                                  • margin_top - Accepts a pixel value. For example, 5px. Sets the top margin.
                                                  • margin_right - Accepts a pixel value. For example, 5px. Sets the right margin.
                                                  • margin_bottom - Accepts a pixel value. For example, 5px. Sets the bottom margin.
                                                  • margin_left - Accepts a pixel value. For example, 5px. Sets the left margin.
                                                    • 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

                                                    Copy to Clipboard
                                                      • 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

                                                      Copy to Clipboard
                                                      • 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
                                                      • column_spacing - Set the the desired space between your gallery images without px. e.g. 10
                                                      • gallery_masonry_grid_ratio - Accepts a numerical value. For example, 1.5. Set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width).
                                                      • gallery_masonry_width_double - Accepts a pixel value. For example, 2000px. This option decides when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts.
                                                      • hover_type - Set if your images will have a hover animation. Choose from: none, zoomin, zoomout and liftup
                                                      • lightbox - Choose if you want to open the images in a lightbox on click. Choose from: yes or no
                                                      • lightbox_content - Choose from default, titles, title_and_caption, or none. Choose if titles and captions will display in the lightbox.
                                                      • bordersize - Accepts a pixel value. For example, 2px. Sets the gallery image border size.
                                                      • bordercolor - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the gallery image border color.
                                                      • border_radius - Accepts a pixel value or round. For example, 1px. Sets the gallery image border radius.
                                                      • 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

                                                      Copy to Clipboard
                                                        • 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 ( 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

                                                          Copy to Clipboard
                                                            • 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
                                                              Copy to Clipboard

                                                              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 ElementBack To Top

                                                            The Image 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. Note: Image Element was previously called Image Frame Element.

                                                            Click here to see the Image Frame Element in action!

                                                            Available Element Parameters

                                                            Copy to Clipboard
                                                              • 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
                                                                  Copy to Clipboard

                                                                  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 Before & After ElementBack To Top

                                                                The Image Before & After Element lets you compare two images by adding before image and after image on your page. You can choose “Slide” effect which provides a handle to move back and forth the two images while “Fade” effect changes the image on mouse hover.

                                                                Available Element Parameters

                                                                Copy to Clipboard
                                                                  • type - Choose from default, slide, or fade. Sets which type of effect your before and after image uses. "Slide" provides a handle to move back and forth while "Fade" changes the image on mouse hover.
                                                                  • before_image - The URL path of your before image. For example, http://www.sample.com/image.jpg.
                                                                  • before_label - Insert text that will be displayed as a label on the before image when hovered. If left empty, no label will show.
                                                                  • after_image - The URL path of your after image. For example, http://www.sample.com/image.jpg.
                                                                  • after_label - Insert text that will be displayed as a label on the after image when hovered. If left empty, no label will show.
                                                                  • font_size - Accepts a pixel value. For example, 12px. Sets the font size of the label text.
                                                                  • accent_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the label background and text. Text takes 100% of this color, background takes a % of it.
                                                                  • label_placement - Choose from default, image-centered, image-up-down, or out-image-up-down. Sets whether labels are on top of the image and centered, on top of the image up & down, or outside of the image up & down.
                                                                  • transition_time - Accepts a numeric value from 0.0 to 1.0 in seconds. For example, 0.5. Sets the speed of the fade transition on mouse hover.
                                                                  • handle_type - Choose from default, square, rectangle, arrows, diamond, or circle. Sets the design of the handle used to change the before and after image.
                                                                  • handle_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the before and after image handle line and arrows.
                                                                    • handle_bg - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color of the before and after image handle switch.
                                                                    • offset - Accepts a numeric value from 0 to 100 in percentage. Sets where the handle will be positioned on page load allowing you to control how much of each image displays by default.
                                                                    • orientation - Choose from default, horizontal, or vertical. Sets the position of the before and after image handle.
                                                                    • handle_movement - Choose from default, drag_click, drag, or hover. Sets how the viewer interacts with the image handler.
                                                                    • 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.

                                                                    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

                                                                    Copy to Clipboard

                                                                    Parent Settings

                                                                      • Bulk Image Upload - This 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.

                                                                          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

                                                                          Copy to Clipboard
                                                                            • 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

                                                                            Copy to Clipboard
                                                                              • type - Choose from image or video. Set what you want to display in the lightbox.
                                                                              • full_image - The URL path of the image you’d like to display in a lightbox. For example, http://www.sample.com/image.jpg
                                                                              • video_url - The URL path of the YouTube or Vimeo Video you’d like to display in a lightbox. For example, http://youtube.com/watch?v=X92mpPz1COM
                                                                              • thumbnail_image - The URL path of the thumbnail image that will trigger the lightbox. For example, http://www.sample.com/image.jpg
                                                                                • alt_text - The alternate text in case the image cannot be viewed.
                                                                                • description - The text that will show up in the lightbox as a description below the image.
                                                                                • 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

                                                                                Copy to Clipboard
                                                                                  • 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

                                                                                  Copy to Clipboard
                                                                                    • 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
                                                                                        Copy to Clipboard

                                                                                        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

                                                                                      Copy to Clipboard
                                                                                        • name - The unique identifier of the Modal Element you've created. Learn more here.
                                                                                        • custom content - Insert the modal's content between the
                                                                                          Copy to Clipboard

                                                                                          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

                                                                                        Copy to Clipboard

                                                                                        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

                                                                                        Copy to Clipboard
                                                                                          • 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

                                                                                          Copy to Clipboard
                                                                                            • 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
                                                                                                Copy to Clipboard

                                                                                                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

                                                                                              Copy to Clipboard
                                                                                                • 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
                                                                                                    Copy to Clipboard

                                                                                                    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

                                                                                                  Copy to Clipboard
                                                                                                    • 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.
                                                                                                    • grid_box_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color for the grid boxes. For grid layout this option will only work in boxed mode.
                                                                                                    • grid_element_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of borders/date box/timeline dots and arrows for the grid boxes.
                                                                                                    • grid_separator_style_type - Choose from default, none, single|solid, double|solid, single|dashed, double|dashed, single|dotted, double|dotted, or shadow. Sets the line style of grid separators.
                                                                                                    • grid_separator_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line style color of grid separators.
                                                                                                    • 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, or floated. 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.
                                                                                                    • equal_heights - Choose from yes or no. Set to yes to display grid boxes with equal heights per row.
                                                                                                    • number_posts - Accepts a numerical value. For example, 7. Sets how many portfolio posts to display on the page.
                                                                                                    • 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.
                                                                                                    • padding_top - Accepts a numerical value. For example, 5px. Sets the portfolio text layout’s top padding for boxed layout.
                                                                                                    • padding_right - Accepts a numerical value. For example, 5px. Sets the portfolio text layout’s right padding for boxed layout.
                                                                                                    • padding_bottom - Accepts a numerical value. For example, 5px. Sets the portfolio text layout’s bottom padding for boxed layout.
                                                                                                    • padding_left - Accepts a numerical value. For example, 5px. Sets the portfolio text layout’s left 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.

                                                                                                      • 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.
                                                                                                      • orderby - Choose from date, title, menu_order, name, author, comment_count, modified, or rand. Sets the portfolios’ order.
                                                                                                      • order - Choose between DESC or ASC. Sets the portfolios’ sorting order.
                                                                                                      • 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

                                                                                                      Copy to Clipboard
                                                                                                        • 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

                                                                                                          Copy to Clipboard
                                                                                                            • 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.
                                                                                                            • background_color_hover - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table background hover 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.
                                                                                                            • heading_color_style_1 - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table's style 1 headings color.
                                                                                                            • heading_color_style_2 - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table's style 2 headings color.
                                                                                                            • pricing_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table price text color.
                                                                                                            • body_text_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table body text 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.
                                                                                                              • - Choose from left or right. Sets the currency position.
                                                                                                              • 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
                                                                                                                Copy to Clipboard

                                                                                                                tags.

                                                                                                              • custom content - Insert the footer's content between the
                                                                                                                Copy to Clipboard

                                                                                                                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

                                                                                                              Copy to Clipboard
                                                                                                                • 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
                                                                                                                    Copy to Clipboard

                                                                                                                    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

                                                                                                                  Copy to Clipboard
                                                                                                                    • 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.
                                                                                                                    • meta_author - Choose from yes or no. Set to yes to show the author name.
                                                                                                                      • meta_categories - Choose from yes or no. Set to yes to show the categories.
                                                                                                                      • meta_date - Choose from yes or no. Set to yes to show the date.
                                                                                                                      • meta_comments - Choose from yes or no. Set to yes to show the comment count.
                                                                                                                      • meta_tags - Choose from yes or no. Set to yes to show the

                                                                                                                        tags.

                                                                                                                      • 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

                                                                                                                      Copy to Clipboard
                                                                                                                        • 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

                                                                                                                        Copy to Clipboard
                                                                                                                          • divider_type - Choose from triangle, slant, bigtriangle, rounded-split, curved, big-half-circle, or clouds. Sets the style of the section separator.
                                                                                                                          • divider_position - 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

                                                                                                                            Copy to Clipboard
                                                                                                                              • 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

                                                                                                                                Copy to Clipboard
                                                                                                                                  • 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

                                                                                                                                    Copy to Clipboard

                                                                                                                                    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
                                                                                                                                          Copy to Clipboard

                                                                                                                                          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

                                                                                                                                        Copy to Clipboard
                                                                                                                                          • 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

                                                                                                                                            Copy to Clipboard
                                                                                                                                              • 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.

                                                                                                                                                Syntax Highlighter ElementBack To Top

                                                                                                                                                The Syntax Highlighter Element lets you choose a code language and display your codeblock in the frontend of your website. You can also allow your visitors to easily copy your code with a click of the button. View its parameters below.

                                                                                                                                                Available Element Parameters

                                                                                                                                                Copy to Clipboard
                                                                                                                                                  • theme - Choose from default, elegant, hopscotch, or oceanic-next. Sets the theme you want to use for code highlighting.
                                                                                                                                                  • language - Choose from x-sh, css, conf, diff, html, htm, http, javascript, json, jsx, x-less, md, patch, x-php, phtml, x-sass, x-scss, sql, svg, txt, xml, yaml, or yml. Sets the language the code is in.
                                                                                                                                                  • line_numbers - Choose from default, yes, or no. Displays or hides the line numbers.
                                                                                                                                                  • line_wrapping - Choose from default, scroll, or break. Sets whether the long line should break or add horizontal scroll.
                                                                                                                                                  • copy_to_clipboard - Choose from default, yes, or no. Allows your visitors to easily copy your code with a click of the button.
                                                                                                                                                  • copy_to_clipboard_text - Insert custom text to be displayed for user to click to copy. Leave empty for default value of "Copy to Clipboard".
                                                                                                                                                  • font_size - Accepts a pixel value. For example, 14px Sets the syntax highlight code's font size.
                                                                                                                                                  • border_size - Accepts a pixel value. For example, 1px. Sets the syntax highlighter's border size.
                                                                                                                                                  • border_color - Accepts a hexcode ( #000000 ) or RGB ( rgb(0,0,0) ). Sets the border color.
                                                                                                                                                  • border_style - Choose from default, solid, dashed, or dotted. Sets the border style.
                                                                                                                                                  • background_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color for code highlight area.
                                                                                                                                                    • line_number_background_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line number background color for code highlight area.
                                                                                                                                                    • line_number_text_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line number text color for code highlight area.
                                                                                                                                                    • margin_top - Accepts a pixel value. For example, 5px. Sets the top margin of the syntax highlighter.
                                                                                                                                                    • margin_left - Accepts a pixel value. For example, 5px. Sets the left margin of the syntax highlighter.
                                                                                                                                                    • margin_bottom - Accepts a pixel value. For example, 5px. Sets the bottom margin of the syntax highlighter.
                                                                                                                                                    • margin_right - Accepts a pixel value. For example, 5px. Sets the right margin of the syntax highlighter.
                                                                                                                                                    • 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

                                                                                                                                                    Copy to Clipboard
                                                                                                                                                      • type - Choose from 'Style 1' or 'Style 2' to set the table’s design. This is represented as the HTML class ->
                                                                                                                                                        Copy to Clipboard

                                                                                                                                                        Column 0 Value. Insert the column heading between the

                                                                                                                                                        Copy to Clipboard

                                                                                                                                                        tags and insert the column content between the

                                                                                                                                                        Copy to Clipboard

                                                                                                                                                        tags.

                                                                                                                                                        Number of
                                                                                                                                                        Copy to Clipboard

                                                                                                                                                        and

                                                                                                                                                        Copy to Clipboard

                                                                                                                                                        depends on the number of columns you will set.

                                                                                                                                                      • table - Table content set from type and number of columns will appear here and allows you to modify the column values.

                                                                                                                                                      Tabs ElementBack To Top

                                                                                                                                                      The Tabs 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 Tabs Element is considered a Child Element. To learn more about Child Elements, click here.

                                                                                                                                                      Available Element Parameters

                                                                                                                                                      Copy to Clipboard

                                                                                                                                                      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.
                                                                                                                                                        • icon - A font awesome icon value. For example, fa-glass.
                                                                                                                                                        • icon_position - Choose from default, left, right, or top. Sets the icon’s position on the tab.
                                                                                                                                                        • icon_size - Accepts a numerical value. For example, 5. Sets the icon’s size.
                                                                                                                                                          • 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
                                                                                                                                                              Copy to Clipboard

                                                                                                                                                              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

                                                                                                                                                            Copy to Clipboard
                                                                                                                                                              • 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
                                                                                                                                                                  Copy to Clipboard

                                                                                                                                                                  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.

                                                                                                                                                                Testimonials ElementBack To Top

                                                                                                                                                                The Testimonials 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 Testimonials Element is considered a Child Element. To learn more about Child Elements, click here.

                                                                                                                                                                Available Element Parameters

                                                                                                                                                                Copy to Clipboard

                                                                                                                                                                Parent Settings

                                                                                                                                                                • design - Choose from classic, or clean. Sets the testimonial's design.
                                                                                                                                                                • navigation – Show or Hide navigation bullets.
                                                                                                                                                                • speed - Sets the speed of the testimonial slider. ex: 1000 = 1 second. IMPORTANT: Setting speed to 0 will disable autoplay for testimonials slider.
                                                                                                                                                                • 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
                                                                                                                                                                      Copy to Clipboard

                                                                                                                                                                      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

                                                                                                                                                                    Copy to Clipboard
                                                                                                                                                                    • custom content - Insert the custom text content between the
                                                                                                                                                                      Copy to Clipboard

                                                                                                                                                                      tags.

                                                                                                                                                                    • columns - The amount of columns you’d like your text split across. For example, columns=”1″ (Maximum = 6).
                                                                                                                                                                    • column_min_width – You can set the minimum width of each column using “px” values. For example, column_min_width=”300″.
                                                                                                                                                                    • column_spacing – You can choose how much spacing to give between each column in “em” value. For example column_spacing=”4em”.
                                                                                                                                                                    • 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.
                                                                                                                                                                    • rule_style – Allows you to select the style of column separator to use. For example, rule_style=”solid” will give you a solid line, whereas rule_style=”dotted” will give you a dotted rule between columns.
                                                                                                                                                                    • rule_size – Set the width of the column separator between columns. For example, rule_size=”1″ gives a 1px wide rule.
                                                                                                                                                                    • rule_color – Sets the colour of the column separator between columns, accepts Hex code values (#000000).
                                                                                                                                                                    • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to the documentation section.
                                                                                                                                                                    • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to the documentation section.

                                                                                                                                                                    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

                                                                                                                                                                    Copy to Clipboard
                                                                                                                                                                    • custom content - Insert the custom title between the
                                                                                                                                                                      Copy to Clipboard

                                                                                                                                                                      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.
                                                                                                                                                                    • font_size - Controls the font size of the title. Enter value including any valid CSS unit, ex: 20px.
                                                                                                                                                                    • line_height - Controls the line height of the title. Enter any valid CSS unit, ex. 28px.
                                                                                                                                                                    • letter_spacing - Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px.
                                                                                                                                                                    • color - Controls the color of the title, ex: #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used.
                                                                                                                                                                    • 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

                                                                                                                                                                    Copy to Clipboard

                                                                                                                                                                    Parent Settings

                                                                                                                                                                    • type - Choose from default, toggles, or accordions. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
                                                                                                                                                                    • 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.
                                                                                                                                                                    • title_font_size - Accepts any valid CSS unit. For example, 13px. Sets the size of the title.
                                                                                                                                                                    • icon_size - Accepts a numerical value. For example, 5. Sets the icon’s size.
                                                                                                                                                                    • icon_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the icon's color in toggle box.
                                                                                                                                                                    • icon_boxed_mode - Choose from default, yes, or no. Sets to display icon in boxed mode.
                                                                                                                                                                    • icon_box_color - Accepts a hexcode ( #000000 ). Sets the color of the inactive toggle box.
                                                                                                                                                                    • icon_alignment - Choose from default, left, or right. Sets the toggle icon's alignment.
                                                                                                                                                                    • toggle_hover_accent_color - Accepts a hexcode ( #000000 ). Sets the accent color on hover for icon box and title.
                                                                                                                                                                    • 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.

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

                                                                                                                                                                    Available Element Parameters

                                                                                                                                                                    Copy to Clipboard
                                                                                                                                                                          • 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

                                                                                                                                                                                Copy to Clipboard
                                                                                                                                                                                      • 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

                                                                                                                                                                                            Copy to Clipboard
                                                                                                                                                                                                  • 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

                                                                                                                                                                                                        Copy to Clipboard
                                                                                                                                                                                                              • 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

                                                                                                                                                                                                                    Copy to Clipboard
                                                                                                                                                                                                                          • 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

                                                                                                                                                                                                                                Copy to Clipboard
                                                                                                                                                                                                                                  • name - The name of the Widget Section you'd like to display.
                                                                                                                                                                                                                                  • title_size - Accepts a pixel value. For example, 5px. Sets the title’s font size.
                                                                                                                                                                                                                                  • title_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of widget titles.

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