Zion Builder – Intuitive WordPress builder

With the right website Builder, you can test your ideas at a rapid speed. You can even rebuild your entire website by simply dragging and dropping the different design elements. And if you’re not a designer, then do not worry, they have a lot out of prebuilt design elements that you can just use. Today’s product showcase is Zion Builder a Website Builder perfect for WordPress.
So without further Ado, let’s dive into Zion Builder and let me show you how to create a page.

We are now inside WordPress where I have set up Zion Builder and I have been playing around with Zion Builder. First off, I just want to show you the settings here because this is where it really starts and if you set up the settings correct, you will really save a lot of time in the end. Now first off here is where you choose what type of post you want to be able to use Zion Builder on. Next up is maintenance mode.

1. Features of Zion Builder
2. Zion Builder pricing
3. Alternatives to Zion Builder
4. Future of Zion Builder
5. Pros & Cons using Zion Builder
6. My experience using Zion Builder

Features of Zion Builder

So if you’re building on your website and you don’t want your visitors to see what you’re doing, you can simply enable a coming soon or a maintenance mode which they will then see on your website. The appearance is simply for whether you want the light theme or the dark theme of Zion Builder. In the font options here, I would really recommend you going in here and adding the fonts that you use, this will really save you time. In the end. This is not like a global styling, but it is a way for you to easily find the fonts that you use within your project.

If you’re using custom fonts, you can easily upload them here, and they do also support Adobe Fonts.

Now for the custom icons. Per default, you get Zion Builder with the Font Awesome 5 icons, but you can easily upload your own icons right here on the button. Now the last one down here is presets. Here you can basically do global colouring and gradients. So what I’ve done is I’ve created my blue one as a global colour, so I can easily use that blue one and map it to all the places I used the blue.

So let’s say I want to change to a green one. Then I basically go in here and change it to green and then everywhere I have used it on my website. It will then change to green. Now before we move on to the theme builder, I want to show you templates. Because templates is basically global blocks and elements that you can use within your website. So for instance here I have a blog which is a modal where I have users signing up for a trial.

This model I don’t want to rebuild on each page of my website, so I’ve made it as a block so I can reuse it and easily just paste it in to all of my different pages. Now this does sound a little time consuming, which is why I’ve done it a little bit different. I’ve added this modal to my footer, so I only have to add it in one place, and I will show you how just in a moment. You can also build entire templates and add in here as your templates so that’s an entire page you build out, save it as a template and then you can reuse it later on.

But now let’s move on to the theme builder here because the theme builder makes it possible for you to build different designs depending on the situation. So you can see here I have three different designs.

I have my default template, which is used all over my website, unless there is something overriding it. And I have two places where I overwrite this default template, that is on the single blog post and on the blog itself. But now you can see that I use the same footer on all of these templates. It is only the header, which is varying, and that is because on my blog I have a blue background, whereas the default is just a white background. And on the blog post I have an even different type of header I’m using.

But now I want to show you the footer here. So if I go in and I edit the footer, this is the first time we now get into the Zion Builder, so you can see I have two sections here and the third one down here. The first section here, which looks a little bit strange, is actually my shortcode to my modal. So this is not how it looks on the front end. This is just my modal that I have inserted via a shortcode.

This means that I only have to change my modal in one place, whereas if I just inserted it as a template and I made a change in my modal template, it wouldn’t reflect right here. So if you want to use this template, and it needs to look exactly the same on all pages, then this is the way to do it. If you just want to insert it and make your own little version of it, then you basically go into your library. You click on local library. I have it down in my blocks, and then I just press insert. Now it has inserted it and I can then work with it so I can actually do changes.

But these changes are not reflected on the actual modal. Just be aware of that. Now, when I’m done with my footer, I will press save. I will not do that now just close the component.

But this is how you build templates for different situations. So up here, when we add a new template, we choose what this template is for. So for instance, the one I have built for my blog here, you can see if I edit that. I have only ticked up specific pages and then blog because I’ve made a specific blog page for it. And this is how you can do it.

For instance, my blog post here. If I press edit, I have chosen for all posts, not pages, just posts. So all posts have this design right here. And yes, you can also use Zion Builder to build your blog. I will show you that right now.

So within Zion Builder, I have built this blog here. It is very simple. It has a header section up here. Of course, my menu, my footer, and then the actual content here, which is my blog. Now, the way I have done this is maybe a little bit complex, but let me try to explain it to you because we have what’s called a repeater option.

