An introduction to the Layout Grid - Part 1
The layout grid provides the quick and easy way to create multi column responsive (floating) layouts of the web pages. A grid can have up to 12 columns, with sizes in percentages. Objects that are dragged onto a grid will automatically become floating, which means that they are placed next to each other (from left to right) depending on the available space. If the object does not fit on the current row then it will be wrapped to the next row. Some objects (like images, text, blog, photo gallery) can be full width, so they always take up the entire row and stretch or shrink when the page size changes. For smaller (mobile) screens all columns are stacked based on the defined breakpoint. This is a great new way to create flexible and responsive (Bootstrap-like) layouts!
See also the Layout Grid FAQ: http://wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=71391
Important: Do not use 'Center in browser window' in combination with layout grids. This option should only be used for 'fixed' content.
Note: You cannot change the size or position of the layout grid. The grid's size depends on its contents. The grid's position is 'floating' and it will be automatically positioned after the previous floating object.
To add objects to the layout grid, simply drag & drop the object inside a column. The column will highlight to indicate where the object will be added. Note that the mouse cursor needs to be inside the column.
To insert an extra column, click the 'Add' button. The width of the columns can be adjusted by dragging the handles between the columns. To remove a column, first select it and then click 'Remove'. It's also posisble to remove a column by dragging the right handle of a column to the right.
Each column can have its own alignment. To change the alignment, click the column and then select the alignment.
The grid can be configured as fixed or fluid layout.
A fixed grid will have fixed columns based on the design time width of the grid. The layout will be centered in the viewport.
A fluid grid uses the full width of the browser window and all columns will be resized accordingly.
Padding specifies the gutter width on each side of a column .
The breakpoint specifies at which viewport width when the layout will be switched to mobile/stacked layout.
Objects that are part of the layout grid will no longer have a fixed position. They will be 'floating' inside the column.
When text is added to the layout grid, it will automatically use the full width of the column. So if you resize the width of the page, the text will dynamically adjust.
Images that are part of a grid can either be responsive (adjust to the size of the column) or have fixed size. This can be configured with the
"Full width' option in the Image properties. Note that this option is only available if the image is part of a Layout Grid!
Maximum width specifies the maximum size of the image when it is set to full width. This prevents the image from getting too large in responsive layouts.
Note: the Full Width option is also available for the Rollover Image and SlideShow.
Adding video (YouTube/Vimeo/HTML5)
Just like images, videos can also be responsive or have fixed size. However unlike images, the browser cannot automatically determine the aspect ratio of the video. By specifying the aspect ratio in Web Builder, the video will be responsive while maintaining a certain aspect ratio!
Adding other objects
Different objects have different behavior in the layout grid. Some objects are flexible, so they use the full width of a column while others have a fixed size (not affected by the column width).
Examples of 'flexible' objects:
• Photo Gallery
• Horizontal Line
• Inline Frame
• Form input fields (editbox, combobox, text aera)
• Login forms
• News Feed Ticker
Examples of 'fixed' objects:
• Shapes and other drawing tools
• Navigation objects
Some objects cannot be part of a layout grid because they cannot be stretched automatically. For example:
This behaviour may change in future updates.
Although you cannot drag a form to a layout grid, the grid itself can be a form! To make it easier to create a form in a Layout Grid, you can configure the grid itself as a form. So it will be just a matter of dragging form elements to the grid.