Visual Composer Website Builder For WordPress

In this tutorial I’m gonna show you the new visual composer page builder this is different than the old visual composer plugin that was later renamed to debra baker page builder now you can buy a code Canyon and through themes on theme forest this new visual composer is a standalone page builder and it competes with the likes of Elementor beaver builder Brizzy site origin all the big-name page builders and does a really good job has some great features that those guys don’t have yet and I’m gonna show you all about it as we build this one page website in this tutorial so we’re getting started right now hey what is up my name is bjorn welcome back to the video if it’s your first time here and you like wordpress and wordpress tips and tricks and getting better at it make sure you click Subscribe then the bail notification icons to don’t miss anything and with that out of the way get on the part of facebook group link to down below where we talk all the WordPress and help each other with WordPress and with that out of the way let’s get in the screen capture I’ll see you there we’re gonna build is a slick looking one-page website so we have this nice big gorgeous image up here this is actually a font right here this is a Google font when you hover over this image or when you move your mouse the image moves as your mouse moves which is a nice effect that I haven’t seen any page builders except for visual composer there are these nice gradient buttons when you hover over them the gradient reverses which is pretty cool now if we scroll down the next part of the website Scrolls over top of the previous part now we have more information here again same image movement as you move your mouse around same hover effect on the button let’s scroll down further we have another section that pops up scroll down further we have the contact us section that pops up and scroll down further at the footer that pops up now this type of web design isn’t for everybody because it’s very visual this would be best suited for photographers for a nightclub even but there is a lot of uses for this type of design and even just learning the techniques of how to be able to have these sections that overlap which is not something you commonly see in websites so to get started we’re gonna first have to install the visual composer plugin so let’s do that so the plugin we’re using is visual composer this is from visual composer at i/o this is not to be confused with the visual composer of the past it’s the same company but now they’ve gone from being listed on code Canyon and being bundled into themes and they sell their plugin now through their site and they’ve become a complete page builder before it’s a plugin that allowed you to do nice things on pages on a website but now they’re a real solid page builder and they’re competing with the likes of Elementor Brizzy beaver builder things of that nature and the plugin I’m using is a premium version to get the premiums click on get premium they also have a free version which does a lot but some of the templates and things are gonna use needs the premium but if we check out the premium pricing it is somewhere on this page here it is so a single site $59 that’s I think ten dollars one Elementor but pretty close one forty nine four three three or forty nine for developers and there’s always sales at the top of the page we see this Halloween sale twenty percent off which is right now or expires tomorrow so there’s always sales Black Friday probably have a sale as well so it’s it’s very competitively priced and we’re gonna use this plugin to build this site so that’s install visual composer and contact form seven because we want to have a contact form so let’s go to plugins and then add new lets get contact form seven first this guy right here click on install then click on activate and ask we’re gonna add new again a visual composer comes from their website it’s not in the repository so we got to click on upload plugin choose file finder on your hard drive got a whole mess of stuff in here open once you find it click on install to install it then click on activate plugin I’m gonna click on premium version I’m gonna click on activate premium check this box pick my category community education activate premium Scouts for my login credentials for the visual composer website I just log in so with this login functionality you don’t need to go and got license key from their website separately it logs you write another site from your website so I click on activate for the license key once you’re in here that takes us back to our website now it’s going to download the pro extensions that are going to make the plugin and there’s 43 of them that it downloads went pretty quickly there and then there’s a bunch of slider information or not slider information but there’s some sliders here showing what you can do I’m gonna click on blank page to sort a new page and if you’ve used a visual composer or WP bakery page builder in the past you notice there are some similarities but there also are some very big differences that we’ll touch on in this tutorial one of the biggest ones all of the editing is that on the front end whereas before the editing was done in the front end or in the WordPress editor if you wanted to now it’s only on the front end so here’s where you choose a template for a page we have a totally blank template we’re just add elements from visual composer to build up the page we’re gonna have a header or footer on the bottom content in the middle hit her foot on the bottom content middle side bar on the right and here’s a cyber on the left and a theme defined layout and you notice these pop-ups with the previews that are actually really really helpful when you’re starting out later on once you’re pro this plug-in they might get a little annoying because we add elements you know this plus icon which we will do a lot more in just a minute when you hover over all these they also have previews which if you’re an expert could get pretty annoying so what they’ve done is under settings so gear icon at the very bottom click on disable preview or turn on disable preview and now when we add elements however olam the preview is gone they still have it for the template picker and that’s okay because the template picker it’s just one spot it’s pretty minor but being able to remove the preview from these general elements is actually pretty useful once you get really good the plugin and for this tutorial we’re gonna pick this one and get started and now we have our please select header I called action please say for the call to action and our contact area in the middle where we add our contact here we have Quick Links to add full width rows a bunch of different column presets custom column layouts a text box an element or paste something because we’re building this page with big old images we’re gonna use full width rows for most of this site build so I’m just gonna shrink this one this way because we go back and forth so gonna do a full width row right here and that’s it right there and I’m gonna set a background image before I do that let’s go over some of the things you can do in visual composer or the way it’s laid out so when you hover over a row like I am here we have these options that appear and there’s a lot of options so this first box as I however already see the little text flyout the text title that shows up saying row these are settings and options that affect the row and there’s a little arrow it’s like a hierarchy so there’s a little arrow and the next one is the column so now we have a one column in the in the entire row so the column takes up the whole row and you can edit the settings of the column in here and then there’s edit in this case edit column but if there’s an element inside here it would be edit that element and then we have remove column these other options on the left-hand side we’re going to get to those as we go through this tutorial and what we’re gonna do is add a background image so I need the image of the gentleman looking at the neon lights and that’s gonna be the background image for our first row so let’s go ahead and add that cover over the row click on edit we scroll down to where we have design options and a background image click on images to add an image I’m just gonna drag and drop all of the images that were using for this site these four right here so we have malla we need them later just uncheck the ones we’re not importing to this section so just this first image just going in here and click on add image and now we have our image it doesn’t quite look how it does in our demo we’re going to fix that just a minute and for some reason it had two images in here if you have multiple images you don’t want multiple just click on this little X and the second one will be gone now that’s some more of these row settings here so it’s already set to cover the entire background which is great but the background isn’t full width so to do that let’s click on the gear icon and that takes us to the settings for the entire page then I click on stretch content now our image is the full width and later on we’re going to select a header and footer frame here and if you like we saw the beginning we chose a page with a Content area header and a footer which is denoted by the symbol we can switch the other ones that were opt just by clicking on one of these and I’ll convert whatever we have on this page to fit into these layouts so let’s go back to a row click on edit again let’s change this to full height now it’s the full height of the browser window if you have a smaller computer with a smaller browser window it’s going to be the full height of that so whatever the full height is of whatever screen you’re on this image on this row will now be full height for that browser or that that size roll width I’m going to change is a stretched row and I’m gonna keep the column gap where it is I’m going to show you some more cool stuff you need with a background image you can change the background position of the background all these different options are available so if your background image is bigger than the element you’re putting it into you can change the position so if we go top left and now the very top left corner of the image which is right up here it was gonna match the top left corner of the row and bottom right this will match the bottom right corner of the image to the bottom right corner of the row so our image shifts this only works that like I said if the image is bigger than the container if it’s not then this won’t work and this is something designers would be picky about it’s not something general public needs but it is a cool option we’re also gonna add a parallax effect there’s a simple one that we see everywhere where we scroll and you can see on his hair here his hair is going a little bit faster then scrolling down the row this is a bad example because I’m gonna cut it on the page if we go to simple with fade it fades eventually not enough cause on the page again but the mouse move is the one we want this is where we put our mouse on the background in the background moves as we move our mouse I’m going to change the speed to 1 to make it much slower so that was pretty fast the way it went there but when we’re moving our mouse so if I don’t move with the mouse I just leave it there nothing moves I’m over the mouse background moves that’s a pretty cool effect not available on Elementor and not available on any page as I’ve seen this is the only one where I’ve seen it but now we have our image just like here so we have our background image we want to add our text now so we have this nice Google Fonts headline here we have a little bit of regular text and a nice gradient button so let’s add those so the first thing I want to do is add an element what about a little plus I couldn’t really see who this dark there’s a plus icon here and when you click it inside of an area whatever element you choose will be added to that area if you don’t click on the plus if you just went to the plus over here it would add the element to the bottom of the page they have to drag and drop a to where you want it so you always want to click in to where you have the plus icon click on the plus then your element choice will pop into there and there’s a lot of different choices as you can see here just scroll through these really quick so you can take a quick gander at them and if you’re familiar the visual composer and W break your page builder a lot of these are going to be familiar to you as well and you can get more from the visual composer hub if you have the premium version like we do here I’m going to show you in a little bit we have this icon down at the bottom here which is the hub and that’s where you can download a huge number of different templates and button styles and all kinds of stuff to make a development faster I’m going to go ahead and put a row in here yes a row inside of a row and I’m actually going to change the full width under the gear icon back to not 4 with their stretch content off because I’ll tell you why in just a second once this reloads when we stretch the row if we go to edit row we’re able to stretch the road to full width using this icon and so the content within it I don’t want stretched full width I want to have some padding on the sides where we’re going to have our content and I’m going to go in to edit the row and we’re going to give it a height I’m going to do that by just adding padding I’m going to add any content to it I’m just gonna add some padding so now we have a bigger row or they some more space for the row because if we go to our demo here our contents not squished to the very top there’s a bunch of space so that’s what we’re adding space in there and I’m gonna also add two columns below our big columns so the way you can visualize this is we have our row that spans maybe out to here and within that we have two columns so we want the spacing above to be applied and then we want two columns below that with our content there’s a bunch of different ways you can design this is just one way I’m doing it so in our row layout we have a hundred percent row but then we can also add a 50 percent row and a 50 percent row and I did that wrong let’s go plus fifty percent and now we have we can see that with the dotted lines here we have two content areas now that are half the width and if you wanted to you didn’t have to you don’t have to have them at fifty percent I can have there you can drag and drop them to change it to whatever value you want or you can also have different values just make sure they add up to a hundred otherwise if they’re not going to go to the very end over here and it’s inside of this row column right here that we’re gonna add our text click on the plus icon I’m going to search for Google Fonts fact I see it already it’s right down here I’m gonna click on apply to get this headline in here and the text we have is y neon lights so let’s change the title here all capitals Y neon lights cool feature a visual composer that I haven’t seen other page builders you can edit inline which is not uncommon but when you do click to edit inline everything else Gray’s out and just the part you’re editing is in a lighter background which is pretty cool you click somewhere else and it then undoes the gray out I’m gonna change the font family from laddo to Mono ten which is a cool neon light type look these guys right here it’s a little small font style which is the boldness of the file I’m going to keep it 400 I’m gonna keep it as an h2 and then for the color I’m gonna change to gradient and then we have the color options here I make the font size a bit bigger so we can see it a bit better let’s make it 80 I’m gonna change the top one let’s make it red the other one let’s make it blue I don’t say nice blues in here it says pick one that’s pretty nice I can change the angle of the gradient if you want to it is pretty awesome it’s kind of hard to tell but the the line that the gradient goes in is probably here now the direction of the line and now it’s almost horizontal so I kind of like that angled look and this changes as you type more words so if we were to let’s just start typing so we have just a W so the gradient spans the W the entire gradient is on the W we add the H and now it spans both the letters as we type we can see the gradient changing and I think that is pretty awesome another thing that visual composer does when you add an element we have the element editor menu option up here in this top menu area if this was an image for example like this background and not the background but we’ll see you later when we add images and buttons that this icon changes and then the options in here are for that that type so I’m going to add some text gonna click on this little plus here and I’m just gonna add a text block that’s gonna go in right below I’m gonna take out the title and the text that we use in our example let’s see this that’s gonna copy that and I click search in Google it’s not what I wanted click on copy and then click in here click on paste to change the color of the text inside of here because we’re using the WordPress editor we have to switch over to visual click on the toolbar and then choose a color for the text choose custom colors you can create custom colors or choose one of the predefined ones I’m just gonna choose white let’s select all the text first and then do that and now it will all be white except for this one because it’s telling it’s a spelling error so one of my plugins called grammarly is not playing nice so let’s make that correct spelling according to the plugin now go white okay see my experience that – for using gramley and it basically just adds these span tags around the text and that will make the color white so it’s doing the CSS for you essentially now we’re going to add a button down below the text here not just any button but a cool gradient button where the gradient reverses when you hover over it so I’m gonna click on the plus icon I’m gonna look up button we have our gradient button right here gonna click on plus I’m going to change it so it is a pill shape like this I’m going to change this to read more I’m gonna change the colors what do we have now that has to be exact but we had orange to purple so let’s make color one orange color to a little more purple than that that’s pretty good by default that has the hovering effect you can change the grain direction if you want we don’t have the degrees of gradient direction but we do have horizontal and vertical and there we have our button and we have our entire section completed down so I’m going to save this page to save click on this little check mark down here then to see what the page looks like click on the hamburger icon in the bottom left and click on view page and now we have our page here with our cool mouse over hover movement the button that changes and now we’re ready to add the next section so if we go back into the editor the fastest way to add the next section since it’s pretty much the same as this one is to go to the row options click on clone and then we scroll down and we have our new section it looks the exact same as the one above it but we going to change it to look like the one on the demo so gonna change the background image first go to the row options click on edit scroll down to our image here it is click on the X to remove it click on the plus to add another one now we’re going to add this guy right here click on add there is gonna change the headline to make it all caps highly reflective I’m going to change the text down here to the text that’s on the page which is bright neon lights look great when they’re reflecting off sunglasses at night reflective here goes into two lines we don’t want that so I’m going to just make this calm little wider want to change the color of both the title of the headline and the button so I’m going to have kind of a Warren G color here and then we have a nice light blue maybe this guy right here the first one I guess has to be a little more red that’s pretty good and now let’s change the button to the same ones this ready orange and then turquoise II really light blue alright so we have our next section now what we want is to have this section scroll over top of the first section we do that using stickiness and it’s a pretty cool little trick so if you go to the row options go to row options and edit go to the very very bottom with a sticky area click on on make it sticky and now it’s sticky I want to add a Z index the Z index is basically you can where you can imagine a stack of paper on a desk if the lowest Z index is the bottom most paper that’s as the index of zero and then every paper that stacked on top has a higher and higher Z index so for this first element I’m gonna give it a z-index of 10 and for the second one down below if I can get there we can see that the back I’m scrolling down beneath it so to go to the row editor for that one we’re gonna give it a z-index that’s larger than 10 go down to the bottom let me get sticky give it a z-index of 20 and now when we scroll down that bottom one’s gonna scroll over top and every sequential row is gonna have a higher and higher z index again going back to our stack of paper on a desk the bottom most paper has the the index then each paper on top has a higher and higher the index and the top most paper has the highest Z index out of all of them and the Z index is in reference to the z axis if your math nerd you know all about the z axis if you don’t know about it don’t worry about it just imagine a stack of papers on a desk lowest Z index at the bottom hi-c index is at the top and now we have our two sections like that that are pretty cool and we want to have four sections in total to replicate our site look I’m going to add the other two and fast-forward because it’s the exact same process but you can watch long as I do it and then we will add the contact form and the may at the top and the four at the bottom then we’ll talk some more about some other features in visual composer so we’re going into fast-forward right now you all right so now I’ve added all our sections and if we scroll down we see them and they’re all overlapping like that I guess the one of the coolest effects out there and they all have when we move the mouse the background image moves all the buttons have the reversing hover effect and the last thing we want to do last couple things we want to do is add a mini at the top footer at the bottom and a contact form on this contact page right here so to do those three things we have to exit the Builder click on the hamburger icon down here go to back to WordPress and first let’s make the mini at the top the footer at the bottom so let’s go to headers under visual composer and these are all the header templates that you’ve created so far we have none I’m gonna click on add header to make a new one I’m gonna call this site header click on start building I’m gonna make this a template actually so if you click on the visual composer hub on the bottom left down here we see all of the templates available in the hub and there’s always more and more being added so this might be different when you come here but there’s already a lot in here as you can see but if we from the drop down here choose header and footer you can also choose headers here I’m gonna choose we just make a really simple one I’m gonna choose this one right here and as with anything you hover over a DC preview which is pretty handy click on the plus icon that adds it to the page and then I’m gonna delete this image here I’m gonna make this text so let’s cover over the image icon click on remove click on the plus icon add a Google Fonts I’m gonna call this shiny lights and I’m gonna choose a script I think it’s that’s not that one like I like like I like one so that in German accent I don’t know if that’s actually a German word or not anyway I’m gonna make it a gradient surprises grading colors I found that the gradient options don’t appear unless you save it and then refresh it so if we click on save here now we see that green options aren’t there but if i refresh their gradient color options will appear go back into the editor and here we have the gradient options I’m gonna remove the menu on the right because I’m just gonna make this super simple I’m going to make the background of this row let’s go to edit row make the background dark background color is currently white I’m gonna make it this color and then fade it out so it’s not too visible I’m going to also change so you knock make a full height how come a that equal columns gonna stretch it I’m going to see if there’s some padding applied somewhere there’s a lot of space in here that I don’t really necessarily want I here’s the padding let’s just make this 0 and then 0 down here that doesn’t look quite right so I’m gonna add a padding of 20 at the top that’s pretty good there’s some height to this element here so I think that looks pretty good the last thing I want to do is just make this row sticky so go go to row and then edit go to the very bottom make it sticky and z-index I have to make it a little higher let’s make this as the index of 70 just so it’s a larger Z index than all of the pages that we have or all the rows we have overlapping each other in the demo now that’s set go back to the wordpress dashboard you can click on set as default and unlike the Elementor headers these are not applied site-wide these are only applied on visual composer pages so if you set as default that’s only default on visual composer pages if you don’t set as default you can have different headers for different pages and I’ll show you where you can apply those in just a second I’m not gonna set as default because I’m gonna show you how to the header on the page itself gonna go to footers and click on add footer and it’s the exact same process just this time we’re adding the stuff to the bottom of the page and so to the top of the page I’m gonna call this site footer I’m gonna go back to our hub I’m gonna click on footers and I’m gonna choose a dark one because our sites pretty dark in color so I want to keep it in line of that’s change some of the stuff in here keep it as a composure website builder that’s fine powered by WP Learning Lab yeah that sounds pretty good let’s see if we can remove a little padding that’s pretty tall let’s make this zero and zero see how that looks it doesn’t look good let’s put 10 on top that’s better okay so this one we won’t have sticky as well because I want this to show up as we scroll to the very bottom so just being there so under the row editor where we are right now go down the very bottom click on sticky z-index make this 80 the highest z index of all click on save now exit back to the dashboard now we have a site footer that we’re going to add in just a little bit first we’re going to get the shortcode for the contact form so we added our contact form 7 plugin at the very beginning and with that plugin or when its installed it automatically creates a very simple form you can get the shortcode from right here if you want to do some advanced of the contact form 7 I have a whole playlist on contact form 7 click on the card up above or the link in description down below check out that contact form 7 playlist let’s go to pages and also said earlier that when you create a new page by just going with add to individual composer it may save it as auto-draft which might not be what you want to call it so I’m gonna do a quick edit and I’m gonna call this home page that’s what we’re making just call this home and then click on update but now watch this it’s called home page but if you visit the site we will see that it’s not actually the home page to make it the homepage go to settings and then reading then select the static page for home page select home page click on Save Changes now if we refresh out here now the page we’ve built will appear as the home page and there we have that nice fancy page we just need to add our header and footer so let’s go back to pages all pages so we can see all of them click on edit with visual composer for the home page let’s add our header first here we can go click on add header and it takes us to this gear icon menu we can select the header from here site header and this is where you select any header you’d want the default header will be applied to everything but then whatever how do you select here would be applied to this section or this page go to the very bottom we don’t have a footer right now but let’s go up one little bit click on select footer site footer and because we have this set as a sticky footer it’s not going to appear right away it’s gonna scroll up from the bottom and then we have it’s going up see how it just appears it’s not like it’s scrolling up as the page ends it’s another overlaying row which i think is a pretty cool effect like I’ve said many times in this tutorial another cool feature that visual composer has a lot of other page builders don’t have Elementor is not have this I actually haven’t seen a page below that has this we have the option to add both a local and global CSS it’s the global option that I’ve never seen other page builders and this is CSS that we applied to the entire website local would be just to this one page and JavaScript you can apply just to this one page or globally add JavaScript by adding it here those are pretty cool options you don’t see a lot so over here is where you want a contact form click on the plus icon and I’m gonna put in a text block and go to text editor I’m gonna delete everything that’s in here and paste in our form shortcode and then but a Bing our form shows up our footer hovers over top the form they need to add some padding to the row go to the row settings edit the row let’s add some padding at the bottom make it 150 pixels scroll down see how that looks not quite enough make it 200 I think 150 is enough this wasn’t applied properly for some reason yeah there we go 150 is pretty good you know what do we can do even less let’s try 100 yeah that’s pretty good and then click on save go out to our front page here refresh the page we have a contact form here we have our footer at the bottom we have our menu at the top the menu is being overlapped by the WordPress admin bar but if we go to someplace where we’re not logged in we have our menu correctly positioned and this is our site that we just built it’s a pretty flashy site I like the the way this works a lot with the overlapping rows I’ve said that a million times I’m sorry what I like it a lot and that is a quick look at building a page with visual composer and throughout showing you all the cool stuff you can do with it one more quick thing really quick as with all visual builders we have the ability to preview our page on different devices but visual composer gives more options than I’ve seen in any other page builder click on slow preview icon here we have what’s this one responsive view desktop view tablet landscape tablet portrait mobile landscape mobile portrait click on any of them and the size of everything adjusts to fit that screen size that’s tablet landscape fabric portrait little skinnier so as you can see we have some things to adjust for the spacing for these different devices but I just want to show you that you have all these different preview options that you don’t have on other platforms other page builders might be added in the future but there’s definitely a couple things that visual composer has a leg up on any other page builder I’ve seen correct me if I’m wrong but there is some cool stuff in here and for that reason I think visual composer is actually a contender in the very saturated page builder market and a cause of a lot of confusion is the naming conventions of this plugin there used to be a visual composer a long time ago made by the same company and they changed the name to WP bakery page builder I think one or two years ago and now this is visual composer again the other ones were sold through Cote Canyon they’re bundled with a lot of different themes this one is sold on the visual composer IO website and it’s a legitimate page builder I guess they can expand their capabilities way beyond what’s possible in code kenning I’m not sure or that it’s just more profitable for them to have this on their website versus selling through Envato which is probably the case either way this visual composer page builder adds a lot of new features that WP bakery page Euler does not have nor does the old visual composer so the naming is confusing I hope I’ve cleared up at least a little bit anyway I left to know in the comments down below if you think that this plug-in is a contender in the page builder market and if it is what is it that you like about this plugin or this page builder that you don’t have in other page builders I’d love to hear what you think down below so that’s how the new visual composer page builder works I hope this video helps you if you haven’t done so yet make sure you subscribe then the dollar notification icons to don’t miss anything check out the private Facebook group linked to in the description down below and then make sure you check out the next video that popped up on the right hand side until next time keep crushing it I will see you in the next video

As found on Youtube

(Visited 2 times, 1 visits today)

About The Author

You Might Be Interested In