A repeater option is containing two elements is containing a repeater provider and a repeater consumer. So the provider is the outer element and the consumer is the inner element. The provider is what provides information and the consumer is what consumes information and showcase it. So on my provider, I’ve made a query builder set that it needs to be posts and I want to show ten post per page order by date. Now, if I then go in and I edit my column right here, you can see with an image, a title, a link and a category up here you can see I have enabled consumer.

This means that I can use the information from the provider to build out my design here. So if I go to General and I click, for instance, edit image, you can see up here that I have chosen to use featured image. And the way it works is it’s called dynamic fields. So here I can remove the field and then I can show you how I do it. So down here we have a little icon called Use dynamic Data.

By clicking on that you can see I have something called post. Within post I can choose to use the featured image. Now this is the featured image for the specific blog post. So if I made multiple blog posts, they would automatically repeat in here because of the setup I have made here. So just to sum up, you make a provider where you set your query of what you want to show of content, and then you make your consumer, which is your design for the provided information.

And the same goes for the title down here. If I click on the title here, you can see again, I’ve chosen post title as my dynamic data. Furthermore, I’ve also chosen that my heading needs to be a link, and I have chosen again dynamic data where it needs to link to the post or the page in the same window. Now here you can see some of the elements from Zion Builder, for instance, in Styling. If I click on Wrapper here, you can see we get some different types of changes we can do for CSS mainly, but it is drag and drop and simply clicking.

There is no code involved here. For instance, the background I can change that to either be a colour. I can choose a gradient, an image, or even a video as my background. For typography here I would love to see global styling and it is coming. But for now what I do is that I go in and I choose my fonts and you can see what I showed you earlier where I chose some fonts in my presets.

They are now the top two fonts here that I use and they are changing in lifetime. You can see right here. I can also add text shadow and I can just do so much within Zion Builder. I can build borders, I can change the size and the spacing. I have so many options within display where I can choose how my display needs to be based on the fit, which means the screen size.

Furthermore, I can also choose transitions, which is one of my favourites that I use for buttons. So I have a button up here which is showing sign up for beta. This has a transition of 300 milliseconds, which means that the transition from going from coloured to transparent is much more smooth and you have more options. Now what you can do to maybe make a little workaround for your global styling is adding CSS classes, so you can build a global CSS class. You can give it a font, you can give it a font size and so on, and then you can use it in here.

So for instance, I have a global CSS class called Open Beta Programme, and that’s because every button which has this specific class opens up my modal where they can sign up for my beta. If I add that now to the heading, that means that every time someone clicks here it will open up a modal and then I can, of course, also choose the different elements within the styling. I will just remove it again. Now one more thing you can do is that you can choose the different sections here based on what state you want to style.

So if you want to change the hover of the actual heading here, you just choose hover and then we change that it needs to have a background on red. That means that every time I Hover on my actual heading here it will now be red, as you can see here. In the advanced tab here, we have basically custom CSS, and we have, of course, the repeater option I just shown you. You can also animate your different CSS elements. You can make a bounce here and then you can see how it actually looks. You can make a flash, you can make a rubber band, and this is a great way to draw the eyes attention on specific elements that you want people to notice.

The last thing here is search where you can basically search for whatever you want to change. So if you want to change the animation, you search for animation and then you change it for the specific element. Now you can also change the view and change to mobile to see how it actually looks on mobile. You can see here it looks okay. I need to change a little bit up here, but other than that, it actually looks great.

And we can also change for tablet, laptop and desktop just to see how it looks and make sure that our website is responsive. Now you do also have page options, which is basically just the title, the status of the page, the page layout, which is set default right now. Then you can add custom CSS and custom JavaScript to the specific page. That’s a great little add on. Then you can make global CSS classes.

You can see I have my open beta programme class and you can make dynamic data preview source where you choose whether it should be a single, post type archive or a taxonomy archive. Of course, depending on what page you’re building. Now three more elements I want to show you is the tree view. This one works as a Navigator where you can easily find your different elements, because when you just add a header, it’s most likely that there is a column and a row around that. So to maybe edit the column, it’s a little bit difficult to find it here in the view by just clicking on this small edit button here.

