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.
The Element Library will open in a lightbox. Look out for the Module and Position elements.
The Module element allows you to select an existing Joomla module and display it in the page layout. The following settings are available.
|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.
|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.
|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.
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.
|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.|
Note There are six
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.
The Module and Position elements collapse if they don’t have any content output. There are several reasons why this might be the case.
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.
Use the YOOtheme Pro page builder above and below the main system output by publishing a Builder Module on the
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.