gomymobi.com: Kennis basis
Hoe te creëren / omzetten website thema
- Kortom, een website thema is gewoon een standaard HTML-sjabloon, maar het is embeded een klein JavaScript (HTML Builder) ontwikkeld door ons, om alle HTML-elementen bewerkbaar maken. Daarom kunt u een HTML-sjabloon te converteren naar een website.
- In deze tutorial gaan we tonen u de eenvoudige stappen om een website thema met onze HTML Builder te creëren.
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. Laad HTML Builder
- In de bodem van elk HTML-bestand, moet u de onderstaande code toe te voegen aan HTML Builder laden.
<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 vereist en kan niet worden gewijzigd
- Als u wilt overlay breedte van clonable element te veranderen, toe te voegen attribuut data-gmm-clonable-width
voor dit script tag. Acceptabele waarde in pixels of percentage.
2. Script toe te voegen aan de website van het verkeer te volgen
- Met het oog op de website van het verkeer te houden, in elke webpagina, moet u de onderstaande code insluiten in head
label.
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. Stel wortel container voor hele pagina
- Root container required door HTML Builder structuren van alle elementen in een pagina bepalen. Standaard, body
is ingesteld als root container automatisch.
- Uiteraard kunt u ook deze wortel container veranderen naar andere innerlijke tag, door het toevoegen van class="GMM_editable_sortable_container"
het gewenste element.
VOORZICHTIGHEID elke pagina heeft slechts 1 wortel container
4. Maak drag-and-drop sorteerbare elementen
- Na ingebed wortel container voor de pagina, om de elementen met behulp van drag-n-drop functie te sorteren, die u nodig heeft om toe te voegen class="GMM_editable_sortable"
in deze gewenste elementen.
- Om de positie van bewerkbare werkbalk te stellen, voegt een attribuut data-gmm-toolbar-position
het element. Acceptabele waarden: top, botom
- Onthouden: GMM_editable_sortable
een kind klasse "GMM_editable_sortable_container
.
5. Inner drag-and-drop sorteerbare elementen
- In elk kind GMM_editable_sortable
, Kunt u nog steeds van hun kinderen om te zetten in drag-and-drop sorteerbaar elementen, door het toevoegen van class="GMM_sortable_custom"
met een attribuut data-gmm-sortable-handle=".GMM_sortable_handler"
bovenliggende & voegen sorteerbare class="GMM_sortable_handler"
ieder kind aangepaste sorteerbaar ouder.
- Door deze lessen, kunt u onbeperkt drag-and-drop sorteerbaar elementen.
6. Maak clonable elementen
- Om enige element de clonable functie te geven, toe te voegen class="GMM_clonable_object"
te.
- Denk eraan: ingestelde waarde voor attribuut data-gmm-clonable-width
als je nodig hebt om overlay breedte van het klonen laag te veranderen.
7. Maak douane bewerkbare elementen
- Standaard wordt HTML Builder automatisch te detecteren en omzetten alle gangbare HTML-tags naar bewerkbare elementen. Zij zijn: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- Maar u kunt gemakkelijk een aangepaste HTML-tags te converteren naar bewerkbare elementen, door het toevoegen van hun naam aan $theme_settings['Editable_Tags']
in theme-settings.php
het dossier.
Einde
- Ja, dat is alle informatie die je nodig hebt om te begrijpen om een HTML-sjabloon te converteren naar website thema, het is zo super eenvoudig en gemakkelijk!
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
- Please follow our example to master these details..