We've built our editors from the ground up with you in mind. They are flexible and extremely easy to customise, in fact, our structure is based on only 3 different elements as follows:

1) Main container:

Is proposal, contract, invoice, form - depending on what you are editing.

2) Secondary container (blocks wrapper):

Our design editor is based on blocks which are contained within our secondary container blocks-wrapper

3) Building blocks:

Each block is called content-block followed by the type of block, for example block-text for the text block.

Each content-block also has a unique ID which allows you to easily target that specific block.

The ID is a class given to each block which looks like id-#.

Below is a summary of how the structure would look like in the code:

<div class="blocks-page proposal"> <div class="blocks-wrapper"> <div class="content-block block-intro id-WFcoQ"> <div class="block-body"> {block content goes here} </div> </div> </div> </div>

In simple words:

Let's take a proposal as an example. First you would have proposal which is the main container, then inside it we would have the blocks container blocks-wrapper and finally the individual building blocks content-block

Block Types:

Block Type

CSS Selector

Description

Text

block-text

Fully featured text editor

Image

block-image

Full width image

Video

block-video

Full width video player

Canvas

block-canvas

Fully featured design editor

Signature

block-signature

Signatures section

Items

block-items

Table list items

Quote

block-quote

Table summary of selected items

Timesheet

block-timesheet

Table listing all timesheet entries


Useful resources:

Did this answer your question?