Documentation

Layout Builder

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:

  1. logo
  2. menu
  3. 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

  1. left
  2. Component Area
  3. 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.

Newsletter