Top, Bottom & Sidebar

Configure the layout and appearance of the module positions of your Joomla website.

The top, bottom and sidebar positions come with their own settings that control their layout and appearance. These settings are the same for any page where a module is published, which means they will look the same across all pages. A position is only visible if a module 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 position is a typical Joomla 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 position is not rendered on static pages built with the YOOtheme Pro page builder, even if a module 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 Module Position element in the page builder. Each Module Position element has its own settings. This allows you to have separate sidebar layouts on different pages.


Top and Bottom

The top and bottom positions are used to publish modules 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 position.
Video Set a background video for the position. 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 Module on the top or bottom position, all the settings stated above will be ignored. That's because the Builder Module allows you to create multiple sections with each having their own settings.

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

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

YOOtheme Pro