Why HTML – not classic nested shortcodes?

In most cases of WordPress websites – page sections and elements does not take dynamic content from WordPress database – and if we implement them via static HTML it allow us to make WYSIWYG live page editing fast, reliable working for any complex design (and without big investments). For other cases builder support WordPress shortcodes – it will not have WYSIWYG live editing but it can be edited via popup dialog.

Page Builder by AZEXO - 1 Many other WordPress front-end builders provide only shortcode editing – which is complex and not very intuitive.

Main target of this project – user must edit content:

and not investigate many buttons around content
and not investigate settings popup (panel, page etc)
and not read documentation (documentation for trivial UI elements is unacceptable too)
and not make experiments with your theme – change settings here and there then see result

It can be perfectly solved only by front-end HTML editor. Browser already have everything to WYSIWYG editing DOM (Document Object Model) – just need to add few limitations into it for complex designs – and it will work like Microsoft Word.

Library format is independent to CMS/platform/builder and server language

Sections/elements format was designed for independence from platform/builder as much as possible – it is trivial and stored in HTML/LESS/JS/JSON files. Our builder have HTML parsing framework for fast connection to CMS API of elements/sections which required dynamic content. If you are developing your own builder for any CMS or platform you can easily integrate our very big library of blocks – see library format.

Our approach increase life of HTML/CSS by multi-platforming, fast port to new platforms and by decrease resources spend for code-support.

As bonus – simple and rapid CMS themes development – you do not need to know JavaScript (if you like our JavaScript framework), CMS API and server language (PHP if we talk about WordPress). Also it is easy to implement export demo of theme by one click from WordPress to any CMS – if it already have builder with same architecture.

Developer guide – see how simple theme development can be

How shortcodes supported

You can add any third-party shortcode via front-end or back-end builder. In front-end builder will be showed rendered HTML and builder will block any mouse clicks on it – in this case you can edit attributes only in text mode.
You can integrate shortcode into builder with attributes editor dialog window support – for this you need to register it via azh_add_element($configuration) builder function, which take shortcode configuration in very similar format with vc_map of Visual Composer plugin. In this case you can edit attributes via popup dialog.

Templates auto-generation based on static HTML of sections/elements

Why HTML-coder have so big freedom and provide so unstructured code in classic approaches? Themes development contain repeating parts and it can be optimized – we tried to standardize HTML code in our development process – this allow to automatize conversion to PHP templates (in this builder we choose shortcodes for store templates). As result this increased our development speed.

Page Builder by AZEXO - 3 All sections with menus, posts list, page titles, breadcrumbs etc – automatically converted (after page save) to dynamic shortcode which take required information from WordPress database. This is implemented by adding few CSS classes to HTML tags of element/section like: az-page-title, az-breadcrumbs etc. At the first saving page moment – builder parse HTML find this CSS classes, cut HTML pieces and use them as template of shortcode – which is put instead of this HTML. After this builder allow to change shortcode attributes. See how it implemented here.

Page Builder by AZEXO - 4

You can easily extend shortcodes auto-generation with our HTML parsing framework – if you need 100% split PHP-programming and repeating HTML/CSS-coding in your company

Export from WordPress theme demo to HTML template

You can export from WordPress demo to HTML template ready form ThemeForest submit by one click. How to do this:

Remove pages with templates provided by theme from main menu – you should export it manually (or you can use our theme framework to export blog pages automatically)
Make every page via blank-page-template provided by page builder
Make header, menu and footer via page builder special widgets
Chose main menu as pages list which need to be exported and run export
After export all pages will stored as HTML files in one folder with all required assets. HTML code will have correct URLs and without inline styles.

Coding standards

Every element or section have one place in LESS (and HTML) code – so you can easily find it, customize and you can be absolutely sure that it will not affect to other sections/elements. Every part of LESS styles can be easily removed to provide only the styles for sections/elments that are needed in your project.

Independent to CSS environment

All CSS classes have library prefix “azen” – to prevent penetration of library styles to CSS environment.
Only 4 tags allowed in library: div, span, img, a (and few forms related tags). Every tag which used in element/section have resetted CSS styles by high-weight selector ”.azen.azen1.azen2.azen3.azen4” – to prevent penetration of styles from CSS environment.

Page Builder by AZEXO - 5 Zero CSS conflicts allow you always think only about one section/element during development – not about entire project. See our LESS standard here.

Page Builder by AZEXO WordPress Plugin