Widget Area Element
The Widget Area Element shows a complete widget area, with all the widgets in it, anywhere in your page layout. The widgets themselves are managed under Appearance > Widgets, so one change there updates every page that shows that area.
Use it to build a sidebar inside a page layout, to repeat a block of widgets on several pages, or to show the content of the footer or sliding bar widget areas in another place. The widget titles, background and spacing can be styled per element.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Widget Area Element
Add the Widget Area Element to a column and choose the area in Widget Area Name. The list contains every widget area registered on the site, including the ones you create with Add New Widget Area on the Appearance > Widgets screen.
Style the widget titles with Widget Title Size and Widget Title Color, give the area a Background Color, and set its Padding and Margin. The title size and color fall back to the Widget Area section of Global Options.
The element shows whatever widgets are in the chosen area at the time the page loads. If the area is empty, only the element’s own background and padding remain.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Widget Area. Change them there to style every Widget Area at once.
General
| Heading | Description |
|---|---|
| Widget Area Name | Choose the name of the widget area to display. |
| Widget Title Size | Controls the size of widget titles. In pixels for example 18px. |
| Widget Title Color | Controls the color of widget titles. |
| Background Color | Choose a background color for the widget area. |
| Padding | In pixels or percentage, for example 10px or 10%. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| 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. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Create a dedicated widget area for each purpose (for example “Product Sidebar”) instead of reusing the blog sidebar. That way changes to one page type do not affect another.
- To show just one widget, the Widget Element is simpler: it needs no widget area.
- Set the widget title size and color once in Global Options and leave the element fields empty, so all widget areas on the site look the same.
- Use Element Visibility to hide a sidebar-style widget area on small screens, where it would otherwise appear below the main content.