This information will be expanded in the course of time based on user feedback.
How do I use the Layout Grid?
For an introduction to the Layout Grid please start here:
https://www.wysiwygwebbuilder.com/layoutgrid_part1.html
https://www.wysiwygwebbuilder.com/layoutgrid_part2.html
Do you have examples of the Layout Grid?
Here are a few experimental pages that were created with WYSIWYG Web Builder 11:
https://wysiwygwebbuilder.com/support/w ... gency.html
https://wysiwygwebbuilder.com/support/w ... ousel.html
https://wysiwygwebbuilder.com/support/w ... eejay.html
https://wysiwygwebbuilder.com/support/w ... sktop.html
https://wysiwygwebbuilder.com/support/w ... tures.html
https://wysiwygwebbuilder.com/support/w ... folio.html
https://wysiwygwebbuilder.com/support/w ... vices.html
https://wysiwygwebbuilder.com/support/w ... debar.html
https://wysiwygwebbuilder.com/support/w ... tpage.html
https://wysiwygwebbuilder.com/support/w ... rgrid.html
https://wysiwygwebbuilder.com/support/w ... deobg.html
These demos are available as templates on the website:
https://wysiwygwebbuilder.com/templates0.html
What are the pros and cons of using the Layout Grid?
The Layout Grid has several benefits compared to standard (fixed position) layout, but there are also drawbacks.
Some off the reasons for using the Layout Grid include
- Speed and efficiency
The Layout Grid makes it quick and easy to create responsive / flexible layouts. Images, text, videos and other objects will automatically be scaled based on the viewport size.
You do not have to create a different layouts for different devices. Although you may need breakpoint to optimize (or hide) certain objects for smaller screens.
- Maintainability
It will be easier to maintain the website because changes to the default view will also be reflected in breakpoints. Unless you mix the layout grid with fixed content (like floating layers) of course!
But, there may also be drawbacks:
- Less control
One of the main feature of WYSIWYG Web builder is having lots of control over the layout.
When using a Layout Grid you are giving up some control over how your website is built. You can no longer place objects anywhere you want because object positions are floating (instead of fixed).
- Repetition
I can be more difficult to create a website that doesn't not look like other websites using layout grids (like website created with Bootstrap or another framework).
- The Layout Grid generates more code
Using the Layout Grid will add extra code for 'controlling' the layout. Websites with fixed/absolute positions will have lesser code.
- Not all objects supports the Layout Grid
Some objects cannot be part of a Layout Grid because they cannot be stretched automatically or they were designed to be fixed on the page.
For example: Layers, Forms, Tabs, Accordion. This behavior may change in future updates.
- Master frames and master objects cannot be used in combination with the Layout Grid. See below for more details.
How do I adding spacing between objects?
You can add 'Margin' to an object to create some spacing around it. Margin set be set via the context menu (right click) or in the Arrange menu.
Note that not all objects support margin. In that case you can use a solid or transparent horizontal line or shape to create spacers.
My Layout Grid does not have display the background I have selected!
By default a Layout Grid only has a height if there are object inside the grid column. If the column of the grid is empty then the height will be 0 and therefor it will not have a background. This is standard HTML/CSS behavior.
As a workaround you can enabled the option 'Fixed height' which will give the columns a fixed height.
How can I add a form to the Layout Grid?
A form is a fixed/absolute container, so it cannot be inserted in a layout grid, because that would conflict with flexible behavior of the grid.
However, the layout grid itself can be configured as a form. In the properties check 'Enable form' to turn the Layout Grid into form.
If you want a form with a fixed layout then you can use a floating layer instead.
Also, note that the Form Wizard can create the form as a layout grid.
To learn more about forms please check out this related FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=32967
Can Layout Grids be nested?
Yes, currently only one level nesting is supported.
How do I move a Layout Grid up or down the page?
You can use the Arrange tools (Move forward/ Move backwards) to rearrange Layout Grid.
The arrange tools are available in the Object Manager, Menus/Ribbon and in the context menu (right click). You can also use the '+' and '-' keys on the numeric keypad.
You can also use this to re-arrange the objects inside the grid.
Can I use master frames in combination with the Layout Grid?
Yes, you will need to set the overflow property of the Content Place Holder to 'floating' to make it part of the floating layout. Note that this feature is available in WWB 11.2 and newer.
See the master frame tutorial for more details:
https://wysiwygwebbuilder.com/master_frame.html
Can I use master pages inside a Layout Grid?
You cannot use master objects inside a Layout Grid. However you can use a page header/footer or floating layer in combination with Layout Grids and make the master object part of that layer.
UPDATE: This functionality is now available in WB12! Make sure all objects inside the master object are also flexible/floating.
What is the best output format for text inside a layout grid?
The text object several output formats to optimize the generated HTML.
Please do NOT select 'use <div> for each line' and 'use <div> with position for each line' because then the text will no longer be flexible.
See also this related FAQ:
viewtopic.php?f=10&t=34318
Why do I need to set the page alignment (in the page properties) to 'do not center in browser window'?
When using page alignment (center in browser) then the software will add a container to the page with a fixed size.
This affects the flexible behavior of the layout grid.
If you want to center a layout grid in the middle of the browser window for larger screens then use 'max width' of the grid instead.
There is a scrollbar at the bottom of the page, what is wrong?
If there is scrollbar at the bottom of the page then this means that there are elements outside viewport.
Make sure there are no 'lost' elements on the page. You may have accidentally moved an object outside the workspace.
Also, make sure that all elements inside the layout grid are flexible. Because if objects have a fixed size then they will not resize.
Most objects have a 'full width' property which will make then flexible.
See also "There is a large is empty space at the bottom or right side of my page." in this FAQ:
viewtopic.php?f=10&t=63817
Can I have a different number of columns in breakpoints?
This option has been added to version 12:
https://wysiwygwebbuilder.com/layoutgrid_advanced.html
Is it possible to define a custom grid?
The layout grid is based on Bootstrap's grid system which has 12 columns per row. This cannot be changed.
However WYSIWYG Web Builder also supports FlexGrid which makes it possible to define your own grid.
https://wysiwygwebbuilder.com/flexgrid_part1.html
https://wysiwygwebbuilder.com/flexgrid_part2.html