Built and designed by Hogash team, the creator of the famous WordPress theme Kallyas, this plugin is the fastest page builder on the market. The user-friendly tools included in Zion Page Builder make the building process for WordPress websites easier than ever before. Read more on Zion Builder.
Tags: page builder, WordPress module, editor, visual editor, design, website builder, front-end builder
Zion Builder in action - TRY IT NOW
Below are listed the core competencies
Add elements and pre-made templates right where you need them from the page builder “Add Elements” Popup. This popup gives access to pre-made layouts, elements, and to the Library System.
Each element is composed of a wrapper and its sub-components. For example, a button is composed of a wrapper, the button, and the icon, and each one of them may have individual styles applied. Unlike other page builders, the plugin adds only the minimal HTML markup needed to render the elements in page.
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 and advanced. The general tab contains options specific to the edited element, the style tab contains options that can be used to style every aspect of the element while the advanced tab contains options for changing the element name, id, animations and more.
To apply the same styles on multiple elements, Global CSS Classes were implemented. They can be styled either from the page options panel or from the Element options panel. No coding skills required.
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.
The 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 on the screen so it doesn’t interfere with the design.
Multiple gradients may be layered by making use of color opacity. When set a lower opacity of gradient colors, other gradient layers become visible. This is a powerful and unique feature that lets you add a distinctive touch to your design.
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 on your website even if on the dashboard you have access to hundreds of other fonts. By default, the builder loads only the resources needed for the rendered page so you can get a fast website out of the box, without the hassle of micro optimization.
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.
The following extra design features come built-in the Panel Element Options: Blending Background, ColorPicker, Pseudo – selectors, Element’s motion control, Flexbox control, Powerful background image, Filters, Borders, Shadows, Typography, Transform, Transitions.
It contains the actions needed to import and export library parts and access to Zion library that provides hundreds of pre-made templates.
Live edit the margins, padding and size by dragging the element outline toolbar.
Repositioning the elements is done with simple dragging and dropping anywhere in the page or in the tree-view. A blueish line is the hint of the new position.
The most used and intuitive keys were implemented to ensure the accessibility of user actions.
A unique feature of Zion Builder is the "display" of a green dot showing the options that have changed. No more looking around to check each option to see if it was changed.
This toolbar appears only when 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 or right side of the page.
By right clicking on an element ( from the preview page or tree view panels ) a custom menu appears with the main set of actions needed: copy, edit, remove, duplicate, hide, save, cut, discard, and copy element styles.
We implemented a search system so that you can easily find any option needed. No more looking around the options panel to search the exact option. This greatly improves the learning curve for new users.
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.
“Hover” state of an element combined with the independent composition of elements brings a powerful design that otherwise would have been achieved only with custom code.
From the advanced tab in the edit element panel, you can add movement to the elements. There are ready to use animations such as fade, slide, zoom, etc. An animated element will start it’s animation only when it is visible on the page.
The builder uses the WordPress revisions feature. With each page save, a new page revision is also created allowing the user to go to a previous version of the page.
Built with PHP and Vue JS, the builder can be easily extended by adding new elements, adding new option types and custom conditions for the theme builder.
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 identified. On top of this, each element can be identified by its unique icon.
Zion Page Builder supports RTL which is vital for languages that are read from right-to-left (rather than left-to-right).
- Section - Has plenty of options to customize your layout.
- Column - Create your initial structure and fill it with other content elements.
- Text Editor - Write, edit, format text, and even WordPress shortcodes on your website.
- Custom HTML - Allows to include HTML code in the element section in case you need them.
- Shortcode - Insert advanced features or content blocks within your site.
- Google Maps - Add this item wherever you think it is necessary to guide your visitors to a place of interest.
- Counter - Progressively count up a value of your choice.
- Progress Bars - Visually represent the evolution of a process, skills, and project progress.
- Image Slider - Perfect for showcasing a set of images, portfolio pieces, and client logos.
- Anchor Point - Used to set up a One Page navigation on your website or maybe a documentation-like page.
- Testimonials - Perfect way to show your potential clients the kind of work you can provide.
- Icon List - Assign an icon to each element of the list and set the content of the element.
- Alert - Notify the user about something special, like – danger, success, information, or warning.
- Sidebar - Display information other than the main content of the web page.
- Soundcloud - Display an embedded SoundCloud module to play an audio file hosted on SoundCloud.
- Pricing Box - Create highly customizable interactive pricing tables with a lot of customization options.
- Tabs - Perfect for displaying a large amount of organized information in a small area.
- Accordions - Display the content like the tabs element, and use the available space more efficiently.
- Image Box - Easily add images with a large amount of control over their appearance and behavior.
- Image - Place an image from the media library or computer to the layout.
- Icon - Every icon is 100% full vector, so they look incredibly sharp and are retina-ready!
- Icon Box - Create a box with an icon and add a description to it.
- Gallery - Quickly create a responsive and stylish image gallery.
- Heading - Very easy to use, and allows for some interesting customizations.
- Video - Offers the ability for users to post self-hosted, YouTube, or Vimeo video clips easily to their websites.
- Button - Allows a variety of buttons with a lot of options.
- Separator - Highly flexible separator allows to control border size, color, width, alignment, margins above and below, and you even add icons to them.
Zion Builder Pro - Innovative plugin that comes to complete Zion Builder with many awesome features and elements which are meant to help users build their websites in no-time.
One of the things users love about Zion Builder Pro is the ability to fine tune almost every CSS property directly from the options panel. Combine this with the ability to change the styling for responsive devices and pseudo selectors so you have complete control over the page design.
Zion Builder Pro makes it really easy to add custom fonts to your website. After uploading your font files to Zion Builder, your newly added fonts will be available in the editor at typography settings.
Integration with Adobe Fonts was thought even from the beginning because this is a feature designers need.
Importing custom icon packs created with Zion Builder Pro has never been easier. Any new icon pack added will be available in Zion Builder icon library.
Managing user's permissions is done from Zion Builder's dashboard. You can have full control of what users can edit.
With custom CSS you can fine-tune the styling. Add custom CSS to elements and/or pages.
With PRO, the page functionality may be extended by adding a JavaScript code which is only rendered on the current page
With PRO the Accordions and Tabs elements accept nested elements as content. This is a powerful feature that lets you create unique designs.
With PRO you have access to premium design templates that you can import with just one click.
Global Colors and Gradients have the superpower to edit a color or a gradient in one place and have those changes take effect everywhere that color is used.
Try out the Global Gradients yourself and you’ll see how you can spice up the design of your website while saving time.
Replace static content from elements that are managed in WordPress with dynamic ones.
Add extra spice to the design and users will love them.
The most wanted and powerful elements are provided in the Zion Builder Pro version. Currently the elements from Pro version are:
- Countdown
- Social Share
- Search
- Pro Tabs
- Pro Accordions
- WordPress 5.0 or higher
- PHP 7.0 or higher
- MySQL 5.6 or higher
- WP Memory Limit at least 64M or higher
- Writing permissions for WordPress uploads directory and
.htaccessfile - PHP Zip extension must be installed
- PHP GD extension must be installed
- Install using the WordPress built-in Plugin installer Go to Plugins -> Add New
- Search for Zionbuilder
- Activate the plugin
- Go to Pages or Posts > Add New
- Press the 'Edit with Zion Page Builder' button.
- For documentation and tutorials visit Zion Builder's Help Center.
- For more information about features check out our website at Zion Builder website builder.
The strings used in the builder are ready to be translated in any language, according to WordPress standards.
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 which users will have access to through Zion Library.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
 Viktor Szépe 🤔 |
GNU GENERAL PUBLIC LICENSE license
Zion Builder is a front end visual page builder plugin for WordPress. Zion Page Builder lets you create original-looking posts and pages, compared with the post/page templates that come with the standard WordPress theme. It doesn’t require any HTML/CSS/PHP/coding skills. Zion Page Builder gives you full control over what your page looks like on desktop, tablet, and mobile.
Yes, you can edit posts, pages, and custom post types with Zion Builder by activating them from the Admin panel.
Zion Builder is compatible with most themes that are well constructed according to WordPress guidelines. Zion Builder works with almost every plugin, and mostly with the most popular plugins
The answer is definitely yes. If you run any kind of commercial business based on a WordPress theme and you wish to add interactivity in your pages, then Zion Builder can serve you the best.