gomymobi.com: Base de conocimientos

Cómo crear / convertir el tema del sitio web

- Básicamente, un tema de sitio web es sólo una plantilla HTML estándar, pero se incrusta un pequeño JavaScript (HTML Builder) desarrollado por nosotros, para hacer todos los elementos HTML editable. Por lo tanto, puede convertir cualquier plantilla HTML a un sitio web.

- En este tutorial, vamos a mostrarle los pasos muy sencillos para crear un tema de sitio web con nuestro Generador de HTML.

- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true.

Watch quick video to create a website theme

1. Cargar HTML Builder

- En la parte inferior de cada archivo HTML, debe agregar el código siguiente para cargar 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" Es necesario y no se puede cambiar

- Si desea cambiar el ancho de superposición del elemento clonable, agregue el atributo data-gmm-clonable-width Para esta etiqueta de secuencia de comandos. El valor aceptable está en píxeles o porcentaje.

2. Agregar un script para rastrear el tráfico del sitio web

- Con el fin de rastrear el tráfico del sitio web, en cada página web, debe insertar el código head etiqueta.

<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>

3. Establecer el contenedor de raíz para toda la página

- El contenedor de la raíz es required Por HTML Builder, para determinar las estructuras de todos los elementos de una página. Por defecto, body Se establece como contenedor de raíz automáticamente.

- Obviamente, también puede cambiar este contenedor de raíz a otra etiqueta interna, agregando class="GMM_editable_sortable_container" Al elemento deseable.

PRECAUCIÓN Cada página tiene 1 contenedor de raíz solamente

4. Hacer elementos clasificables de arrastrar y soltar

- Después de que el contenedor raíz incrustado de la página, para ordenar los elementos mediante la función de arrastrar y soltar, tendrá que agregar class="GMM_editable_sortable" En estos elementos deseables.

- Para establecer la posición de la barra de herramientas editable, añada un atributo data-gmm-toolbar-position Al elemento. Valores aceptables: top, botom

- Recuerda: GMM_editable_sortable Es una clase de niño "GMM_editable_sortable_container.

5. Elementos separables de arrastrar y soltar interiores

- En cada niño GMM_editable_sortable, Todavía puede convertir sus hijos a elementos clasificables de arrastrar y soltar, agregando class="GMM_sortable_custom" Con un atributo data-gmm-sortable-handle=".GMM_sortable_handler" Al padre clasificable y agregando class="GMM_sortable_handler" A cada uno de los hijos de los padres que pueden ser separados.

- Por estas clases, puede tener ilimitados arrastrar y soltar elementos clasificables.

6. Hacer elementos clonables

- Para dar algún elemento a la función clonable, añada class="GMM_clonable_object" lo.

- Recuerde: establecer valor para el atributo data-gmm-clonable-width Si necesita cambiar el ancho de superposición de la capa de clonación.

7. Hacer elementos editable personalizados

- De forma predeterminada, HTML Builder detectará y convertirá automáticamente todas las etiquetas HTML comunes en elementos editables. Son: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'.

- Pero puede convertir fácilmente cualquier etiqueta HTML personalizada a elementos editables, añadiendo su nombre a $theme_settings['Editable_Tags'] en theme-settings.php archivo.

Fin

- Sí, ésa es toda la información que usted necesitará entender para convertir una plantilla del HTML al tema del Web site, es tan super simple y fácil!