Zion Builder. A Lightweight Page Builder. But How Good?

Zion Builder is a plugin that will make your site creation way easier, in a more fun way. You can use it to create a beautiful, professional-look page on your WordPress website. From homepage, about page, contact page, landing page, or other pages on your website

Being a page builder plugin, Zion Builder comes with a visual editor just like Elementor and Divi Builder to bring a new experience in website creation with WordPress. The page builder was released in May 2020. Younger than other similar plugins, even Brizy.

How good is Zion Builder? Let’s find out the answer.

Zion Builder: A brief intro

The story of Zion Builder is pretty similar to Divi Builder. It was previously only available for Kallyas theme. In May 2020, Zion Builder was released as a standalone plugin, allowing you to use it on WordPress themes outside Kallyas.

The plugin was released as a freemium plugin so that you can try the experience of creating a page using it without requiring to make a purchase first.

If you enjoy using Zion Builder, there is an option to use the pro version to unlock more advanced features. You can download the free version of Zion Builder on the WordPress plugin directory.

The Interface

One of the highlights of Zion Builder is its lightweight editor. To be honest, we have no certain metric to prove this, but what we felt during the testing is that the Zion Builder editor is way faster to be loaded than Elementor and Divi Builder. Pretty close to Brizy. Speaking of Brizy, the Zion Builder editor is pretty similar to Brizy.

It has a large canvas area, with a panel on the left side — which takes only a little portion of the overall editor area. You can use the panel as navigation, to access the template library, to see the version history, to make the page settings, and to access the responsive editing feature (by switching to desktop/tablet/smartphone editing mode).

What about adding an element?

In terms of adding a new element, Zion Builder is similar to Divi Builder. You can click the plus icon on the canvas area to add a new element. There are three pus icons you will on the canvas area: blue, green, and yellow. Whichever plus icon you click, you will have a panel to select an element you want to add.

You can simply click the element you want to add and it will be added to the canvas area. Hovering your mouse over a certain element will display the handle. When the handle is clicked, the toolbox will appear. There are three actions you can perform from the appearing toolbox: open the editing panel, save the element to the library, hide the element, clone the element, and delete the element.

The editor interface of Zion Builder is overall great, but we have a complaint about it. When you are on a certain panel mode, such as view panel mode, and want to perform a new action (say viewing the version history), the editor will add a new panel. This can interfere with the working process as the canvas area is capped down.

It would be great to retain only a single panel for multiple actions like Elementor does.

Design Elements

Most page builder plugins differ their design elements into three types: section, column, and the actual design element (called module in Divi Builder and widget in Elementor). So does Zion Builder. In Zion Builder, you can also add sections, columns, and the actual design elements (which is simply called elements).

However, Zion Builder is a bit different. It doesn’t treat both section and column as the required elements like Elementor and Divi Builder. You can add an actual design element — say a Progress Bar — without adding a section or column first.

Here are the elements offered by Zion Builder:

Text	Soundcloud
Section	Pricing Box
Column	Image Box
Custom Code	Image
Google Maps	Icon
Counter	Icon Box
Progress Bars	Gallery
Image Slider	Heading
Anchor Point	Video
Icon List	Button
Testimonial	Separator
Shortcode	Alert
Sidebar

The elements above are available on both versions (free and pro). If you use the pro version, you will also get the following additional elements:

• Tabs
• Accordions
• Countdown
• Search
• Social Share Buttons

Can’t find a Form element? Zion Builder indeed has one yet. Quite disappointing given a form is a crucial enough element. You need it to create a contact form or an email opt-in form. As an alternative, you can use a form builder plugin like Contact Form 7 or WPForms and then use the Shortcode element to add your form. Or, if you have HTML skills, you can make use of the Custom Code element to create an HTML form.

Editing Experience

As we have covered above, Zion Builder comes with a visual editor that offers a large canvas area. It also brings a live editing experience. It’s just, as we have also covered, there is a little issue with the panel. A new panel (or sub-panel more precisely) will appear as you make a new action from the current action.