So then you can easily take the tree view here and then you can click on the specific elements right here. We do also have a section view right here, which is maybe a little bit easier for you. And then we have the wireframe where we get an entire different way of building our website. This is not my favourite. I really use the tree view a lot.

If you do make changes you don’t like, you can also go to the history here and then you can redo it. Last but not least we have our library, which I already shown you. And in here you can see that we have a lot of prebuilt design elements that we can just insert into the editor and then build our website from the ground up. What I usually do when I need to add extra sections is I click on the plus icon here because then I can search for the elements.

Let’s say that I need an image box. Then I search for image, click on the image box and then you can see we have an image box with no styling at all that we then need to go in edit the image box and then make it into our design. Now with some global styling, this would have been a lot easier, but right now I still really enjoy using Zion Builder and I can’t wait for the future. Now before we move on to the pricing of Zion Builder.

I just want to show you the Pag speed insights because Zion Builder is really advertising that they’re a fast Loading website Builder, and that is really true. In here you can see right now I have built the website via Zion Builder and I have no optimisation plugins at all. So when we scroll down here, first of all, you can see that we have 67 as a score on the mobile, which is already very high. When we scroll down, we see that the issues we have is the images, which is not next generation. We need a plugin for that. And then we can see that the server is having a little bit long time responding could be the images, but it could also be that we haven’t minimised and compressed our files, which we need another plugin for.

So by installing two plugins, one for the images and one for compressing and minimising our files, we would score a lot higher because that is the main elements that we are failing on right now. And if I change to computer, you can see we score 84, which is also very high. And again, it’s talking about the server’s response time, the images and that we need to compress and minify our files. So they are really doing a great job creating fast websites with Zion Builder.

Zion Builder pricing

When we take a look at the pricing structure of Zion Builder, it is very simplified. First off, you can get started completely free to test out Zion Builder. Of course, it is a limited version where you can test it out on your website to see whether Zion Builder is for you or not, because Zion Builder has taken a different approach to the website builder game. Now when we compare the paid plans to each other, they only differ on the amount of websites you can use Zion Builder on.

Otherwise you get the same amount of features.

And what I really do like about Zion Builder is how agile it is. You have so many options compared to the competitors.

Alternatives to Zion Builder

Because the alternatives to Zion Builder are Elementor and Oxygen Builder. Now, Elementor is definitely number one in the website builder industry. They have just been in the game for longest and they just have a lot of pro elements that you can use in order to really design your website. For instance, with Elementor, you have global styling.

This is not something we see within Zion Builder yet, but when we do take a look at the future, which we will do just in a moment, you will see it is on the roadmap. Now for the Oxygen Builder they are in between I would say. Zion Builder is close to Oxygen Builder and Oxygen Builder is coming close after Elementor. However, Oxygen Builder is still behind Elementor on the amount of features that they have. But it is great to see alternatives popping up to Elementor, so we get some competition in the industry to get even better products.

Future of Zion Builder

When we take a look into the future of Zion Builder, it is very interesting. First off, they’re working on rebuilding the entire interface to make it even more intuitive for us to use. Then they’re working on a basic theme. This theme will make it possible for us to build an even faster loading website than right now. Then they’re working on a form builder so we can build forms within Zion Builder so we don’t have to go out and find external plugins for that.

Then they are also working on more integrations to other plugins so you easily can use external plugins within Zion Builder when it is that you build your website. And last but not least my favourite, they’re adding global styling to Zion Builder. This makes it possible for us to build websites even faster because we don’t have to sit and choose the fonts, the colours and the head sizes all of the time.

Pros & Cons using Zion Builder

Now moving on to the pros and cons of Zion Builder. Starting with the pros, you get a fast loading website. You can build your entire WordPress website using Zion Builder and it’s so easy to use. Whereas for the cons, Zion Builder does not have global styling, UX can be tricky sometimes when you click on certain elements, and it’s not a mature product, so we still have small box here and there.

My experience using Zion Builder

Zion Builder is a great alternative to Elementor. They have managed to build a website Builder that takes a minimal amount of time to learn how to use and the possibilities are endless. I can’t wait for the future. Overall, I will give Zion Builder four stars, but yeah, that is my review of Zion Builder. I hope that you liked the review and if you did, please give it a thumbs up.

If you have any questions to Zion Builder or other products, you would like me to review. Please leave a comment down below. Thank you so much for watching. Let’s catch up on the next one.