Module and Position Elements

Create sophisticated page layouts by integrating 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. Both elements collapse if they have no content output, and the layout adapts accordingly. Read more in the collapsing layouts documentation.

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.

Module element

Settings

Use the following options to define the appearance of the module element. There are also general and advanced element settings which are the same for all elements.

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 Font Family Define an alternative font family for the title.
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.

Note Since the appearance of the module is defined by the settings above, the module settings added by YOOtheme Pro are 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. There are six builder-1 to builder-6 positions available for the Position element which are not rendered anywhere else in the theme.

Position elements

Settings

Use the following options to define the appearance of the position element. There are also general and advanced element settings which are the same for all elements.

Setting Description
Layout Select whether the modules should be aligned side by side or stacked above each other.
Column Gap Set the size of the gap between the grid columns.
Row Gap Set the size of the gap between the grid rows.
Breakpoint Set the breakpoint starting from which grid items will stack.
Vertical Alignment Vertically center grid items.
Match Height Match the height of all modules which are styled as a card

Note The appearance of each module is defined by the module settings added by YOOtheme Pro.

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

YOOtheme Pro