Widget Area Element

Legacy Doc

Last Update: April 16, 2024

Not to be confused with the Widget Element, the Widget Area Element allows you to display a premade widget area anywhere in your content.

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 = A predefined section that displays a collection of widgets.

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

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Widget Area Element

Before using this element, you need to set up your widget areas. See the links at the bottom of this document for help with that. Once you have your widget areas ready, it’s time to add the element, To start, simply add the element to your desired column.

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.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Options > Avada 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.

HeadingDescription
Widget Area NameChoose the name of the widget area to display.
Widget Title SizeControls the size of widget titles. In pixels ex: 18px.
Widget Title ColorControls the color of widget titles.
Background ColorChoose a background color for the widget area.
PaddingIn pixels or percentage, ex: 10px or 10%.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.