Top, Bottom & Sidebar
Configure the layout of the module positions of your Joomla website.
The top, bottom and sidebar positions come with their own layout settings. 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.
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.
| Option | 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. |
| 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 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.
Top/Bottom vs Builder Module
If you need more advanced possibilities for the top and bottom positions, use the Builder Module instead. There are a number of advantages of using the Builder Module:
- Modules can be arranged in multiple sections instead of just one.
- The
topandbottompositions can look different on separate pages, using multiple Builder Modules, each with its own settings. - The builder offers more options for sections and rows compared to the
topandbottomsettings.
Learn more about the Builder Module.
Sidebar
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.
| 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 position is not rendered on pages built with the YOOtheme Pro page builder, even if a module 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 Position element in the page builder. Each Position element has its own settings. This allows you to have separate sidebar layouts on different pages.
