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.
Zion WordPress Page Builder Comes With 25+ Free Elements. Almost all of these elements are basic.
- Section & column: Just like other page builders, Zion Builder also has sections and columns for layout design.
- Text Editor: Usual Text Editor to write, edit text. You can also use shortcode with this text editor.
- Google Maps: Basic Google Maps integration.
- Custom HTML: Add custom HTML blocks as an Element.
- Shortcode: Insert Shortcode.
- Progress Bars & Counter: Simple Progress Bar & Counter
- Image Slider: Image Slider or carousel.
- Anchor Point: Anchor Point for One Page navigation.
- Testimonials: Basic Testimonials element.
- Icon List: Usual icon list.
- Pricing Box: Pricing table or box.
- Soundcloud: Easily embed SoundCloud modules.
- Accordions & Tabs: To display large content in a small area.
- Other Basic Elements such as Video, Image, Icon, Gallery, Heading, Button, etc.
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.
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.
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.
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.
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
- Tree View Panel: It gives you a Tree View, Section View, Wireframe (or a Structured View) of the whole page.
- Zion Builder Library: It gives you access to the Template Library (Free & Pro templates) and Local Library.
- History: It lets you view the history of revisions.
- Responsive Design: It enables you to toggle between device sizes (Desktop, Laptop, Tablet, and Moblie) and Edit accordingly.
- Settings: It has basic settings such as Page Options and Global CSS Classes.
- More: It Includes options such as Back To WP Dashboard, Key Shortcuts, Zion Builder Dashboard, View Posts, etc.
- Save: It gives you options such as Save Template, Save Page, Save and Publish page.
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.