WordPress Page Builder – Zion Builder

Descripción

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.

Zion Builder in action – TRY IT NOW

WORDPRESS PAGE BUILDER FEATURES

Elements and templates at your fingertips

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.

Independent composition of elements

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.

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 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.

Global styles

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.

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

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.

Gradient background

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.

Manage loaded resources

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.

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.

Design features

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.

Library system

It contains the actions needed to import and export library parts and access to Zion library that provides hundreds of pre-made templates.

Dragging size and spacing

Live edit the margins, padding and size by dragging the element outline toolbar.

Moving elements

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.

Keyboard shortcuts

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

Discard changes

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.

Top right toolbar shortcuts

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.

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 or right side of the page.

Right click actions

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.

Searchable options

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.

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.

Pseudo-selectors

“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.

Element’s motion control

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.

Post revisions

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.

Extendable options

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.

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 identified. On top of this, each element can be identified by its unique icon.

RTL support

Zion Page Builder supports RTL which is vital for languages that are read from right-to-left (rather than left-to-right).

WORDPRESS PAGE BUILDER 25+ FREE ELEMENTS

  • 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.

Capturas

FAQ

What is Zion Page Builder?

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.

Can I edit posts or other custom post types with Zion Page Builder?

Yes, you can edit posts, pages, and custom post types with Zion Builder by activating them from the Admin panel.

Zion Builder compatibility with other themes and plugins

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

Can I integrate Zion Page Builder for my commercial theme?

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.

Reseñas

3 de marzo de 2023
In my opinion, Zion Builder is underrated and not advertised enough. It really is a very intuitive, fast, lightweight and feature-rich product. Congratulations to the developer and request to continue developing this great product. I know that the competition in the WordPress builders market is high, but a good product will always be on top. Keep the high level!
30 de septiembre de 2022
Think about the other builders like elementor but without the bloat. This is not a simple builder and you need to learn how to build the elements. But if i can do it then so can you! I like the ability to make category pages customised, like a normal page and using repeater function.
28 de junio de 2022
I have never seen a builder as fast as Zion. To be honest, I think it's faster than my internet. It's amazing how snappy everything works and how quickly the editor loads. I gave five stars for support, but I didn't migrate my other sites to Zion because the learning curve is too steep compared to Divi and Elementor. If you're comfortable with CSS and HTML, Zion could be heaven for you. Please make Zion more popular and make it easier to use.
Leer todas las 28 reseñas

Colaboradores y desarrolladores

«WordPress Page Builder – Zion Builder» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«WordPress Page Builder – Zion Builder» ha sido traducido a 4 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «WordPress Page Builder – Zion Builder» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

3.6.9 TBD

Added: “word wrap” option to typography options
Improved: Show global color names in both admin panel and editor
Improved: Show global gradient names in both admin panel and editor
Improved: Set default name when adding global gradient from admin panel
Improved: performance when modifying element options
Improved: Color-picker option performance
Improved: Prevent panels from exiting the visible window
Improved: Element toolbox performance
Improved: Don’t highlight element when changing it’s dimensions from the element toolbox
Improved: Show toolbox resize helpers when pressing CTRL/Meta key while changing margin/padding
Improved: Spacing helpers from the element toolbox can now work with any size unit ( for example, percentages )
Improved: Show opposite spacing helper when the CTRL key is pressed while resizing an element from the element toolbox
Improved: Show element menu when right-clicking on the element toolbox
Improved: Tabs element accessibility
Improved: Compatibility with WPML plugin
Fixed: element toolbox not displaying proper margin/padding if percentage is used

3.6.8 2023-23-07

Improvement: New UI for margin and padding
Improved: Allow wrapping text with span elements for text and heading
Added: (DEVELOPERS) new option type “box model”
Fixed: Console error when changing an active element while the input code option is visible
Fixed: console error related to link option type
Fixed Post lock popup doesn’t display properly in certain conditions
Fixed countdown element not working properly in safari

3.6.7 2023-19-04

Fixed: Compatibility with Yoast plugin
Fixed: Trash links not showing for the templates admin page
Improved: Added tooltips for tabs/accordions
Fixed: Search inside element options panel doesn’t display properly
Fixed: Some words inside the plugin could not be translated

