Module and Position Element

Create sophisticated page layouts with the integration of Joomla modules.

Module and Position elements in the YOOtheme Pro page builder allow you to render Joomla modules and their dynamic content anywhere in your page layout.

Go to the Builder panel of YOOtheme Pro and open the Element Library by clicking the white space with the plus icon where you want to add an element to the layout.

New Element

The Element Library will open in a lightbox. Look out for the Module and Position elements.

Module and position elements

Module Element

The Module element allows you to select an existing Joomla module and display it in the page layout. The following settings are available.

Setting Description
Panel Style Define whether the module should be blank or look like a card.
Title Style Define the style of the title. 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.
Title Color Select the text color. If the Background option is selected, styles that don’t apply a background image will use the primary color instead.

These settings apply only to modules which contain a list.

Setting Description
List Style Define whether the list items should be separated with dividers.
Link Style Choose between the default link color or a muted color.

This setting applies only to menu modules.

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

For more information, see the general element settings documentation.

Important The default module settings will be ignored.

Position Element

The Position element allows you to select an existing Joomla module position and display all its published modules within a grid in the page layout. The following settings are available.

Setting Description
Layout Select whether the modules should be aligned side by side or stacked above each other.
Gutter Set the grid gutter width and display dividers between grid cells.
Breakpoint Set the breakpoint starting from which grid cells will stack.
Vertical Alignment Vertically center grid cells.
Match height Stretch the panel to match the height of the grid cell.

For more information, see the general element settings documentation. The default module settings for each module are taken into account.

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

By default, sidebar modules are not rendered on static pages built with the YOOtheme Pro page builder because it allows you to build full-width sections. Therefore, a typical use case for the Position element is to render the sidebar position in any layout section. For more information on the sidebar position, read the sidebar documentation.

Sidebar position

Collapsing Layout

The Module and Position elements collapse if they don’t have any content output. There are several reasons why this might be the case.

  • There is no module or position selected by the element.
  • There is no module published and assigned to the selected position.
  • The module itself has no content output.
  • The module is not assigned to be visible on the current page.
  • The user has no permission to see the module.

If the Module or Position element is the only element in the column and it is not rendered, the column will collapse automatically, and the layout will adapt accordingly. If all columns in a row collapse, the row itself will collapse, too. If all rows in a section collapse, the section itself will collapse, too.

This concept is very powerful because it prevents empty layout parts when a module is not visible on the current page. It also allows you to create complex page layouts which will adapt automatically depending on the module settings.

Collapsing layout

Builder Module

Use the YOOtheme Pro page builder above and below the main system output by publishing a Builder Module on the top and bottom position.

Builder module

In combination with the Position element and its collapsing layout behavior it is possible to create complex module layouts above and below the main system output. It allows you to control the top and bottom layout depending on whether a module is visible on the current page or not. Learn more about advanced layout techniques.

Builder module

YOOtheme Pro