The Ultimate Toolbox for creating
amazing web sites!
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.
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.
Adding objects
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 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.
Desktop:
Mobile:
Managing columns
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.
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, first click the column and then select the alignment.
The vertical alignment can only be set when the Grid System is set to 'flexbox'.
The vertical alignment can only be set when the Grid System is set to 'flexbox'.
Objects that are part of the layout grid will no longer have a fixed position. They will be 'floating' inside the column.
Adding text
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.
Adding text
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.
Adding images
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!
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.
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!
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:
• Text
• Photo Gallery
• Horizontal Line
• Inline Frame
• Blog
• Form input fields (editbox, combobox, text aera)
• Login forms
• News Feed Ticker
Examples of 'fixed' objects:
• Shapes and other drawing tools
• Buttons
• Navigation objects
Some objects cannot be part of a layout grid because they conflict with the flexible behavior of the grid.
For example, Layers or Forms, because these a re sfixed/absolute container.
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:
• Text
• Photo Gallery
• Horizontal Line
• Inline Frame
• Blog
• Form input fields (editbox, combobox, text aera)
• Login forms
• News Feed Ticker
Examples of 'fixed' objects:
• Shapes and other drawing tools
• Buttons
• Navigation objects
Some objects cannot be part of a layout grid because they conflict with the flexible behavior of the grid.
For example, Layers or Forms, because these a re sfixed/absolute container.
Grid System
This specifies grid system will be used.
· Default
This will use a Bootstrap-like grid. This grid is compatible with all modern browsers.
· Flexbox
When this option is enabled, the grid will use CSS flexbox layout. This results in cleaner code and also enables some extra features like vertical alignment and entire column will be filled with the background.
Note that this is a relative new CSS feature, it is not supported by older browsers (< IE11). http://caniuse.com/#feat=flexbox
· CSS Grid
This will use CSS's native Grid Layout. Note that this is only supported by modern browser. It is not supported by Internet Explorer and older mobile browsers! https://caniuse.com/#search=grid%20layout
Semantic HTML5
Specifies whether to use semantic HTML5 tags instead of generic <div>. Available options: <article>, <aside>, <footer>, <header>, <nav>, <section>.
Position
The position of a layout grid can either be floating (default) or fixed. When fixed, the layout grid will be fixed to the top of the page (like a header). This can be useful to create a page header which is always visible.
This specifies grid system will be used.
· Default
This will use a Bootstrap-like grid. This grid is compatible with all modern browsers.
· Flexbox
When this option is enabled, the grid will use CSS flexbox layout. This results in cleaner code and also enables some extra features like vertical alignment and entire column will be filled with the background.
Note that this is a relative new CSS feature, it is not supported by older browsers (< IE11). http://caniuse.com/#feat=flexbox
· CSS Grid
This will use CSS's native Grid Layout. Note that this is only supported by modern browser. It is not supported by Internet Explorer and older mobile browsers! https://caniuse.com/#search=grid%20layout
Semantic HTML5
Specifies whether to use semantic HTML5 tags instead of generic <div>. Available options: <article>, <aside>, <footer>, <header>, <nav>, <section>.
Position
The position of a layout grid can either be floating (default) or fixed. When fixed, the layout grid will be fixed to the top of the page (like a header). This can be useful to create a page header which is always visible.
Using a Layout Grid as a form
Although you cannot drag a form to a layout grid, the grid itself can be a form.
Now it will be just a matter of dragging form elements to the grid.
Note: You can also use the Form Wizard to create flexible forms using layout grids.
Although you cannot drag a form to a layout grid, the grid itself can be a form.
Now it will be just a matter of dragging form elements to the grid.
Note: You can also use the Form Wizard to create flexible forms using layout grids.
Breakpoint
The breakpoint specifies at which viewport width the layout will be switched to mobile/stacked layout.
Column Height
The column height specifies whether the height of the grid columns is variable, fixed or full screen.
- auto, the column height depends on the content inside the grid.
- fixed , the column height is fixed. If the column has a background then the entire column will be filled.
- 100vh , the column height is 100% of the viewport height (full screen).
Order
The order property can be used to control the display order of the columns. This can be useful to define a different column order in breakpoints.
The value should be a number. For example: 1, 2 etc
The default value is <empty> which means the column will use the normal order. If you set the order of one column then make sure all other columns also have a valid order value (in all breakpoints) otherwise the behavior of the grid may be undefined.
Notes:
· The order property is only available if the grid system is set to flexbox or css grid.
· 'Overflow' should be set anything but 'none' otherwise the order is the same in all breakpoints (not responsive).
Fixed width
This makes it possible to give one or more grid columns a fixed width (in pixels). This property is responsive so it can be different in breakpoints
The breakpoint specifies at which viewport width the layout will be switched to mobile/stacked layout.
Column Height
The column height specifies whether the height of the grid columns is variable, fixed or full screen.
- auto, the column height depends on the content inside the grid.
- fixed , the column height is fixed. If the column has a background then the entire column will be filled.
- 100vh , the column height is 100% of the viewport height (full screen).
Order
The order property can be used to control the display order of the columns. This can be useful to define a different column order in breakpoints.
The value should be a number. For example: 1, 2 etc
The default value is <empty> which means the column will use the normal order. If you set the order of one column then make sure all other columns also have a valid order value (in all breakpoints) otherwise the behavior of the grid may be undefined.
Notes:
· The order property is only available if the grid system is set to flexbox or css grid.
· 'Overflow' should be set anything but 'none' otherwise the order is the same in all breakpoints (not responsive).
Fixed width
This makes it possible to give one or more grid columns a fixed width (in pixels). This property is responsive so it can be different in breakpoints
Overflow
Overflow can be used to change the number of columns in breakpoints. This option is for advanced users and has a dedicated tutorial:
Advanced Layout Grid Features
Layout
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.
Gutter Width
The gutter width specifies the spacing on each side (left/right) of a column.
Padding
Padding (top/bottom) can be use to create spacing at the top or bottom of the layout grid.
Overflow can be used to change the number of columns in breakpoints. This option is for advanced users and has a dedicated tutorial:
Advanced Layout Grid Features
Layout
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.
Gutter Width
The gutter width specifies the spacing on each side (left/right) of a column.
Padding
Padding (top/bottom) can be use to create spacing at the top or bottom of the layout grid.
Style
To change the style properties of the select grid column, click the Style button.
Here you can set background color, image, gradient, borders and padding. These settings can be different for each column!
To change the style properties of the select grid column, click the Style button.
Here you can set background color, image, gradient, borders and padding. These settings can be different for each column!