Zion Builder features
Elements and templates at your fingertip
Independent composition of elements
Unified system of options
Live responsive editing
Custom rich text on click
Manage loaded resources
History of actions
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.
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.
The most used and intuitive keys were implemented to ensure the accessibility towards the user actions.
We implemented a search system, so that you can easily find any CSS rule you need.
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.
The background is able to overlay the color, then the image and the the gradient. This is a powerful tool for designing hero sections.
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.
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.
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.
Enhance your designs with this feature. Controlling the borders of your element has never been easier.
Create different layering styles and highlight your designs with this feature. Shadows can be applied to any element in the page, including texts.
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.
Modify the space coordinates with the CSS3 properties: Translate, rotate, skew, scale.
Control delay, duration for any CSS property and add timing functions. This feature helps you create beautiful transition effects on hovering or appearing elements.
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.
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.
The elements from the library are easily located through the search component that retrieves the searches by category or name.
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 can be previewed in an iframe either from the Zion Builder dashboard, or from the Panel Library.
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.
While multiple savings of a post, all the wordpress revisions are saved. These can be seen from editing the post in wordpress dashboard.
Managing user's permissions is done from Zion Builder's dashboard. You can have full control of what users can edit.
Styles set in Zion are saved in CSS files in the uploads folder. Recreate those files, according to the most recent settings.
Enter your old and new URLs for your WordPress installation, to update all Zion data (Relevant for domain transfers or move to 'HTTPS').
With custom CSS you can fine tune the styling. Add custom CSS to elements or posts.
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.
Control if only logged in or logged out users are able to see a content.
Custom HTML element
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.
The whole system of options, which is built in PHP, allows other developers to add their own options to the main panel.