Modules

All you need to know about modules in YOOtheme Pro.

YOOtheme Pro offers a seamless integration of the Joomla Module Manager. In the Modules panel it is possible to edit and add modules without leaving YOOtheme Pro. It provides several module positions to create all kinds of complex layouts. New module settings are added to control their appearance, and there is a powerful Builder Module available.


Manage Modules

Thanks to the seamless integration of the Joomla Module Manager, it's possible to edit and add new modules directly in YOOtheme Pro.

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 current 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.

Click on a module to open a modal with the Edit Modules view from Joomla. This makes it easy to change module settings without leaving YOOtheme Pro. Scroll down to the bottom and click the New Module button to create a new module. For detailed information on how to Edit Modules in Joomla, please refer to the Joomla documentation.

Module manager


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 below the hidden mobile navigation, i.e. off-canvas, modal or dropdown. Find the mobile 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 links in the header of your website. Multiple modules are displayed next to each other in a row.

Modules published in the sidebar or mobile position will stack above each other.

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 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 YOOtheme Pro page builder.

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. A much more powerful approach is to publish a Builder Module instead. It allows you to access the full power of the YOOtheme Pro page builder and create 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. Learn more about the advanced layout techniques.


Module Settings

YOOtheme Pro adds a Template tab to the Joomla module settings with additional options. The availability of certain settings depends on the type of the module and the position where it is published.

Module settings


Default Settings

This setting is available for all module positions.

Setting Description
Visibility Display the module only on a specific device width and larger.

Appearance Settings

These settings are available for the sidebar, mobile, top and bottom positions.

Setting Description
Style Define whether the module looks like a card or whether the style is blank.
Title Style Title styles differ in font-size but may also come with a predefined color, size and font.
Title Decoration Decorate the title with a divider, bullet or a line that is vertically centered to the heading.
Alignment Center, left or right align the text.
Alignment Breakpoint Define the device width starting from which the alignment will apply.
Alignment Fallback Define an alignment fallback for device widths below the breakpoint.

Grid Settings

These settings are available for top and bottom positions.

Setting Description
Width Set the width of the grid column that contains the module in percent or choose Expand to fill up the available space evenly.
Max Width Set the module's maximum width.
Max Width Alignment Define the module's' alignment if the grid column is larger than its max-width.

List Settings

These settings are available only for modules which contain a list published on sidebar, mobile, top or bottom positions.

Setting Description
List Style Select whether the list items should be separated with dividers or not.
Link Style Use the default link color or the muted color.

These settings are available only for menu modules published on the sidebar, mobile, top or bottom position.

Setting Description
Menu Style Select whether the menu should be rendered as a horizontal subnav or a sidebar nav.

Builder Module

Instead of publishing modules directly in the top or bottom position, you can use the Builder Module to access the full power of the YOOtheme Pro page builder and create complex module layouts above and below the main system output.

The Builder Module is a regular Joomla module and needs to be published in the top or bottom position through the Joomla Module manager. This is because the YOOtheme Pro page builder allows you to create full-width sections, which only works in these two positions. Otherwise, an error message will appear.

Note The layout settings in Layout → Top and Layout → Bottom are ignored by the Builder Module because it allows you to create multiple sections with each of them having their own settings.

Builder module example

There is a walk-through video tutorial available, which will get you started.


Open the Builder

In the Modules panel of YOOtheme Pro there is a Builder button to the right of each Builder Module, which opens the YOOtheme Pro page builder.

Builder module

There is also an Open Builder button in the Edit Modules view from Joomla, so you can access the page builder directly without opening YOOtheme Pro. This comes in handy if users don't have access to the YOOtheme Pro theme settings.

Open builder module


Advanced Layout Techniques

If the created layout in the Builder Module has no output, it will automatically collapse, and the rest of the page will adapt accordingly. This is very powerful in combination with the Module and Position elements from the YOOtheme Pro page builder element library. They behave the same and collapse if they don't have any content output.

Collapsing layout

For example, you can create a complete layout using Position elements. Only if there are modules published on the selected positions, the layout will be rendered. Otherwise, it will completely collapse. Module page assignment and user permission are also taken into account.

Builder Positions

Note There are six builder-1 to builder-6 positions available for this use case which are not rendered anywhere else in the theme.

YOOtheme Pro