gomymobi.com: Bază de cunoștințe
Cum de a crea / converti tema site-ului
- Practic, o temă site-ul este doar un șablon HTML standard, dar este embeded un mic JavaScript (HTML Builder), dezvoltat de noi, pentru a face toate elementele HTML pot fi editate. Prin urmare, puteți converti orice șablon HTML pentru un site web.
- In acest tutorial, vom să vă arătăm pașii foarte simplu pentru a crea un site web cu tema HTML Builder nostru.
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. Încărcare cod HTML Builder
- In partea de jos a fiecărui fișier HTML, trebuie să adăugați codul de mai jos pentru a încărca 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"
este necesară și nu poate fi modificată
- Dacă doriți să modificați lățimea elementului de suprapunere clonable, adăugați atribut data-gmm-clonable-width
pentru această etichetă script. Valoarea acceptabilă este în pixeli sau procentual.
2. Adăuga script-ul pentru a urmări traficul site-ului
- Pentru a urmări traficul site-ului, în fiecare pagină web, trebuie încorporați codul de mai jos în head
etichetă.
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. Set de containere rădăcină pentru pagina întreagă
- Container Root este required de HTML Builder, pentru a determina structura tuturor elementelor dintr-o pagină. În mod implicit, body
este setat ca containerul rădăcină în mod automat.
- Evident, se poate schimba, de asemenea, acest container rădăcină altor tag-ul interior, prin adăugarea class="GMM_editable_sortable_container"
la elementul dorit.
PRUDENȚĂ fiecare pagină are doar 1 container de rădăcină
4. Asigurați-vă elemente Sortable drag-and-drop
- După ce containerul rădăcină încorporat pentru pagina, pentru a putea sorta elementele utilizând funcția drag-n-drop, va trebui să adăugați class="GMM_editable_sortable"
în aceste elemente dorite.
- Pentru a stabili poziția barei de instrumente se poate modifica, adăuga un atribut data-gmm-toolbar-position
la elementul. Valori acceptabile: top, botom
- Tine minte: GMM_editable_sortable
este un copil de clasa de "GMM_editable_sortable_container
.
5. Elemente de interior Sortable drag-and-drop
- În fiecare copil GMM_editable_sortable
, Puteți converti în continuare copii pentru a drag-and-drop elemente Sortable, prin adăugarea class="GMM_sortable_custom"
cu un atribut data-gmm-sortable-handle=".GMM_sortable_handler"
la Sortable părinte și adăugarea class="GMM_sortable_handler"
pentru fiecare copil de părinte personalizat Sortable.
- Prin aceste clase, s-ar putea avea elemente Sortable nelimitat drag-and-drop.
6. Asigurați-elemente clonable
- Pentru a da un element caracteristica clonable, adăugați class="GMM_clonable_object"
să-l.
- Nu uitați: setați valoarea atributului data-gmm-clonable-width
în cazul în care aveți nevoie pentru a schimba latimea de suprapunere a stratului de clonare.
7. Asigurați-elemente personalizate care se pot modifica
- În mod implicit, HTML Builder detectează în mod automat și de a converti toate etichetele HTML obișnuite pentru elemente care se pot modifica. Sunt: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- Dar puteți converti cu ușurință orice etichete personalizate HTML elemente care se pot modifica, prin adăugarea de numele lor $theme_settings['Editable_Tags']
în theme-settings.php
fişier.
Sfârşit
- Da, adică toate informațiile de care aveți nevoie pentru a înțelege pentru a converti un șablon HTML pentru site-ul temă, este atât de super-simplu și ușor!
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
- Please follow our example to master these details..