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