gomymobi.com: Base di conoscenza
Come creare / convertire tema del sito
- In sostanza, un tema sito web è solo un modello HTML standard, ma è immerso un piccolo JavaScript (HTML Builder) sviluppato da noi, per rendere tutti gli elementi HTML modificabile. Pertanto, è possibile convertire qualsiasi template HTML un sito web.
- In questo tutorial, ci accingiamo a mostrarvi i semplici passaggi per creare un sito web a tema con il nostro Builder HTML.
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. Caricare HTML Builder
- In fondo a ogni file HTML, è necessario aggiungere il codice qui sotto per caricare 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"
è obbligatorio e non può essere modificato
- Se si desidera modificare la larghezza di sovrapposizione dell'elemento clonabile, aggiungere l'attributo data-gmm-clonable-width
per questo tag script. valore accettabile è in pixel o percentuale.
2. Aggiungere script per monitorare il traffico sito web
- Al fine di monitorare il traffico sito web, in ogni pagina web, è necessario incorporare il codice qui sotto in head
etichetta.
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. Impostare contenitore principale per la pagina intera
- Contenitore principale è required da HTML Builder, per determinare le strutture di tutti gli elementi in una pagina. Per impostazione predefinita, body
viene impostato automaticamente come contenitore principale.
- Ovviamente, si può anche cambiare il contenitore root per altro tag interiore, con l'aggiunta di class="GMM_editable_sortable_container"
all'elemento desiderabile.
ATTENZIONE ogni pagina ha solo 1 contenitore root
4. Fare elementi ordinabili drag-and-drop
- Dopo contenitore principale incorporato per la pagina, al fine di ordinare gli elementi con la funzione drag-n-drop, è necessario aggiungere class="GMM_editable_sortable"
in questi elementi desiderabili.
- Al fine di impostare la posizione di barra degli strumenti modificabile, aggiungere un attributo data-gmm-toolbar-position
all'elemento. I valori accettabili: top, botom
- Ricorda: GMM_editable_sortable
è una classe figlia di "GMM_editable_sortable_container
.
5. Elementi ordinabili interno drag-and-drop
- In ogni bambino GMM_editable_sortable
, Si può ancora convertire i loro bambini al drag-and-drop elementi ordinabili, con l'aggiunta di class="GMM_sortable_custom"
con un attributo data-gmm-sortable-handle=".GMM_sortable_handler"
a ordinabile genitore e l'aggiunta di class="GMM_sortable_handler"
per ogni figlio di genitore ordinabile su misura.
- Con queste classi, si può avere elementi ordinabili illimitato drag-and-drop.
6. Fare elementi clonabili
- Al fine di dare qualche elemento della funzione clonabile, aggiungi class="GMM_clonable_object"
ad esso.
- Ricordate: valore impostato per l'attributo data-gmm-clonable-width
se è necessario modificare la larghezza di sovrapposizione di strati clonazione.
7. Fare elementi modificabili personalizzato
- Per impostazione predefinita, HTML Builder deve rilevare automaticamente e convertire tutti i tag HTML comuni a elementi modificabili. Loro sono: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- Ma si può facilmente convertire tutti i tag HTML personalizzato per gli elementi modificabili, aggiungendo il loro nome a $theme_settings['Editable_Tags']
in theme-settings.php
file.
Fine
- Sì, questo è tutto informazioni necessarie a comprendere per convertire un modello HTML a tema sito web, è così super semplice e facile!
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
- Please follow our example to master these details..