Layout Builder

Layout Builder is one of the unique features introduced in Zo2Framework which supports multiple layouts that allow you to make your content displayed flexibly. 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.

This part brings more functionalities and improvement user interface in managing template layouts, including:

  • Specify the number of modules to be placed within a module position.
  • Set the width for Column using bootstrap spanX classes (form span1 to span12)
  • Set any of the above options for either tablet/mobile or desktop mode through Column’s/Row’s Settings.
  • Change the name of each row, and also select any module to each column.

You can find all Layout builder settings under Layout Builder section.


Layout Builder also provides more settings for you to create a new layout, customize and manage the layout of your theme. All layout settings are at the top right of each row/column form, including:


  • drag The drag & drop option: By using this option, You can drag & drop to change the position of columns in a line as well.
  • columColumn’s/Row’s Settings: Here you will be able to select the row’s/column’s name & class if he wants. Also users will be able to fix the section for where to visible or where to hidden.
  • rowDuplicate Row: The 3rd option provides you to add new row.
  • row1Split Row: The 4th option provides users to add new column.
  • removeRemove Row: If users want delete the row then just click the cross button.

This part focuses on knowledges to create a new module layout and manage the existing layout in your template.

1. Create a new position

By using layout builder user will be able to crate unlimited module positions. Creating a new position is now very simple. Just follow the instruction given bellow:

Step 1: For create a new position at first go to templateDetails.xml file. You will found this file in this path: templates/your_template (ex: zo2_hallo, zo2_cosmetic…). Here you found positions field, which contains the default position name like header-logo, canvas-menu, search etc


Now add your desire position name here. Like here we add a new position, name your_new_position.


Step 2: Now open Layout Builder from template manager. Here we published our new position under the COMPONENT position. For doing that add a new row by pressing Add a new row button.


Step 3: Now give it a name. We named it as Your New Position by pressing Row settings button.


Step 4: Insert row name into Name field, and select the specific device to display module


Note: If you want to create the fluid layouts in order to utilize the 100% width of the viewport for your postion then you could use Custom CSS Class: full-width

Step 5: Then click on the Column settings icon of the none box field.


Step 6: After clicking on this icon you will found option for select the position name. Here we select our new created position namedyour_new_position. Then click on Apply.


Then save this by clicking on the save button on top left. Now your new position added on the layout builder. You can use this position on this template now.

2. Useful Guide

Adding a new row

Moving Module position

Adding a column

Assigning a Module to Column