Layout | Helix Ultimate 2.0 - Documentation | JoomShaper

Helix Ultimate 2.0

Updated Last: 06 December 2021

Layout

Layout Manager allowing you to build a flexible layout based on module positions. Layout Builder is one of the unique features of Helix Ultimate 2.0 which allows webmasters 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 5. 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 9 built-in header variations to a template 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 the positions of rows by moving them up or down.
  • Use the plus icon to add a new Row, then choose column structure and select module position(s) used there. We also suggest inserting a short ID name for the new Row.
layout

 Available features (with related icons):

  • [6 dots] - it's a drag-and-drop area, put a mouse cursor over it and move the row below or above others.
  • [4 blocks] - it's a column layout selector, where you can change column structure inside the row based on twelve column system.
    Sorry, only one row is available by section. Choose one from predefined or set your own grid. Using Custom Layout remember that the summary of columns must be always 12. For example, you can insert: 6+6 or 3+3+6 or 4+4+4+4.
  • [basket/bin] - it allows you to delete a current row with all elements inside. 
  • [sliders] - Row Options from access to advanced settings: name, fluid width, custom CSS class, style settings, and responsive (hide that row).
  • [3 dots] - give access to Column Options, from there you can set this area as a component (only one can be in this role), choose a module position from the list, insert Custom CSS Class, set Grid for different views (desktop, tablet, large phone, phone), responsive options that allows you to hide that module position on (Phone, Large Phone, Tablet, Desktop/Laptop, Large Desktop)

Tip! Using proper Grid settings inside all columns in the row you can define different columns structure for each device (desktop/tablet/mobile) separately.

Custom Header! Using Layout features you can build also your own, custom header. But remember to use the "header" name for the "logo + menu" row to still have a sticky header. And of course, disable the Predesigned header (from Basic - Header section).