How to create / convert website theme

1. Load HTML Builder

- In bottom of each HTML file, you must add the code below to load HTML Builder.

<script id="GMM-Editable-HTML-Builder" type="text/javascript" src="/app/GMM-Editable-HTML-Builder/core.init.min.js"></script>

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 head tag.

<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>

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: top, botom

- Remember: GMM_editable_sortable is a child class of "GMM_editable_sortable_container.

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 $theme_settings['Editable_Tags'] in theme-settings.php file.

End

- 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!

- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true.

- Please follow our example to master these details..