Zion Builder For WordPress : How To Use It?

In this article, we are going to take a look at a relatively new page builder for WordPress called Zion Builder. This article will give a basic idea of “How to Use Zion Builder“.

What is Zion Builder?

Zion is a Drag & Drop Page Builder for WordPress, developed and designed by the Hogash team. It is very similar to page builders such as Elementor, Divi, WPBakery.It comes with many features, including – 

• Live Responsive Editing
• Manageable Loaded Resources
• Design Features
• Keyboard Shortcuts
• Flexbox Control
• Pseudo Selectors
• Element’s Motion Control
• And Many More

We are going to learn more about these features later on. Zion Builder also supports RTL.

Try Zion Builder Without Installing  

Zion WordPress Page Builder Comes With 25+ Free Elements. Almost all of these elements are basic. 

1. Section & column: Just like other page builders, Zion Builder also has sections and columns for layout design.
2. Text Editor: Usual Text Editor to write, edit text. You can also use shortcode with this text editor. 
3. Google Maps: Basic Google Maps integration.
4. Custom HTML:  Add custom HTML blocks as an Element.
5. Shortcode: Insert Shortcode.
6. Progress Bars & Counter: Simple Progress Bar & Counter
7. Image Slider: Image Slider or carousel.
8. Anchor Point: Anchor Point for One Page navigation.
9. Testimonials: Basic Testimonials element.
10. Icon List: Usual icon list.
11. Pricing Box: Pricing table or box.
12. Soundcloud: Easily embed SoundCloud modules.
13. Accordions & Tabs: To display large content in a small area.
14. Other Basic Elements such as Video, Image, Icon, Gallery, Heading, Button, etc.

If you’re interested in the Pro version of Zion Page Builder Plugin for WordPress – Click Here

How to Use Zion Builder (Free Version) – A Basic Walkthrough

1. First of all install and activate Zion Builder Plugin

2. Go to pages and click on “Add new” or Click on the edit button (if you want to edit Old pages with zion). I would highly suggest you use a new page rather than using an old page.

3. Now look for the button that looks like “Edit With Zion Builder” (Looks exactly the same as Edit With Elementor button). Click on that button.

4. This Page should open. Now close the video (or you can watch it).

5. The above interface with appearance. Now before you start editing, we have to pick a layout or you can continue with the default layout. Unlike other editors or page builders,

We can change the "Page Layout" from the editor itself and this is a great feature.

6. To pick a Page Layout, click on the Settings > Page Options > Page Layout.  Here I’m going to use Zion Builder Full Width. 

Note: You can choose any of the page layouts.

Also Read: 15 Best Starter Themes for WordPress for Developers

Page Options tab has many options such as Page Title, Page Status, Page Layout, Page Featured Image.

9. Now, we can start editing. To insert layouts, elements and library click on the + button.

Also Read: Best Free Text-Based Themes for WordPress In 2021 – Top 6

11. Adding text and elements – 

• let’s add some text or “demo text” using the text element. 

 Now edit the element.

12.Click on the pencil icon to edit the element.

After clicking the pencil icon and menu like this (above one) will appear. Click on the pencil icon again. You can also double-click on that specific element to edit it.

Styling options for Elements in Zion Builder.

the options will open up from there you can edit the whole element, including its styling. From the styling, we can change the color of the text and other properties like padding and margin, etc.

12. You can also give the element a name or a unique ID for CSS styling.

13. Now, let us insert a new section and add some columns. Click on the + button to add a new section.

Here, I have added a progress bar (1st row). And I have added a four-column row just below the progress bar. The first column row has a pricing box or table element.

The Blue Sidebar of Zion Builder 

1. Tree View Panel: It gives you a Tree View, Section View, Wireframe (or a Structured View) of the whole page. 
2. Zion Builder Library: It gives you access to the Template Library (Free & Pro templates) and  Local Library.
3. History: It lets you view the history of revisions.
4. Responsive Design: It enables you to toggle between device sizes (Desktop, Laptop, Tablet, and Moblie) and Edit accordingly.
5. Settings: It has basic settings such as Page Options and Global CSS Classes.
6. More: It Includes options such as Back To WP Dashboard, Key Shortcuts, Zion Builder Dashboard, View Posts, etc.
7. Save: It gives you options such as Save Template, Save Page, Save and Publish page.   

Conclusion: 

Overall, Zion is a pretty good page builder plugin for WordPress. I would recommend you to try it once. It is easy to use and beginner-friendly. It has a UI that looks like a combination of Elementor and WPBakery. It is also a relatively lightweight page builder for WordPress. Although it can be a little bit slower in some cases.

Related: 

• What is WPbakery Page Builder? – WPBakery Vs Visual Composer
• Best Themes for Elementor Pro in 2021 (Free & Premium)