2.4 Using the Front-End Editor

Welcome to the fourth lesson of this short course where you'll learn how to properly use the Page Builder front end editor to edit your page content. Now, previously we had a look at the back end editor. You saw how this replaces the classic editor that is bundled with WordPress. Now, on the same page we worked on the last time, let's check out the Frontend Editor. Clicking this will actually get us out of the back end and into the front end. So we can actually see our page in its true form, right here, but we have some additional controls. It's like watching our life page and being able to directly select elements, changing their properties and so on. This is what the front end editor is doing. So if, for example, I want to edit this block of text, I simply hover over it. I have my controls here. I can move it around if I want. I can put it here, and maybe I can put the image here. I can swap them around. Maybe now that I moved the image, I wanted to come in from the left side instead of the right, so I'm gonna edit this And I'm gonna set the Image alignment to Left. Maybe Image style, change it to Default, and the Animation, bounceInLeft. Save the changes and close. And you just saw that were those changes taking place immediately. You want to add the text tool, just hover over, Edit, make your changes, Save, Close, and you're done. And the same goes for any other element. Do you want to edit this one? Go ahead and edit it. Do you want to edit any kind of row? Here or column simply hover over the row or columns controls. Hit this slow bit and you have all of the options you want. So essentially this works exactly the same way as the backend editor. But you get a real time preview of what you're doing. So if you want to change the text here, you just go ahead and change the text. Recent posts, my recent posts, save changes, close, and that is updated automatically. You don't have to save. Switch tab, refresh, see your changes, and then go back. This is right here, you can see what you're doing all the time and what elements and how they are affected, which is pretty nice. Now, on top of the usual editing mode, you have some additional options here, like for example, the responsive mode toggler. So you can use this drop down to simulate how your page will look like on a different screen size. So here it is on a smaller screen. This is probably a tablet in landscape tablet, tablet in portrait, mobile in landscape and mobile in portrait. And that doesn't prevent you from changing the item size as well, right. So even if you are in smart phone mode you can still edit. Or add any kind of element, simply click this button. Maybe you want a video player. That's cool. You just put it there, save changes, and now you have a video playing. It's really nice to be able to make these changes in real time. You can also preview them on the different devices. If at any time you want to go back to the back end editor you just hit this button, if you want to update you just hit this button, and it will automatically update. So, now our test page contains those updated styles and elements. So that's how you can use the front end editor of page builder. I think it's a matter of preference I think. Personally, I would use the front end editor because it gives me greater control over the page layout and the page content. And it also provides me with immediate feedback, while the back end editor doesn't do that. And I also have to make an extra step to see my changes. As I was saying previously, go back to the back end and make your changes. Get update. Switch to a live page, refresh and then see your pages while the front end is much simpler to use. Now, previously I was talking about templates. Well, templates is actually a great feature provided by the page builder. We'll talk more about those in the next lesson. See you there.