Plazart Framework

How to Configure Layout

After you load "Preset", you will have a layout like our layout.

If you want to change something for the layout, please go to the tab "Layout Configuration" and take a look at some general instructions as below:

Layout Builder is one of the unique features introduced in Plazart which allows anyone to customize the existing theme in any shape or dimensions without having any programming language!

1. You can configure the layout of your site at resolution level by clicking on buttons: Large, Medium, Small and Extra Small

2. Here functions of buttons you can use when configure the layout

+ Drag&Drop: The first option is the drag & drop option. By using this option, users can move the section up or down.

+ Settings: The second one is row settings option. Here the users will be able to:

  • Select the row’s name and custom class if they want.
  • Fix the section for where to be visible or where to be hidden.
  • Do some settings for the background, including: background image, background overlay color, background repeat, background size, background position, background attachment
  • Change the color for background, text, link and link hover.
  • Put the margin or padding in the unit value (pixel) if they want.

+ Add a new column

+ Add a new row

+ Delete: The next option is the "remove" option. If the users want to delete the row or column, just click the cross button.

+ Full or Fixed Width: When you configure layout, it is sure that the user will see the box containing “Full Width or Fixed Width”. If the user selects “Full-Width”, the rows must be placed within a “ .container-fluid” (full-width) for proper alignment and padding. It is depended on the maximal page width which the user configured in the tab “advanced settings). If the user selects “fixed-width”, the rows must be place within a “.container” (fixed-width) for proper alignment and padding. It is depended on the page width of Bootstrap and is not depended on the maximal page width which the user configured in the tab “advanced settings).

3. Layout settings for columns

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.

There are also options such as general settings, add a new row, delete and Drag & Drop

In addition to basic settings, it also has configurations on responsive and animation

Here is something basic for settings at each column. They will mention about type, position and span

+ Type and positions: There are five types such as: Logo, message, megamenu, component and modules.

Of which, only the type "modules" use positions. It means that you need to select "position" for modules when select type "modules". To have the positions available here, you need to create it in the file templateDetails.xml

Path: \templates\name of template (in this case:plazart_blank)/templateDetails.xml

Functions of each type:

  • Logo: This column will show "logo"
  • Message: This column will show "message"
  • Megamenu This column will show "megamenu" which you configure in the tab "megamenu". Please see Here
  • Component: This column will show content from components
  • Modules: This column will show content from modules
  • Custom HTML: This column can be used to replace module Custom HTML

+ Span: As mentioned above, 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.

You can select span from 1 to 12.

NOTE:

  • You should not create too many blocks in a template layouts.
  • In our template, we create a block for a position or a module to make it clear to the users. However, we can assign more than one module for a position or block.