Layout Builder is a unique feature of Helix Ultimate which allows you to customize your existing Joomla template and build flexible layouts on module positions without code customization.
1. Layout Grid
Helix Ultimate includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It allows you to choose a column preset or set your own grid. The grid system is fully responsive, so the columns will display well on any screen size.
- As shown in the screenshot below, Helix Ultimate has 2 built-in header variations that will enrich the scope and versatility of your sites. However, you can also create your own custom header variation.
Each Row has its own column structure and settings. - Where there are arrow icons, you can change the position of the row.
- When you want to add a new row, just click the plus icon (+), then choose a column structure and select module position(s). You should insert ID name for the new Row.
Image by JoomShaper
Step-by-step guide to creating a custom header:
Watch the video tutorial below:
- To create a custom header, first turn off the Predefined Headers option.
- Click on the (+) icon to create a new row.
- Grab the new row and move it above the “Page Title” row.
- Click the gear icon to open the row options.
- Add name: header inside the “Section Title” field.
- To set the column layout, click the columns icon.
- Now you can set your own custom header or select a predefined one.
- Less area reserved for the logo column means that the logo will be smaller.
- In “Module position” option, choose a module position for each column.
- Save changes.
- Now you can set a responsive grid for each column.
- Each responsive breakpoint has a grid breakpoint.
Note:
– The logo is taken from Helix Basic settings, and the menu is taken from the Helix Mega Menu engine.
– If you want to use your own menu module, you have to choose a different module position name; do not use “menu“.
2. Row Options
What can you do in Row Options?
- Insert a section title (you should choose a short title without native-language marks)
- You can set Fluid Width
- Add Custom CSS Class Name
- It also allows you to define Row Style: margin, text color, padding, link color, link hover color, background color and background image.
- Hide Row on selected devices, based on screen resolution: Smartphone (screen width less than 576px), Large Smartphone (screen width equal to or greater than 576px), Tablet (screen width equal to or greater than 768px), Smaller Desktop (screen width equal to or greater than 992px), Desktop (screen width equal to or greater than 1200px).
3. Column Options
- Enable “Make Component Area” option to make this column the component area. The Joomla message section will also be loaded inside this column. Only one column in the whole layout can be used to show the component.
- Module Position: Choose a suitable module position from the list. Note: Do not assign the same module position to multiple columns. Here is the list of all available module positions:
° 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 the component area there are two module positions, content-top and content-bottom, which you can use to publish any module.
- Custom CSS Class – add a class name if you wish to style a particular content element differently
- Grid – this option allows you to control the responsive layout. There are five grid breakpoints, one for each responsive breakpoint.
- Responsive option: you can control the visibility of columns. Hide columns on selected devices, based on screen resolution: Smartphone (screen width less than 576px), Large Smartphone (screen width equal to or greater than 576px), Tablet (screen width equal to or greater than 768px), Smaller Desktop (screen width equal to or greater than 992px), Desktop (screen width equal to or greater than 1200px).
If you have any questions about this tutorial, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks!
