Zion Builder features

Core competencies

Elements and templates at your fingertip

Add elements and templates right where you need them from the page builder popup. This popus gives acces to pre-made templates, to elements and to library.

Independent composition of elements

Each element is composed from a wrapper and its sub-components. For example a button is composed from a wrapper, the button and the icon, and each one of them may have individual styles applied.

Unified system of options

Every element has the same easy to use and intuitive options pattern found in the “Element Options” panel. It consists of 3 main tabs: general, styling, advanced and search.

Global styles

In order to apply the same styles on multiple elements, Global CSS Classes were implemented. They can be styled either from page options panel, or from the Element options panel. No coding skills required.

Live responsive editing

Visually decide the sizes, colors or positioning of the elements for each screen. This means that any changes made to the mobile view, will only appear on that device and it will not affect the other devices, which will still maintain the original design options.

Custom rich text on click

Inline editor is triggered on text click, and provides options such as font family, size, weight, spacing, alignment or text-transform. It can also be dragged anywhere.

Gradient background

You can layer multiple gradients by making use of color opacity. When set a lower opacity of gradient colors, other gradient layers become visible. Experiment with a different options on different gradient layers.

Manage loaded resources

You can choose what fonts , colors, gradients, icon packs or templates to appear in the page builder. That means you can choose only the fonts you need in your website even if on the dashboard you have access to hundreds of other fonts.

History of actions

Saving system, history of your actions, post revisions, users permissions or easily discard changes give you the power of becoming the sole creator of your website. Shortcuts for undo and redo are also available.

User experience

Dragging elements

When you see the cursor  changing to "move", it means you can drag the element anywhere in the page. A line appears where the next position will be. 

Dragging size and spacing

The element gets it’s size and spacing changed directly by dragging its toolbox lines that appear on hovering an element.

Right click actions

The right click can be triggered from any type of tree-view and contains the main set of actions needed: copy, edit, remove, duplicate, hide, save, cut, discard and copy element styles.

Top right toolbar shortcuts

This toolbar appears only on hovering an element and gives the possibility to access the options panel, to save, hide, duplicate or delete the element.

Custom workspace

The user is able to open, close, drag and resize the panels according to his needs. The main panel can be dragged on the left of right side of the page.

Keyboard shortcuts

The most used and intuitive keys were implemented to ensure the accessibility towards the user actions.

Searchable options

We implemented a search system, so that you can easily find any CSS rule you need.

Discard changes

If you want to go back to default style, you can easily discard changes for any option that you just changed.

Easily change the number values

Each number input from the builder's interface can have its value changed through mouse dragging.

CTRL + Drag

Holding CTRL key while dragging sizes and margins of an element, sets rounded values to your spacing and sizing options.

Design features

Blending Background

The background is able to overlay the color, then the image and the the gradient. This is a powerful tool for designing hero sections.

Color picker

We created our own custom color picker with its own library of color schemes and its own management from the Zion Builder dashboard.

Pseudo - selectors

“Hover” state of an element combined with the independent composition of elements brings powerful design that otherwise would have been achieved only with custom code.

Element's motion control

Add movement to your elements using the CSS3 animations: slide, fade, zoom, rotate are just a few examples. Control the appear animation duration and delay.

Flexbox control

Control the alignment of your content ( the child or the parent elements ) to be vertical, horizontal, or center. All the flex-box rules are implemented in the display section of Panel Element Options.

Powerful background image

Background image comes with multiple options which allows one to easily customize a hero section. The image position is responsive and can be controlled from mouse dragging.

FiltersPro

Drag the intensity of a filter and obtain beautiful and unique elements in your page design. Blend mode, sepia,  blur, opacity are just a few options mentioned.

Borders 

Enhance your designs with this feature. Controlling the borders of your element has never been easier.

ShadowsPro

Create different layering styles and  highlight your designs with this feature. Shadows can be applied to any element in the page, including texts.

Typography

Decide how your text should look like. Alignment, fonts, weight, size, color, or transformation are all found both in the styling tab or in the inline editor.

TransformPro

Modify the space coordinates with the CSS3 properties: Translate, rotate, skew, scale. 

TransitionsPro

Control delay, duration for any CSS property and add timing functions. This feature helps you create beautiful transition effects on hovering or appearing elements. 

Library system

Library Panel

A whole panel that can be accessed from the main bar. It contains the actions needed for import and exporting library parts, and the access to Zion library.

Templates and blocks

Templates are groups of elements that can be re-used in in other designs. They can be created by any user or taken as they are from the Zion library.

Saving templates

This action can done from the main panel fly-out or from the element toolbar. The template is saved with a category assigned.

Insert template with a click

Clicking on the "insert" button will add the template at the end of the page.

Searchable library

The elements from the library are easily located through the search component that retrieves the searches by category or name.

Custom categories

A category can be instantly created from the saving popup just by adding the new name. Your own saved and imported template automatically loads in the library the newly created category. 

Export / Import

 Exporting a template will save a .zip file containing  the template configuration. This file can be imported then to another page through the library panel.

Templates preview

Templates can be previewed in an iframe either from the Zion Builder dashboard, or from the Panel Library.

Templates Editing

The local templates are editable with the page builder and the actions is triggered either from the Zion Builder Dashboard or from the library panel.

Advanced features

Post revisions

While multiple savings of a post, all the wordpress revisions are saved. These can be seen from editing the post in wordpress dashboard.

Role ManagerPro

Managing user's permissions is done from Zion Builder's dashboard. You can have full control of what users can edit.

Regenerate CSS

Styles set in Zion are saved in CSS files in the uploads folder. Recreate those files, according to the most recent settings.

Replace URL

Enter your old and new URLs for your WordPress installation, to update all Zion data (Relevant for domain transfers or move to 'HTTPS').

Custom CSSPro

With custom CSS you can fine tune the styling. Add custom CSS to elements or posts.

Custom javaScriptPro

JavaScript code is applied to the whole page you are editing and is added through the page options.

Renaming elements

Locating the correct element to interact with can be difficult when developing a complex web page. So you can rename your elements to get easily identifed.

Element's visibility

Control if only logged in or logged out users are able to see a content.

Custom HTML element

This element supports custom HTML, custom CSS, custom JavaScript, having the "script" or "style" tags added before adding code.

Columns sizes and offsets

Decide the size and offset to a set of columns so you can define your template grid system. This is easy to control also on other devices.

Extendable options

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