Zion builder is a plugin that comes to solve the problem of page building in WordPress while using the minimum resources.

Timeline

Zion builder plugin as it launched noways is based on its ancestor, Zion Builder built-in plugin from Kallyas WordPress theme.

2 years ago, the lead developer from Hogash decided that Kallyas users should be able to have a better user experience and more power in building their websites.

Having as a starting point, the experience of developing and designing KALLYAS WordPress theme, the aim was to bring a new stand-alone plugin.

The UX and UI

The wireframes which were done 2 years ago, still present the main components of the builder and its main features.

The main programs that we based our design and wire-framing were draw.io, Adobe XD, Adobe Photoshop, and Inkscape.

After several testing of different phases of the builder, we all realized there is no need for re-inventing the wheel. “Less is more” – was needed as an approach for the launch. During the 2 years of development, the builder “suffered” more than 2 interventions on its initial design.

The user experience took into consideration the fact that any app has key shortcuts. This is why we implemented the system of shortcuts, which is the invisible part of the UX. A user could access almost any action from the keyboard also.

The code

After brainstorming and several discussion sessions, all the team agreed that the performance should be the core feature – and that all the code should be written in such a manner that this won’t be compromised.

The JavaScript part of the plugin is written in Vue.js framework which ensured the small size of compiled final package.

The whole app is based using the flexbox system. No extra CSS libraries, no extra divs in the rendered HTML – this makes our plugin a top-notch coded app. 

The lead developer also published 3 NPM packages to minimize the load of resources and code use: https://github.com/zionbuilder

As an external library, all the popovers from the plugin are built using popper.js v.1.x.

The code is written in such a manner that on each page, only the necessary resources are loaded. This is why each page loads the CSS and JavaScript only for the elements that are on that page. This is the best code optimization from any page builder in the market.

An extendable builder – for developers and designers

The whole system of options, which is built in PHP, allows other developers to add their own options to the main panel.

The library system also allows designers to submit new templates that users will have access to through Zion Library.

Multilingual plugin

The strings used in the builder are ready to be translated in any language, according to WordPress standards.

Conclusion

We are proud to say that our builder was built using the latest technologies on the market – ensuring the high standards of code and design performance.

Share this article

Leave a Reply