Another issue about editing experience in Zion Builder is that you have to enter the number manually when you want to make editing that involves numbers like padding, margin, or size. There is no arrows or adjuster (or whatever you call it) like the ones on Divi Builder, Elementor, and Brizy.

Zion Builder Pro Features

If you love the way Zion Builder works (or whatever the reason to make you fall in love with it) and want to upgrade to the pro version, you will be able to unlock the following features:

Ability to Add Dynamic Content

The first feature you can unlock after upgrading to the pro version is the ability to add dynamic content. This feature will pull dynamic content of WordPress to any area you add the element to. The supported dynamic content types are:

There is also an option to add custom fields. However, when we tried it with ACF, this option didn’t work.

The dynamic content itself works only on the Text element. After upgrading to the pro version, you will see a database icon on the content editor of the Text element to add a dynamic content. There is no option to add a dynamic link, unfortunately.

Theme Builder and WooCommerce Builder

Theme builder is a common feature of a page builder. Today, nearly all page builders offer this feature. A theme builder allows you to create custom templates to replace the default templates of your themes. For instance, you can create a custom header template to replace the default header template of your theme. The theme builder of Zion Builder Pro allows you to create the following custom templates:

• Header
• Footer
• Search results page
• 404 page
• Single post
• Single page
• Archive pages (categories and tags)

If you have WooCommerce installed and activated, you can also create custom templates to replace the default templates of WooCommerce.

You can create custom single product page and product archive pages using the WooCommerce builder of Zion Builder Pro.

Transform

You can use this feature to add CSS transform to a certain element (without needing to write the CSS code). At the time of writing, Zion Builder supports only four properties (transform types): translate, rotate, skew, scale.

Custom Fonts and Icons

By default, Zion Builder offers only 6 font families: Arial, Times New Roman, Verdana, Trebuchet, Georgia, Segoe UI. We personally love this as narrower options mean more efficient workflow. You can use your own font families after all.

The pro version of Zion Builder supports integrations with Google Fonts and Adobe Fonts (formerly Typekit). You can also upload your own font files in the following formats:

• WOFF
• TTF
• SVG
• EOT

While for the icons, Zion Builder makes use of the Font Awesome service. There are 1,535 icon options offered in total. If they are not enough, you can also upload your own icon files.

Global Colors

Global colors is a feature you can make use of to streamline your workflow. With this feature, you only need to change the color once and the change will be applied in the area where you use the global colors in. For instance, say you have used a global color on a column background and text color. In this case, when you change the global color used on the column background and the text color, the change will be applied to the column background as well as the text color.

You can define a global color from the Zion Builder settings page and access it on the settings panel when you want to set a color of a certain element.

Custom CSS

If you have CSS knowledge and want to apply on the page you are creating, you can also do so as Zion Builder Pro allows you to add custom CSS. To add one, you can go to the Advanced tab on the settings panel. The option to add custom CSS lies on the bottom side.

Pro Templates

Just like other page builders out there, Zion Builder also offers premade templates to streamline your workflow. The pro version offers more premade templates than the free version, for sure. Well, the premade templates offered by Zion Builder are still few in number.

But upgrading to the pro version might grant you access to new upcoming new pro templates. To access the template library, you can click the plus button on the canvas area and click the Library tab on the appearing dialog panel.

Role Manager

This feature allows you to specify who has access to the Zion Builder editor. You can set the permission by the user level. This feature is handy if you have a WordPress site with multiple users with different levels. You can access the role manager feature via the settings page of Zion Builder.

The Verdict

Most WordPress users are now using a page builder when creating a new website or redesigning their website. Zion Builder is a new player in this segment. If you have ever used the more popular existing page builders like Elementor and Divi Builder, chances are you will come to a conclusion that the features offered by Zion Builder (the pro version) are very basic. You can’t even find an element to create a form whereas, it’s a crucial enough element. But again, Zion Builder is still young.

As mentioned, some new features are currently being developed. If you enjoy the editing experience offered by Zion Builder and patient enough to wait until those features are available then upgrading to the pro version is not a wrong decision. Or, you can wait for those features before upgrading to the pro version.