WordPress Tutorial: Visual Composer Basics

In this quick tutorial we’re going to look at the basics of using visual composer to create more complicated layouts in WordPress we’re just going to go with the basics of how the actual plug-in works I will look at specific elements of it in their own individual videos so let’s crack on so what you can see when you’re in your add new page section on your WordPress site you’ll see you’ve got a couple of new options we’ve got back-end editor and front-end editor in this video we’re going to concentrate on the backend editor’ because we’re going to do all of our creation all over editing inside the administration part of WordPress so you can see by default we’ve got the normal WordPress editor screen ooh we can do all the normal things bold italic and line strikethrough and so on we can add media etc and we can click in there and start typing our information out but if you want to get creative without needing to worry about coding then we need to switch on the visual composer for this particular page and we do that simply by clicking the backend editor icon and that’ll switch us over from the normal editor into the visual composer editor so what you can see when we switch the visual composer on is a sort of welcome page that you’ll get that will give you some basic overviews and a couple of page templates you could call up if you wanted to work with those or we can start adding elements to our page itself alternatively we’ve got a couple of options on the top left hand side the visual composer we’ve got the visual composer icon itself the add a new element and we’ve got the template option we’ll take a look a template in their own video later on but for now just to know the fact that you can create a blank it sort of layout for pages that you know you’re going to create time and time again and then you can save those as a template but a new page invoke the cloud are the visual composer and simply just choose the template you want to work with it’s a very quick and easy way of creating pages that are going to follow a particular standard layout without putting content in it it’s just quick and easy okay so we’ll take a look at that in a video of its own later on but just you know what these three icons in the top left-hand side are but the right-hand side we’ve got the option there’s the page and we’ve got front end which would switch us over to the actual front end of a website and show us the page we could work with it there okay so we’ve got two icons we’ve got add element and add text block now I need to just explain quickly how visual composer works it’s a drag and drop environment that means that we can drag elements around we can drop them in there where you can create more complicated page layers in a very visual fashion if you think of everything being made up in building blocks so they start out with a row that could be split into columns and inside each one of those columns you can add extra elements such as text boxes images videos from YouTube and Vimeo and things like that and we can build these up piece by piece with each building blog element and if we want to move them around and copy them and paste them we can do that quickly and easily inside visual composer so what I’m going to do in this video is show you just the basic building blocks of how we work with visual composer so you get an overview of how quick and easy it is to work and like I say will then switch over in future videos and take a look at how each of the main elements actually work with inside visual composer so let’s take a look at what these options do if we click on add element that’ll open up a window that allows us to choose the element you want to work with or if we just want to add a text block we can quickly add that from clicking the add text block icon now what will happen whichever one of these we choose it’ll automatically insert a row for us as I said rows are fundamentally your basic building blocks of everything you’re going to do inside visual composer everything will sit inside a row so let’s just say add element and that’ll bring up the option that allows you to see all the different elements that we can add in to a page now you’ll see on the top left hand side we’ve got a way of sub filtering this information so if we know we want to work with content we can click on that to split slimmed-down the icons if you want to work with things into a social media we can click on that if you want structural basic building blocks we can work with that or we want WordPress widgets we can click and film to add to that so let’s go back the show wall so you can see the first element is a row now I’m gonna click on that and that’ll put in our first blank row ready for us to start working so you can see on the top left hand say to this new row we’ve got the a card that allows us to move this around so we can drag it and reorder it we’ve got the icon that allows to choose one of the predefined column layouts and finally we’ve got the add column over the right hand side you can see we’ve got the drop down arrow then let I was to toggle the view so if we want to hide these at these basic rows and all their contents we can quickly quickly click on that and show it and expand it and shrink it down we’ve also got the Edit this row we’ve got copy this row and delete this row and in the middle we’ve got the edit this column and delete this column and below that we’ve got the plus arrow now the plus our row just allows us to quickly and easily add the elements we want to put into this particular row so let’s just take a look at how easy that is if I click on the plus if you bring up the same dialog box where we can now choose let’s just say a text block now when we choose this text block you can see it opens up its own range of elements that we can work with its own settings and we’ve got two tabs you’ve got general and design options now a lot of the options you’ll have will have design options or a lot of the different elements you can drop in there we’ll have design options and we’ll quickly flick into that just so I can show you what it does it’s a great way of if you want to customize and tweak the amount of space and margins and padding and borders and things like that around the particular building block we’re working with you can do that on a side by side basis or you can switch over to simplified controls I make a global setting so all four sides will have a margin that you set a border or a padding we’ve also have on the right-hand side we can choose if you want to add a border to it we can choose the theme default so if our theme has been styled with particular outlines we can work with our borders we can work with ones that it had predefined for us we can create a custom background color we can drop an image into a custom background and again we’ve got theme defaults so you have a whole range of options we can work with to fine tune right the way down your granular level or the building block that we’re working with again we’ll take a look at how we can find him with this later on and it’s the kind of thing that generally tends to be depended upon the design using and how well that’s been set up to work with padding and margins around these basic building blocks but we’ve got that control there should we need it let’s flip back to the general tab and see some of the options you got available in there now the first thing you’ll notice is that the editor that we have in this is pretty much exactly the same as the default editor the word press presents us with and that’s because all we’re doing is we’re working with the text block they put some ordering filler text in this and lorem ipsum type text and we did effectively just create the text block and then we can drop images in there we can create hyperlinks all the things you normally tend to do with the normal editor that WordPress gives you but we’ve got some extra control below you see we’ve got CSS animation so what we can do is we can add some motion to these building blocks so let’s just say as an example you’ve got two columns on the right hand side you’ve going image on the left hand side you got text what you could do is you can set this up so when the page loads or the person Scrolls on the page they actually bring that into view you could have them the image on the right hand side animate in for the right to left and the text from the left to the right so you can add a little bit of motion to your page it’s a great way of creating more interesting looking visually engaging pages if we expand this area so you’ve got a lot of options top to bottom but the top left to right so on and so forth all pretty standard and most of the different building blocks we have available to us inside visual composer will give you this same level of control so you can effectively animate a huge amount of content on your page and make everything look quite visually interesting obviously you want those things don’t overdo it too much motion just annoys people but the options are there should you need them and finally we’ve got extra class name now if you’re comfortable working with style sheets you can create custom styles and you can apply that to each of the building blocks so what you can do is you can give this a class name which is a way of naming repeating elements or elements you may use again and again again on a page give its own specific name and then you can target that particular building block with custom styles again we want but we may look at that in future videos but just knowing is there it’s quite useful that if you are an advanced user and you feel comfortable working with these kind of functions then you can have access to that so I’ll leave the filler text in there I’m not gonna add any images and things in I just wanted to show you this building block works and we’ll click save the changes so we’ve now created our first bill block its inside a row it has a tax building block and we’ve done the first part of working with visual composer I could say one of the cool things you’ve got with visual composer is the fact that we have nothing is set in stone we can quickly and easily change the settings we’ve got a veil to us so we may have inserted this role in one one row with only one column in it but they will this will be more interesting with an image on the left hand side so I can just simply go to the column styles and choose a two column layout both equal 50/50 click on that and you’ll see it all when it creates the second column for me my text is in the first column which is in the wrong place so what I can do is I can take my mouse over that building block and we go to context see the icons to pop up that allow us to to choose a couple of things we can do specifically to that text box and not the row I can move it so I can just take the mouse over this first icon drag it over to the second column where I want it and then go if I want to make some edits to it and then want to put some extra text in there I can click on the edit this block and that’ll bring up the original window we had and I can quickly and easily just say for example copy this text and we’ll just paste it in below just to give us a little bit more information on that page let’s just say yeah and I have an animation we’ll have that coming in from from the right to the left so we’ll just say right to left and say the changes so that’s now done to basic information for us we’ve got some animation on it which you can see is now denoted at the bottom of this says CSS animation right to left so we’ve got a visual prompt there and we’ve got some extra text in there so we can go back to the first column click on the plus icon because at the moment there’s nothing in me and we can say well I want to put a single image in there and that will bring up a whole new dialog box specific to insert in a single image now as you can see the single image settings there are a lot more available to us we’re not going to look at those because we will look at those in their own video but you can see as I said oh you’re on the top of this video we have design options again that related to this specific building block element so we can set custom settings in there we’ll go out the general tab and we’ve got a range of things we could set up in this again including things like the CSS animation and the extra class name but you can see we’ve also got a range of other options we could specify exactly what size want the image to be we can specify the alignment and if we want we can choose styles and again we’ve got a range of predefined Styles that’s ship with visual composer that allow us to customize the way this image will look on screen we look at those I can say in more detail later on so let’s just take a look at how we insert an image because this obviously works in a slightly different fashion to the normal media brows that we have so you can see it says I’ve got image I could just click on that and that’ll bring up the image browser that we can used to working with so let’s just choose this photograph and I’ll say set the image now I could if I wanted to set the size of the image below but for now I’m not going to worry too much about that I’m going to say I want it’s a line to the left yep that’s fine and we leave everything else as it is click Save Changes so we’ve now created our very very first two column layout quickly easily with no code being used at all so hopefully what you can see is the visual composer is going to give you a great way of creating far more complicated visually appealing pages that can include animation it can include videos it can include a whole range of different layout options without having to touch a single line of code but if you do want to get in there and start tweaking things you can go in and you can start applying custom Styles via style sheets and you can do a lot of other things very granular low-level ways of working with each building block element so this is the first video on visual composer that’s giving you a brief overview of some of the things you can do with it to do to the next videos where I start to break down each of those elements and show you what all the different functions do and how we can work with them and we’ll create some really complicated looking pages visually use a visual composer I hope you find this video useful until next time please subscribe to the videos on our youtube channel to be kept up to date with all the new videos were going to be adding for WordPress and future software till next time take care you you

As found on Youtube

(Visited 3 times, 1 visits today)

About The Author

You Might Be Interested In