Widget Area Element


Avada includes 5 areas of the theme that are widget ready, which means they can display widget areas. One of them is the Widget Area Element. Adding this element to any area on your page or post creates a custom widget area where you can assign any widget area. Before you can use the Widget Area Element, you must first create a Widget Area. Click the button below to learn how to create a Widget Area.

A footer widget added to the page via a Widget Area Element.

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

How To Use The Widget Area Element

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Insert a Container and select your desired column layout.

Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Widget Area’ element and click it to open the options window.

Step 4 – Select the widget area you’d like to display from the ‘Widget Area Name’ dropdown box. there are also a few other options you can configure.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Widget Area, and remember you can come back into the element to fine tune it.

Widget Area Element

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.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Widget Area Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

  • Widget Area Name – Choose the name of the widget area to display. This list will contain all your existing widgets.

  • Widget Title Size – Controls the size of widget titles. In pixels ex: 18px. Leave empty for the default value.

  • Widget Title Color – Controls the color of widget titles.

  • Background Color – Choose a background color for the widget area.

  • Padding – In pixels or percentage, ex: 10px or 10%.

  • 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 – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Social Links Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Widget Title Size – Controls the size of widget titles. In pixels. Enter value including any valid CSS unit, ex: 18px

  • Widget Title Color – Controls the color of widget titles.

View The Options Screen

Widget Area Element Parameters

Copy to Clipboard
  • name – The name of the Widget Area you’d like to display.
  • title_size – Accepts a pixel value. For example, 5px. Sets the title’s font size.
  • 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.