Customize Without Code: Intro to WP Bakery | Kara Ferreira | Skillshare

Customize Without Code: Intro to WP Bakery

Kara Ferreira, Websites for Creatives & Coaches

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (24m)
    • 1. Introduction

    • 2. What Is a Plugin?

    • 3. Installing WP Bakery - 2 Ways

    • 4. Using WP Bakery On a New Page

    • 5. Shortcut: Working with Demos

    • 6. Saving Your Own Templates for Future Use

    • 7. Conclusion & Support


About This Class

In this class, I’ll get you on your way to designing a customized WordPress site without code. We’ll review how to use a front-end page builder that will enable you to customize your website, and you’ll put this plugins to use in designing out a page on your own website as the class project.

This class is perfect for anyone with a basic WordPress website that they would like to take to the next level in terms of design. You should have an introductory knowledge of the back-end of WordPress, but advanced knowledge or extensive prior experience is not required. In order to take full advantage of this class, you will need to use a WordPress theme that is compatible with the front-end page-builder WP Bakery, and be willing to purchase WP Bakery ($45) if your theme does not come with it.

By the end of this class you will be able to create your own page designs and templates to take your website’s appearance to the next level.


1. Introduction: Hi there. My name is Karen and I am the owner and chief designer at Will and wonderful and online website Design shop primarily for women Creatives, Cilla printers on dumb, with a specialty in women in the wellness industry. I do work with a few men as well. Um, today I have a skill share course that really is meant to help you customise your website completely. Should you want Teoh? Um, it's using a plug in called WP bakery, which is a paid plug and only costs about $45. But so long as you have that and a theme that's compatible, which most are this plug in will enable you to create completely custom pages. You'll be ableto design without using templates, although they do have good templates to start from, if you wish. Um, but using the BP Baker, you'll be able to create completely custom pages. I'm gonna take you over my shoulder and show you some websites that are designed to using um, this plug in. All right, look, with a little bit smaller on my own website is using WP Bakery. All of these sections here are used using WP Bakery. They are also helped to be created by the theme. The theme that I use for many websites is creative. Oh, actually, all the life that I want to show you today, um, right now are creative a web site. So you can start with those, Um, if you do need a theme, but that will enable you to sort of create these different pages. Um, see, this is another website with different sections as well. Um, so completely custom. Um, and these all look different from the original dream templates as well. Um, but they're completely custom funds. You can create custom sections, for example, of a simpler website, um, that you can create using daily fee bakery. So this website is one of mine. Um, it's actually the theme is called Launches by launch and sell, and it uses L. A mentor is a different front page builder for the home page. But on the other pages, I wanted to customize those. So I was able to do that using WP bakery. Um and so that has enabled me to sort of create these different sections here at the but ends so you can use the leafy bakery with other themes, even if they have other page builders to create your custom pages. So at the end of this, you will have a completely custom design page, and we will really dive into the details in the next lesson. So, um, you know, hit next and stay tuned for more, Thanks. 2. What Is a Plugin?: all right. So, like I said, I'm gonna take you over my shoulder and share with you how to go ahead and do this using my screen. Um, first thing you'll notice this is the back end of wordpress website. This is actually my very own website, and we're gonna start with just one a plug Innis. And now the plug in is actually the technical term for a piece of software that plugs into a larger piece of software and encodes a certain functionality. Basically anything that you want to do on your website at a calendar at on instagram widget . All of these things, there's most likely a plug in for it. Um, basically show you were plug ins if we can get our installed to bring with three very specific organs for this course slogans on the left hand side of your dashboard. So if you go over here and click, you'll be able to see all the plug ins that are installed on your site or in this case on my site. There are listed here. Um, and it's a few things. You don't want to get too crazy with these. They do. They can sit on your side. If you have too many of them, they can compromise your site security, let them get out of date. But for the purpose of this course, I was going to show you how to go ahead and add some new ones. Um, you might have a paid plug in that you purchase and download, in which case you'll have to upload it. But there are many free plug ins that live just right in here. One thing you want to always look out for is the number of installations this will share with you. Basically, help you have a plug in is, um, which basically tends to be a good bedding measure. If a lot of people are using it, it's probably high quality. Good plug in. You also want to check to see when it was last updated. This basically just means that whoever has coated the software for this plug in is still working on it. Um, they're still making sure that is up to date, that it's functioning well. So you want to make sure that usually I would say within the last month, two months might be acceptable, but you don't want to go too much longer than that. And the last thing is, you want to make sure it's compatible with your version of WordPress. So any public want to install those are the things I would check out. That's why they're all right here. Enlisted. But let's go ahead and dive into the three plug ins will be using to create our class project, which is your beautifully designed page custom made without any code and with your often forms. 3. Installing WP Bakery - 2 Ways: Okay, so now we're going to install WP Bakery, which is the paid plug in that we're going to be using the only paid one that we're going to install. But it is sort of the big showpiece. There's a few ways you can install it. The first is to go ahead to WP bakery dot com and to download it by over $45. Um, that's great. Then you can add it into any website, any pre existing website. Most contemporary things will be compatible. The other thing you can do is download a theme that comes with it and one that I recommend is creative. Oh, has a lot of great demo content already. And you might be thinking, Wait, the entire point of this is to make my own custom site. Why would I want to start with the demo? Well, I can get you there faster. You can start with the demo and have it look pretty different pretty fast. For instance, I will find the agency theme. Is that one second Crete at TiVo Agency import. Here we go. So creative agency. So, for instance, for my own website, this is the exact template that I used. So you see this here? All of this is made. It will be bakery. So this is their website. This is a nice feature that is, from it's made MPP Bakery, but it's pre encoded by the template. So, for instance, though if you go look at my website see, it looks a little different, right? So I gave it my own personal style and I did it all using Belly P bakery without any code. See, this is eloquently different. See, this is similar, but changed a bit. So you know, if you want to start with a pre made template, create evil, has some great ones. If you want to start quickly free, then don't worry about it. But if you purchase a Korea TiVo theme, then it will come with all of these different demos, all these different templates and will come with Filippi Bakery, so either way by the theme and sell the theme or go ahead, purchased the plug in, it'll download files to your computer, and then all you need to do is go back to your plug ins and new, and we're gonna upload the plug in choose file. So gonna go to wherever you're file is saved. Mine is right here. Click on it and install it. You may need to unzip the file first. Otherwise, go ahead. Here it is, Um, and you install it. I can't do it. Once already installed on my computer on my things will work. But once you install a, it should activate. And then when you go to your plug ins, no show up in here and then you go to settings. Well, this is all over in here itself said, If it's not an activated form yet, it also tell you activate it right here. And then you'll just log into the account that you just created here and that will then set up that will be Bakery 40 on your computer, and we'll dive in how to use that little bit. We're first going to go ahead and download male temper WordPress and ice. Graham 4. Using WP Bakery On a New Page: Okay, so now we're going to get into the meat of how to design a page with the bakery. In order to do this were to go ahead and create a new page. If you need Teoh, I have one set up in here. Um, if you go into the back end of the page here, you're just gonna go ahead and make sure, for instance, that it's full with, unless you want your sidebar to show depending on your theme. I have a bunch of different options here, but I want full with update you let it change anything. It's the big sure, but everything looks fine. And then to go to the front end, you're gonna hit the bakery page builder up here and in front and editor. All right, so now that we're in here, we're starting from scratch. If you have a team, a creative Oh, that works at the bakery, then you're gonna have templates already anywhere. So if you go to add template, you have lots of options. So if there's something that you liked, you've been create a whole new page from any of these things That will be options for you. If you don't have a template or theme that works with that. We could bakery. Necessarily. Then you won't have any templates saved in here. But you can save your own eventually. We'll get that later. Right now, let me start from scratch, Producer. An element. I can show you how to do a hero image at a row. And here when I hit this pencil to edit the row, We don't want to edit the column, my edit, the road design options and then go ahead and pick a bad image. I'm gonna do this one. You want to make sure that you think in images large enough. All right, so I had saved changes. You see, it showed up appear, but not much of it is showing to fix that. We're gonna go ahead, and I like to do percentages 30%. 30% above the below. That gave us a lot. I'm an easy It's kind of blown out. It might work with your image. That way. It might not. I'm sorry. I need to do that. We're gonna put it back. All right. So I said that might work with viewers and might not so contain all right. So contain works it better. It was a white spot top, so I'm gonna go back 10 right? 15 playing around because white space over here, that was a little white space of top. So another 13 depending on how your images crap, this might be an issue for you. All right, so it looks pretty good. So we have a whole picture, Ramage, which allowed people like if I want to add text, I can do that here. Custom heading. I was gonna do this quick testing. Now I know that I have a custom fonts set. You may not, but I know I have a cursive fonts at h four. Some do that. I'm hit center and font size on it to be pretty big. Someone a hit 60. Did I hit? Save changes and you can see it, Um, a little bigger. So really play around trial and error. You have lots of settings to go around and see things you can change the text color. Do you think like that? Um, now, this white space is growing because I have space coming up. So basically needing to do now is go back into here and tweak this a little bit. 10. 25. If I wanted, exactly in the middle, I'm to go 15. 15. All right, so that makes much white space for me on the sides. 20 20. All right. Perfect. I was. So I believe that as a hero image, we know what add content below it. So we're gonna go ahead, do a row, and in that row, I want a textbook. I want us that text to be centered. And then next another row, I'm going on a road because I actually want this section to be in two parts. So the sessions in one part, this one I want to be in two parts. So I'm gonna go ahead and hit this little arrow. Look on this, Get you update that I have two spaces here. I'm going to add an image if I can't see it right away. It's like like a single image. We're going to go like this on this picture of me. It's full, beautiful size. I'm gonna hits center. It's not gonna make a difference in this column, but actually, it's gonna help with is making sure that on mobile looks OK. All right, um And then here I'm gonna add text again. This could be my like about me bio and a top I go say title and here I'm gonna go ahead and pick other friend h two that's gonna show up And let's say you don't want it to be flush with top. I want to space there. Somebody go on his face. Three stars are your friends. Now it's in there. I'm looking. I'm a drag it up here. I can go ahead. I could make that bigger or smaller too, if I need to with us. And I might find that I want to space here to Sometimes these things look OK when you're in the design builder But when you click out your space is anyone there? And now let's say I want another one. I can actually hit clone, click and drag. All right. This is how we basically start building these elements out. Um, there's other things you can do. For instance, this row, if I want to give this row of background, I could go to color background that does that. But basically, I want you to take the opportunity to really just go ahead and explore different options that big re gives you. And to start building out a page, um, it might not be perfect to start. For instance, you might need to play around a bit like this space years when I need a spacer because of how that background is. And I have a space below and above the image. Just take this opportunity to really take your time, go through the different elements, start setting up your page and remember, you get frustrated you might want to work with. 5. Shortcut: Working with Demos: Okay, so I quickly wanted to show you a cheat. Um, if you are working on your blank page and you're getting a little frustrated because the sort of learning curve of WP bakery is not going as quickly as you'd like it to, something you can do is start with demo content. So if you have a good theme like Creative Oh, that has a demo content, you can go ahead and install that demo content from the blank page. We'll show you how to do that right now. Edit page or at a page? Yeah, I want to do a little demo content again. Make sure that it's full with published and then the the front end page builder, front and editor. All right, so here we go ahead and add a template. Let's say you're sick of working from scratch. It's not working out for you. That's OK. It takes time to learn these things, and an easy way to learn it is by tweaking demo content, and you can still make it look like your own. Um, if you're themes that have them a content, you might want to go back and buy something like creative Oh, and get that up and running. Get it installed. Um, but go ahead and pick. We're gonna do the jam. Campbell it like this. Okay, so we're gonna do here Image plus text six. So saying like this page or say like this one, click on it. Now it's installed. It's only one portion of it. So say one would still something else. I can go ahead in here. Oh, sorry. When you need to add other section. Actually, you have to go up here. It's a little counterintuitive. You think you do the plus sign, but you go way up here. We're gonna add another part of this to this, so we'll add this to it quick. Aren't you working? Should I do it? Basically, what you need to know is that once you're in here, just click on this. You can change it. If you don't want the fund. You can change the size by changing this Save changes you bit bigger. See, you didn't go ahead and change the font itself down here. But I'm clicking this. Let's make it. You're both that face, which I won't like. But you can make anything you want. Oh, sorry. Minds not gonna do this because I have a preset fought set. But basically, you click in at any of this swap out the photo start here, and sometimes work with demos really helps you learn things faster because you see how things are set up and then you know how to start and work backwards from scratch. So there were two options. Start with your blank page. Go from there. Started demo content to go from there. Is that your page? When you're ready, come back and I'll show you how to add in your newsletter, Upton. 6. Saving Your Own Templates for Future Use: Okay, so I hope that you taking the time to create your page to put your newsletter opt in, start the way you want it to. I know I went through things fast, but basically it's your job to go ahead and play around and to make things beautiful. If you have questions you can email me that's Keira at, well, wonderful dot com. Um, and if you have questions out delivering wrapped in gift have like a one page guide for that as well. So if you have trouble setting up how to deliver your gift from your email list, um, reach out to me care at will wonderful dot com and we'll get that set up. But hopefully now you have a page that you like as part of your class project assignment, and you have an often form that you like, and I'm gonna show you how to make templates out of that so you can duplicate your page and tweak it to create new pages. Or you can, um, sorry. Or you can take your newsletter form or any other part of your page and add that as a template as well. So what, you're gonna Dio is be on your page at the bakery beat page builder again And what you're going to dio once it loads against apologies for page being we for to load, which is is your gonna clone the row? So I don't have the newsletter often form on this page. But say this. I have this on multiple pages on my site. How I did that is you go to row at it. This gear icon up here, save us template calls what this one is? Um well, it's happened for him. Save changes. So say you want to add that into a new page or get on the same page as I went. But say you did or say we're in a new page already. What you do is you go up to here again. My templates. That's my show on down here. I have to move me calls. Hit the plus sign. It's gonna add it to the bottom of the page. See here it iss um So if you like more elements than just one thing on a page going to go ahead and save every single row and then you can reconstruct your page, you can also do a duplicate page using the duplicate page plug in. Go ahead. And I'm gonna x this out because I don't want it here. But that is how you would make a template out of any element on your Web site, anything you created, that you can easily re add it and keep on collecting those emails. 7. Conclusion & Support: were there. So ideally, this has served as your comprehensive introduction to WB Bakery. You'll be able to make more probably get further faster if you use demo content, but you'll be able to really create some basic structure in terms of adding text where you want adding images where you want stopping those out. Um, even if you're fairly a beginner, so hopefully you've had some time to play with this, you've created a page that you start to feel proud of. You'll be able take this skill further and create more custom website pages in the future. If you have questions, you can always drop in comments, um, on different lessons in this sculpture. Of course, you can also always email me at KERA at well, wonderful dot com. That's Karen with a K. All right, great. Thank you so much for being here.