Page 1 of 1

Which layout mode should I choose?

Posted: Fri Apr 28, 2017 10:05 am
by Pablo
WYSIWYG Web Builder supports several layout modes.

By default layouts are fixed using absolute positions. This means that you can place objects anywhere you like, so you have complete control over the layout. The downside of this layout mode is that it will be harder to make the page responsive because the layout will only look perfect on the screen size it was designed for.
And since there is no 'structure' in the layout (objects can be placed anywhere in random order), there is no way for the browser to automatically re-position and/or scale the content based on the view port.
So to make sure the page content looks good on different viewports (screen sizes), you will have to implement breakpoints (different layout variations) of the same page.

Related tutorials:

Related FAQ: ... 10&t=63817

If you have a lot of text then it may become difficult to maintain the layout, because text is not always render the same way in different browsers. ... 10&t=34318

You can implement flexible layouts by using Layout Grids and/or Flexbox. This make it possible to create Bootstrap-like layouts. When using layout grids, the layout is controlled by the grids. Objects will automatically resize based on the available space in the viewport and the grid column size.
The downside of using layout grids is that you have less control over the layout. All objects will be positioned and resized automatically. So you are forced into a structured layout.

Related tutorials: ... anced.html

Related FAQ: ... 10&t=71391

If your pages have a lot of text then this is probably the best option because the text will be flexible, so it will automatically adjust to the available space.

Mobile design
WYSIWYG Web Builder also includes a dedicated mobile web site design tools. These tools are based on jQuery Mobile.
Unfortunately jQuery Mobile has not been updated since 2014, so this method may become obsolete in the future.

Using Layers
You can also use layers to implement advanced layouts: