Top, Bottom & Sidebar

Configure the layout and appearance of the widget areas of your WordPress website.

The top, bottom and sidebar areas come with their own settings that control their layout and appearance. 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.

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.

Options 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.
Gutter Set the padding between sidebar and content.
Divider Display a divider between sidebar and content.

Important The sidebar area is not rendered on static pages built with the YOOtheme Pro page builder, even if a widget is published in the sidebar. This is because the YOOtheme Pro page builder allows you to create full-width sections where the sidebar needs to be placed within the layout of these sections. This can be done using the Widget Area element in the page builder. Each Widget Area element has its own settings. This allows you to have separate sidebar layouts on different pages.

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.

Options 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.
Width Set the maximum content width.
Height Define the height relative to the viewport.
Padding Set the padding or remove top and bottom padding.
Transparent Header Change the style of the navbar so that it overlays this section. This applies only to the first section on the page.
Grid Gutter Set the grid gutter width and display dividers between grid cells.
Vertical Alignment Choose whether to vertically center grid cells when a height is set.
Panels Define the height relative to the viewport.
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.

There are a number of advantages of using the Builder Widget:

  • More layout options for sections and rows are available.
  • Widgets can be arranged in multiple sections.
  • Separate Builder Widgets, each with its own settings on different pages, are possible.

YOOtheme Pro