Editor User Control Blocks Description

Before you are getting started please read this carefully:

• If you navigate from the editor layout page the project is lost, because we care about your privacy we don't keep a shadow version of the project
• Because this tool is constantly updated make sure you click F5(Refresh/Reload Page) before starting a new project even if you just loaded the page
• For best layout practice we recommend to resize the DIV elements manually, so you will be able to reach the best optimal dimensions
• Some browsers have 'Mouse gestures' (Opera),disable them while working or you will experience strange behavior

HTML Elements

This block will allow you to add and remove page elements.
All elements are added by Left Click and hold on the desired element and drag and drop it into page active area.
Elements are removed by same principle Left Click and hold of an existing element and drag it to the Delete icon.
All blocks once added are automatic aligned left top corner of the document
DIV - the basic layout element that can store: text, images, menus etc.
HOST - is designed to store DIV, elements and to arrange them in vertical order without the need of additional padding.
DELETE - remove an element (and all it sub elements) from the page.

Page Size

This block allows you to set page width and the top margin of active layout field.
Top Margin - the space between the highest element on the page and the top of browsers viewing area.
Page Width - the width of the actual data on the page.
NOTE: All inputs are restricted for minimal and maximal sizes.

Background Images

Background Images - Click to select/set an background image to web-page from the image library.
Default: no image selected/shown.

Attachment - selecting if the background will scroll down with the page or stay still.
Default: Fixed - the image scrolls with the page.

Color Selection

DIV Color - Click to select/set an color and opacity for currently selected DIV block.
Note: The color for HOST is not selectable.

Body Color - selecting the body tag background color of entire HTML web-page.
Default: no "Body" tag background color is set.

Element Parameters

This block allows you to edit the element that you already added to the layout template.
Please note that elements width and height can be adjusted using right click and drag while the DIV element is selected.
Class Name - defines the name the currently selected Host or DIV element. So if for example you added a DIV and named it "Menu", that DIV will appear in the html as:
<div class="Menu"></div>
Height - defines the height of selected DIV element in pixels.
Width - defines the width of selected DIV element in pixels.
Hide element Names - this check box allows to hide names of all DIV and Host html elements on the layout page.
Color Picker Pallet - with this control tool you will be able to set the background color of currently selected DIV element. Just select the color using the sliders or by entering manually numbers.

Working Grid

This Column allows you to change the working grid of the project.
This selection is relevant in case you will use the resize of elements by right clicking on DIV block and drag it to desired size.

Build

Clicking on this you will be prompted with a full screen pop-up that will show the generated CSS and HTML code.
Click on CSS or HTML will select all displayed code.
Also you will be able to download the project files by clicking on "Download ZIP File".