WordPress Tutorial: Visual Composer for Beginners – 2016 Update

Hi and welcome to peace mag TV in today’s video tutorial for WordPress I’m going to be guiding you through the basic usage of visual composer visual composer is an add-on for WordPress that allows you to create complex looking page layouts apply animations and a whole range of other things without knowing any code so what I’m going to do is I’m going to take you step-by-step through the fundamental skills required to get the most out of using this versatile and powerful add-on for WordPress so let’s start looking at all that right now so throughout this video we’re going to be using the latest available version of visual composer and that is version one point two point one and one there’s not a massive difference between this and earlier versions there are some little nuances that you really need to know to get the most out of this so with visual composer installed and set up we now create a new page as you can see we’ve got some new buttons added to our interface we can edit with the backend editor which allows us to work inside the admin section of WordPress or we can invoke the front-end editor and switch over to this actual page on our website and we can edit the element individually directly on the page itself we’ll take a look at that in a different video for now we’re going to focus on the backend editor and how we can work inside the admin of WordPress so when I click on backend editor’ we’re going to replace the normal editor with the visual composer editor which gives us a lot more options to work with so if we click on back-end editor we now switch over to this view you can see we have a range of new icons available to us we’ve got the option for visual composer we can add a new element we can work with the templates so that means we can either create a new template or we could invoke a template as previously being created or we can use a template that ships with visual composer itself we can expand this out to full screen we can edit the page settings or we could switch over to the front-end to see what we’re working with we’ve also got this main area that allows us to quickly three different options which mirrors the information we have in the top left-hand corner we can add a new element we can add a new text block or we can add a new template so let’s start off by adding an element and seeing what that gives us so if I click add element that will open up a new window that gives us a range of all the widgets that are available as part of visual composer now widgets are effectively individual pieces of building blocks that allow us to control and configure exactly what they do and how we or the end-user can interact with those on our website so as you can see we’ve got a whole range of options we’ve got rose text blocks icons and we’ll look at these in more detail in future videos we can also sub filter this information down so if we want to work on content based elements we can click that will now filter this out and show us only the content based options the same with social structure WordPress widgets or we can choose deprecated options now I would avoid using deprecated because as its name suggests these are no longer supported so you can ignore those and leave those out so if we switch back to all we can start working on building our first page so for this example I’m going to start off by inserting a row now what happens when we insert a row is that allows us to then section that up into multiple columns if we need to we can then place the widgets that we want inside that so the easiest way to think of working with visual composer is that everything is built either inside a row or inside a column so if you used to work it with a spreadsheet then this is going to be very familiar with you so with our row created you can see we now have additional icons that apply specifically to that row the first icon on the Left allows us to drag this to reorder it so once we have multiple rows we can reposition this easily by using the little grab handle in the top left hand corner and repositioning this exactly where we want it within the order of the rows in our design the next option allows us to choose the column layout for this specific row and this will only apply to this row so each time you add a new row you can simply split that up into multiple columns if you need to so as you can see we’ve got a whole range of different options available to us there and just by clicking on those the icons below will change themselves to show us exactly what we’ve set up so we’ve got a 50/50 two column row so we wanted I could set that to a 2/3 1/3 and as you can see it’ll update and show me exactly what this will look like I can easily go back to a full width row if I want to I can even choose custom to create custom layouts we’ve got the plus option then that allows us to start adding new columns in there and if we move to the middle you can see we’ve got the edit row icon or we’ve got the trash roll icon if we look on the right-hand side we can toggle this rows visibility so we can click I shrink it down or we can click and expand it this is great when you start to work with very complicated layers where you have multiple roles and thinking’s things can start to get very very busy very quickly the next option we have available is to edit the row then we can clone the row so if we wanted to use the basis of this row to work on another row and then we can edit the parts we want or we just simply want to duplicate this row we can do that by hitting the clone this row I’ll click on that to show you exactly what I mean once I click we’re going to identical duplicate of this row which we can then edit and do whatever we want with and finally we have the trash can with it which allows us to delete the row we’ll get a warning just to confirm we want to do this if you do click OK if not click cancel so now that we’ve created our first row we can start adding the widgets we want to work with to create the layout for our page structure so we can click on the plus symbol another bring up the same window where we can out any of the widget elements that we want so let’s move over and choose a text block for this example and that will then open up the window that’s specific to working with text blocks as you can see we can easily move this around we can resize it to work the best fashion with the screen size that we’re working on if we take a look at the top you’ll see we’ve got the general tab which is what we’re working with at the moment we also have design options now almost every widget you’ve got with visual composer has this design options and what it allows us to do is to fine tune the margins apply a border add padding and so on to either individual sides or every single side we can also set some of the options available so if we applied a 1 pixel border we can change the color we can specify whether the border style uses the defaults that the theme is set up to use or we can choose individual options to customize this as worth noting at this point not every theme will be styled to show all of these different options so you may not have them available in the theme that you choose to work with we’ve also got the option to set border radius we can apply a background color or background image and again we have theme defaults to override the way this background image displayed we can even simplify this box so if we know we want to apply a 1 pixel border to all four sides of this particular text block element instead of having to type in one pixel on each one we can check the box that says simplify controls and that will strip it out and show us just one entry box for each of those individual options the margins the borders and the padding if we switch back to the general tab we can start working with the normal editor that we have with WordPress so all of the icons you used to and the add media option even the visual and text options are available to us in there before we start working with this I want to take one moment to take a look at the top right hand corner you can see we can minimize and we can close this box but we also have an option to customize this particular element so we click on this we can choose from element presets so anything we set up in this particular box we could save that as a preset so we could call it back up and use this as the basis of other text blocks in the future alternatively we could set this up as a default so every new text block would have the settings and the information we configure inside this first text block settings window applied to it every time we created a new one so there’s a great options so now we’ve got the normal text editing tools we can add media so we can put images inside here if we want to we can edit our text and we can use any of the tools we have available we can even toggle the toolbar to get the expanded options that are available to us which switch between the visual option and the text version so we can work in code view and as you can see we’ve got all the standard WordPress icon buttons available to us inside the code view and visual view but if we scroll down you can see we now have CSS animation options and if we click you can see we have a range of five different options available in there including top to bottom bottom to top left to right and so on and this will animate this specific element in when the page actually loads up we’ve also got the extra class name so if we want to apply custom CSS styles to this specific text block or any of the elements that we give the same class name we can just name it at this point and then we can call it up later on and we can customize that specific CSS class and apply it to any element that uses that name once we’ve finished we can hit Save Changes alternatively we can hit close if I don’t want to do anything to this particular text block so we’ll hit Save Changes and as you can see that now creates the element inside our row that now opens up the single image settings block so you can see it looks very familiar it looks the same kind of options available to us inside the text block but these are no specific to this particular widget so you can see we’ve got the option to put a widget title in there we can specify the source of the image we can choose the image and we have a whole range of other options available to us we also have the design options tab if we click on that you can see all the same options are available to us in there we also have the option in the top right-hand corner to specify the element presets so this works in exactly the same way as it did with the text block so we switch back over to the general tab you can see everything we have on here as a help option underneath it that’ll tell you exactly what each one of these options requires from you we can leave the widget title as it is because we don’t want any title to be applied to that we can leave the media library set but we have options for external link and featured image we’ll choose an image in a moment you can see we can specify the size of the image so we can go with things like thumbnail medium or large the standard definitions that are applied as part of WordPress alternatively you can put the exact width and height element you want in there so you could do 200 by 100 150 by 300 whatever you want you can add a caption so if you’ve applied a caption to your image inside the media explorer that will be applied in there you can also specify the image alignment we can choose from left right and center the image style and we have a range of different options available and again with this it’s worth noting that not every theme that you may choose will support this so don’t be surprised if you choose its style in this the image and it doesn’t work out on the front end of your website just be aware that as that’s down to the theme itself you can see we can place an action if the image is clicked so we can do things like we can set it at Nantz and nothing happens so it’s not clickable you can click for the larger image you can open that using a pretty photo you can use a custom link to go to a different page or a different site or you can use a zoom control so we have a whole range of options again we have the CSS animation function and you can see we have all the same options in there so we could animate these images when the page loads and again finally we have the extra class name so if we want to apply a custom CSS style to this we could give it a class name and then we can create our custom style reference that class and apply it to every single item that has that class name associated with it okay so let’s now choose an image to be used in this particular widget so what I need to do is click on the plus and then the image icon that will bring up the normal WordPress browser to allow us to either upload a file or choose it from our media library and in this example I’m just going to drag and drop a file in upload that give it an alt tag and then we’ll choose that with so we will say set image and that will now apply that to our with visual composer widget so for this example I don’t want to use thumbnail as the image size I’m going to put the actual size of the image in there which is 350 pixels 197 so now I specify in exactly the size of this image so any scaling that will happen based upon the browser size will keep that aspect ratio for me I don’t want anything else on they but I want to set my image alignment to be Center because when we work with a mobile device when this drops into single columns it makes more sense to have the image centralized should look nice and neat on the page and we’ll just leave it at that I don’t want anything else to happen so I’ll just click Save Changes that’s created our new widget and applied the image to it I can reorder that now so I can put it above my block of text I’m now going to duplicate that image twice so clone that twice and then I’m going to put that in position on the other two columns so now if I wanted to change the picture in there I can simply come up to click on edit I can click the X to get rid of the image I can click plus and then I can choose an alternative image so for now I’m just gonna use the same image again but you can see the process finally I click Save Changes and there’s our three column layout now for example I may not want this three column layer to be sitting underneath this one so I can just grab the grab handle in the top left hand corner reposition that and reorder everything that I way I wanted to so let’s say for example I wanted to put a separating line between these two I can just simply come down to add element I can specify I want to put a separator in there I can take a look at the options that are available inside the separator settings panel as you can see we’ve got the design options available again we can set default values and we’ve got the general tab which gives us all the options that are available specifically apply into this separator so for this example I’m just going to specify 50% for the width I’ll leave everything else as it is hit Save Changes and then reposition that in between my three column and my two column rows so that’s the basics of working with visual composers rows and columns and the various different widgets we can use in there we’ve also got some extra controls we can work with on a row by row basis so if we take a look at the first row you can see three icons at the end we covered initially at the beginning in this video so let’s take a look at the edit row icon and we’ll see that the row settings gives us additional features that we can work with it apply to the row itself and not necessary the content that sits inside it so we can specify exactly how the row is dealt with so we can do things like we can set the default value or we can stretch the row the row and content or we stretch the row and content no patterns we can put in column gap so we can space out the different columns or we can increase or decrease the number of pixels that are specify splitting those apart we can specify whether it’s a full height row equal height a whole range of other options we’ve also got the design options available to us and again we can set the default element presets inside this so every single new row we create can either have a default value set on there or we can choose from a predefined template that we want to work with so this gives you some real control over how each of the rows are interacted with inside your website design now we’ll take a look at these in future videos but for now it gives you a good idea of the level of control you have with visual composer it really does add a huge amount of versatility to your website without having to understand any code whatsoever so we’ll close this down I will wrap this video up here so that’s the basics of visual composer hopefully this will give you a good understanding to get to grips with working with visual composer to create your complex page layers if you found this video useful please give it a thumbs up for goodI comments questions or feedback on this video or anything else covered on the channel please pop those in the comment section below finally please subscribe to the channel to be kept up to date with all of the new content that’s added every single week well until next time take care

As found on Youtube

(Visited 3 times, 1 visits today)

About The Author

You Might Be Interested In