Top, Bottom & Sidebar
Configure the layout of the widget areas of your WordPress website.
The top, bottom and sidebar areas come with their own layout settings. These settings are the same for any page where a widget is published, which means they will look the same across all pages. A area is only visible if a widget is published in it on a specific page.
The following settings can be found in the Layout → Top, Layout → Bottom and Layout → Sidebar panel of YOOtheme Pro.
Top and Bottom
The top and bottom areas are used to publish widgets with any content in a section above and below the main content. There are separate panels for top and bottom in YOOtheme Pro, each containing the following settings.
| Option | Description |
|---|---|
| Style | Select a style modifier for the section. |
| Image | Set a background image for the area. |
| Video | Set a background video for the area. Once an image is selected, the video field is hidden and vice versa. |
| Text Color | Set light or dark color mode for text, buttons and controls. |
| Max Width | Set the maximum content width. |
| Height | Set a fixed height, and optionally subtract the header height to fill the first visible viewport. Alternatively, expand the height so the next section also fits the viewport, or on smaller pages to fill the viewport. |
| Padding | Set the padding or remove top and bottom padding. |
| Transparent Header | Make the header transparent and overlay this section if it directly follows the header. Optionally, pull content behind header. |
| Header Text Color | Force a light or dark color for text, buttons and controls on the image or video background. |
| Column Gap | Set the size of the gap between the grid columns. |
| Row Gap | Set the size of the gap between the grid rows. |
| Divider | Show a divider between grid columns. |
| Vertical Alignment | Choose whether to vertically center grid items when a height is set. |
| Panels | Stretch the panel to match the height of the grid cell. |
| Breakpoint | Set the breakpoint from which the sidebar and content will stack. |
Important If you publish the Builder Widget on the top or bottom area, all the settings stated above will be ignored. That's because the Builder Widget allows you to create multiple sections with each having their own settings.
Top/Bottom vs Builder Widget
If you need more advanced possibilities for the top and bottom positions, use the Builder Widget instead. There are a number of advantages of using the Builder Widget:
- Widgets can be arranged in multiple sections instead of just one.
- The
topandbottompositions can look different on separate pages, using multiple Builder Widgets, each with its own settings. - The builder offers more options for sections and rows compared to the
topandbottomsettings.
Learn more about the Builder Widget.
Sidebar
The sidebar area is a typical WordPress sidebar, which is often found in blogs. It comes with the following settings to control the layout and its appearance.
| Option | Description |
|---|---|
| Width | Set a sidebar width in percent, and the content will adjust accordingly. |
| Breakpoint | Set the breakpoint from which the sidebar and content will stack. |
| Order | Move the sidebar to the left of the content. |
| Gap | Set the padding between sidebar and content. |
| Divider | Display a divider between sidebar and content. |
Important The sidebar area is not rendered on pages built with the YOOtheme Pro page builder, even if a widget is published in the sidebar. This is because the builder allows you to build full-width sections where the sidebar needs to be placed within the layout of these sections. This can be done using the Area element in the page builder. Each Area element has its own settings. This allows you to have separate sidebar layouts on different pages.
