How to use layout

Posted by nguyen nhung on June 3, 2014 in Plazart Framework

size2

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! 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.

Part 1: Header Section

 

6-2-2014 11-10-02 AM

In header section we used 03 columns. The columns are:Logo, Megamenu and Search. For logo, megamenu and search, we used span 2, span 6 and span 4 respectively.
There are some more facilities we provide in this layout builder for the users. Check the screenshots given below.

1. Drag & Drop 6-2-2014 6-14-37 PM
The first option is here is the drag & drop option. By using this option, the user can move the section up or down.
2. Settings 6-2-2014 6-15-05 PM

4.

Second on is the row settings option. Here the users will be able to select the row’s name and custom lass if they want. Also the users will be able to fix the section for where to be visible or where to be hidden. Also the users can change the color for background, text, link and link hover. Also the users will be able to put the margin or padding in the unit value (pixel) if they want.

3. Add a new row 6-2-2014 6-15-20 PM

5

The 3rd option provides users to add a new row.

4. Add a new column  6-2-2014 6-20-42 PM

6.

The 4th option provides users to add a new column.

5.    Delete 6-2-2014 6-15-32 PM

And the next option is the remove option. If the users want to delete the row or column, just click the cross button.

6.    Full or Fixed Width full width 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).

7.    Layout setting for columns:

10.

In the layout settings there is option for fixing the type by module, message, components and logo. Here is another option for select the position where to publish. From here the users will also be able to select the span. These settings also contain Offset, style or Custom class settings. The users will be able to fix the column for where to visible or where to hidden. From here, the users can configure the animation in term of animation type, animation speed, animation delay and animation offset percentage or animation easing.

Part 2:  Feature section

 

6-2-2014 1-55-34 PM

In the feature section we used the whole span. There is option available to create more column and row.

Part 3:  Users section

 

6-2-2014 1-58-32 PM

Here we have 04 columns: user1, user2, user3 and user 4. Every column contains span 3.

Part 4: Main Body Section

 

6-2-2014 2-02-10 PM

In the main body section we used 02 columns. And the columns are component Area and Right. The component area contains span 8 and the right contains span 4.

Part 5: Spotlight

 

6-2-2014 2-04-23 PM

In the spotlight, we used 02 columns. And the columns are bottom5 and bottom6.
The bottom5 and bottom6 contain span 6.

Part 6: Breadcumb Section

 

breadcrumb

This section had only one column and it contains span 12.

Part 7: Bottom Section

 

bottom

We select the bottom area by 4 columns. Every column contains the same span and the span is span3.

Part 8: Footer Section

 

footer

Note: The sections presented above are the illustration examples for using the Plazart Framework. The users absolutely develop their own layout.

Features

1 0