© 2014 by Roman P

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

HTML Elements block
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

Page Size block
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

Scroll of fixed background image
Background Images select block
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 Select
HTML Background Color
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

Element Parameters block
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

Working Grid block
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 Generate block
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".
Minimal requirement Internet Explorer 10+ IE 10+
Minimal requirement Safari 4.0.4+ Safari 5+
Minimal requirement Opera 12+ Opera 12+
Minimal requirement FireFox 3.6+ FireFox 3.6+
Minimal requirement Sea Monkey 2+ Sea Monkey 2+
Minimal requirement Google Chrome22+ Google Chrome 22+
Browsers Support
To help us get improve and release a stable version
paste a URL back link to our site