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 ElementorDiviWPBakery.It comes with many features, including – 

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 MapsBasic 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 SliderImage 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. SoundcloudEasily 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

Zion Builder
Image Source : WordPress 

1. First of all install and activate Zion Builder Plugin

Zion Builder
Edit With Zion

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.

Zion Builder

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

Zion Builder

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,

Page Options In Zion Builder
We can change the "Page Layout" from the editor itself and this is a great feature.
How to Use Zion Builder

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.

WordPress Page Bulider
To add a template click on this button.
Zion Builder review
Pick any free template from the template library and click on the insert button
Zion Builder review

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

WordPress
Zion Builder review
On the layouts tab, we have the layout that we can choose. On the Elements tab, we have all the elements (mentioned above) to use. On the library tab, we have all Zion Templates.
Zion Builder review
10. Adjust the spacing by dragging the mouse, and it is quite intuitive and easy. 

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. 
How To Add An Element in Zion Builder
Select / Click on the Text Element
Text Options in Zion Builder
 Now edit the element.

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

Zion Builder

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
Styling options for Elements in Zion Builder.
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.

Styling options for Elements in Zion Bulider

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

Zion Builder

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.

How To Use Zion Builder

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: 

Leave a Comment