websee.nl: Knowledge Base
How to create / convert website theme
- In this tutorial, we are going to show you the very simple steps to create a website theme with our HTML Builder.
1. Load HTML Builder
- In bottom of each HTML file, you must add the code below to load HTML Builder.
id="GMM-Editable-HTML-Builder" is required and can not be changed
- If you would like to change overlay width of clonable element, add attribute
data-gmm-clonable-width for this script tag. Acceptable value is in pixel or percentage.
2. Add script to track website traffic
- In order to track website traffic, in each web page, you must embed the code below into
3. Set root container for whole page
- Root container is required by HTML Builder, to determine structures of all elements in a page. By default,
body is set as root container automatically.
- Obviously, you may also change this root container to other inner tag, by adding
class="GMM_editable_sortable_container" to the desirable element.
CAUTION each page has 1 root container only
4. Make drag-n-drop sortable elements
- After embeded root container for the page, in order to sort the elements by using drag-n-drop feature, you will need to add
class="GMM_editable_sortable" into these desirable elements.
- In order to set position of editable toolbar, add an attribute
data-gmm-toolbar-position to the element. Acceptable values:
GMM_editable_sortable is a child class of
5. Inner drag-n-drop sortable elements
- In each child
GMM_editable_sortable, you may still convert their childrens to drag-n-drop sortable elements, by adding
class="GMM_sortable_custom" with an attribute
data-gmm-sortable-handle=".GMM_sortable_handler" to sortable parent & adding
class="GMM_sortable_handler" to each child of custom sortable parent.
- By these classes, you may have unlimited drag-n-drop sortable elements.
6. Make clonable elements
- In order to give some element the clonable feature, add
class="GMM_clonable_object" to it.
- Remember: set value for attribute
data-gmm-clonable-width if you need to change overlay width of cloning layer.
7. Make custome editable elements
- By default, HTML Builder shall automatically detect and convert all common HTML tags to editable elements. They are:
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'.
- But you may easily convert any custom HTML tags to editable elements, by adding their name to
- Yes, that is all information you will need to understand to convert a HTML template to website theme, it is so super simple and easy!
- Please follow our example to master these details..