Layout
The Layout Builder in the Helix-based theme administration interface provides several options for setting up the layout of the template.
Last updated
The Layout Builder in the Helix-based theme administration interface provides several options for setting up the layout of the template.
Last updated
Layout Builder allowing you to build a flexible layout based on module positions. It is one of the unique features of Helix Ultimate which allows anyone to customize the existing template in almost any shape without code customization.
The following settings can be found in the Template Options → Layout panel.
Helix Ultimate Layout is based on a 12 column layout from Bootstrap 5. You can choose columns preset or set your own grid. We will take a look about the section and grid columns below.
The layout consists of several different sections, each with its own set of settings that enable you to customize the behavior and look of your site on the front end.
There are 04 existing sections added by default for WarpTheme Joomla Template: Page title, Main Body, Bottom and Footer section. Each with one or more grid columns on which you can place the module positions.
The Layout Concept:
Name
Description
Sections
Sections group content in larger visual blocks. Each with one or more horizontal grid columns
Row and Grid columns
Each Row can have its own column structure and unique settings.
Column
The column in which module position live.
Each column has its own settings that enable you to assign the module position and render the module content on the front-end.
Row Actions
Action
Description
Create or modify the grid columns.
The section settings give you the ability to change the section name, section width, style and responsive.
Delete a section, row including all its content.
Row Options
In Row Options you can:
Insert section name (should be short, without extra language native marks)
Set Fluid Width
Add Custom CSS Class Name
Define Row Style: margin, padding, text color, link color, link hover color, background color and choose background image.
Responsive - allows to control of visibility of rows. You can hide Row on selected devices, related with screen resolution:
Hidden on Phone - screen width less than 576px
Hidden on Larger Phone - screen width equal to or greater than 576px
Hidden on Tablet - screen width equal to or greater than 768px
Hidden on Smaller Desktop - screen width equal to or greater than 992px
Hidden on Desktop - screen width equal to or greater than 1200px
Column Options
Hover a column, and the action will appear in the right corner of the column. To change the column settings, just click the button option, like the screenshot below.
Choose an existing module position from the list then click Apply button to add a module position for column.
Grid (Column Options)
Grid - allows to control of responsive layout, it’s based on Bootstrap 5 grid system. There are five grid breakpoints, one for each responsive breakpoint. Grid breakpoints are based on minimum width media queries.
Responsive - allows to control of visibility of columns. You can hide columns on selected devices, related with screen resolution:
Hidden on Phone - screen width less than 576px
Hidden on Larger Phone - screen width equal to or greater than 576px
Hidden on Tablet - screen width equal to or greater than 768px
Hidden on Smaller Desktop - screen width equal to or greater than 992px
Hidden on Desktop - screen width equal to or greater than 1200px
Hover a section, and the plus button will appear right bellow to the existing section. To add a new section, click the plus button .
