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 |
| Fully featured text editor |
Image |
| Full width image |
Video |
| Full width video player |
Canvas |
| Fully featured design editor |
Signature |
| Signatures section |
Items |
| Table list items |
Quote |
| Table summary of selected items |
Timesheet |
| Table listing all timesheet entries |
Useful resources:
Google fonts library: https://fonts.google.com
Basic CSS generator: https://www.cssmatic.com
Advanced CSS generator: https://webcode.tools/css-generator
CSS animation generator: http://www.agenciesranked.com/createcss3