Setup guide borders, rulers and grid
Note: Guides are primarily useful when working with absolute or fixed layout designs. In flexible layouts (such as grid or flexbox), content positioning is controlled by the layout system itself rather than visual guides.
When designing a web page, it can be helpful to enable guide borders, rulers, or a grid to assist with alignment and spacing.
To adjust these settings, go to View -> Guide Settings in the main menu.
When designing a web page, it can be helpful to enable guide borders, rulers, or a grid to assist with alignment and spacing.
To adjust these settings, go to View -> Guide Settings in the main menu.
WYSIWYG Web Builder provides a grid to help you align your elements. The grid spacing can be set at any size. The grid also has a Snap To feature that you can use to align objects along it automatically when you place them close to its lines.
Guide borders can be useful to make sure all elements on the page stay between specified dimensions. For example if you design your web site for 800x600, then set the Guide borders to the same values so it's easy to keep your content centered in the page layout.
Rulers help you arrange elements symmetrically. To display the rulers, choose View->Rulers from the menu.
It's also possible to add Ruler Guides to the page to easily align objects: Menu->View->Ruler Guides.
You can also drag & drop ruler guides directly from the Ruler bar:
1. Click on the ruler bar
2. Drag the mouse to the desired position and release the mouse.
You can always move the ruler to a new position later. To remove the ruler guide, right click the guide and select 'Delete guide' from the context menu or simply drag it back to the ruler (outside the workspace).
Guide borders can be useful to make sure all elements on the page stay between specified dimensions. For example if you design your web site for 800x600, then set the Guide borders to the same values so it's easy to keep your content centered in the page layout.
Rulers help you arrange elements symmetrically. To display the rulers, choose View->Rulers from the menu.
It's also possible to add Ruler Guides to the page to easily align objects: Menu->View->Ruler Guides.
You can also drag & drop ruler guides directly from the Ruler bar:
1. Click on the ruler bar
2. Drag the mouse to the desired position and release the mouse.
You can always move the ruler to a new position later. To remove the ruler guide, right click the guide and select 'Delete guide' from the context menu or simply drag it back to the ruler (outside the workspace).
Center in browser (applies to absolute / fixed layout)
Most professional web sites are designed so they will look good on different screen sizes. Because Web Builder uses absolute positioning for all elements, they can not be stretched over the full width and height of a page, since that would 'distort' the contents of the page.
Here are a few tips for the designing your pages so they are displayed in the center of the browser:
• Set the Page properties to 800x600
• Enable the Guide Borders and set them to the same size.
• Make sure all page contents stays between the guide borders
• Enable 'Center to browser' in Page Properties
See also these related FAQ topics:
How do I center my page in the browser?
and
How to add full width header and footer to your pages?
Here are a few tips for the designing your pages so they are displayed in the center of the browser:
• Set the Page properties to 800x600
• Enable the Guide Borders and set them to the same size.
• Make sure all page contents stays between the guide borders
• Enable 'Center to browser' in Page Properties
See also these related FAQ topics:
How do I center my page in the browser?
and
How to add full width header and footer to your pages?