In WYSIWYG Web Builder you create your website by dropping objects on the page. Most of these objects represent a standard HTML element. There are 2 ways to insert object to your page:
1. By using the Insert Tab.
2. By using the Toolbox
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. To change the properties double the object or select Edit->Properties from the menu bar. It’s also possible to call the object’s properties using the keyboard shortcut ‘Alt+Enter’.
Tip:
Another way to add objects to your page is by simply dragging them out of the toolbox onto the workspace.
Style
Most objects have a style section in the properties window, here you can set the appearance of the object. Note that not all options do apply to all objects!
Predefined Style
Here you can select one of the global site styles. This option will overwrite all custom style settings for the object. You can add or edit styles in the Style Manager.
Note that the <h1> ... <h6> are generally only used for text!
Background
Background mode
Specifies the background mode.
• Transparent
The background of the object will be transparent.
• Solid
Use a solid background color.
• Image
Use an image as background.
Repeat; Sets the tiling attributes for the background image. Possible options are: Repeat in both directions, Repeat in horizontal direction, Repeat in vertical direction and Do not repeat.
Horizontal Align; Sets the horizontal position for the background image.
Vertical Align; Sets the vertical position for the background image.
• Gradient
Use a (two-color) gradient as background. This option supports many different gradient styles like linear, ellipse, glass, glossy etc. By default a background image will be generated for the gradient effect. However you can also use CSS3 gradients by enabling the option 'Use CSS3 gradients instead of images' in Menu->Tools->Options->HTML. Keep in mind however that not all browsers support CSS3 yet.
• Multi color gradient
Use a (multi-color) gradient as background. WYSIWYG Web Builder includes many predefined multi color gradient styles but you can easily create your own style with the Gradient Style Manager. Just like the standard gradient option it supports many different gradient styles like linear, ellipse, glass, glossy etc. By default a background image will be generated for the gradient effect. However you can also use CSS3 gradients by enabling the option 'Use CSS3 gradients instead of images' in Menu->Tools->Options->HTML.
• Pattern
Use a pattern as background. A new image will automatically be generated for the pattern.
• Texture
Use a texture as background. A new image will automatically be generated for the texture.
Border
Style
Specifies the style of the border: Dotted,Dashed, Solid, Double, Groove, Ridge, Inset or Outset.
For many objects you can also set the individual style, width, color and radius for each side for the border! Select 'Individual style for each side' and then click 'Settings'.
Width
Specifies the thickness of the border around the banner. Set this to 0 (zero) for no border.
Color
Specifies the color of the border around the banner.
Radius
Defines the degree to which border corners will be rounded.
Text
Font
Specifies the font family of the text, such as Comic Sans, Times New Roman, and Courier New.
Style
Specifies the style of the text such as Bold, Italic or Regular.
Size
Specifies the size of the text.
Bookmark
Text and images can be set as bookmarks (also called "anchors") that can be linked to within a page. For example, if a page has several new items, the news titles for each item can be set as bookmarks and a row of links can be added to the top of the page that will each skip down to those bookmarked sections.
This method of using bookmarks allows visitors to your site to quickly access information by not having to scroll down the page to view the information they want.
You can create a Bookmark by using the Bookmark tool from the Insert menu and place it anywhere in the page. Make sure you give the bookmark a unique name. Once you have placed the bookmark icon on your page, it can be selected from the Bookmark dropdown list.
Enable Smooth Scrolling
Enable this option to animate the page scrolling. This effect is often used in modern websites. The Duration specifies the timing of the animation. Easing can be used to create ‘bounce effects’.
Events
The following events are unique to WYSIWYG Web Builder. They make it possible to trigger actions based on the scroll position of the page. For example you can start animations or show/hide objects when the bookmark scrolls into (or out of) the viewport.
onscrollreveal
Fires when the bookmark is completely visible in the view port of the browser.
onscrollrevealpartial
Fires when the bookmark is partially visible in the view port of the browser.
onscrollhide
Fires when the bookmark is scrolled out of the browser's view port.
You can read more about bookmarks in the ‘Links’ chapter.