Inline Frame or an iframe is allows you to open new pages inside main pages. Inline frames are also referred to as Floating frames.
General
Name
Used to set a name for the inline frame.
Link to
Web Site: display a page from an external web site. Syntax: http://www.google.com Internal Web Page: display one of the pages of your web site.
Click 'Select' to choose a page. The Select Page window will show all the pages which are part of the current web site project.
Web Builder will automatically create to correct (relative) URL when you publish your pages.
Show border
Used to specify the whether to have a border for the inline frame or not.
Scrollbars
Used to specify whether the inline frame should have scrolling capability or not. Possible values: If Needed, Never or Always.
Alternate text
This text will be displayed by browsers which do not support inline frames.
Appearance
Scrollbars
Used to specify whether the inline frame should have scrolling capability or not. Possible values: If Needed, Never or Always.
Border Color
Specifies the color of the border around the inline frame. Set the color to 'Automatic' to display the standard 3D border.
Border Size
Specifies the size of the border around the inline frame. Set this to 0 (zero) for no border.
Lightbox
The Lightbox option makes it possible to display another page in a lightbox (using FancyBox) after clicking on a preview image. You can specify the preview image, lightbox title and width/height of the lightbox.
Box Shadow
Configure box shadow (also called drop shadow) for the inline frame. This feature requires a CSS3 enabled browser. It will not work in combination with the lightbox feature.
See also this online tutorial:
http://www.wysiwygwebbuilder.com/iframe.html
Layer
Layers can be used to create advanced layouts. A layer is a container for other objects.
Objects can be dragged and dropped on a layer just like on a form.
Some of the cool features of layers are:
• 0...100% transparency
• Show/Hide a layer (and all its contained objects) using the layer manager or through events.
• Position and size a layer relatively
• Position a layer absolute to the right and/or bottom border of the browser window
• Several background repeat and alignment options.
• Sticky layer mode, keeps a layer visible at all times.
Opacity
Change the transparency (0 - 100%) of the layer (and all its children).
Box Sizing
The box-sizing property is used to tell the browser what the sizing properties (width and height) should nclude. Should they include the border-box or just the content-box (which is the default value)?
The 'border-box' option is especially useful for full width layers, where you usually want the border inside the view port. With content-box the border size will be added to the total width (> 100%).
Semantic HTML5
Specifies whether to use semantic HTML5 tags instead of generic <div>. Available options: <article>,
<aside>, <footer>, <header>, <nav>, <section>.
Overflow
This overflow can be used to control the overflow behavior of the layer.
• None
The content of the layer is fully visible. In this case the size of the layer cannot be smaller the content.
• Hidden
The content is clipped, but the browser does not display a scroll-bar to see the rest of the content.
• Scroll
The content is clipped, but the browser displays a scroll-bar to see the rest of the content. This can be useful to create scrollable content without the need for an inline frame!
• Auto
If the content is clipped, the browser will display a scroll-bar to see the rest of the content.
Note:
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.
Layer Mode
The Layer has 3 modes. The Default mode, Sticky Layer Mode and a Header/Footer mode.
In Default mode the layer will be positioned on the location where you've placed it during design time.
If Sticky Layer mode keeps a layer visible (top/bottom/left/right) at all times. This can be useful if you want to keep a menu or image visible even if the page scrolls. Animation is also an option!
The Header/Footer mode can be useful if you are using the layer as a header or footer for your page usually in combination with the 'relative horizontal resizing' option.
Normally the 'relative horizontal resizing' (and the other relative options) will add the code after the
<body> container resulting in a higher z-index. Selecting 'Header/Footer' mode will insert the code before the <body> container, so the layer will be behind all other content.
There is also the Docking layer mode which allows you to dock a layer to a specific side of the screen or in the center of the screen. The main difference between this mode and the sticky layer mode is that Docking layer mode does not use JavaScript, instead is uses standard CSS techniques. It's just another way for you to use layers and this mode can also be useful for full page headers and footers.
With Anchored Layer you can anchor one or more sides of the layer to the sides of the page. For example, if you enable 'Anchor Left' and 'Anchor Right' then then the layer will stretch if you resize the browser window (the offset to the left and right page border will remain the same).
But you can also anchor just one border (or all).
Floating Layer mode is for advanced usage. It will make the layer 'float' instead of having a fixed position. If multiple floating layers are placed on the page then they will be placed next to each other (from left to right) depending on the available screen space. If the layer does not fit on the current row then it will be wrapped to the next row. This feature may be useful (for advanced users) to create responsive websites.
The option Floating mode can be used to control the 'float behavior':
• Default
The layer will be positioned to the right side of the previous floating object. If the object does not fit on the current row, then it will move to the next row.
• Clear Left
The layer will be forced to the next row. The layer can have other objects on the right side of the row (unless the next floating object is also set to clear left).
• Full Width
The layer will use the full width (100%) of the page. No other objects can be on the same row.
This mode can be useful for headers or footers.
• Full Screen
This will set the width/height of the layer to 100% of the current view port. This can be useful for creating full screen/single page web sites. Important: you must also set the page alignment to 'Set page width and height to 100%' otherwise the layer does not use 100% of the browser window height!!!
Related online tutorial: http://www.wysiwygwebbuilder.com/fullscreen.html
• Modal Layer mode will position the layer on top of everything. Other items on the page will be disabled until you close the layer. Enable backdrop, specifies whether the background overlay is enabled. Close on escape, specifies whether pressing the 'esc' key will close the modal layer. . Modal Type, jQuery UI (as in previous version of WWB) or Bootstrap. Unlike the jQuery UI option Bootstrap is responsive, so the layer can have a different size in breakpoints! Also, Bootstrap uses the title of the layer in the header.
A Panel Layer is initially invisible, but can slide from the right or left side of the page by using events (show/hide). Display, specifies the relationship of the panel to the page contents. "Push" pushes the page over and "overlay" display the layer over the content. Dismissible, specifies whether the panel can