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:
To display the Object Manager click View -> Object Manager.
The Object Manager gives an overview of all objects in the current page, you can change the z-order or remove a specific object.
It is also possible to drag & drop an object to change its position (z-order): if you drop an object on another object then it will be moved after this object. Double click an object in the list to select it in the workspace.
The Object Manager also provides some advanced features through the context menu (right click on an object in the list):
This will 'lock' the selected objects, so that they can not be moved or resized accidentally.
Clone and Hide
This option can be useful if you want to create a copy of an object and hide the original object. For example, if an object is not responsive and it needs different properties in another breakpoint.
Hide the object in the current breakpoint
Hide in other breakpoints
Hide the selected object in other breakpoints (but not in the current view) .
Unhide in all breakpoints
Unhide the selected object in all breakpoints (including the current view) .
Allows you to modify the ID property of the object. Note that you can also modify the ID in the Property Inspector or by clicking the ID in the statusbar.
Remove from Layer
Removes the object from the layer, so it will no longer be part of that layer.
This option can be useful in breakpoints when you have ‘lost’ an object because it’s outside the viewport. ‘Reset Position’ moves the object to the upper left corner of its container.
This option resets the size and position of the selected object so it is the same as in the Default viewport.
When you create a new breakpoint then sometimes it can be a lot of work to scale and reposition objects for smaller (or larger) viewports.
The Scale tool may be useful for optimizing the layout in breakpoints. Basically it takes the size and position of the selected object(s) on the default view and scales it to the current breakpoint width.
See the help for more details and known limitations.
Don't Publish Assets
If this option is enabled then Web Builder will not publish the assets (images, scripts, movies) for this object. For example, a media player will not publish the associated media file(s).
This can be useful if a file already exists on the server, so it does not need to be published again.
Note that it will still publish the HTML code for the object!
Include Visibility (only available in Responsive Web Design)
In Responsive Web Design, the software will automatically generate code for controlling the position, size and visibility of objects (with CSS3 media queries). However in some cases controlling the visibility can conflict with other features on the page (like events that show or hide objects). This option makes it possible to exclude the visibility attribute from the media query, so it will not affect the state of the object when using events. See the Responsive Web Design FAQ for more details.
You can change the display order of objects through the context menu: Sort ascending/sort descending
Displays all (visible and hidden) objects in the Object Manager list.
Display Hidden Only
Displays only hidden objects in the Object Manager list.
Display Visible Only
Displays only visible objects in the Object Manager list.
Asset Management -> Internal Filenames
Many objects dynamically generate images. For example, shapes, navigationbars, but also images with effects (like shadows, resample, filters etc). In some cases WYSIWYG Web Builder will automatically generate unique filenames for these images, to make sure there are no conflicts.The automatically generated names are determined by the settings in the Publish options.
To view or edit the automatically generated filenames for an object you can select Allocated Filenames from the context menu.
Note: Not all objects do support this option. It's only useful for object that dynamically generate images!