The new page builder plugin

Built and designed by hogash team, the creator of famous WordPress theme Kallyas, this plugin comes with tools to build an outstanding WordPress website. Let’s take a look at the most stand-out features this plugin brings on the table and what you, as a user, are empowered to do with them.


1. Elements and templates at your fingertip

Add elements and templates right where you need them from the page builder popup 

The popup elements is activated by elements from the page, so you can easily add the elements right where you need them. We already prepared some base template layouts that can help you decide the way your section will look.


2. Basic free elements

The builder comes with its own basic elements that can be styled from the element panel.

27 Basic elements that come built – in are : text, button, slider, gallery, image, section, column, custom HTML, google maps, counter, progress bars, anchor point, icon list, testimonial, alert, shortcode, sidebar, SoundCloud, pricing, tabs, accordions, image box, icon, icon box, heading, video, separator.

Beside those, the plugin bring also the WordPress widgets which can be added to the page just as other elements.


3. Independent composition of elements

This is Zion Builder’ s core competency. 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. Then, the icon can be styled separately from the button. The same concept is applied to the tabs element, accordion, progress-bars, image-box or the icon-box which are compound elements.

This type of composition gives a lot of power for the user to apply individual styles per each element sub-component.


4. The same styling options pattern

This is the second most important key feature in our page builder. We’ve thought about a new simplified structure – each element has the same easy to use and intuitive options pattern found in the “Element Options” panel.

Until you get used to the options panel, we have 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.


5. Style per users actions

No coding required for style on hover, or on focus. This is when pseudo-selectors come into play. “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.


6. Ability to use your own custom resources

You can choose what fonts , colors, gradients, or templates to appear in the page builder. With its own back-end WordPress Management, you are benefiting from all the features of an autonomous plugin, you will be the sole Creator of your website by managing the overall settings, templates and presets.


7. Full control over posts and actions

Title, status, layout, featured image are all available in the front-end. You don’t need to go on WordPress dashboard to edit them. The post’s revisions are also saved.

Through the advanced saving system, you are able to save and publish a page, save drafts, or a template. This is what we mean through maximum control over the pages and posts of your website.

While you are in the builder mode, a whole panel is dedicated to the history of actions, so you can always go back or forward.


8. Full control over dragging elements

This is achieved through the stylish toolbar that appears each time you hover an element. The element gets it’s size and spacing changed directly by dragging its toolbox lines.

Also, the system of actions that can be applied to an element is done not only from the top right toolbar, but also from the right click. The right click can be triggered from any type of tree-view.


9. Custom workspace in builder mode

The user is able to open, close, drag and resize the panels according to his needs. There is no constrain when you want to have a “clean” perspective.

If you you are not keen into seeing the 1 on 1 view of your elements, the tree-view system offers you the flexibility not only for “reading” but also for “writing” the page map.

With just a shortcut (CTRL + P) you can preview you page just as it looks like in the final rendering.


10. Global styles

Create your own color schemes and apply them to any element from the website. This is when global colors and global gradients come into play.

Having access to you own library of color and gradient schemes makes the implementation of any design on the website much easier. On the same page, you are also able to copy and paste the styles from one element to another.

As extra spice, global CSS classes were implemented so that you can add and customize CSS classes through the system of options. No coding skills required.


11. Increased accessibility

Accessibility is one of the major characteristics of our product, as our target market will be literally anyone who wants to build a WordPress website. 

Keyboard shortcuts are of tremendous help while creating a page, so even if you are a newbie with our app, we implemented this with the most used and intuitive keys.


12. Live Responsive editing

Take part in a full live responsive control over your page elements. One click away to change the design on the mobile, tablet or other devices, without leaving your current window.

Designing the layout on different devices is more than an enjoyable experience: you will 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 be seen on that device and it will not affect the other devices, which will still maintain the original design options.


13. 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. Its integration in the page is user friendly and flexible, as you can drag it anywhere.


14. Add motion to elements

If the above features present the dynamics of the builder, it’s time to show what could be achieved for the elements. With an advanced system of options, you can add movement to your elements using the CSS3 animations: slide, fade, zoom, rotate are just a few examples.


15. Design on the grid

The elements are using the flexbox system which you can apply to align your content vertically or horizontally inside columns and sections.

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

The add-elements popup already brings pre-made layouts so you just add elements inside the predefined grid.


16. Reuse the elements across multiple websites – the library system

Once you are satisfied of your design, you are able to reuse it on other posts or websites. The complex saving system allows you to save a single element or a group of elements. The import of the saved elements is easily done through the library panel triggered from the main panel.

The library system has 2 components: the Zion library and the local library. The premade templates already designed by Hogash team make the design process a lot more easier as it allows you to use multiple library elements across different pages or websites.


Conclusion

This outline of goals were the key concepts attached to the project from the scratch, keeping in mind that the user story is the most important in the product development. The features were built accordingly to them, shaping the actual version of Zion Builder.

All the above features are included in the free version of our plugin, so stay tuned till we announce the launch of the Pro version which will include extra power, elements and options.

If you need more detailed explanation on achieving the above editing features or what each individual option can do, please read the following documentation:

Share this article

Leave a Reply

Your email address will not be published. Required fields are marked *