Layout Builder
How to add a new module position ?
This tutorial tells us how to add a new module positions to the Helix V2 framework based Joomla templates. It's easy procedure, it takes approximately max 3 minutes from the time you will start.
Step 1: The first step in adding a new module position to your default template is to edit the templateDetails.xml file. This file is essential, it holds all key metadata about the template. This file is located under the JoomShaper template folder. Once opened for code editing, locate the <positions></positions> tags. The element <positions> encloses the actual module positions.Within <position> you should insert your desired name, which will later be listed automatically in the Module Manager in the Joomla back-end. You can use different names for it: "example" , "newposition", "contact" etc. In our example we used following code:
<position>example</position>
Example:
Did you know that Joomla 3.3 / Joomla 3.4 allows you to edit templateDetails.xml file directly from the Template Manager.
Step 2: The new module position now should be assign from layout builder. Template Manager --> JoomShaper template --> Layout (tab). Choose place where you want to add it. For example we want to use as new row after Bottoms positions. If yes, in Bottom tool bar click on [=] icon which allows you to add new Row under current.
New empty row (box) should appear in Layout structure.
Step 3: Now this new box should be assign to new created module position name and it needs some basic configuration settings.
Now you have to assign new position to new "example" module position and choose its style from list.
Remember to Apply settings each time. At the end, you have to SAVE all changed layout to make it work.
Since then you can add modules from Module Manager also to this "example" position.
How to add a new row in layout
After set up the position name and location on your template to display your new “row module” position. We will see the module position "example" how it works. Go to template menu and click Layout tab. Now, choose a location where you want to create a new module position. Just above the module click upper right corner Add new row [=] icon. See the below screenshot image for details.
How to add a new column in row
You can set up several positions in a single row. Click on the new column icon 
and a popup window will appear like below. Select your created position, width, style etc from Basic tab. Also you can set up custom class for your position.
Module positions also can be responsive. Click on Responsive tab for resize on the position layout that the handles hidden through CSS. Select the devices you want to show or hide. Click apply and save your settings.
How to move a module position to a different position
Modules are boxes that can be moved around on the layout screen. Drag and drop to move layout positions, is a great feature comes with Helix V2 framework.
Putting a module in a different position on the page is a very simple process, which can be made from Layout tab in JoomShaper template settings. If you hover your mouse over the gray 4 arrow icon of a module you’ll notice the 4 arrow cursor appears to let you know it can be moved. Start dragging the module to a new location - it may be upper and lower position. When the box is showing in the correct location, let go of the mouse button, and the module will be saved temporary in the new location.
Please don't forget to save changed layout using Save & Close button.
Theme Customization would have no boundaries! Layout Builder is one of the unique features introduced in Helix V2 which allows anyone to customize the existing theme in any shape or dimensions without having any programming language! In the layout builder we used 12 columns. We called the columns as span. This means in our layout builder we used 12 span. This 12 span covered the whole width of our layout. If Users wants to create 4 columns then have to use span3 for every column. Also if anyone wants to create 3 columns then have use span4 for every column.
Header Section:
In header section we used 03 columns. The columns are:
- logo
- menu
- search
For logo, menu & search we used span 2, span 7 & span 3.
There are some more facilities we provide in this layout builder for the users. Check the screenshot given bellow:
The first option is here is the drag & drop option. By using this option user will be able to move the section up or down.
Second one is the row settings option. Here user will be able to select the row’s name & class if he wants. Also users will be able to fix the section for where to visible or where to hidden.
The 3rd option provides users to add new row.
The 4th option provides users to add new column.
And the last option is the remove option. If users want delete the row then just click the cross button.
Layout Settings For Menu:
In layout settings there is option for fixed the type by Module, Message or Components. Here is another option for select the position where to publish. From here users also able to select the span. This settings also contain Offset, Style or Custom class settings.
Feature Section:
In the feature section we used the whole span. There is option available for to create more column and row.
Users Section:
Here we 04 columns user 1, user 2, user 3 & user 4. Every column contains span3.
Main Body Section:
In the main body section we used 03 columns. And the columns are
- left
- Component Area
- right
The left & right contain span3 and the component area contain span6.
Breadcrumb Section:
This section had only one column and it contain span12.
Bottom Section:
We select the bottom area by 4 columns. Every column contains same span and the span is span 4.
Footer Section:
The footer section of this layout has 2 columns. First column is footer1 and contain span 8 and the other column footer2 contain span 4.
: Less :
Helix V2 comes with built-in LESS CSS compilation. Now you can reduce over requests to browsers while making CSS development and it makes your whole website more powerful and speedier than ever.
In our new framework Helix V2 we used less. Less will be a new era for the developer’s. By using less user will be able to save their time. It makes works 10 times faster more than before. People who want to code less and want the output more than less is for them. Less makes the code easier, flexible & more comfortable. We have also the option to turn of the less.
Form the advanced option users will be able to disable the less option. But if you don’t disable the less option then you won’t be able to do normal Css. So for doing normal Css it’s must be necessary to disable the less from the advanced option.
For more information about less please check the url: http://lesscss.org/
: Fonts :
Helix V2 provides users the opportunity to play with the fonts.
In Helix V2 users will be able to choose body, header & other font from the administrator panel. In body font just select the desire font & its weight. Here is another option great available is the selectors. Here users select the elements of the body that contain the selected font. Also user will be able to choose other tags or elements like div or class. Just do the same for header & others font option.
:Customized preset settings:
In preset settings we provide the opportunity to change the header, background, text & link color. With every template we are giving some default preset styles upto 3-10 combinations. You can easily choose one of them, otherwise customize as you want. Choose color combinations like below-
After completing the line then saves the file and now you will found new option in your preset settings.
