The Ultimate Toolbox for creating
amazing web sites!
Using Layers in WYSIWYG Web Builder
A layer is a container for other objects. You can make objects part of a layer by using drag & drop.
When you drag an object over a layer in the Web Builder workspace you will notice that the layer's border will temporary highlight to indicate that the object will become part of the layer.
Layers can be used to create advanced layouts like scrollable or scalable content.
This tutorial will demonstrate some of those features.
Changing the transparency of a layer
Opacity can be used to control the transparency of a layer and its content.
You can see an example of this in the How to create a draggable window using layers? tutorial.
Make a layer stick to the bottom of the page
You can make a layer stick to the bottom of the page, by giving the 'bottom' property a value.
For example if you set the bottom property to 10, then the layer will be positioned 10 pixels from the bottom of the page.
Click here for an example.
Positioning a layer relative to the browser window
Instead of using absolute coordinates, the position of the layer can also made relative to the page size with the Relative horizontal position and Relative vertical position properties.
Click here for an example.
Size a layer relative to the browser window
Instead of using absolute dimensions, the size of the layer can be made relative to the size of the browser window with the Relative horizontal sizing and Relative vertical sizing properties. This can be useful to create a header or footer for a web page.
Click here for an example.
Stretch the content of a layer
In some cases it can be useful to make part of a page stretchable (scale the content based on the size of the browser window). For example in headers or footers.
In combination with the relative size properties of a layer (Relative horizontal sizing and Relative vertical sizing), you can scale the content of the layer by setting the alignment to 'Stretch content'.
This option will only work for simple HTML objects like images, shapes or text. It will not work for advanced objects like menu's, extensions, blog, galleries etc. These objects can not be stretched.
Also note that stretching images may have a negative effect on the quality of the image!
Click here for an example.
Create scrollable content with a layer
You can make the content of a layer scrollable by setting the 'overflow' property to 'scroll' or 'auto'.
To create/update the content of the layer, you must resize it in the designer so all objects will be visible.
After you've created/updated the layout you can resize the layer to the desired size.
You cannot scroll the contents of the layer inside Web Builder.
A layer is a container for other objects. You can make objects part of a layer by using drag & drop.
When you drag an object over a layer in the Web Builder workspace you will notice that the layer's border will temporary highlight to indicate that the object will become part of the layer.
Layers can be used to create advanced layouts like scrollable or scalable content.
This tutorial will demonstrate some of those features.
Changing the transparency of a layer
Opacity can be used to control the transparency of a layer and its content.
You can see an example of this in the How to create a draggable window using layers? tutorial.
Make a layer stick to the bottom of the page
You can make a layer stick to the bottom of the page, by giving the 'bottom' property a value.
For example if you set the bottom property to 10, then the layer will be positioned 10 pixels from the bottom of the page.
Click here for an example.
Positioning a layer relative to the browser window
Instead of using absolute coordinates, the position of the layer can also made relative to the page size with the Relative horizontal position and Relative vertical position properties.
Click here for an example.
Size a layer relative to the browser window
Instead of using absolute dimensions, the size of the layer can be made relative to the size of the browser window with the Relative horizontal sizing and Relative vertical sizing properties. This can be useful to create a header or footer for a web page.
Click here for an example.
Stretch the content of a layer
In some cases it can be useful to make part of a page stretchable (scale the content based on the size of the browser window). For example in headers or footers.
In combination with the relative size properties of a layer (Relative horizontal sizing and Relative vertical sizing), you can scale the content of the layer by setting the alignment to 'Stretch content'.
This option will only work for simple HTML objects like images, shapes or text. It will not work for advanced objects like menu's, extensions, blog, galleries etc. These objects can not be stretched.
Also note that stretching images may have a negative effect on the quality of the image!
Click here for an example.
Create scrollable content with a layer
You can make the content of a layer scrollable by setting the 'overflow' property to 'scroll' or 'auto'.
To create/update the content of the layer, you must resize it in the designer so all objects will be visible.
After you've created/updated the layout you can resize the layer to the desired size.
You cannot scroll the contents of the layer inside Web Builder.
This layer is scrollable!
Create dynamic layouts with WYSIWYG Web Builder (for advanced users only)
Because WYSIWYG Web Builder is a What-You-See-Is-What-You-Get (fixed page layout) web site generator, it cannot create dynamic page (fluid) layouts. In traditional HTML editors tables are used to create dynamic layouts. However this has many restrictions on the layout (no exact positioning of objects, no overlapping, long learning curve etc).
But although WYSIWYG Web Builder allows you to create pixel perfect layouts, some users sometimes wish they could create dynamic layouts. So we've designed an advanced extension just for this purpose! The HTML TextBox extension.
The HTML TextBox extension is basically a fully featured HTML editor integrated into Web Builder!
It allows you to create dynamic layouts using tables, just like in a traditional HTML editor.
These are the steps to create a fluid layout using the HTML TextBox extensions and layers:
Step 1
Insert a layer object and enable the properties Relative horizontal sizing and Relative vertical sizing.
Step 2
Set the alignment to 'stretch content'.
Step 3
Make the size of the layer the same as the page size. So it will scale the content based on the size of the browser window.
Step 4
Insert a HTML TextBox object and design the page just like you would do in a traditional HTML editor using tables.
Step 5
Make the size of the HTML TextBox the same as the layer.
Click here for an example.
Because WYSIWYG Web Builder is a What-You-See-Is-What-You-Get (fixed page layout) web site generator, it cannot create dynamic page (fluid) layouts. In traditional HTML editors tables are used to create dynamic layouts. However this has many restrictions on the layout (no exact positioning of objects, no overlapping, long learning curve etc).
But although WYSIWYG Web Builder allows you to create pixel perfect layouts, some users sometimes wish they could create dynamic layouts. So we've designed an advanced extension just for this purpose! The HTML TextBox extension.
The HTML TextBox extension is basically a fully featured HTML editor integrated into Web Builder!
It allows you to create dynamic layouts using tables, just like in a traditional HTML editor.
These are the steps to create a fluid layout using the HTML TextBox extensions and layers:
Step 1
Insert a layer object and enable the properties Relative horizontal sizing and Relative vertical sizing.
Step 2
Set the alignment to 'stretch content'.
Step 3
Make the size of the layer the same as the page size. So it will scale the content based on the size of the browser window.
Step 4
Insert a HTML TextBox object and design the page just like you would do in a traditional HTML editor using tables.
Step 5
Make the size of the HTML TextBox the same as the layer.
Click here for an example.