Zion Builder features
Pro features
Header & Footer BuilderPro
Build unlimited Headers & Footers with the Theme Builder and assign them to any page you want.
Theme BuilderPro
The teme builders allow you to create content and assign it to different pages like blog or product pages. This tool lets you customize your products archive page, single product page, blog archive page, blog single page, etc.
Repeater QueriesPro
Build custom repeater queries with ease in advanced elements like sliders, accordions, tabs, etc.
Dynamic DataPro
Use a variety of dynamic content to design your post types. Add content like featured image, post link, post description and more.
Blog archive & Blog single page builderPro
Full flexibility to design your own blog archive page or blog single page.
Use the theme builder to asign dynamic templates to your blog page.
WooCommerce BuilderPro
Customize your products archive page or products single page.
Use the theme builder to asign the dynamic templates you have created to products pages.
Slider builderPro
Add any content to your slider. You can also easily use the repeater to load dynamic content from your blog page or shop.
Modal builderPro
Customize your modal popup with any content you want and trigger it anywhere you like, on page load, scroll, exit intent and more.
Core competencies
Elements and templates at your fingertip
Independent composition of elements
Unified system of options
Global styles
Live responsive editing
Custom rich text on click
Gradient background
Manage loaded resources
History of actions
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.