Page Builder by AZEXO

¿Por qué HTML, no los clásicos códigos cortos anidados?

En la mayoría de los casos de sitios web de WordPress, las secciones y elementos de la página no toman contenido dinámico de la base de datos de WordPress, y si los implementamos a través de HTML estático, nos permite realizar edición de páginas en vivo WYSIWYG. Trabajo rápido y fiable para cualquier diseño complejo. (y sin grandes inversiones). En otros casos, el creador admite códigos cortos de WordPress: no tendrá edición en vivo WYSIWYG, pero se puede editar mediante un cuadro de diálogo emergente.

Muchos otros creadores de aplicaciones para el usuario de WordPress solo ofrecen edición de códigos cortos, lo cual es complejo y no muy intuitivo.

Objetivo principal de este proyecto: el usuario debe editar el contenido:

• y no investigar muchos botones alrededor del contenido
• y no investigar la ventana emergente de configuración (panel, página, etc.)
• y no leer la documentación (la documentación para elementos triviales de la interfaz de usuario también es inaceptable)
• y no hacer experimentos con su tema: cambie la configuración aquí y allá y luego vea el resultado

Sólo se puede resolver perfectamente mediante un editor HTML de interfaz de usuario. El navegador ya tiene todo para la edición WYSIWYG de DOM (modelo de objetos de documento); solo necesita agregar algunas limitaciones para diseños complejos, y funcionará como Microsoft Word.

El formato de la biblioteca es independiente de CMS/plataforma/constructor y idioma del servidor

El formato de secciones/elementos fue diseñado para independencia de la plataforma/constructor tanto como sea posible: es trivial y se almacena en archivos HTML/LESS/JS/JSON. Nuestro constructor tener un marco de análisis HTML para una conexión rápida a la API de CMS de elementos/secciones que requieran contenido dinámico. Si está desarrollando su propio constructor para cualquier CMS o plataforma, puede integrar fácilmente nuestro biblioteca muy grande de bloques – ver formato de biblioteca.

Nuestro enfoque aumenta la vida útil de HTML/CSS mediante la multiplataforma, la migración rápida a nuevas plataformas y la disminución del gasto de recursos para el soporte de código.

Como bonificación – Desarrollo de temas CMS simple y rápido. – No necesitas saber JavaScript (si te gusta nuestro framework JavaScript), API CMS y lenguaje del servidor (PHP si hablamos de WordPress). También es fácil implementar una demostración de exportación del tema con un solo clic desde WordPress a cualquier CMS, si ya tiene un constructor con la misma arquitectura.

Guía para desarrolladores: vea lo sencillo que puede ser el desarrollo de temas

Cómo se admiten los códigos cortos

• Puede agregar cualquier código corto de terceros a través del generador de front-end o back-end. En el front-end builder se mostrará HTML renderizado y el builder bloqueará cualquier clic del mouse sobre él; en este caso, puede editar atributos solo en modo texto.
• Puede integrar shortcode en el constructor con soporte para ventana de diálogo del editor de atributos – para esto, debe registrarlo a través de la función de creación azh_add_element($configuration), que toma la configuración del código abreviado en un formato muy similar con vc_map del complemento Visual Composer. En este caso, puede editar los atributos a través del cuadro de diálogo emergente.

Autogeneración de plantillas basadas en HTML estático de secciones/elementos

¿Por qué el codificador HTML tiene tanta libertad? ¿Y proporcionar código tan desestructurado en enfoques clásicos? El desarrollo de temas contiene partes repetidas y se puede optimizar; intentamos estandarizar el código HTML en nuestro proceso de desarrollo; esto permite automatizar la conversión a plantillas PHP (en este creador elegimos códigos cortos para las plantillas de tienda). Como resultado, esto aumentó nuestra velocidad de desarrollo.

Todas las secciones con menús, lista de publicaciones, títulos de páginas, rutas de navegación, etc. convertido automáticamente (después de guardar la página) a un código corto dinámico que toma la información requerida de la base de datos de WordPress. Esto se implementa agregando algunas clases CSS a las etiquetas HTML del elemento/sección como: az-page-title, az-breadcrumbs, etc. En el primer momento de guardar la página, el constructor analiza el HTML, encuentra estas clases CSS, corta piezas HTML y las usa como plantilla de código corto, que se coloca en lugar de este HTML. Después de este constructor, permita cambiar los atributos del código corto. Vea cómo se implementó aquí.

Puede ampliar fácilmente la generación automática de códigos cortos con nuestro marco de análisis HTML, si necesita programación PHP 100% dividida y codificación HTML/CSS repetida en su empresa.

Exportar desde la demostración del tema de WordPress a la plantilla HTML

Puede exportar desde la demostración de WordPress a una plantilla HTML formulario listo ThemeForest enviar con un solo clic. Cómo hacer esto:

1. Elimine las páginas con plantillas proporcionadas por tema del menú principal; debe exportarlas manualmente (o puede usar nuestro marco temático para exportar páginas de blog automáticamente)
2. Cree cada página a través de una plantilla de página en blanco proporcionada por el creador de páginas
3. Cree encabezados, menús y pies de página mediante widgets especiales del creador de páginas
4. Elija el menú principal como lista de páginas que deben exportarse y ejecute la exportación
5. Después de la exportación, todas las páginas se almacenarán como archivos HTML en una carpeta con todos los recursos necesarios. El código HTML tendrá URL correctas y sin estilos en línea.

Estándares de codificación

Cada elemento o sección tiene un lugar en el código MENOS (y HTML) – para que puedas encontrarlo fácilmente, personalizarlo y estar absolutamente seguro de que no afectará a otras secciones/elementos. Cada parte de MENOS estilos se puede eliminar fácilmente para proporcionar solo los estilos para las secciones/elementos que se necesitan en su proyecto.

Independiente del entorno CSS

• Todas las clases de CSS tienen el prefijo de biblioteca «azen», para evitar la penetración de los estilos de la biblioteca. al entorno CSS.
• Solo se permiten 4 etiquetas en la biblioteca: div, span, img, a (y algunas etiquetas relacionadas con formularios). Cada etiqueta que se utiliza en el elemento/sección ha restablecido los estilos CSS mediante el selector de alto peso ”.azen.azen1.azen2.azen3.azen4” – para evitar la penetración de estilos del entorno CSS.

Los conflictos cero de CSS le permiten pensar siempre solo en una sección/elemento durante el desarrollo, no en todo el proyecto. Vea nuestro estándar MENOS aquí.