WordPress Tutorial: Visual Composer Basics 2 – Front End Editor

Hi and welcome to another episode of piece made TV in today’s video we’re going to be taking a look at the front-end editor portion of visual composer and how we can use that to quickly and easily create visually appealing layouts while looking at the actual basic layout of the page that we’re actually working on so let’s see how that works so what I’ve got open at the moment is just an ordinary WordPress page will not use the visual composer I’ve just using the ordinary WordPress editor so what we’re going to do is we’re going to switch to the front-end editor this time we’re going to see how that allows us to create the page layouts while actually seeing the physical layer that we’d see on screen when we actually activate the website or with the benefit of use the visual composer to lay things out in a visual easy straightforward fashion using all the same tools we’ve gone available to us in the ordinary administration back-end editor so what I’m going to do is for this particular template I want to go full width and I’m just going to update my page to make sure I’ve saved everything before I move on and then once that’s saved I’m just going to go and invoke the front-end editor so normally we click on back editor editor let’s just click the front-end editor to see how that changes our workspace and give a couple of seconds and what we’re finding is we’ll switch over to this particular page we’re working on on the site itself but we have all the benefits of visual composer while working on the site live now obviously no one’s going to see this if you’re working on your actual site but it means that we can see all the basic layout elements the navigation up at the top or footer and or any other elements you may have on the page so all you’ve got available to us are a couple of options across the top of the screen we’ve got the visual composer icon we’ve got the add a new element icon and we’ve got the template editor icon we’ve also got the ability to control the page settings we can work with guides on or off we can even go and see what this layer it’s going to look like on a range of different devices from a normal screen to a tablet in landscape a tablet in portrait a typical phone in landscape the typical and portrait we can switch back into the backend editor’ or we can hit update we will also work directly on the page like we normally can in the backend editor so you can see we’ve got the typical tools available if you can edit down a text block in this instance we can copy we can delete we can add a new row or add a new element in we’ve also got a cut of other options that are just later slightly different to weed seat the way we see them in the backend they still function the same way so for example if we want to split this into multiple columns we just come up to the row option and we’ve got a couple of extra options so all we need to do is click on the little expand icon to see all these extra available tools so we can edit the row we can adjust the number of layouts that’s with the number of columns in our layout we can go in and add new columns we can copy we can delete we can also click on the column option or we can edit the column we can add or prepend the column and we can delete the column so we’ve got all the tools we need available to us to start working on creating our pages actually on the website itself so let’s see how this works let’s take the existing content that we got laid out let’s split it up into some columns which again I work how easy that is we’ll add some media into this I will just see how easy it is to work on the front-end of the website so let’s just expand and we’ll just choose a layout by clicking on the change layout option and you can see there gives us all the typical options we had available to us in the backend editor so let’s split this into a 50/50 column set up update that and close that down now you can see that we take our mouse over any of these elements that we start to see our guidelines if we don’t want to work with those we can just turn the guides off by clicking the guides on and off switch at the top of the screen and now we don’t get any of that distraction switch them back on and they’re back available to us so what I’m going to do is I’m going to copy this particular block of text once that’s copied I could just move that in exactly the same fashion I would with the backend editor’ just grab the the read to move handle drag that over to the second column and we’re kind of done so it’s in the guides off we can see what this would look like on the page easy so the guides back on so if I want to edit this and put some media in there I can just simply click the Edit icon that’ll bring our text block settings exactly the same as we see in the backend we can just position our cursor click add media that’ll take us to the Media Browser we could find the file that we want we can specify where we want to position it what we want to do with it now you haven’t seen how I do all this then I recommend going to take a look at the video to do with the inserting media and managing media that’s available as free on our channel so go take a look at that if you want some more information about working with media so we’ll just say inserted the page and flog that over to the right hand side and we can just say let’s just save the changes a couple seconds you can see there we go close that window down all very quick and easy now what we’re doing at the moment we see in this as we would see it on a typical screen if we use the options so we can see the responsive preview we can see well what’s it going to look like on a tablet in landscape click and we can get a good indication of what our page going to like on a typical landscape orientated tablet and the same for tablet in portrait right the way down to a smartphone in portrait so it’s a great way of just making sure that the way you lay your pages out is going to look visually correct based upon various different screen resolutions the screen sizes and devices so you can see we switch we’ve got a mobile menu so we can check how that looks and we can just come back and switch that back so all very easy all very straightforward if I want to go and jump back into the backend to make some changes to this in an environment that I’m used to I can just click the backend editor’ or if I’m happy I can just say update and that’ll save this with the changes we’ve made so let’s just do that give that a couple of seconds to go through and save and there we go with a little successful message we can now just click the backend editor’ I’m very easily back in to the admin section where we can carry on work on the page so we need to and there we go so the view we’re kind of used to working with that really is all there is to working with the front-end editor you may find that you prefer working that way so you can see how your pages will look based upon the actual design or the template that you’re currently using to make sure that everything sits in there correctly or you may prefer to work in the backend editor’ like we’ve done previously in other videos hopefully you found this useful if you have please hit the subscribe button hit the like button below it really does help spread the message around share the video share the links and subscribe if you find them useful thank you for watching and take it I’ll see you next time

As found on Youtube

(Visited 2 times, 1 visits today)

About The Author

You Might Be Interested In