2.3 Using the Back-End Editor

Welcome to the third lesson of this short course. Now page builder can be used in two different ways. By using a back end editor that replaces the classic WordPress editor, or by using a front end editor. That's a bit more streamlined and allows you to edit your page In real time. In this lesson, we'll discover how to use the back end editor. So let's begin. Now using these editors is simply a matter of going to your post or page that you want to edit and make your changes there. So, let's go ahead and create a new page, so I'm gonna hit Add New. I'm gonna call this Test page. And here, you have the two options. You can choose what editor to use. What you see now, currently Is the WordPress classic editor. If you've worked with WordPress before, then you know how to use this. It's pretty limited. It doesn't give you all the functionality and visual feedback offered by the page builder. So let's go ahead and choose back end editor. If at any time you want to go back to the classic mode, simply click this button. All right, so back in editor. It all starts right here. Let me collapse this menu, so we have a bit more room to work with. What you see here is basically the content of your page. And you have several options. You can choose to add an element by clicking this plus button on the top. There are so many elements to choose from, from rows, text blocks, different sections, icons, buttons, these are all of them. You can also filter them by using these tabs, or you can search by a specific element. So for example, if I want a map, I can type map and it gives me this particular element. Also, you have access to templates. Now we'll talk about templates in the final lesson of this course. So we'll just leave that be for now. There is also an option here to go kind of full screen and that will basically hide all of the other elements on that page, allowing you to focus on what you're building here. And that's actually what we're gonna do. Because it gives us more room. And also, we have a custom CSS setting for this particular page. So any CSS that we write here will only be applied to this page that we're creating right now. At any point, you have the option to preview the page, this will open it in a new tab, and you can also update any changes that you make. So let's start by adding some elements, shall we? I'm gonna click this button. Let's create an about page. Pretty generic page just to demonstrate how this whole thing works. I'm going to create a text block. Immediately I get this pop up allowing me to change text. We have a full text editor right here. I can also specify some design options. I can apply a custom margin, border, and padding. And I can choose the border color, the border style, the radius, the background color, and I can also add images. But for now, let's just say I want a simple text box. I'm not gonna tamper with the text after all this is just a demo. I'm gonna save the changes. So what happened here? Well, we have this new interface element, or interface for the element that we just created. Let's go over that and see what it's all about. This is a handle. You can use it to grab the element and move it around. This is where we get access to the grid. So you can basically set this element in any grid pattern that you want. Let's say that I want this to be on half the page, right, or even two-thirds of the page. And you can see the little pop-up telling you the column sizes. So let's go with two-thirds. And immediately you can see that we have another grid column created. That's one third of the available space. Here you can use this to create a new element You can use this bit to delete this element. Or actually, it's a column, it's not necessarily an element. So these controls over here are for adding and setting columns. Now if you want to edit the actual element that you just added, you hover over the element. It gives you a description saying what kind of element you have and certain options to edit, to clone, or to simply delete it. Now if at some point you decide, well, maybe I don't want two-thirds and one-third. Maybe I want half and half. You just go back here. And you set half and half or you can set a custom layout by using these controls. For now let's go with half half and that automatically updates. Let's hit update here, and let's do a quick refresh. And as you can see, now my content is placed on half of the available space, which is this. You might be slightly confused about, well, why isn't my content starting here? Because this is a page template from the currently activated theme, and the actual content that we want to change starts from here. But if you have another or different theme activated, you might get a different result than me. So let's add an image here. I'm gonna add an element. Let's see, I'm gonna search for image. Now, single image. I can choose the image source. Either from my Media Library, or a featured, or an external link. But let's select one from the Media Library. I have some images that I used in a previous project. So maybe just a picture of this watch. I'm gonna set image. Then you would set the image size. You choose whether or not to add a caption, and then you choose the image alignment. Maybe I want this aligned to the right. You have an image style, let's use a circle. And then you have some other options like selecting CSS animation for it. Let's I don't know bounceinLeft or actually bounceinRight. Because I wanted to come from the right side. We can set an Element ID or an element class. Under Design Options you have the same options I talked about previously. Basically for the CSS box. You set the margin board or padding and you have access to some settings for those as well. Once you're done, hit Save Changes, and then you have your second element. Let's update, let's refresh, and there it is. And remember, you did this without writing a single line of code. All you did was Press a few buttons in here, change a few properties, and you're all set. Maybe I want to make this image a little bit bigger. So I'm gonna hit settings. And I think I want a large image instead of thumbnail. Save changes, update. And now I get the bigger image. So what other elements do we have to work with? Let's add an empty space. You can specify a height, an ID, and a class name. Let's make it 50px, Save changes, and that creates an Empty Space. And after that, let's maybe add an image gallery. All right, so I'm going to hit image gallery. You have a few different gallery types to choose from here. I'm going to stick with the default. I can select my image source. Let's select our images. Let's go with these three. What image sizes do I want? Let's say large. Then what happens when you click each photo? Does it open a light box using pretty photo? Does it link? Does it open a custom link or does it do nothing? That's really up to you. It depends on what you want. In my case, I'm gonna select open pretty photo. Let's skip the animation for now, save changes. And hit Update. By the way if you're working, Not in a full screen mode, like this, you can hit Update in preview here. But if you go to full screen mode, those buttons are automatically moved here. That's very convenient. So let's do a refresh. And now we have our gallery. So clicking this image will open it in a light box. What else? Maybe add or press widgets like one with the recent posts. So I'll just play the post date. Let's save the changes. But what if I want a separator between this gallery and the The post? Well, let's add a separator like this. I can select a color here, alignment, the style, the work width. These are very customizable. So I'm gonna save the changes and I'm gonna move the separator above my recent posts. Let's hit update, let's do a refresh, right? So now we have our gallery, our list of recent posts. And of course, these are styled according to the theme that's currently activated. So if I go back to my back end, and I change the theme to let's say for example 2016, these will look Different, right? They will get the style of the currently activated theme. So let's go back to Twenty Seventeen I think it's much cleaner theme. Now, we've made some changes. We added some elements. But what exactly does this translate to in terms of code, right? Well, if we go to classic mode, we can see this basically. Let's go to text. What we're seeing is basically a list of short codes. Of visual composer or page builder short codes. That's how it works. It renders based on the elements that you set here. It renders those into short codes that are then interpreted by WordPress and you get this code right here. If we do a quick inspection of the code, now let's see about this block that we initially put there. All right, so it starts right here, vc_row, vc_row-fluid, so these are all page builders classes. A page builder uses its own styling, its own code to generate these layouts. Now if at some point you want to edit these styles, you can of course overwrite them yourself, but there are more advanced options that allow you to customize the page builder with your own color basement. More about that will be covered in the developer course. For now, that is a very quick guide on how to use the page builder's back end editor. As you saw, it is not complicated at all. You simply add elements and you place them in columns. Any element or any row or any column can be duplicated, it can be edited. It can be collapsed or expanded to give you an overall look, making this entire build process pretty simple. So now that we saw how the back end editor works, let's have a look at the front end editor and see what that's all about. That's coming up in the next lesson.