3.6.6 2023-12-04

Added: Options to style the heading element links
Improvement: Added Zion builder templates as a WordPress admin menu item under the Zion Builder menu
Improvement: Automatically enable polylang for Zion Builder templates
Improvement: Show post type of taxonomy for options that show a taxonomy list
Improvement: UI/UX for the “yes/no” option type
Improvement: UI/UX for the repeater option type
Improvement: Show the Zion Builder menu in the admin bar for all pages ( https://feedback.zionbuilder.io/roadmap/edit-with-zion-builder-everywhere )
Improvement: [Performance] Don’t process element data if the element is hidden
Fixed: Polylang cannot properly translate Zion Builder shortcodes
Fixed: Whitelabel custom icons don’t show properly inside the admin menu in certain conditions
Fixed: Page options panel not working in certain conditions
Fixed: Some icons are not properly centered ( https://feedback.zionbuilder.io/roadmap/icon-element-not-squared-icons-are-misaligned )
Fixed: Section content inner width not working properly in certain conditions
Fixed: Builder admin menu icon doesn’t look good in certain conditions
Fixed: Theme builder items cannot be deleted in certain conditions

3.6.5 2023-14-03

Added: Ability to set mega menu icon color ( https://feedback.zionbuilder.io/roadmap/option-to-change-mega-menu-icon-color )
Added: Link Element. This element allows you to easily insert links on the page. ( https://feedback.zionbuilder.io/roadmap/add-dynamic-data-to-the-field-of-link-title )
Added: Ability to style the last menu item directly from the options ( https://feedback.zionbuilder.io/roadmap/style-last-menu-item-of-menu-in-styling-tab-useful-with-example-image )
Improved: Improved Link option type UI/UX
Fixed: Advanced custom fields dynamic data not working in certain conditions
Fixed: JavaScript console warning when adding the image slider element to the page

3.6.4 2023-17-02

Added: Additional helpful tooltip for various option types
Improved: Prevent page jump caused by the element add icon
Improved: The accordion element can be closed by clicking on the item icon ( https://feedback.zionbuilder.io/roadmap/alt-attributes-anchor-text-for-icons )
Fixed: WP widget options form not displaying properly on dark mode
Fixed: WP widget form not displaying the correct form when editing different WordPress widget
Fixed: The element menu automatically hides in certain conditions ( https://feedback.zionbuilder.io/roadmap/context-menu-doesnt-open-with-right-click-sometimes-under-some-conditions )
Fixed: Improper placement of select dropdowns

3.6.3 2023-13-02

Added: Loop option for video element and video background
Added: Option to enable video lazy loading ( can be found in Zion Builder options > Performance )
Added: Option to add “playsinline” for video element and video background ( https://feedback.zionbuilder.io/b/5v8jzj0g/feature-requests/mobile-video-not-fullscreen )
Improved: Removed video preview from the video option. The video preview took a lot of space and the preview can be viewed directly on the page
Improved: Updated Google fonts list ( https://feedback.zionbuilder.io/b/5v8jzj0g/feature-requests/add-more-google-fonts )
Improved: Allow YouTube URLs that contain playlist param. If this is present and the “loop” option is set to “no”, the videos will autoplay to the next item in the playlist
Improved: Show collapse button for accordions and tabs in tree view ( https://feedback.zionbuilder.io/roadmap/bug-for-some-elements-the-expandcollapse-icon-is-not-displayed-in-the-tree-view )
Improved: Combined video background and video scripts into one single script
Improved: Removed Zion Builder templates from XML sitemap ( https://feedback.zionbuilder.io/roadmap/remove-zions-templates-from-wp-default-sitemap )
Fixed: Video background not displaying the video inside the editor
Fixed: Select option dropdown exits the browser window in certain conditions
Fixed: WordPress media modal not showing results the first time it is opened from the video element
Fixed: global class options form not full height
Fixed: Cannot discard changes when editing a CSS class
Fixed: background image drag icon always appears in the background image option field
Fixed: CSS class changes not applied in the editor in certain conditions
Fixed: Console error showing in editor mode when using dynamic data for a CSS class
Fixed: Console error showing when opening the page options inside the editor in certain conditions
Fixed: Discard changes icon not showing properly in certain conditions ( https://feedback.zionbuilder.io/roadmap/child-green-indicator-doesnt-clear-automatically )
Fixed: PHP warning showing in error log in certain conditions
Fixed: Custom unit not working properly for margin and padding option
Fixed: gradient color disappears when dragging the color from the gradient background

3.6.2 2023-30-01

Improved: Lowered z-index for video overlay from 999 to 9 ( https://feedback.zionbuilder.io/b/5v8jzj0g/feature-requests/z-index-of-embedded-videos-overlay-image-is-too-high )
Improved: Added backward compatibility for zb.hooks API
Fixed: Color presets cannot be selected
Fixed: Compatibility with Rank Math plugin

3.6.1 2023-28-01

Fixed: Icon position CSS class for button element is translatable
Fixed: Compatibility with Zion Extras

3.6.0 2023-27-01

Improved: Moved element class and pseudo selector at the top of the element options panel
Improved: Number unit option type
Improved: Margin/padding option type
Improved: Press the CTRL key ( command on Mac ) to change the opposite value of the margin/padding option
Improved: Preserve unit for number input options when changing responsive device
Improved: Zion builder library open speed
Improved: Remove custom attributes options when editing a global CSS class
Improved: Zion Builder library display speed
Improved: Display of the system info admin page
Improved: Replaced save page notification with a small loader icon
Improved: Removed autosave notification when opening a page
Improved: Moved the “add new CSS” class to the top of the options panel
Improved: Updated all code to Typescript and Vue setup
Improved: Moved size and spacing options before border options
Fixed: Page template not applying when a theme builder template is used
Fixed: Rank Math integration stopped working
Fixed: Improper background color for custom code option on the current line
Fixed: Fatal error occurring in certain conditions when editing the menu
Fixed: Several actions from the inline text editor not working
Fixed: Background video doesn’t autoplay on mobile phones in certain conditions
Fixed: Element additional classes get deleted when removing element styles
Fixed: Compatibility with “Hoverify Chrome extension”
Fixed: Console error when hovering various style option tabs
Fixed: Local google fonts not working in certain conditions
Fixed: show/hide element not working from the toolbox
Fixed: container spacing options not showing
Fixed: new breakpoints not saving
Fixed: improper appear animation duration value set when changing the unit
Fixed: possible editor freeze when using the font color picker
Developer: Added the ability to add additional CSS classes to the CSS class selector option

3.4.1 2022-15-11

Added: Eyedropper to color picker
Added: Highlight the affected element when hovering on element style options items
Added: Code hinting to all code option types- for example, element custom CSS
Added: Option for choosing the accordion title HTML tag
Improvement: Removed unit selection from number inputs
Improvement: Updated number unit component to Vue setup and typescript
Improvement: When clicking on an element inside the tree view panel, the page will scroll to that element inside the preview window
Improvement: Double click to rename elements inside tree view panels
Improvement: Removed extra click needed to set margin/padding values
Improvement: Added proper title to icon border radius option
Fixed: CSS is not removing in editor in certain conditions
Fixed: Image gallery media modal not showing images in certain conditions
Fixed: Background size option not displaying properly when the main bar is placed on the bottom of the page
Fixed: Preview window not filling the entire screen when activating preview mode
[DEV] Improvement: Updated dimensions input to Vue 3 and script setup
[DEV] Improvement: Updated Input HTML component to Vue 3 script setup and typescript
[DEV] Improvement: Updated Vue to 3.2.41
[DEV] Added: Ability to set body classes when adding an element to the page inside the editor

3.4.2 2022-21-10

IMPROVEMENT: Added backwards compatibility for 3rd party plugins that use jQuery ( Zion Builder alone doesn’t use jQuery )
IMPROVEMENT: Updated links that pointed to Github issues to feedback.zionbuilder.io
FIXED: Edit with Zion Builder button doesn’t work in certain conditions
FIXED: Page assets not generating properly in certain …