gomymobi.com: Knowledge Base
How to create / convert website theme
- Basically, a website theme is just a standard HTML template, but it is embeded a small JavaScript (HTML Builder) developed by us, to make all HTML elements editable. Therefore, you may convert any HTML template to a website.
- In this tutorial, we are going to show you the very simple steps to create a website theme with our HTML Builder.
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a 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..