Wysiwyg Drag and Drop Editor

Adding Elements

Click Insert Elements above the page.

Open the Elements box.

You can either drag an element or sort it onto the page.

Dragged elements will overlay other elements on the page rather than pushing them out of the way.

Sorted elements will push other elements out of the way. (CSS position is set to absolute on new elements dragged into the page. Sorted elements are set to relative.)

Dragging Elements

Hold the mouse down and drag an element into the page. A thick blue border will indicate a droppable area, where you should release the mouse. A dark blue border indicates the outermost border of a field, which will have been defined in a template. 

Dragging on Touch Devices

By default, all elements are locked for dragging on touch devices so that scrolling works. To unlock an element, touch and hold it until a dashed red border appears around it. Then touch the element again and begin dragging it. 

To re-lock an element, touch a different element.

Sorting Elements

Click an element. A sort button will appear top right. Click it and drag it. It will push other elements out of the way. Release the mouse when the element is where you want it.  

Note: Buttons can't be resized or sorted, so you need to resize or drag their parent items instead. 

Container Boxes and Text Boxes

You can only type text into text boxes (the second box under Elements) and you can only nest boxes inside Container Elements (all the other elements under Elements). 

Once on the page, when you hover over them (desktop), container elements have a wider blue border and text boxes a narrow blue border. You can nest elements within elements as deep as you like.

A red border (on hover) indicates the outer border of a field that has been defined in a template. 

Selecting an Element

To select an element, click it. A toolbar will appear at the top right corner and the element will be highlighted. You can then format it, delete it, resize it and copy it.

Selecting Elements Behind Other Elements

It may be difficult to select an element if you can't see its edges, for example, a container box may be obscured by its contents.  
To select it, select a child or sibling element that you can see. Then click it again while holding down the alt/option key. Parent and sibling elements will be highlighted in turn, and their formatting and classes can be seen in the Block and Text dialogs. Release the mouse to select a highlighted element.

Selecting More Than One Element

Hold down the Shift key and click each element in turn.

Tip: Open the Block Format and Inline CSS dialogs to see more information about each highlighted element.

Editing Text

To edit text, click a text box again and a cursor will appear. To select the element and get its toolbar back, click away from it and then click it again.

Note: Only text boxes can contain text. These have a thinner blue border.

Editing Fields

As well as editing Form and Field values in Grid View, you can also edit them here. Click on a field value and modify the form that appears.

Deleting Elements

Click a box. Click the big red cross which appears (top right).

Resizing Elements

Hover the mouse over the edge of a box and a red line and arrow will appear (desktop only). 

Drag it. (The resize handles of the currently selected box will always be in front.)

Copying Elements

Select an element. Hold down the shift key and click the sort button and drag.

You can also copy elements or even entire pages by using Edit HTML. Save or publish your page. Click the outermost element of the content you wish to copy. Click HTML in the Block Format Dialog. Go to the page or element you wish to copy to. Select it. Then click Update in the Edit HTML dialog.

Style Rules

View Current Classes

Open the Styles Rules dialog.

Click an element.

A list of current CSS styles will be at the top of the dialog, and each one will be highlighted in red in the list below. 

To scroll to one of them, click on it.

You can also see an element's tag name here, for example, section, div, nav and so on. If a style rule has been added for a particular tag name, you can scroll to it by clicking on it. If not, the tag name will be in red.

Changing an Element's Classes

Click on an element. 

To remove a class, scroll to it by clicking on it in the list at the top. Click on its name in the list. It will be removed from all selected objects.

To add a class to an element, click on a class in the list.

Note that you can use Ctrl F (windows) or Command F (Mac) to find a specific style rule or class name in the list if styles.

Adding Classes to Text Selections

Drag the cursor over some text to select it. 

Click on a class. The text selection will be turned into an inline span element. 

To see a span's current classes, click on the span with the cursor.

Note spans cannot be moved around the page or resized like other elements. 

To remove a span's classes, drag over the span text with the cursor and deselect the class in the Style Rules Dialog.

Block Formatting

Block Format Dialog

In the Block Format Dialog, you can see and change block formatting for elements and classes.

Inline CSS

Select an element to see its formatting, such as margin, location and padding, as set in inline CSS.


To see formatting for a class/style rule, open the Style Rules Dialog. Either click a class edit button (it will turn red), or, click the CSS button and then click the code box. 
Both inline CSS and classes can either be edited visually in the Block Format Dialog, or, if you know CSS, by editing CSS directly. (Inline CSS code is shown in the Inline CSS dialog.)

Live editing with the Block Format Dialog

To live edit location, for example, click an element or a class > CSS. Then click the down or up arrow under location in the Block Format Dialog to incrementally move an element. (If you are editing a class, all elements with that class will move). 

This method can also be used to change padding, margins, height and width. 

Tip: If you wish to move an element by percentages, change the unit value to %. Then when you move that element by dragging it, that unit will be retained. 
This is useful for responsive design.

Background Color

Click the background color button. 

Use the sliders to make a color, or type in a hex code in the box. Click Go. You can also change the border color and text color (Text dialog) in this way.

Background Picture

Click the picture button in the Background Color dialog. Choose and/or upload a picture in the dialog which appears.

Building and Importing CSS Rules

You can also build and import style rules. See CSS Style Rule Generator.

Adding Images

Click Insert Element, then click Elements. Drag or Sort the picture box into the page.

Changing an Image Box

To change an image box, select the image and click the image button at the top of box instead.

Resizing and Cropping a Picture

Doubleclick the image or background image. (On a touch device, click the picture to select it. Then, touch and hold on the picture.) 

Use the slider to resize it. To crop, drag the picture. Click away from the element to update it.

All photos are automatically resized to fit your design in two sizes. One size for mobiles and one for desktops. This size is taken from the max-width setting of the image. For images which are flexed , this should be the maximum size that the image can be. 

Adding an Image Alt

Click the alt button and fill in the form.

Text Formatting

Select one or more elements, or drag the cursor over some text. 
Open the Text dialog, where you can see and edit values.

Adding Hyperlinks

To add hyperlinks, select some text by dragging the cursor across it. Click on the hyperlink button.

A dialog box appears.

Fill in the URL of the page you wish to link to. Click OK.

Url Fragments

To link to an element from a Url fragment (#url), add an id to the element in the field at the bottom of the Block Format dialog.

Editing in HTML

You can toggle between visual editing and raw HTML editing:

Select an Element. 

Click HTML in the Block Format Dialog. 

Click Update when you've finished.

Editing in Markdown

Select an element.

Click Markdown in the Block Format Dialog.

Click Update when you've finished editing.