The Widget Area element is available for both the header and footer builder. The Widget Area allows you to pick one of the available sidebars to display in your header and as X supports unlimited sidebars you could create specific sidebars within your wp-admin to output to your header.
Click on Add and then click on the Widget Area element to add it your header. You should then see something like this:
Click on the Magnifying glass icon to open the inspector for the Widget Area which will render the available controls like this:
Like other Elements, controls are split up into multiple sections for the Widget Area element those sections are:
Clicking on a specific link will take you to those controls. First of all you'll be on the Widget Area section. The controls available within the Widget Area section are:
Widget Area Setup
The controls within the Widget Area Setup consist of:
- Sidebar - Pick which sidebar you'd like to use for the widget area. Outputs all widgets within that sidebar.
- Base Font Size - The font size which will be used for the widgets.
- Background - The background color to be used for the widget area.
Widget Area Margin
The Widget Area Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Widget Area Padding
The Widget Area Padding controls consist of:
- Link Sides - Link sides allows you to link up every option within the padding controls so when you change one value all values change. Or you can unlink sides and set each padding option individually.
- Top - Sets the top margin.
- Right - Sets the right margin.
- Bttm - Sets the bottom margin.
- Left - Sets the Left margin.
Widget Area Border
The Widget Area Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Widget Area Border Radius
The Widget Area Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Widget Area Box Shadow
The Widget Area Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Lastly are the available controls within the Customize section. If you click on Customize You should see the available controls like this:
The available controls within the Customize section are:
The Setup controls consist of:
- ID - A custom ID you want to assign for use with custom CSS.
- Class - A custom class you want to assign for use with custom CSS.
- Hide During Breakpoints - Select different screen sizes you want to disable the output of the specific element on. Perfect for creating custom responsive headers.