The Ribbon gives you quick access to all available tools. The Ribbon contains tabs to expose different sets of control elements, eliminating the need for many different icon-based tool bars. Some of these tabs are contextual and appear only when a certain type of object is selected, providing specific tools for items such as tables, text or images.
An introduction to the basic functionality of WYSIWYG Web Builder
WYSIWYG Web Builder is a Web site building tool that helps you design and build full-featured Web sites without having to learn HTML. When you startup Web Builder the main screen will look something like this:
See also: An introduction to the Ribbon Interface.
The toolbox can be used to add new objects to your web pages. To insert a new object, select one of the available items and draw a box to indicate the position of the object. The new object will now be inserted to the page. Another way to add objects to your page is by simply dragging them out of the toolbox onto the workspace.
When you have opened multiple pages you can used the tabs to switch between the pages. To close the active page press the small 'x' in the upper right corner of the tabs strip.
The center of the screen is the workspace, this is where you design your web pages.
The text formatting tools are only active when you are in text edit mode.
The Site Manager has its own toolbar to add, edit, clone or remove pages. There's also a button to open the properties of the selected page.
In the picture on the left you see an example of a web site structure. The filename of this example web site is called 'mywebsite.wbs', this name is always displayed at the root of web site tree. The root can have one of more pages and each page can also have sub pages.
The home page of a web site should always be named 'index', so for this reason Web builder automatically adds this page to each new project. The names of the items (pages) in the site tree are the actual file names of the target HTML files, so if you named a page 'index' is will publish as index.html.
For more details please read this:
An introduction to the Site Manager
Use the Properties Inspector to view and change the properties of selected objects. You can also use the Properties Inspector to modify page properties. The changes will be visible immediately.
To insert text simply drag the text icon on the workspace. A new object with the text "Double click to edit' will be displayed on the page. To switch to text edit mode double click this text and the formatting tools will become active. For some of the tools you needs to highlight the text before they can be used (just like in a regular text editor).
Related article: Adding text to a web page
The Site Manager is used to manage the structure of your web site. It represents the page structure on the web server.
The Properties Inspector displays different types of editing fields, depending on the needs of a particular property. These edit fields include edit boxes, drop-down lists, and links to custom editor dialog boxes.
It's also possible to manually modify the size and position of the selected object by changing the Position and Size properties.
The ID property
The ID property of an object should be unique within the page. Normally Web Builder will give your object unique names automatically. However if you use one of more master pages, then IDs may be duplicated, since the software can not distinguish a master from a normal page.
The Properties Inspector also give you access to more advanced attributes like the ID of an object. This can be useful if you use master pages and want to give the items of the page an unique ID. We recommend to give objects on a master page names with a prefix like MasterPage_Text1. This will make sure that if the master page is used in another page, the ID of the objects are unique.
Choosing a layout mode
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. To make sure the layout also looks good on smaller screens you will have to implement breakpoints.
You can implement flexible layouts by using Layout Grids. 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 layouts.
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.
You can also use layers to implement advanced layouts: