Visual Composer 5.2 – What's New? – Sections & ZigZag Separator



hi and welcome to another episode of peace bag TV in this week's video we're going to be looking at the latest update for visual composer and that's version 5.2 now this is released today which is the fifth of July 2017 and if you don't have the update installed I'd recommend jumping over to your plugins section check it out there and you should see that you've got the update available to you now obviously you need to have a fully installed version and a fully registered and licensed version of visual composer to be able to update this because bundled with the theme then you're going to have to wait for the theme developers to come out with an update that link through this new version so we're going to do is we're going to take a look at some of the new features that's been added into this I'm going to give you a brief demonstration of what they do and how to use them so further ado let's take a look at those new updates okay I mean the admin section now of WordPress and as you can see I've got a new page created and we've got visual composer ready to start working with then nothing has changed visually you can see it looks exactly the same as has done and if we take a look at the elements we'll see there's a couple of new options in there if we take a look you can see we now have the option for sections which we'll take a look at in a moment we also have a zigzag separator so this just brings in another option to have a different formal separator from the normal separator with text or the separator without text this is sort of section up parts of the content on your page so it's a quite nice little addition the sections just something a little bit more sort of powerful than the zig zag separate then like I say we'll take a look at that at a moment but first of all let's check out what the zig zag separator gives us so we click you can see it brings up a dialog box where we've got two tabs general and we've got the design options where we can control things like the margins the pad inner space and so on what we can spend on though is this section the general section as you can see we can choose a color so let's go through and choose something like well let's just choose green for this example the alignment you can see you have three options available got center left and right we then have the element width which you can see we can choose from a range of predefined options from 10% right through to 100% and you can see you got the border width again we can choose from a range of different options in there and finally we've got CSS animation now with most of these things you can also go in and give us an element ID like we can reproduce everything inside visual composer which it allows you to go through and actually tag that and use that through CSS and other various different things again we've also got the extra class name so if you want to target this specifically through our style sheets we can do that very easily so let's just change some of these parameters let's just say we want to have this to be 60% for example I will set this to be large I will animate it in we'll have a bounce in down and you can see it gives us a little demonstration of what our animation is going to look like I'm not going to worry about the design options we'll leave those as they are all the element ID and class name because we're not going to go in and target this so what I do is click on Save Changes update my page and I'll just jump over to my demonstration page and we can take a look if i refresh that you can see now we have our animated zigzag line at 60% in the center or very simple and straightforward obviously we're going to come back in there make some changes to that we can simply come in and do exactly once we can set that to a hundred percent for example change the color to let's cover peacock and we'll choose the border to be small and we will get rid of the animations we'll set that to none so you can see now we can go through hit save changes on there update that come back over to our test page refresh and you can see there's the changes in there if we wanted to go full width we can do that quite easily we could just jump back into the editor go to the row itself this time we can control exactly how much space this particular element is going to take up on our page click on the little edit icon and you can see the options in there now for stretching the row so we can say we want to set this now I'm going to say to stretch it to row and content and we'll say no padding's on there or see there's all the other normal options we have available inside the row settings which I'm not going to delve into I will just hit Save Changes and update that if we jump back over again to a test page and refresh it you can see now that goes right the way across the entire width of the screen so pretty simple and straightforward there so let's just get rid of that and let's just go back in now and click add another element and this time we're going to take a look at a section element so if we click on that you can see this brings up what looks very similar to the row layout but there's a couple of differences in there if add a row in just you can see the difference we just say wanna add a row you can see this is grayed out and we have a couple of options on the left hand side we've controlled the movement the position of it in other words the actual column structure we want to work with and on the right hand side you can see we've got the option to clone this to edit this and to delete it the same we also have the option to collapse this but we don't have that on the actual section by here so what exactly is the difference between a row and a section in the latest version of visual composer well let's take a practical example if we look at a row you can see that we can go in there and we can now start adding elements in there so we got different widgets in there like text widgets and so on we can also come in and we can section this up however we want to so let's just say you want to put two columns now what we can also do is we can go into there and we can say we want to add another row in this so we've now created a nested row now if you ever work with tables back in the day then you'll know that you can create more complicated layers by nesting various different cells or in this example rows into each other to create that more complex layout so as we have this in there you can see we now have all the options if I wanted to I could break that up into four sections so now we could easily come in and do the same on the right hand side and we could end up with eight different columns inside that row layer which we can't do straight out of the box obviously we're going to set custom in there but we still kind of have some limitations on what we can do so you can do that now the other thing you have to bear in mind is that once we do this we can now no longer add any more rows in there we've kind of hit the limit of what we can do so we can nest one row inside a row okay so hopefully you still with me now what we can do with a section is we can use this as a container to create more complex layers and move those alone save those as different templates so once we've got this sort of section available to us we can now start putting whatever we want inside there based inside a road so we can click and we can add a row in this now you see there's nothing else available to us because a section can only contain the basic building blocks in other words it can only contain a row and then you put your other widgets inside that row so it is like I say it's just a container so we can insert our row so we now end up with a row inside this section so now we can do all the normal things we do with a row so we can add extra columns in if we want to we can come down add another row in there you can see again because we still work inside that container we could only add in rows so we can now build up our structure of our site and we can very quickly and easily build that basic structure through using rows and then once you go to a rows in there we can then go in and start adding additional elements in there so we again we can add another row who wanted to get more complex so we can add a textblock in there and we'll just say save change of that we can duplicate that out so we've now built up some basics and we'll just put a separator in there and we just leave that as it is and we'll move that around so you can see everything is now inside there now we can create a nice complex section and then we can create all different sections in our page but what we can do it what makes this so powerful is once we've done that we can now go and save that section as a template in its own right so if we come up and we click on the edit option long one click on the edit option for the section you can see in the top right-hand corner we've got our element settings and then there we've got one option which is save as template so we can click on there and we can give that a name so we'll just call this 5.2 sample and once you've named it we need to click Save Changes on the right-hand side and then we'll just click Save Changes to save everything we've done okay so as he done that let's just update the page to make sure that everything is saved where you want to be now all they do is just delete everything in there so I'm going to do the entire container and once we've done that the page is black to back to being a blank page so we're going to do is cut to the templates click on there and you can see now that we've got our 5.2 sample if we click we put that back in there and that's created a sort of container that has all the various different elements so you can build up a nice library of these different sort of modules that are nicely laid out with a lot of detail in there but there's other things you can do to this we're not just restricted to creating sort of templates of different building blocks we can still go in now and style the actual container itself so let's just come in I just click on the little edit this row and you can see we've got the section or option secrecy the whole range of different things we can do we got again the design options that we always have we've also got the ability to control this section independently so we can now style that and do some other things so before we do let's just close this down and it's going to take a look at the actual page itself so the demo page at the moment is very simple we've got the page title our two column set over a two column row we've got some text and then we've got to separate a line underneath it okay pretty boring so we come back in let's go back in and edit that we can now go through and do a few things we can section stretch this so if we want to the stables we've got with rows we can now go in and we can stretch the section and we can stretch the section and the content so for this example and I say stretch the section because I want to keep the content contained inside my sort of column width to say that all I do now is come down and take a look at some of the other options you can see we've got the content position and we can go through we could specify where we want that to be whether the top middle or bottom we also had the option to create a video background if we want to we click YES on there you can see that opens up now gives us the option to go and choose the youtube link let's uncheck that we do have the option for now though is we can create parallax effects that apply it to this section so if you are building that various different sort of placeholder sections for a site and you want to have that parallax effect in there you can now save that as part of the section but save that as a template so let's take a look at that in action let's go through and say we want to have simple with let's go for simple for this example I'm gonna choose the image that we want from our image library and we'll choose this one and let's just go for something a bit bigger actually good set the image you can see we can control the parallax speed if we want to animate the entire section if you want to go to section ID and so on all those options are available to us so we leave it as it is at the moment we will do is come back to the design options and let's give it a bit of space in around this let's just say for this I want to put a padding of 150 pixels top and bottom just to make sure we can see plenty of the image and the text contains we have in the row and so on have a lot of breathing space in it so it save and let's just update that now remember because we're doing this after we applied the template this is going to be only available on the page that we currently work with other words you only know see that ALX effect on this page you'd have to recreate this each time you insert this template obviously if you didn't want to do that you wanted to set these things up but then just maybe change the image then you could do that before you save this out as a template and then when you call it back up all of those things that you set up all its parameters are all going to be in place for you when you use this template section in any page so let's just jump back over now and take a look let's refresh the page and there's our image and you can see if we scroll up and down we now have a slight power less effectively brilliant line here because there's not a huge amount of information so let me just jump back I make a cut of alterations pause the video come back and show you a better example of exactly how this works okay so jump back in now made some changes to our basic layer and as you can see this is now a better example of how that parallax effect is working inside this section so you can see I can scroll up and down and the powerful effect takes effect in the background so these new sections while you kind of look at the first of all and think well I don't really see what so good about them once you start to realize that you can use those now you can create more complex building blocks for your web page in your website so much quicker and easier and then you can reuse those again and again and again throughout the entire site structure makes me really powerful so suddenly this really simple sounding really has a lot of functionality and really useful when you create pages and sites that follow us to a particular theme and style and layout anyway that's pretty much what I want to cover in this video the two key things that I see have been added into version 5.2 I hope you found this useful hopefully showing you what you can do with these new features and how easy and powerful they are to really enhance the way you work with a visual composer as always if you enjoy the video please give it a thumbs up and hit that subscribe button to be kept up to date with all the new content we add every single week as you need comments questions or feedback on this video or anything else covered on the channel please pop those in the comment section below until next time take care

8 thoughts on “Visual Composer 5.2 – What's New? – Sections & ZigZag Separator

  1. Thank for this very helpful and straight to the point tutorial. very professional sound, visual and easy to follow yet at a good tempo.

  2. Thanks! This was very useful, would you use one section for each part of a one pager website? Typical example for a company website: SLIDER, WHO WE ARE, WHAT WE DO, SERVICES, CONTACT…

    or

    Would you keep putting all these in just diferent rows but all in ONE section?

    Thanks again!

  3. Hello! Not VC related. Is there a particular plugin or a way to add a top level menu or links like phone number, email address or social media links on one's site as you mostly on an eCommerce site? So eager and curious to know how that's done. Thanks

  4. So here's a question: I've been an avid DIVI Builder fan and built several sites with this. The ElegantTheme Forums are all screaming that since the DIVI visual builder interface came along subsequent updates screw up your web design. Now wether this affects Child Themes I'm not sure BUT I'm guessing so. I posted a question on a DIVI Group on FaceBook asking for the second best platform (as a joke) Beaver was high on the list but Visual Composer wasn't. Any comments? I have purchased this so it's in my toolbox but went with DIVI as it was all the rage and suer nice with the visual builder which is a bit of a pitfall here with Visual Composer (name is a bit of a miss lead) Beaver has a margin editor and changes can be viewed in real-time without Updating a refreshing your page; which on a slow internet connection can be frustrating (yes WAMP and MAMO can be used instead BUT when the site is live clients do like the visual end.

Leave a Reply

Your email address will not be published. Required fields are marked *