Widget Area Element


Not to be confused with the Widget Element released in Avada 6.2, there are 5 areas of the theme that are widget ready.

A Widget Area is set up by going to the Appearance > Widgets > Add New Widget Area section of your sites WordPress Dashboard. Once a Widget Area is created, you then assign your choice of widgets to the Widget Area, and these widgets will then be displayed wherever decided within the website.

Widget Area Element = Predefined section that displays a collection of widgets.

Widget Element = A widget, any widget, displayed anywhere on your site.

This displays a predefined Footer Widget Area set up, in the Dashboard > Appearance > Widgets section

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.