Layout Manager allowing you to build a flexible layout based on module positions. Layout Builder is one of the unique features of Helix Ultimate which allows anyone to customize the existing template in almost any shape without code customization.

Layout Grid

Helix Ultimate Layout is based on a 12 column layout from Bootstrap 4. It includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes.

You can choose columns preset or set your own grid. The grid system is responsive, and the columns will re-arrange depending on the screen size.

• In the current version of Helix Ultimate you can use Predefined Headers. We’ve added 2 built-in header variations to Helix Ultimate that will enrich the scope and versatility of your sites created with the framework.
• Each Row can have its own column structure and unique settings.
• Icon with arrows allows you to change positions of rows by moving them up or down.
• Use the plus icon to add new Row, then choose column structure and select module position(s) used there. We also suggest to insert a short ID name for the new Row.

How to use module below/above component area

Yes, you can publish any module below or/and above component area. For this purpose, we created two built-in module positions: Content Top & Content Bottom
- just choose them from the list during the edition of any module. They are not visible in the visual Layout grid, but you can use them in all templates based on the Helix Ultimate framework.

How to create a custom header

By default, there are two predefined Headers. But any time you can disable this option and build your own custom header variation. Watch a video tutorial and read the text guide (step by step) which is below video clip.

1. Predefined Headers - Turn Off.
2. Click on (+) icon which should appear under the first row - to create a new row.
3. Grab new Row and move up above the row named "Page Title".
4. Click the gears icon to get into row options.
5. Inside field "Section Title" add name: header
6. Now you have to click click columns icon to set columns layout.
   Choose one from predefined or set your own. The popular basic settings are: 4+8 or 3+9.
   Less area reserved for the logo column - means that the presented logo would be smaller.
7. Then for each column choose the module position from list, for example, logo and menu*
8. Remember to Save changes to see results.
9. Later you can set a responsive grid for each column.
   There are five grid breakpoints, one for each responsive breakpoint.
   
   Notify that Logo would be taken from Helix Basic settings and Menu from Helix Mega Menu engine.

The sticky Header feature can be used also for custom header. But remember to use the "header" name for "logo+menu" row !

* If you want to use your own menu module instead from Helix, you have to choose different module position name, do not use "menu".  For example you can use name: "position2" or "feature" - where you have to publish your additional (mega)menu module.

Row Options

In Row Options you can:

• Insert section title (should be short, without extra languge 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 settings - allows to control of visibility of rows. You can hide Row on selected devices, related with screen resolution:
• Hidden on Smartphone - screen width less than 576px
• Hidden on Largen Smartphone - 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

Columns Options

• Make Component Area - Enable this option to make this column as a Component area. If you already selected component area for another column then unselect that one first then select this one. Joomla message section will also be loaded inside this column. Only one column in whole layout can be used for showing component.
• Module Position - Select any suitable module position from the list (below). Do not set this same module position to multiple position. Each should have unique name. Below is the list of all available module positions, which you can use in columns:
  • title
  • top1
  • top2
  • top3
  • logo
  • menu
  • search
  • slide
  • user1
  • user2
  • user3
  • user4
  • left
  • right
  • feature
  • slider
  • position1
  • position2
  • position3
  • position4
  • position5
  • position6
  • position7
  • position8
  • content-top
  • content-bottom
  • bottom1
  • bottom2
  • bottom3
  • bottom4
  • breadcrumb
  • footer1
  • footer2
  • comingsoon
  • offcanvas
  • pagebuilder
  • 404
  • debug

Above and below component area there are two module positions: content-top and content-bottom which can be used to publish there any module.

• Custom CSS Class - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.
• Grid - allows to control of responsive layout, it’s based on Bootstrap 4 grid system. There are five grid breakpoints, one for each responsive breakpoint. Grid breakpoints are based on minimum width media queries.
• Responsive settings - allows to control of visibility of columns. You can hide columns on selected devices, related with screen resolution:
• Hidden on Smartphone - screen width less than 576px
• Hidden on Largen Smartphone - 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