Layout Grid FAQ

Frequently Asked Questions about WYSIWYG Web Builder
Locked
User avatar
Pablo
 
Posts: 18368
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Layout Grid FAQ

Post by Pablo » Mon Mar 14, 2016 10:09 am

In this FAQ we have collected frequently asked questions about the Layout Grid, so this will always be the first place to look before you start...
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:
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html
http://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:
http://wysiwygwebbuilder.com/support/wb ... gency.html
http://wysiwygwebbuilder.com/support/wb ... ousel.html
http://wysiwygwebbuilder.com/support/wb ... eejay.html
http://wysiwygwebbuilder.com/support/wb ... sktop.html
http://wysiwygwebbuilder.com/support/wb ... tures.html
http://wysiwygwebbuilder.com/support/wb ... folio.html
http://wysiwygwebbuilder.com/support/wb ... vices.html
http://wysiwygwebbuilder.com/support/wb ... debar.html
http://wysiwygwebbuilder.com/support/wb ... tpage.html
http://wysiwygwebbuilder.com/support/wb ... rgrid.html
http://wysiwygwebbuilder.com/support/wb ... deobg.html

These demos are available as templates on the website:
http://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.


Can a form be added to the Layout Grid?
No, but the Layout Grid itself can be 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.
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:
http://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.

Can I have different columns in breakpoints?
This option has been added to version 12:
http://wysiwygwebbuilder.com/layoutgrid_advanced.html

Locked

Who is online

Users browsing this forum: No registered users and 1 guest