Create Awesome Pages In WordPress Using Visual Composer

Hey guys my name is J and in this video I’m gonna show you how to use visual composer visual composer is a patient builder plugin for WordPress one of the most famous right now more than 1 million people using it I use it my clients love it and I love it so I just want to show you how I use it and one of the features and stuff so if you like it let me know if you don’t let me know how I can help you and I would like it let’s get to it here I have my home page and as you can see is pretty simple only like text and and and we have a title here with a background that’s it so I want to change some stuff here and I’m going to use visual composer for that so let’s go to my dashboard let’s go to pages my home page edit alright so as you can see this is the classic version this is the normal version of the WordPress editor what I’m going to do I’m going to active visual composer let’s go to the plugins alright so you can see it here with the visual composer plug-in the version and is by Michael thank you Michael for this amazing plugin so I’m going to activate the plugin all right done welcome to visual composer okay so I’m gonna go back to my home page let’s click edit alright and now you can see some changes going on right now we can see something going on here so if you click this plus sign here or icon you will see a lot of options right now you have a row text blog icon separator and all of this stuff right here is awesome right I’m going to close it for now because right now I have this row right here and let’s create another one I’m going to click on the plus icon and row okay so we have a new one right here is empty and what I’m gonna do is all of this text block as you can see here I’m going to duplicate it as you can see is duplicated and I’m going to move it down here alright now we have two different rows of course the same text because I duplicated but what I’m going to do I’m going to divide this row in three columns and that’s very easy to do in visual composer you’re going to hover this right here and you’re going to see like the different type of columns that visual composer is offering you to create right here okay I’m going to choose the one-third plus one-third plus one-third okay click and here you go you have three columns what I’m going to do is I’m going to hover the oldest text and I’m going to click on this little pencil right here to edit that text okay and I’m going to remove all this and just live I’m going to leave only this part and as you can see here you have all the things that the classic WordPress editor have you have it in in here plus you have other stuff like CSS animations as you that you can add plus a class name that you can add here I’m going to leave it like that for now I’m going to save the changes perfect and what I’m going to do now is duplicate this text right here I’m going to move it here and duplicate again and move it in here alright now I’m going to preview this so see how it’s looking right now awesome so as you can see we have three columns and we have all the text right there that we have down here and everything is in a this one is in a row and this one is in a different row and as you can see as you can see is responsive right so what I’m going to do I’m going to add like some icons right here and that’s pretty easy to do if you see right here this little plus sign it sets prepend to this column I’m going to click on it and I need to find like single image if you don’t find something you just search it like image right here and here it is right you have here a couple options you can add a title item I don’t want to add a title image can be from your library external link or a feature image if you have a feature image in that page so for now it’s going to be the media library because I have icons there and this size you can change it in here it says you can change it to thumbnail medium medium large or fool or you can add the pixels like the size of the image for now I’m going to leave it on and in thumbnail that’s working for me add captions I’m going to leave it like that actually I want to Center the image the image style again you have a couple options here like rounded and all this stuff right here I’m going to leave it like that if you want a click action like the large image pretty photo a custom link or soon I’m gonna just leave it like that no click up action plus you have CSS you know what I’m gonna add some animation so you can see it let’s say left to right anok last name I am NOT going to add a class and here you have design options you can add margin borders or padding to that particular image for now I don’t want it you have here border like you can add a border the style of the border radius of the border a background color for now I want to I’m going to leave it like that so this is this is not great either what is transparent and you can add a image to the background and the style the background here and you can click simplify controls so if you want to add the same margin to all sides you can just click simplify controls and let’s say you want to add 10 pixels you’re gonna now you’re going to add 10 pixels to all the sides as you can see I don’t want to do it so that’s it alright I think the only thing we’re missing is the image I’m going to click here and I have here let’s say less yeah this little cute cruise ship set image and we have image there Save Changes now right image is right there and let’s see how it looks ooh with the animation yeah all right looking pretty x’ is aligned how I want it yeah so let’s add more what I’m gonna I’m going to duplicate this one and I’m gonna drag it in here duplicate and drag it alright I’m going to click on the little pencil right here and I’m just going to change the image I’m going to click on this red cross to remove the image I’m going to get this one all right changes and I’m going to do the same thing here we move select this one alright Save Changes let’s see how it looks whoa you saw that animation alright so form it is looking pretty awesome of course my icons are not the best but you can use your own icons and have fun with them now what I want to do is I want to add something between these three columns and this row right here all this content right here so when I want to add some content maybe with a background with a full-width background so I want to add the whole I want to use this whole width and a content inside that background or that row so I’m going to go to the page and I’m going to create a new row row okay and as you can see my new row is down here so I have to drag it to the middle right there and I want to add some text all right let me get some from here let’s copy and let’s paste it here okay actually I want to Center this text all right let’s see how it looks first all right we have it right here now I have to go to this little pencil right here that says edit this row click on it and you will see all these options right here so the first thing I’m going to do is trash row all right because I want to stretch the row with the background but not the content because if you stretch the content let’s see what happens I’m going to just choose that option save it and let’s see how it looks you see and I don’t want that to happen I want to keep it on that on the container that we have here all right so let’s just stretch the row so I want you have here a couple options I don’t want equal hi oh hi want that content position actually they have use video background and that’s awesome before now I’m going to I’m going to use a parallax so you have simple with fade I’m going to just use a simple parallax let’s add half here just image I’m going to use that one set the image and the speed I’m going to change it to 3 let’s see how it looks you have it you can add an ID you can add class 4 now I’m not going to use classes or ID ok so I’m going to save and let’s see how this looks pretty so beautiful as you can see we have the parallax effect and the background is getting the full width so it’s stretching all the way and one of the things I want to do is let’s go to edit the row and design options I want to add some padding to the top say 60 pixels and 60 pixels right Save Changes click preview let’s see that’s better I like it more because I have more space the image is bigger you know I knew the image and the content can breathe and yeah I like like that alright so for funless at a video to these background let’s see how it looks right and with visual composer that’s just clicking this right here use this use video background yes they actually give you a link so you can see how it works this one is a youtube link so let’s save it let’s see how it looks alright whoa and this is amazing of course ah you need to change your text color depending on on the video because as you can see this video have some dark areas here and you can’t see the text but man this is awesome this is awesome another thing that I want to show you is let’s add a new row and for example you have here if you have HTML and JavaScript skills you can add them right there the code you can add add the code right there in the visual composer let’s do some HTML so you can see how it works I’m going to create a simple list let’s see all right I’m just going to copy and paste this and close the ordered list oops oh my god there you go you can even add an ID I mean a class I don’t want it you can add like all this stuff right here but I’m going to leave the HTML right there you can see how it how it works you can see the code here let’s see all right and here you see we have the list right there created we with raw HTML and this this row and and as you can see we can create a lot of stuff in here let’s create some tabs let’s see how they look all right so we have tap one tap – and in here you can click and add your content so I’m going to add some text I’m going to leave it like that Save Changes I’m going to go to tap to lick text save alright so we have two tabs we can actually add more you can see you can click here and keep adding and I’m going to add this save now we have three tabs let’s see how they look alright everything is looking great and here we are this is amazing right this is great and they actually look good if you want to change the style well if you just need some CSS ah knowledge and you can change the colors and size and whatever you want to do but the actual JavaScript function is already done by visual composer you have your tabs here everything is looking awesome everything is working my videos right here working icons with some animation and I can actually you know keep adding cool stuff to this website and it’s going to look professional and interesting so I’m just gonna leave it like that and play with it learn is a cool toy so you can play with it all day if you want and yeah and that was just a little preview of the power of visual composer now you can go and play with it let me know if you like it if you have questions comment below and subscribe if you want to keep learning okay so see you next week on my next video keep learning you

As found on Youtube

(Visited 2 times, 1 visits today)

About The Author

You Might Be Interested In