WPBakery Page Builder Beginners Guide – Formerly Visual Composer

So in this video we’re going to be checking out WP bakeries page builder which was originally called visual composer so I’m going to take you through the basics and so you can get a good understanding exactly how to start using this incredibly powerful page build of a wordpress so let’s just jump into WordPress and take a look at how we start building customized pages so first of all page builder by WP bakery what is it well as its name suggests it’s a visual page build that allows you to use simple drag-and-drop widgets or little building blocks to create great-looking eye catching websites with no need to understand any underlying code whatsoever so if you’re a designer as opposed to a programmer or web developer then this is the kind of system that’s going to allow you to really get your ideas out there create them visually and then build them very quickly and easily so throughout this video I’m going to assume that you’ve never used a visual composer type editor at all so let’s just jump over to the admin of WordPress and take a look at what we can do with this so we just jump over you can see I’ve got a completely blank page simply got a footer and a header area nothing else in between now this is where your page builder comes in it’s this content area in the middle that you’re going to start editing and creating the different components that sort of normally your footer area and your header area I kind of controlled as part of the overall theme within WordPress itself and speaking of the themes we use an ocean WP for this particular video completely free theme we’re not gonna need anything more than that free theme to start creating our website so if you want to get that the link is in the description below along with the link to the page builder so let’s just jump into the admin and what we’re gonna do is we’re gonna come in to our pages and we’re gonna create our first layout so you can see I’ve created a page I’ve got it set up as my homepage at the front page in WordPress now there’s two ways you can work with page builder you can work with it within the admin section so you view it inside the normal page editing area of WordPress or you can do it with the front-end builder now for this example I’m gonna stick with the backend but I will show you briefly how the front-end works so let’s just click to go in and edit this page and you can see we’ve got the normal option set up Oshin WP settings we can leave those as they are the only thing I’ve set up in there is to create this pages full width because I don’t want any left or right hand sort of sidebars so that’s all I’ve done and I’ve disabled the actual margins on there other than that we’re on a normal page you’ll see though that we’ve got two extra buttons you got backend editor’ and front-end editor now these are specific to when you’ve installed the page builder by WP bakery and as I said earlier on we can go to the front end edit this is sort of go in and edit this inside the actual template itself without the distraction of this sort of left-hand and right-hand information that we’ve got in our page but we’re going to stick to the back end edit to start off with so I’m gonna click on that that’ll switch us over it replaces the normal page editing content with the page builder interface so you can see we’ve got a couple of options we look at the left hand side we’ve got the page builder icon we’ve got add a new element we then got the template option or on the right hand side we can push this at the full screen to get rid of any distractions we’ve also then got the page settings that we can go in and do things like add custom CSS that’ll only affect the page that we’re working with underneath that we’ve got three simple ways of adding information we can go on add an element which allows you to add any kind of widget that’s part of page builder or any extra plugins you may have that expand the functionality the page builder gives us we can add a text block which will open up the text block editor and we can also add a template which is pretty much exactly the same as what you’ve got on the top bar other than that that’s the only thing that’s replaced inside the admin section of WordPress so let’s start off by doing something simple like say let’s add an element between click on there and that’ll open up all the different widgets or elements we can add into our page builder page now the easiest way to start looking at anything you create with any kind of page builder and this isn’t limited to the WP bakery page builder this holds true if you’re using something like element or element or pro even things like beaver builder and so on they’re all going to be working in rows and columns so everything you build up is gonna fit in either inside a row or a row that has multiple columns so when you start thinking it like that it makes it very simple and straightforward to start to design your actual layers but don’t think that you’re restricted to creating very blocky looking layers you can get really creative and most these page builders give you some great control over how you can make things much more interesting and much more sort of professional over there just sort of blocks and columns and so on but start off with we need to insert a row we click to insert a row you can see this now puts the placeholder for the row in and adds in some additional icons that we can do things with the first one allows us to move to reorder any of these rows that we create so we can simply drag any of these into different orders that we want to sort of try different designs that all move elements around next step we then got the option for how we want to split this row up so we can split it into columns and you can see we’ve got some predefined layouts on there but we can if we want to get into creating custom ones so if you find that one that you want isn’t actually included nine times out of ten you can go in and set a custom layout for that there are some restrictions so if you find doesn’t work it’s probably that that’s not actually supported instead the style sheet we could go above and beyond that we’re gonna keep it simple with this video so let’s just keep this really simple straightforward and let’s just split this into a a one two column so in other words gonna split it 50/50 once we do that you can see we now split that we now replace this with two little plus buttons and we’ve got independent edit and delete options for that particular column next step we’ve got plus so we can add an extra column in through this if we want to if we jump over onto the right-hand side you can see we can expand or toggle the actual view of this we can expand it or contract it this is great if we’re dealing with much more complex layouts we’ve got lots and rows and columns and things and it can very quickly become a little unwieldy you can just sort of collapse those distractions next up we then got the Edit and are specific to the road does matter what widgets in there so you’re gonna find you’re gonna have different options inside the Edit this row option to what you’d have inside edit the column or edit the widget that you’re working with and we’ll take a look at this in more detail as we move through the different options and things we can do next up we’ve got the option to clone this so if you wanted to create another one we could simply hit the clone and you can see we now get an identical duplicate below this will also hold true if we’ve got any widgets in there or any settings they’ll also be copied to that new row so it’s a great way that we’re going to create something uses a building block and then copy it duplicate it whatever you want and then you can just adjust the things that need to be helps you really speed up the process of making changes into a sort of layout that’s quite you know sort of laid out very similar fashion should we say use lots of the same building blocks we could then like I say reorder those if we need to and finally we’ve got the X which allows us to delete that particular row so we’re gonna click on that we get a confirmation to say are you sure you want to do this we say okay that now gets rid of the row so you can see it’s all very simple and straightforward these rows and columns are just the building block elements before we start putting the widgets into them and that’s we’re going to take a look at next added some widgets into the relevant columns so adding widgets into the page builder is very simple all we need to do is click on any of the rows or columns with the pluses and we can click and add that element in D now you can see and use the term element and widget kind of interchangeably it’s the same kind of thing and they work in a very similar fashion to the kind of widgets you see that you could drop into the footer or the sidebar inside WordPress itself and you’ve even got a lot of those widgets available so we filter that out you can see these are all native WordPress widgets and you can drop those into any of these rows and columns to use that functionality speaking of the WordPress widgets and filtering things that you’ll see the range of tabs across the top and this allows us to very quickly and easily filter out based upon the content or the group of elements or widgets that we want to look at so he wants them to do with social for social sharing and so on we can click the social tab and that will now show us all the widgets or elements that we’ve got specific to working with social same goes to structure seating things like widget eyes sidebar raw HTML raw JavaScript so you can see that we can we’re not limited to only putting in these predefined widgets we can if we want to drop in some HTML code or JavaScript code in this if we want to expand we can do again that’s beyond the scope of this beginners video but they are there when you start to get more in depth and a little bit more comfortable with how you work with this particular page builder widget a sidebar which is great if you want to pull in any of the side bars that you created as part of your theme inside WordPress itself and then I say you’ve got the WordPress widgets and the deprecated ones which are basically things that are no longer supported with this current version or page builder but they still be why I don’t really know it’s which is the technical reason for it okay so it’s just your back to all now the other thing you can do is you’re not limited to only having these simple row structures you can if you want to nest rows inside a particular column so let’s just say for example we want to split this up into even more well we can easily do that by simply come in added a new element say add a row in there and we’ve now nested a row we can split that up into any kind of layer we want so we’re nesting those inside a row so if you’ve ever worked years ago with tables and where your nest tables inside tables to get a structure that you wanted this is gonna kind of be very familiar but you can’t go to the same level that you could with that this is kind of still limited a little bit and it’s more to do with you test in dibs than it is nesting table so it’s much more flexible but you have that option should you need to again if you want to get rid of that we can simply click the X to delete that out of there click OK it’s now got rid of that okay so let’s go and click some add something else in there let’s start off with one of the fundamental building blocks you’re going to find you’re gonna work with poorly 50 60 percent of the time and that’s a text block so we can click and add that in and what it happens inside page builder is it opens up this new window that gives us all the options specific to that particular widget or element that we’re editing or working with so this is as its name suggests the text block settings we’ve got a couple of tabs across the top you’ve got general and design options now the general tab is going to change based upon the widget or element that you’re working with the design options will be on pretty much every one of those elements and it gives you some basic things such as margins borders padding background background colors and so on so this is one of those consistent things that’s in there with pretty much every element you’ve got with page builder so that’ll always be there general very specific to the actual widget you’re working with and again it’s pretty simple and straightforward you can see we’ve got the normal WordPress editing wind would you be here which we can click and open up and get the extra functions if we want to we can close that down all the normal things you’d expect inside the normal editor in WordPress will all happen the same in here so all your keyboard shortcuts will work if you want to add media in there you can do that you could position the media all those kinds of different things there but we have a lot more we can do with this as well we can go and do things like animation so we can have this text pop in and animate in so you’ve got things like bounce in bounce down and so on fades and so on like that and it’ll show you a little sort of show you exactly what it’s gonna look like on the right-hand side so if we choose something like bounce left you’ll see that shows you an example of what it’s going to look like if we did fade in shows you it’s gonna look like so you can animate pretty much anything you want within page builder I’ll just add that after a little bit of motion to your site obviously use it sparingly if you have things dancing on an off screen and zooming and fading all over the place it’s just gonna look like a 1980s amateur website with a pile of animated gifs everywhere so rubbish you also have things like element ID now the element ID allows you to sort of target this specific element using CSS or JavaScript if you want to go down that route so you can target specific things on specific pages by using the element ID and also the extra class name which is a great way of targeting this should you want to apply different styling from your default global styling through CSS so you could easily give this a class name is specific to this particular text block element on this particular page and then you can target that through CSS either by using the little icon that little cog icon in the corner where you can start going and creating custom CSS or you can apply globally as part of your theme and target that class again it’s going above and beyond what we’re going to cover in this video but if you do want to get into doing that you have the option for element ID and class names to target those so that’s pretty cool so let’s just copy this a little couple of times so we can just get some content in there okay so you’ve got some text and click Save Changes now the thing to be aware of is that the Save Changes it’s not going to save your changes to the page it’s only gonna save the changes to the element of the widget that you’re currently working with if we now just went off this page which I sort of jump over to the test page and refresh it you’ll see absolutely nothing is on there because we haven’t saved the page we need to click on update or save to get this committed to the actual database so the page is created so let’s click update and now if we just jump back over to our test page you see there’s our text block if we come back into the dashboard of WordPress we wanna make changes to this we can simply take our mouse over the widget or the element that we’ve created and want to edit and you’ll see we now get a simple green pop-up that gives us options to do four things we can move the text block or whatever blockers were working with we can edit it we can duplicate it or we can delete it so we want to move it we can simply just grab it drop it in to any other location any other area we want so you can see it’s very easy to drag and drop this information if we’re gonna copy it we can simply hit that it’ll create a perfect duplicate which we can then move around as we see fit we want to get rid of it we can click on the X again we’ve got that little popper to say you sure you want to do this we’ll say yes we do and finally you can click to edit that block and it’ll open back up the settings box there’s relevant it’s a particular editor or the widget that you’re working with so that’s all pretty simple and straightforward and that’s how easy it is to simply drop in a text block if you want to take a look at that animation action let’s give it a click to edit it see we come down to the animations and let’s just say we all have something like bounce in left its Save Changes and click update once that’s finished we can just jump back over refresh our page we should now see this text block animating from the left hand side so let’s refresh and there’s around I made the text block very simple and easy so we can come back in edit that and simply just take that out if you want to get rid of it all these things are really simple and straightforward once you kind of get used to the interface did you use with page builder you’re gonna find it very intuitive and even if you jump to a different page builder you’re gonna find the same basic functions are the same across the board okay so she done that let’s take a look at another widget or module we can work with this click to add and you can see we’ve got tons of different options let’s just say we fill this to the content and we want to put an image in there we’ve got a couple of options for images we’ve got a hover boxes you can have an image flip through we’ve got a single image which we can again animate we’ve got image gallery or image carousel so we’ve got a range of different options let’s start off by simply added in a single image we can click in there again we get the box pop-up and as you can see we’ve got those two tabs the general which gives us all the different options specific to this particular widget or building block we’ll working with and again the design options tab that has all those familiar settings in that we had inside the text block so you click in there you can see we can give this a title if we want to we can specify the image source and we’ve got a couple of options in there if you got the media library so this will pull this from our media library as part of our old website we can use an external link that we want to offer link this to somewhere external like Flickr or something like that or we’ve got a featured image which we can use this to pull in the featured image from the particular page that will be set down on the bottom right hand corner we will keep this really easy cover media library and all we need to do is click on image and then we can drag and drop an image in there that we can use so simply just upload an image that we can use so I just drop that into the media Brett library I’m gonna set a tag on there just to make sure we’ve got something on me we say set image once we’ve done that we then got some additional options we can go through we can specify the image size and you can see we’ve got a range different options like thumbnail medium large full and so on so for this I’m simply gonna put in full or totally you can actually put in the physical dimensions you want this image to display as if you wanted to be seen sort of 300 by 400 you can simply type that 300 X 400 and it would display it as that size for you if you want to add a caption you can do that if I hit in the yes on there and it’ll just add the caption as part of the image inside the actual media library itself you don’t got the option for your image enlightenment you can see got left right and center so I set this to be Center image style we’ve got a ton of different options that allows us to go in and fine-tune the actual way this image will display so things like we want to put rounded ballers on it or rounded edges on there put a border on there at round shadow all those options are available you simply choose the one that we want I’m gonna leave this default for now you’ve then got on click action which as its name suggests is when you click that image if the user interacts it does something happen by default is set to none so it’s just a picture embedded in the page but if you wanted to you could link it through to something like a larger image open it with pretty photo open a custom links you might want to send it to a custom link inside your site or somewhere external or you can do something as a zoom effect on there let’s just leave that to be none we’re just gonna leave it as a simple image again we’ve got the animation option the element ID and the to class name if we want to animate it or target it through JavaScript or through CSS so all pretty cool design options all exactly the same so we’ll just click Save Changes that shows us there’s an image in there it tells us the image is gonna be 16 for example we’ve got the Edit options on this if you wanted to duplicate it and move it and so on we can do all of that but if we’re happy with it we can simply click update once you’ve done that let’s just jump over to the page itself refresh that and you can see we’ve now got the image already set up in there and nothing happens if we take our mouse over it but let’s just say we want to adjust this a little bit we don’t like the fact that this is sort of like the picture is taking up a lot more space than the actual text is well we can easily change that at the moment we’ve got our rope split into 50/50 columns but we don’t have to have it that way we can come back up and we can simply come in and find one that fits a little bit better the purpose that we want so let’s just say we want to have it 1/4 and 3/4 well we can click that will automatically update it and show us exactly what’s going to look like in the click update on our page simply jump back over refresh that and you can see now it’s updated it to make it look the way we wanted it to so you can see that using this page bill that gives us a lot of control over exactly how we want to do things and none of it is set in stone we can easily go back in and edit and change and adjust things as we want so let’s just jump back into the editor and take a little look at some of the other things we can do now you’re not limited to only have in one object per column so we can easily put other things in there so where we’ve got this bit of space on the bottom left hand side let’s just drop in a button in there that says let’s just do something let’s get the end-user to click on this to go somewhere well we can do that quite easy just click on the plus and then we can just search if you want to by using this in the top right hand corner and we can say button and you can see that’ll show us anything that’s got the term button in this name so we’re gonna go for this button again we’ve got the design options tab gives us all the normal options in there and the general tab is now specific to this particular option or this particular sort of widget that we were working with so we’ll just say give that information on the actual button itself we can then specify what link we wanted to go to so we can click on there at the moment I don’t have any pages on here so Pernell link in me I’ll be fine set the link you can see we’ve got then the styles and so on so we can go through and she was different styles if we want to let’s just say we’re gonna go for something like 3d we can then change the color if we want to we can change the shape of it we can have rounded square or round so let’s just go round it is fine change the color we’ll have a classic red button size we’ll go for large alignment you’ve got left right center and in line we’ve got add an icon so you want to add an icon in there we could do that click and you can see that opens up additional options now for the alignment so you can have it left or right we’ve got the option then to go through and choose any of the icon like we said a part of the page builders we’ve got a whole range of different icon libraries in there and then we’ve got the icon itself underneath which we can simply click on and go and pick out the icon we want we can search for it we can filter down based on categories again there’s a ton of things you can do on you so let’s just say we want a simple like this download import option once we’ve done that we’ve got the animation options on there so we could do things like animate if you want to then we’ve got the element ID and class name like we’ve seen before we’ve also then got advanced unclick action so you can see we can insert inline on click JavaScript action so we tick that you’ll see that opens up some other options we’ve got on click code now this is specifically if you’re working with JavaScript again it’s one of those things is above and beyond this basic introduction to what the page builder can do but you can see it gives us a ton of control and options that we can really get in the and do so much more than just what this actually offers out of the box so again pretty cool hit Save Changes on that click update and now we just jump over to our test page we should see there’s our new button with our icon you can see you got a little bit of an animation effect when you take your mouse over it all pretty cool and very easy ok so just jump back into the dashboard now and let’s take a look at one more widget before we move on just click and add a new option in there and we’re looking for a custom heading so we’re gonna click on that we could put our custom heading we can have a custom text or post or page title we’re gonna keep this as simple like a custom text so I’m just going to put in custom heading we can have that go to a link if we want to we can specify what H tag is going to be use or what element going to be used where it’s going to be H 1 through 6 p or div now the beauty of doing something like this or the benefit of doing something like this is that it allows you to make sure that in the markup structure of your website you use in the right element that kind of says how important this particular heading is even though it’s not created as a h1 or h2 or h3 in the actual code itself it’s still going to act or be seen by the search engines where the page rank and so on as that particular element type so that’s pretty cool text online we’ve got your normal options in there left right center and justify your font size we can come in we can fine-tune that so we could say we’ll have that to be 32 lion height if we want to put a custom line height in there text color so I’ll use the default font family from the theme or you can go through and you can choose your own font face on it if you want to so let’s just choose a custom font face so let’s just choose something like Roboto I don’t do over Roboto one they you can see that on them loaded in and it’ll give us the option then so we can go through and pick the font style so you can see depend upon the font family that you’re using we’ll have a range of different styles so we’re going to go for something like 700 bold you see it gives us a representation of what that’s going to look like any animation we can do that and the ID and the class names are already there again and the text color let’s just say we want to set that to a nice red color good with that that’s pretty cool if you want to use Alpha challenge you can use that so you can reduce the opacity of it to make it thinner or darker easy pretty cool so again design options all the same things in there hit Save Changes and now because that’s at the bottom and we don’t want it to be there we can simply drag that up to the top and we’re good to go so let’s hit update and take a look at what that looks like on the page itself so we refresh and then you see we’ve now got a custom head in that’s nice and red fits in with the style of our button everything is aligned the way we wanted to be aligned so all done really easy without having to touch a single line of code or pretty force it’s straightforward simple options we’re gonna go back and change any of those you simply come back in click to edit and you can now edit anything you want on there so we want to change the color of that we can say well we want that to be blue Save Changes update our page refresh there’s our blue heading very easy very simple very straightforward okay so we’ve seen how to easily create these sort of multi-column layouts there’s nothing spectacular about that we’re kind of just sitting inside this simple basic grid so let’s take a look at how we Google beyond that let’s create another new row so we’re going to say create a row we’re going to reposition this so it’s above that two column layer we just created we will simply go and take a look at some of the options that apply to a specific row as opposed to actually apply it to a column or just a particular cell inside there so we click on the middle edit this row you’re gonna see now the options we have are specific to working with the row regardless of the actual content that’s in me again we’ve got the design options we’re kind of used to those by now so I’m going to keep reiterating the fact that they’re there but they pretty much are always there and to the general you can see we’ve got first option is to deal with the row stretch in itself so you can see we’ve got default which will kind of just fit in with whatever your theme is currently used in civvy you had a completely full width theme or the page is said to be a hand % full width it would follow the sort of what’s going on there you can then do things like you can stretch the row which would just stretch the row itself you can stretch the row and the content to make sure that the content fits the entire row and you go stretch row and content with no padding so this would make sure that everything is flushed to the edges of that particular role so let’s take a look at how we can use this now to create a sort of full-width background image which we pretty cool as a sort of header image now there are a couple of ways you can assign this to create that sort of full width image and if all you wanted to do is place an image there with nothing over the top of it then you could do it just by simply adding in a graphic so a graphic widget an image widget like we’ve done on that right-hand column but a better way of work and especially if you want to put something over the top of it for example some text like a custom heading a call to action of button and so on is to set this is the background for the row and then apply some padding to the row you can even go as far as applying some simple parallax effects in there so let’s take a look at doing that now so I can give you an example of how you can build this up okay so we got the row stretch we’re going to leave that to row stretch stretch row inner content no padding us that’s fine we’re going to leave all those other options where they are con position we’re set to be the middle so when we put something in then we apply padding it’s going to make sure that that’s directly in the middle of the actual content itself will leave parallax for now we’ll take a look at that in action after we’ve created this and we’ll see how we can easy assign that we’re gonna need to do now is jump over to the design options the design option gives us one important area that we can work with and that’s the ability to add in a background now we can set a color on there so we can also set an image so we’re going to is click on this image we’ll choose this image that we’ve got uploaded earlier on I’ll work fine for this hit set image that now assigns that image into the background so we click on Save Changes and we just update this page jump back in and refresh you’ll see we get this just little sliver of the actual image itself and the reason being is because there’s no padding or anything else set inside there to sort of push this sort of roll to make it a little larger so let’s go and do that first things first let’s just come back in and edit this row but what you’ll see before I do is you see this little circle that’s telling us that there’s something in the background if there’s an image it’ll show a tiny little thumbnail of that particular image if it’s a color it’ll show you a little color chip telling you that you’ve assigned a color to the background of this particular row there’s a great little way of being able to see you and done something you can see the row below where we haven’t set a color or background image there’s nothing there so we know there’s nothing being applied to that okay so let’s come back in and edit this what we can do now is jump out design options or we can simply go in and set the padding in here so let’s just say we’ll set this to 250 pixels top 250 bottom we’re not bothered about the left and right there fine hit Save Changes and update the page now if we come back and refresh this you’ll see we now have a chunk of space in there that allows us to see the image itself so really easy to do that come back in if we want to set that to parallax come back in and edit this then we can simply come down and say parallax so yeah parallax and we can say simple or with fade so that’s very simple to start off with you can see if we do that now it’s going to ask us for an image so we can do is we can simply go in and delete that background image to come in here take that off there come back into this simple choose our image again we’ll choose the same image you can then control the parallax speed so you can have this act quicker or slower you can see that the default value is or the minimum is one I’d recommend playing about with that to get the effect that you want you also need to make sure if you’re working with a parallax effect that you’ve got an image that’s got a plenty of space above and plenty of space below the actual viewport that you’re looking through to see the image otherwise you’ll tend to find what happens is the start to repeat the image and it just looks a little bit rubbish so hit Save Changes click update jump back go to our page refresh this you can see our back at image now is in a different position and as we scroll you can see that the background image slowly has a parallax effect on it as we move up and down the page just come back in let’s edit that again and let’s just simply come in and change the value on this so let’s get some like the three hits Save Changes and update and refresh the page you can see that gives us a different position because the speed of the parallax effect is now going to be different so you can see that gives us much more movement as we scroll up and down but you can see it’s a very easy effect okay so now that we’ve seen how we can create that perhaps effect on how we can create this full width sort of area let’s take a look what we can do with that now to sort of put some things on top of it because if you take a look at the moment it looks okay but it doesn’t really say anything it doesn’t do anything there’s no reason for it to be there so let’s go through and add something to it because it’s set as a background we now have this entire row we can still insert content into so we can click and we can simply come in and add something else in there if we wanted to we can easily come in and say let’s just add a custom header so we’ll say we’ll have this to be a custom header and say okay so we’ll just have that saying this is a custom header we’ve set that to be h1 set the alignment on that to be centered font size we will set this to be something familiar large let’s try let’s try 72 text color we’re gonna go for white on me we’re gonna do is change that font face again and we’ll go for Roboto again I think we’ve got Roboto condensed so we’ll use that she was a nice thick bold font if we want we’re gonna play some animation to it so let’s just say we all have bounced down and yeah that’s pretty cool so we will say Save Changes so that’s put that first thing in there we’re gonna add a button in this so make that quick and easy I’m simply gonna come in duplicate this button drag that up onto our header section make sure that’s set to be centered so it all sits the way we want it to so we’ll say we don’t have to be in line we want that to be centered and yet that’s looking pretty good if I want to change any of me obviously I can I can come back and change it hit Save Changes click update we come back to our page and refresh there’s our custom header that animates in there is our button obviously it’s made because we’ve got that padding in there it’s made the heading look too big so we can easily come back in come back in and edit this design options change that from 250 to 150 so we can fine tune and tweak that to get exactly the look that we’re after so pretty cool powers effect is in operation as you can see we’ve got our animated header and our button we can duplicate those elements it’s all really quick and simple and straightforward so what we’ve covered so far we take a look at what rows and columns are how they can work how we can nest extra columns inside a column very quick and easy we take a look at how we can apply an assign background images how we can create a parallax effects how we could start working so the basic fundamental building blocks of working with page builder itself so before I wrap this video up let’s take one last look at what the front end editor actually does and how that works within the confines of page builder and the thing that were working with so we update our page we’re not limited to only work in inside the actual backend editor we can jump back off between the two should we want to so if I click on front-end editor that’s gonna now load in the page inside the actual theme itself now you can see there’s a couple of this crap it’s these things like the spacing on the sort of top section so you might find there’s a couple of little things that don’t necessarily look exactly as they were on the live site but it’s close enough to get you to where you need to be so let’s take a look at the interface and how things have slightly changed you can see we’ve got the same three icons in the top left-hand corner with all the same options available you can also see that we’ve got the page settings option which we can click and you can see that allows us to go through set the page title and also apply custom CSS we’ve then got the option to take a look at what this is gonna look like across different types of devices so we’ve got the responsive view that allows you to see it on a desktop a tablet tablet in landscape and portrait and a phone in landscape imported to make sure that everything looks the way we wanted to if we want to jump back into our backend editor we can simply click on that that’ll just jump us back into the backend editor and we start working the way we’ve been in a previous part of this video update as its name suggests will update and save this to make sure you’ve got the updated version apply all the changes you’ve made if we take our mouse over anything you can see we’ve now got a couple of different icons we’ve got the option for row which we can expand that out you see we now have the option to edit the row like we had previously just laid out slightly differently we can split the row if you want to we can add a new column in there we can duplicate it or we can delete it we’ve also got the same for the column you can see we can move that around we can edit it we can add a new car or prepend the column and we can delete the column so we’ve got a whole range of different options in there all pretty much similar they just interact in a slightly different way we take our mouse over you can see we can simply click to add something new so we can append the call if we click on there we can now add something else in so let’s just say I want to add a separator we can click pull through and set any sort of parameters are on there that’s fine we’ll leave it all as it is set the width to be 60 we’ll set this to be centre that’s fine I will say the border height is gonna be 3 pixels Save Changes close that down and there’s our line if we want to move that around we could be dragged to the position we want you know it’s all working in the way you’d expect you to it’s just a slightly different way of working where you’ve got the actual theme itself in view all the time and you see each of the actual elements themself as opposed to just those empty building blocks to show us what’s going on so the front-end editor is something that if you find you’re more accustomed to this especially if you’re moving over from something like Divi where you can work in the front-end editor in that this is gonna be pretty familiar to you if you’re more accustomed to working with the backend editor’ you have that option available as part of the page builder itself whichever way you want to work the option is there for you and that’s pretty much what I wanted to show you that’s going to give you a good head start on how you can start building your pages inside page builder from WP bakery I hope you’ve enjoyed the video if you have please consider using the affiliate links in the description below to help support the channel cost you know more money but does give us more percentage of every sale back to the channel to help support we do and create more content if you comments questions or feedback on this video or anything as we cover on the channel or anything you’d like to see covered on the channel please pop those in the comment section below and until next time take care

As found on Youtube

(Visited 12 times, 1 visits today)

About The Author

You Might Be Interested In