Modules

All you need to know about modules in YOOtheme Pro.

The Joomla Module Manager is seamlessly integrated into YOOtheme Pro. Modules can be added, edited and deleted directly in the Modules panels without leaving YOOtheme Pro. There are several module positions that can be used to create all kinds of complex layouts.


Modules

The Modules panel shows a list of all module positions and their assigned modules. A gray dot next to a module indicates that this module is published on the page shown in the live preview. Hovering a module in the sidebar highlights its representation in the live preview with a blue border. An option to only display modules in the sidebar that are published and visible on the specific page is also available.

Modules panel

To edit a module, simply click on it. A modal with the Edit Modules view from Joomla will open. Here you can change the module's title, content and its options. YOOtheme Pro adds an additional Template tab containing a number of options to control the appearance and style of the module. A Delete button is also available in the upper right corner of the modal.


Add a New Module

In the Modules panel, scroll down to the bottom and click the New Module button to create a new module. A modal with the New Module view from Joomla will open. Alternatively, add a module in the Joomla module manager.

For a more detailed information about modules, refer to the Joomla documentation.


Module Positions

YOOtheme Pro comes with 8 available module positions where any number of modules can be published. Positions which are empty as well as published modules with no content output will automatically collapse, and the layout will adapt accordingly.

Position Description
toolbar-left toolbar-right These toolbar positions are located above the theme header. Find the toolbar settings in Layout → Site.
navbar header These are the two theme header positions. Find the header and navbar settings in Layout → Header.
mobile This position allows publishing modules in the mobile navigation, i.e. the off-canvas, modal or dropdown menu. Find the mobile header settings in Layout → Mobile.
sidebar This position allows publishing modules next to the main system output, e.g. a blog or a shop but not pages built with the YOOtheme Pro page builder. Find the sidebar settings in Layout → Sidebar.
top
bottom
These two positions allow publishing modules above and below the main system output, e.g. a blog, a shop or a static page. Find the top and bottom settings in Layout → Top and in Layout → Bottom.
builder-1 to builder-6 These six positions are reserved for the Position element in the YOOtheme Pro page builder. They are not rendered anywhere else in the theme.

Module positions

Toolbar and Header

The toolbar-left, toolbar-right, navbar and header positions are perfect for publishing a single line of text, a search, a language switcher, a shopping cart, different menus or social icons in the header of your website. Multiple modules are displayed next to each other in a row.

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 page builder allows building 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. Modules published in the sidebar position will stack above each other.

Mobile

The mobile position is only shown if the mobile header layout is enabled. It will show up in the modal, dropdown and offanvas modes when you click on the menu toggle. All modules published in the mobile module position will be stacked above each other under the mobile menu.

Top and Bottom

Modules published in the top or bottom position are displayed in a horizontal grid. By default, the modules fill up the available space evenly. For example, when publishing two modules, each of them will automatically use 50% of the available space. It's possible to create complex module layouts. Just set a different width for each module using the Width option in the module's settings. The breakpoint from which modules will stack above each other is set for medium device font-size, like tablets.

Important Publishing modules directly in the top or bottom position may suffice for simple use cases. Using a Builder Module instead will offer advanced possibilities and allow you to create more complex module layouts.

Builder 1 to 6

There are six builder-1 to builder-6 positions which are not rendered anywhere else in the theme. They are reserved to be used by the Position element from the page builder.

YOOtheme Pro