Layout

The Layout Builder in the Helix-based theme administration interface provides several options for setting up the layout of the template.

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.

Layout Builder

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.

Layout

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.

Hover a section, and the plus button will appear right bellow to the existing section. To add a new section, click the plus button .

Row Actions

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

Layout 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.

Grid options

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