Widget Element

18/02/2020

The Widget Element is brand new in Avada 6.2, and offers you the ability to add a single widget directly into your page content, and edit it live on the page. Whereas the Widget Area Element adds a pre-populated Widget Area into your content, this Element allows you to add a single widget directly into your content and populate and configure it through the Element.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

How To Use The Widget Element

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Widget Element into. Click on Add new Element.

Step 3. Choose Widget from the Elements List.

Step 4. The General Tab is the place to choose the type of widget you want to add. Select you widget from the dropdown box. The widgets you see here will depend on what plugins you have installed and active. When you choose an element, any customizable fields for that widget will appear.

Step 5.  Customize the widget as desired. You can also set Element Visibility in this tab, or add a CSS Class or CSS ID to the instance of the element for further customisation with Custom CSS.

Step 6. The next step is to customize the design of the Widget. On the Design Tab, you will find a variety of styling options, from background color, radius, border and alignment options.

Step 7. Click Save when you are finished customizing your Widget. It will appear in the row of the Container you added it to. Preview the page to view, and you can always come back and edit the Widget to fine tune the look and function.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

General Tab

  • Widget – Choose the type of widget you’d like to add.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Display Widget Title – Choose to enable or disable the widget title. Specifically useful for WP’s default widget titles.

  • Padding – Controls the padding for this widget container. Enter value including any valid CSS unit, ex: 10px.

  • Margin – Controls the margin for this widget container. Enter value including any valid CSS unit, ex: 10px.

  • Background Color  – Controls the background color for this widget container.

  • Background Radius – Controls the background radius for this widget container.

  • Border Size – Controls the border size for this widget container.

  • Border Style – Controls the border style for this widget container. Choose from None, Solid, Dotted or Dashed.

  • Border Color – Controls the border color for this widget container.

  • Content Align – Controls content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.

  • Mobile Content Align – Controls mobile content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.

View The Options Screen

Global Options

There are no Global Options for the Widget Element.

Widget Element Parameters

Copy to Clipboard
  • type – The widget type. This includes WP Widgets, Avada widgets, and any third party widgets.

  • 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.
  • fusion_display_title – Choose whether to display the Widget title or no. Values are yes, and no. Especially useful for WordPress widgets.

  • fusion_padding_color – Controls the padding for this widget container. Enter value including any valid CSS unit, ex: 10px.

  • fusion_bg_color – Controls the background color for this widget container. Takes a hexadecimal or rgba value.

  • fusion_bg_radius_size – Controls the background radius for this widget container. Enter value in pixels.

  • fusion_border_size – Controls the border size for this widget container. Enter value in pixels.

  • fusion_border_style – Controls the border style for this widget container. Choose from solid, dotted or dashed.

  • fusion_border_color – Controls the border color for this widget container. Takes  a hexidecimal or rgba value.

  • fusion_margin_bottom – Spacing below the widget. Enter a value including any valid CSS unit, ex: 30px.

  • fusion_align – Controls content alignment for this widget container. Choose from inherit, left, right, or center. Inherit means it will inherit alignment from its parent element.

  • fusion_align_mobile – Controls mobile content alignment for this widget container. Choose from inherit, left, right, or center. Inherit means it will inherit alignment from its parent element.