gomymobi.com: Wissensbasis
So erstellen / konvertieren Website-Thema
- Grundsätzlich ist ein Website-Thema nur eine Standard-HTML-Vorlage, aber es ist eingebettet ein kleines JavaScript (HTML Builder) von uns entwickelt, um alle HTML-Elemente bearbeitbar zu machen. Daher können Sie jede HTML-Vorlage auf eine Website umwandeln.
- In diesem Tutorial zeigen wir Ihnen die ganz einfachen Schritte, um ein Website-Thema mit unserem HTML Builder zu erstellen.
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
Watch quick video to create a website theme
1. Laden Sie HTML Builder
- Im Grunde jeder HTML-Datei müssen Sie den unten stehenden Code hinzufügen, um HTML Builder zu 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"
Ist erforderlich und kann nicht geändert werden
- Wenn Sie die Overlay-Breite des Clonable-Elements ändern möchten, fügen Sie Attribut hinzu data-gmm-clonable-width
Für dieses Skript Tag. Der zulässige Wert ist in Pixel oder Prozent.
2. Fügen Sie Skript hinzu, um Website-Traffic zu verfolgen
- Um den Website-Traffic zu verfolgen, müssen Sie in jeder Webseite den untenstehenden Code einbetten head
Tag.
<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
3. Setzen Sie den Root-Container für die gesamte Seite
- Wurzelbehälter ist required Von HTML Builder, um Strukturen aller Elemente auf einer Seite zu bestimmen. In der Voreinstellung, body
Wird als Root-Container automatisch gesetzt.
- Offensichtlich können Sie auch diesen Root-Container zu einem anderen internen Tag ändern, indem Sie hinzufügen class="GMM_editable_sortable_container"
Zu dem wünschenswerten Element.
VORSICHT Jede Seite hat nur 1 Wurzelcontainer
4. Drag-and-drop sortierbare Elemente machen
- Nach dem eingebetteten Root-Container für die Seite, um die Elemente mit Drag-n-Drop-Funktion zu sortieren, müssen Sie hinzufügen class="GMM_editable_sortable"
In diese wünschenswerten Elemente.
- Um die Position der editierbaren Symbolleiste einzustellen, fügen Sie ein Attribut hinzu data-gmm-toolbar-position
Zum Element. Annehmbare Werte: top, botom
- Merken: GMM_editable_sortable
Ist eine Kindklasse von "GMM_editable_sortable_container
.
5. Innere Drag & Drop-sortierbare Elemente
- In jedem Kind GMM_editable_sortable
, Können Sie ihre Kinder immer noch zu verschieben, um sortierbare Elemente zu verschieben, indem Sie hinzufügen class="GMM_sortable_custom"
Mit einem Attribut data-gmm-sortable-handle=".GMM_sortable_handler"
Zu sortierbaren Eltern und Hinzufügen class="GMM_sortable_handler"
Zu jedem Kind von benutzerdefinierten sortierbaren Elternteil.
- Durch diese Klassen können Sie unbegrenzte Drag & Drop-sortierbare Elemente haben.
6. Klonende Elemente machen
- Um etwas Element die klonierbare Eigenschaft zu geben, fügen Sie hinzu class="GMM_clonable_object"
Dazu.
- Denken Sie daran: setzen Sie den Wert für das Attribut data-gmm-clonable-width
Wenn Sie die Overlay-Breite der Klonierungsschicht ändern müssen.
7. Machen Sie benutzerdefinierte editierbare Elemente
- Standardmäßig wird HTML Builder automatisch alle gängigen HTML-Tags zu bearbeitbaren Elementen erkennen und konvertieren. Sie sind: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'
.
- Aber du kannst problemlos alle benutzerdefinierten HTML-Tags in bearbeitbare Elemente umwandeln, indem du ihren Namen addierst $theme_settings['Editable_Tags']
im theme-settings.php
Datei.
Ende
- Ja, das ist alles, was Sie brauchen, um zu verstehen, um eine HTML-Vorlage auf Website-Thema zu konvertieren, ist es so super einfach und einfach!
- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true
.
- Please follow our example to master these details..