Zion Builder - The Newest & Possibly Fastest Page Builder For WordPress

in this sponsored tutorial we're going to check out the zion builder it's the latest page builder on the block and i think it might have legs because it is super fast faster than any other page builder i've tried so far including oxygen so if you're interested in speed as well as developing nice-looking websites make sure you check out this tutorial if you have any questions or comments please leave them down below i try to answer them the best i can if you haven't done so yet click subscribe ring the bell so you don't miss any future videos now let's get started the very first thing i want to look at with zion builder is how fast is it as we know elementor is slow and other page builders are slow as well but they're actually a lot slower than you think xyron builder because it's fast it created this spreadsheet right here or somebody else did actually mic from somewhere this isn't created by xylem builder it's created by somebody else who's reviewing xylem builder and other page builders and comparing how many kilobytes of css and javascript they load on a page just by default just a completely blank page and for a completely blank zion builder page where there's nothing on there xoundbuilder the free version loads 16 kilobytes of css and .6 kilobytes of javascript for 17.6 kilobytes in total you might not know exactly what that means but the only thing you have to understand is that the larger this number is the slower the site will load the more you have to do for your optimization settings and optimization tweaks to get to load faster so zion builder with a blank page is at 17.6 if we look at elementor pro it's at 965 for a blank page and divi and brizzy they're even bigger oxygen builder which is super fast is 33. it's almost double what xound builder is so all that to say zion builder is pretty quick let's see how quick it actually is i loaded up this template right here this is one of the templates from the library in zion builder it's a pretty standard page it's got images buttons text icons no videos or anything like that it's got a counter just got a bunch of widgets from the page builder and the page builder is loaded on this page as well because it needs to be for the stuff to show up and we're going to run this page through page speed insights to see how fast it is and just to show you what kind of plugins we have running we have elementor and launcher pro deactivated so those aren't affecting it we have short pixel to optimize images so those images that are in this template will have been optimized by short pixel and siteground is deactivated and there's no other optimization plugins on this site so let's see how fast it is so i got a 64 on mobile and an 81 on desktop and i realize this isn't as fast as a pure html and css page but if we look at elementor pages i've done a bunch of videos on how slow elementor is and how to make it faster so you can check out one of those in the card above or the description down below to see that elementor without any optimization the mobile score is in the teens or low 20s or in some cases if you're testing well that day it could be in the high 20s but it's never up to 64 without any optimization and desktop is up to 81 and this site that we're testing here is hosted on siteground and so we have the siteground optimizer plugin which is completely free if you're on siteground and if we activate this and then run the test again we'll see these scores are even better our 63 is up to 68 so mobile wasn't that much better but our 81 is up to 94 with sg optimizer which again is a free plug-in if you're hosting on siteground if you're wasting on siteground and you want to know how to configure siteground optimizer sg optimizer to make sites fast click the cut up above or the description down below where i walk through the setup for siteground optimizer that i've done on this site and there's a big difference like this is this is huge for a page builder with no paid optimization just free optimization this is a great result so that is one of the reasons i think zion builder might have legs it is coming into a pretty crowded market with all the other page builders and a hard market because elementor kind of has its own up right now so let's see how zion builder actually works so just close a bunch of these tabs and if you're finding this tutorial helpful click the like button because that helps this video show up for more people on youtube so we can spread the knowledge and help more people with this information so make sure you click like if you like this video here we go so we have zion builder installed here we have the pro version we have design builder freezer umbrella pro and this list of plugins is different than you want you need to saw because i just switched to a local site so that'll go even faster which is nice for my video recording let's go to pages and then add new and let's click on edit with scion builder the first thing we want to do is kind of get a layla on how this page builder works it is kind of a hybrid between elementor style editing and brizzy style on the left hand side we have a control panel where we have various things we have a tree view panel this will show the view of the sections or a list of the sections that we have in different ways and then we have our template library then we have history where we can undo and redo things we have our responsive options we have our page options dynamic data preview source this will allow you to choose which page's content you want shown if you have dynamic elements over on the right here where you're building the page and we have global css classes and i'll get into that in a little bit so that's one of my favorite features of xylem builder as well and the little eye icon we have a tour keyboard shortcuts about design builder back wp dashboard design builder dashboard and view the post if we saved it and lastly we have various options for saving we can save the template save the page or save and publish the page the control panel over here is where xylem builder is like elementor where it has this control panel on the left but this little plus icon is where it's like brizzy where you click the plus and this is really where you do all your work you choose your sections you can add any kind of section you want and then inside that section immediately goes to the elements you can choose and we see this section right here there's a bigger column here and then four smaller columns and you can click the plus icon on any one of these to add things but you're likely not going to be building inside of the wordpress template which is what we're doing here we have the title which is the wordpress title from the post and then we have the footer down below what you'll likely want to do is go to canvas mode which allows you to create the entire page so to do that we go to the page options choose zion builder blank canvas and then this goes to a blank canvas where we can create on the entire page which is usually what we want for page builders and so we have our section here now spread out across the top click on the plus icon we can add elements we can scroll through all the elements we have this is the equivalent of dragging and dropping from the toolbar on the left for elementor or even for brizzy you drag and drop from the left here you just click on plus and just add it in put in a countdown timer right there click on plus over here we'll search for an image add an image right there and that's how easy it is to add elements now to show you a little bit better what design builder can do without taking a lot of time building things like this let's add a template there's a lot of template options you can add just sections you have the blue ui which i guess is a certain type of ui that just focused on blue colors i assume there'll be more coming there's a blue one maybe there'll be a green one red one purple one pro sections provides you with lots of different section types there's hero sections content partners logos images counters achievements and stats pricing tables videos process and steps devices lots of sections footers headers latest posts then we have the core ui which is similar to the blue ui i guess where you just add a bunch of sections or under templates we can add a full page template like this one over here click on it we can preview it right here i don't want to do that one let's click on this one and preview this one this one's quite nice click on insert and that will insert this template into our page it keeps the section we added earlier right up there at the top i can right click make sure i'm selecting the section you know you're on the section because you're not creating a yellow box here i'm on the element and if i'm over here i'm in the section so i can just delete that section there and now we have our site our template imported and as you can see there's a lot of icons popping up we have a lot of plus icons so we can add new sections between sections we can drag and drop to create more space more padding at the top or the bottom of a section we can click on this pencil over here and that will open options to edit the section click on this pencil again now we have a lot of section options over here including one of my favorites is the inner content width allows you to adjust the padding on the sides but not really just depending on the size you're really adjusting the width of the content which is adjusting the padding if that makes sense but it's much easier than entering numbers in elementor and trying to guess and let's try 50 and 50 wasn't quite right let's do 60. you get what i'm saying here you can just drag and drop make that super easy you can also make this custom percentage pixels and auto for the spacing on the sides and you have a lot of options for orienting things very easily for example this element right here has text at the top and you have a lot of space in the element down below if i click on the pencil and pencil again i can choose to orient the content vertically i can choose to have the content vertically aligned in the middle or the bottom or split up like this so we have the button on the bottom text on the top or move them closer together we can also do it horizontally if we want because the text takes the full width only the element that doesn't take the full width is moved around you can also have them horizontally so they're side by side here the elements are stacked vertically you click on this and they're side by side as columns but they're not really columns they're just moving the elements side by side otherwise a lot of options to quickly and easily orient things that you don't easily have in elementor you've got some of these options but not all these you can easily change the column width as you see that one's too wide now doesn't fit and here we're getting narrower narrower because it has to fit with this column here as well in the column offset if we change the offset we have to change the width as well because that squishes things so a lot of options to use in certain circumstances and the pencils that appear they appear everywhere and you can use any of them to define the settings for that specific section and all the plus icons add sections or in the case of the yellow one it adds elements and you can also have or choose options from the library right here so instead of choosing specific elements you could insert a block of something right here a predefined section and what's really handy about zion builder is its styling options let's just click on this pencil right here let's just open this one settings go to styling and we see this is the wrapper id number or id tag don't worry about that too much but in here we can set all these different things all these different css rules to define how it displays without any code of course add background images change the typography if we change the typography just for this element it will change it just for this element if we go to the main section if we change the typography here right here it'll apply that topography to everything in that section and then you can go into specific elements and then change topography there if you need to or you just have it all as one borders and shadows with a lot of different options including visual aids on what you're actually changing that's something elementor doesn't have it has these options as well but doesn't really show you what they are here it shows we're rounding this top right border here rounding the top left rounding the bottom left rounding the bottom right adding box shadows how much space there is the box shadow in the horizontal direction how much there is from the vertical how dispersed it is and how dark it is you get the idea a lot of visual aids to help you do the right thing on the first try spacing options here similar to elementor display options which allows you to find z index and different display types flex block inline inline flex inline block and none this is something who has experience with css would know all about if you don't have experience with css just click these and see what happens and if you like what happened stick with it or just leave it alone that works just fine too and down below you have much more refined options for display something you don't have in elementor transitions allow you to transition various elements when they appear on the page this allows you the settings for those you can transform elements in other words animate them this is the css term for animating things you can add various filters to sections and images and you can add new attributes css has a lot of rules and attributes available to you that go beyond what you see here and you can add them if you know what you're doing with css you click on add attribute and then you can give it a name and a value and that will be applied to whatever you're applying it to and these icons here is dynamic data so whenever you see this you can pull in information from either acf fields or default wordpress fields and pull this information in dynamically for any page any place where you see the dynamic data icon and these attributes are for people who know css so if you're not familiar with css don't worry about this this is just added functionality that i really like that you don't see in a lot of page builders outside of oxygen where you can really dig into the css and create exactly what you want so every single element that there is will have a list of options like you see here and the ones that have a green circle those are ones where changes have been made if you hover over this you can click on discard changes so every changes you made there you can just delete them by click clicking on that circle and those changes will be undone and then when you save them those changes will be saved unless of course you click the x first and under the advanced tab we have the options to rename elements and these names will be changed in one of these views either the tree view or the section view so if you change the name here it will change inside these views and this one for example i'll just rename it to my slider so it's right here my slider updated instantly and has a unique id which you can change and this can be used for global css if you want to so you can apply you can define ids for specific elements on a page and then define global css and have this id on other elements as well all throughout your site then change your css in one spot to have it applied everywhere and you can also dynamically change the visibility of elements without any additional plugins this current element is visible to everybody you can also have it just for logged in users or just logged out users you have animation options for it appearing on the page you have custom css so you can apply directly to this element or you can change the id and have global css like i said earlier which you can then add to other elements and we have repeater options what is a repeater it's something that allows you to pull in dynamic content repeatedly so for example in this case we have a bunch of blog posts and i'm going to see these blog posts i think they are and they're pulled in from somewhere on your site and so you can have this automatically pull in the latest things right into the slider by using the repeater so if we enable the repeater we can then choose a query that will query for example recent posts looks like these are the recent posts and then it will just show the recent posts right here if you don't want to show the recent posts you can build your own query using these options here and you can have dynamic content displayed on whatever section whatever place you want doesn't have to be just in the slider it can be in pretty much any element you want you can have repeater options you also have a search option if you're having trouble finding things you can search for them here if you click on any of the sections in the tree view it takes you to that section and then you can drag and drop it let's say you want to have this one be the second one now it's the second one we just drag and dropped it right here you can also rename these sections by clicking on the three icons clicking on rename and then you can name them more intelligently than just section section section section and so then you can reorder your page much more easily and you saw there's also lots of other options you have in here duplicate copy cut paste rename hide element copy element styles so you can copy them to a different element if you want to just like an elementor discard element styles save element save and publish and delete element and xylem builder obviously has a lot more going on and i can't cover everything in this video but it is a complete page builder that really has legs you could compete with the big boys like elementor or davie brizzy because a it's fast b it's easy to use i really like the inline editing i find that much more intuitive than the dragging and dropping from the side panel with elementor and you have the ability to add css wherever you want you can create attributes and add them to any element you want and you have access to global css which i really like because my background is building sites from scratch years and years decades ago with html css javascript php and so having those options available is super helpful now i want to check out their website to show you even more features that i can't easily quickly show you here so this is their site zion builder dot io if you want to check them out go here there is a free version and a pro version and as of this recording they are on appsumo as well 99 for a lifetime license i believe that's for unlimited sites as well just to confirm that's for unlimited where are they what's the search bar go there it is zion here it is zion builder 99 for unlimited websites for life compared to the pricing on the page here on the actual website we have a lifetime discount still available 249 whereas in appsumo it's 99 and i know when elementor first came out not everybody would have jumped on the chance to get the lifetime deal but if they did they'd be really happy right now because they kept increasing their prices zion builder might be the same way it might not be it'll depend on how much traction they get how they end up developing it but there is a chance that at 99 you might be very happy with yourself if you get it on appsumo if you want to get zion builder through appsumo click on the link in the description down below it is an affiliate link appsumo will give me a credit i don't know how much i've never actually got a credit through appsumo before because it only gives you a credit if the person you refer has not bought something on appsumo before which is not very many people and so i usually don't get any credits at all so either way there's a link down below if you want to check it out and it's only 99 bucks and lifetime deals are great so let's check out some more features because the features we saw inside the builder that we just went through are not all the features and i encourage you to come to this page to check out the features on your own we're just going to quickly breeze through them then we're going to take a look at all the elements you have available to you with zion builder and so on this page will see some of the more standout features like responsive breakpoints you can customize those you can do that elementor as well but it's not very clean it's a little bit better in zion builder global styles we saw those independent composition of elements meaning that every element is composed of a wrapper and stuff inside the wrapper for example this button is composed of the wrapper which wraps around the button including a background behind the button would be where the wrapper is you have the button which has its own button styles as you can see here and we have the icon which has its own styles as well and so every element is constructed in that fashion to be able to customize every single thing in the element and we saw this list of options we have for styling an element and every single element has that list in the element options panel which is pretty nice once you're used to that one flow for design it's on every single element there's a header and footer builder so you can create templates there's the theme builder which allows you to create themes meaning you can have custom templates for entire pages custom templates for your blog custom templates for archive pages you can build out an entire theme including when you build a theme you can say where to use it either the entire site just the home page just a 404 page you get the idea it's the same with other page builders as well there's a blog an archive post builder using dynamic content pulled in from that post content there's a woocommerce builder allowing you to customize your woocommerce pages however you need to the repeater queries we saw those are pretty awesome dynamic data content we saw that as well something we didn't see was the modal builder which is another way of saying pop-up there's different triggers you can choose for your modal builders there's the slider builder we saw the slider we didn't really go into the builder we saw the slider there's some user experience add-ons that you can see here here's your experience features pseudo selectors this is not something that you can customize easily inside of elementor so you have pseudo selectors like hover before after active focus custom if you are familiar with css you're probably familiar with pseudo selectors and how powerful they can be most page builders don't give you access to these design builder does advanced background blending features which is pretty awesome motion control transform filters the library system which we saw advanced options like custom css and javascript a role manager so you can decide who does what inside your xylem builder page builder pages the options are extendable it's all built with php like most things are with wordpress and it allows developers to add their own options to the main panel and this brings up interesting point really the the reason elementor got so big was because of all the third-party add-ons there is an absolute boatload of add-ons that extend the functionality of elementor other page builders don't really have that community built around them yet and i think it's going to take that kind of third-party developer community to really get any page builder off the ground so with zion right now as far as i know there are no third-party add-ons if we go into this page this site let's just look in the plugins for third-party add-ons that's the search for zion that should bring it up if there were any other add-ons there are none here if we search for elementor for example here's the main elementor plugin there's also lots of add-ons that extend the functionality of elementor any page builder is going to need to find a way to build that community of developers which attracts more customers but in order to be able to track the developers you have to have the customers so it's kind of a catch-22 but if xylem builder can attract the customers which maybe they can through the rap sumo deal and their lifetime options then maybe they can attract developers as well which will then attract more customers so far from what i've seen from zion builder it is a great page builder that is definitely a contender for one of the top page builders as long as it can attract some developers so let's go to elements here we see all the elements we have available with doesn't say if it's pro or free because there's a free version and a pro version so we have to assume this is a combination of free and perks i'm sure the free one has text but some of these must be the pro version since we're on the pro website where you buy the pro version so we have layout elements here sections columns sidebars containers modals which is the pop-up content elements text custom code counter progress bars anchor point icon list testimonials alerts short codes pricing boxes tabs accordions icons icon box heading button separator inner content menu and countdown these are all very similar to what you get in elementor and elementor pro but elementor still has a few extra but zion builder could add those on image slider image box image image gallery video slider builder google maps soundcloud a bunch of different woocommerce options product price add to cart loop add to cart breadcrumbs product product metadata product rating product images product stock product upsells related products data tabs search and social share buttons that's the extent of the widgets as of right now but there's also a feature request section for one and then some of those features the ones that have some wheels end up going into the road map and you can see how the plug-in's going to be developed in the future and you can even make a purchase decision based on this if it's going in the right direction you think then it might be worth investing in zion builder and the future of zion builder hopefully they can attract third-party developers because that will really help them gain traction but i think with the speed to their builder they definitely have a leg up on pretty much every other page builder because the other page builders just aren't that fast out of the box so if you like what you see on zion builder i encourage you to check out the free version which you can just find in the wordpress repository we saw it here just search for zion here it is right here the free version and if you like what you see either check it out on appsumo lifetime deal for 99 or if that has run out we have a lifetime deal here as well for the first thousand people to purchase it and we also have options for one website three websites or unlimited websites on a yearly plan yearly plan is obviously better for the zion company because that keeps the money rolling and keeps them able to invest and build more whereas the lifetime is better to get a quick infusion of cash and also better for your customers because they don't have to pay in the long term but either way if you like zion builder i encourage you to check it out and this might be the page builder of the future because it is so fast it's not going to have to do everything elementor does not everybody needs every single thing elementor does but we need a certain set of things which i'm pretty sure zion can provide and it provides them in a manner that makes your sites not super slow and even though zion builder is pretty fast you can make it even faster check out this tutorial right here where i show you to speed up wordpress sites beyond what you think might be possible make sure you check that out if you haven't done so yet click subscribe bring the bell so you don't miss your future videos my name is bjorn all past wp learning lab till next time keep crushing it and i will see you in the next video

Channel: WordPress Tutorials - WPLearningLab

Views: 7,062

Keywords: wplearninglab, wp learning lab, wordpress learning lab, bjorn, bjorn allpas, xyzwp

Id: E0R1hpFXL_s

Length: 27min 12sec (1632 seconds)

Published: Mon Aug 02 2021