Visual HTML 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 onto the page and place it between other elements on the page, which will move out of the way.

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 you can see. Then click it again while holding down the Alt 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.

Formatting Elements

Visual HTML Editor

Open the Block Format dialog. Select an element. It's current formatting, such as margin, padding, height, width and location as set in inline css, and its current style rules are shown in the dialog. Change them as required. 

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.

Editing CSS

These changes will update an element's inline CSS (cascading style sheets). Open the Inline CSS dialog to see the changes. If you know, or wish to learn, CSS, you can also type directly into the box.

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 an 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.

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. 
CSS Generator  >