 Hey everybody, check it out. I took some time off of YouTube to focus on my latest project, the ultimate SEO for WordPress project. Also, I took some time off to focus on improving some things inside of my own personal life, but now I'm back and I'm ready to start cranking out some more Elementor tutorials. In fact, I got a long list of some really fun ones that I'm just waiting to dive in and start creating, but I got a problem and you might have the same problem as well. And that is every single time we start a brand new Elementor website, we got to go through the same boring tedious steps. They take a lot of time. It's not that fun going through that whole set of process. So I thought why not solve that problem right here inside this video by creating an Elementor starter site or a blueprint site. Also for anybody brand new to Elementor, this is going to be the perfect video to help get you started. You're going to be able to set up your website the right way. And I'm going to take you step by step, making this whole thing easy to do. All right, check it out. Let's get started. The first place to start is setting up our WordPress environment. And that means we need to choose where we are going to store and host our starter site. We have a couple of different options. One is going to be using a local host like this one right here, local by Flywheel. This is a local host that I use. It's totally free. And if we go over here and we take a look at my setup right here. These are all my local sites. If we build our site right here, we start up a brand new site. We could right click it and then we could save it as a blueprint. And that's what we're creating an Elementor starter site. It is a blueprint site. The second option is to use your hosting. Some of our hosts like run cloud or cloud ways, they do give you the option to use temporary domains, or you could always create a sub domain as well and just host the site yourself. Now the third option, and this is what I'm going to be using for my Elementor starter site, my Elementor blueprint. And that's going to be InstaWP. This platform was built to do stuff like this to quickly deploy pre built starter blueprint websites to make the whole workflow a lot faster. Now you just got to choose. And if you do want to see a tutorial on something like local and building a blueprint on local by flywheel, let me know, I'd be happy to do that. But for now, let's go ahead over here to InstaWP and I'm going to spin up a brand new site. And now we're in a brand new WordPress website. And the next step is to set it up. The first thing I want to do is clean up my environment. WordPress comes with some default posts and pages. I always like to delete those because I love to have a clean start. So let's go ahead and move these to trash and remove them. The next step is I want to put in my hello theme. And the reason why I'm doing this right now is because with the new WordPress FC, the full site editor, we don't have all of our settings here. We don't have all of our options. So I want to get those options back into the environment that we're going to be using. So let me go over here and add a new theme. And I do see this update right here. We're going to get to that next. But let me install this and then activate it. And then I'm going to add the child theme. And let's quickly grab that download right here. Now it's inside GitHub. I'll leave a link to this inside of the description. But I'm going to go here to download the zip back over to themes. And let's install our child theme. So it's really important to always have a child theme. Even if you're not going to use it, it's just using best practices. Let me go activate it. I'm not going to install Elementor yet. There's a few more things that I want to do inside of my WordPress settings. Let's go update everything. And now that WordPress is updated, let's go check our plugins. Now, it depends on where you are spinning up your WordPress website. Some of them come with pre-installed plugins. If you do have pre-installed plugins like Hello Dolly or something like that, go ahead and delete them. We want to start clean. Next up, I got a few things that I want to do in the settings just to make sure that we are all good. One thing is I like to set up my time zone. Since I'm in Thailand, I'm going to search for Bangkok. All right, got my time zone. That is good. I am going to leave this off right here. You can go ahead and change this. I'm going to call this my Elementor blueprint. And then totally optional, but I'm going to give mine a cool tagline. And there we go, cutting out redundant work. That's my tagline because that's what we're doing with this blueprint. All right, let's go over to reading. And yes, we want to make sure this is checked on. Make sure that's on any time you're starting a brand new site. In development of a site, you want to make sure this is on. But when you do go live, don't forget to turn this off so your site can get indexed. And then I'm going to go over here to permalinks and make sure I'm using the post name. Next up, we want to go over here to pages. And let's add the default pages, which pretty much goes on every single website. That is going to be home, blog, and contact. And this is all we need. We just need a few of our starter pages. This way we could go over here to our menus, and I could add in my first menu. So I'm going to call this my main menu. And let's add everything to it. You don't need to add a bunch of pages or start to create it. We just want the starter that way when we do put in our pages and we got to build out our menu, it's already going to be started. And we get a quicker start into the process. All right, let's go over here next to our to our appearance. And then customize from here, we are going to go to our homepage settings. This is the reason why I also add in a few pages. That way we can get this set up right away. Because by default, the homepage is the blog. And that is a bit of a headache. We can't leave it that way to start the site. We could go to our site identity as well. I mean, it's already set up inside our general settings. For now, I am going to leave this because this is going to change on the project by project basis. Right now, what we're doing, we are looking for anything that is repeated over and over. The best way to automate is when you catch yourself doing the same thing three, four or five times, and it's all the same, then you want to try to create a process where you don't have to do it again. And that's what we're doing. All right, now we got our settings and WordPress set up. If there are any other settings that you catch yourself doing with WordPress before every single website, make sure to do that. Now I'm going to go and add Elementor. And then when you activate it, you get this wizard, but I don't want to use a wizard. I just want to install Elementor Pro. So all the way over here in the very top right hand corner, click that X to get up out of here and back into your WordPress website. Now I'm going to install my Elementor Pro and upload my plugin, which I already have downloaded. Go ahead and activate and then the next step, add in your license and connect it. And now the next steps are going to be setting up Elementor. And this is where I catch myself spending a lot of time redoing the same thing over and over. So we're just going to do this one time now. I'm going to start here with the settings and I'm going to work my way through it. Now for the post types, I usually just leave it on these. I always turn these on, click these because we're going to use our global colors and global fonts. And then I'm going to leave that off right there. Let me save changes and I am going to turn on landing pages. I've been using landing pages more and more frequently lately. So we can leave that on. I don't see myself using any integrations for every single site. So I'm not going to touch that. But for advance, I do have the same settings first for Google fonts. I'm going to disable it for the font awesome for support. I'm going to leave this off and I'm going to leave this enabled. We're good to go. Oh yeah. And I want to turn this on right here for the unfiltered file uploads. This way I could use SVGs and JSONs and not really have a problem. And then this is a big one right here and this one, this changes over and over through time. So depending on when you watch this, it might be different. But this is my setup right now. If you follow the way that I'm doing this, even when this does change with new features, well, it's going to be pretty much the same thought process behind it. I want to turn off everything that I am not using. I also want to try not to use anything in beta. Now I am going to use the grid container. I am going to leave this inactive. We already got landing pages on so I'll leave that turned on less the nested elements. I'm going to turn this on inactive lazy loading. I'm going to turn that inactive. I have other plugins for performance and I'm going to be using for that. I don't want them to conflict. You see, this is a thing. This is active by default, but it is in beta and that should not happen. All of these should be turned off if it is inside beta. It's in beta. It's not ready for the public, so it should not be turned on and this is why this step is really important. So I'm going to turn that off. I'm going to turn this off. Don't leave anything on default ever at this also. Okay, inactive. Now for the stable features, okay, I always leave this on active or optimizations right here. These are the top ones because if I am building it while these are active, I could catch a bug or something not working right during the build instead of building out a full website and then turning these on and then something breaking. This way, it helps me to identify and fix a problem a lot quicker. All right, Flexbox container, we're going to make this active. We could leave that active. I'm going to turn this off. I like the old school theme builder, but this is my own personal choice. I just find it a lot easier to work. This one I am not going to use. Okay, this one I will leave active. I haven't really tested it, but I'll leave it active. I'm not going to use AI on every project, so I'm going to turn this off. I will go ahead and leave this on active right here. Okay, we'll keep that on notes. We're going to turn this on inactive and forms an active. Another thing you got to understand too, if you are not using notes on your site, turn it off because if you keep it on, there is an extra file being loaded. All this does add extra code. So this is also a way for us to keep everything as light as possible with our builds. Next up, let's skip down over here to custom code. Now custom fonts, this is one that we are going to have to set up on every single site. We are going to come back to this later when we're setting up our globals. But for now, let's go here to custom code because this is something I personally add on every single site. I always have my header snippets, and this is going to be inside the head. All right, I'm going to leave it on that condition right there. Next up, let's work our way down because now we got a new setting, which gives us more options to do when we are setting up our starter site. And that is going to be our element manager. Now I'm going to turn everything off except for a very few of them that I actually use. I've never used a SoundCloud widget. So it makes no sense for me to keep this on. To start off, let me turn off everything. And here it is. This is pretty much all I use on every single site I build. Now if I do need to go in and let me go ahead and turn it back to all statuses. If I do got to go in and I'm going to use something, you know, like, let's say a social share button on my blog post page on my blog post template, then I'll just come back here and turn it on. But by starting clean, starting as minimal as possible with only the basics and what you're going to use. Well, it's going to make it a lot just more streamlined, a lot more quicker. And I'm just a minimalist. I like to clear out the clutter and have a clean start. Set yours up to your style though. Now we're almost there, but we have one really big tedious task. This is the painful one for me and that is going to be setting up the globals and then setting up the settings inside of your builder. Now let me go back over here to my page and let me edit with Elementor. And then from here, we're going to jump right into our site settings and let's start setting this up. Now I'm going to come back to these two. This is where we're going to spend a lot of time. Now from here inside the theme style, I will not touch this typography at all. And I got another video coming up very soon about SEO and the reason why I do not touch these settings, but we got our global fonts here having both of these are trying to use both of them just creates a mess. So I would avoid the typography. I'd never touched this layout though. This is what we want to change. The first thing is a set of width and I'm going to put this at a rim. I do like 1280. And if we go over here to a calculator and I'm going to put 1280, that's going to be 80 RAM. So I'm going to use RAM right here, we're going to put 80 RAM. Now the container padding by default, it has 10 pixels around the container. Having this default padding right here messes up the design. It's really bad that this is here, turn it off, set it to zero. I know what it's trying to do is trying to make it easier to use a builder, but it's doing so at the cost of messing up the design and taking away from having everything just consistent and in line. So I'm going to remove that the gaps and this one is totally up to you. I'm going to set my gaps because I found myself using the same gaps over and over. It does help to speed things up, but I am not going to use pixel for gaps instead. I'm going to use RAM and this is going to be a 1.25 RAM will make 20 pixels. I just use my converter right here. This is really helpful for when you're building a site, by the way. Okay, so I'm going to put 1.25. Okay, there is a bug in Elementor right now where if I put one and press a dot, it's going to move the cursor in front of the digit instead of adding a decimal. So hopefully that gets fixed by the time you watch this. All right, next up right here for the default page layout, I'm going to leave it at theme. And then if you are going to use different breakpoints, go ahead and set them up for but for now I am good on this. I don't use a lot of breakpoints because I use RAM, I use clamps, and that helps out with everything. And next up, this is where we're going to spend quite a bit more time and that's going to be inside of our global colors and our global fonts. So we got our global fonts right here, but by default we only got these four. Now for all of my sites, I use pretty much a very similar design system that I replicate over and over. And I got my font styles and I always label them the same, I always use like the same size as t-shirts to identify the size of my titles and my text. So these, they're replicated on everything. And then also we got to set up the font colors as well. Now we need to get a good starting point for the fonts. It does take a bit of time. I am going to set my end up and I'm going to show you how I get started with it. Now this is another site right here that I have built and as you can see in the fonts, I have my settings right here. And to go through all this and to set up a clamp for all of these, it does take quite a bit of time. But if you do it once, then the only thing you got to do when you do use this on a brand new website is just to adjust the font sizes and it'll save you so much time. And now I'm going to fill out everything just like how I did here and basically replicate my system that I have over here with all my fonts. And this is a system I use over and over and over and you use your own system. If you do have one, if you don't go ahead and replicate mine and use this as a starter. As you design more, you're going to start to build your own system. It really helps to speed everything up and it looks like this. I got my header extra large, my header large, my header medium, header small, and then my header, my subheader right here, I got my text medium, my text large, text small and text extra small. And then I have my button text medium right here and I'm realizing I missed my button text small. And this is why you're going to probably spend a lot of time right here because you're going to want to make sure you have everything covered. Now when you are setting up your default font styles, you don't want to have too many of them. The more that you have, the more likely you're going to create a mess. Typography is very difficult. The more minimal and the less that you use, the better outcomes you're going to have when it comes to your typography and your design. Next step, you're going to set up the font sizes and you can do this two different ways. You could go ahead and start with REM and set up your font size. Let's say I'm going to do 72 pixels, 4.5 REM. And then you can set it up for your tablet and mobile. It takes a little bit more time, but it's going to be a little bit easier to update it based on the design when you start it on a new website. That's one option, but the other option is going to be using a clamp. So when you do use a clamp, we set up the size right here using the pencil and they could go to a calculator like this. So this is going to be my extra large text. I want it to be super big, my extra large header. The max size is going to be 72 pixels. The minimum, I'm going to say the minimum is going to be 36. I don't want it to be too small. My viewport, let me update this. I'm going to put 380 and for my maximum, I'm going to put 1200. You can leave it on default. By default, it's probably good. But if you know what you're doing and you're used to this, you got some experience, then go ahead and set it up the way that you like. Let me calculate it. And now I could just go in, copy this and paste it into here. And then at the very end, you have to put a semi colon here. So there you go. So it catches it. All right, you might not want to do this on your blueprint or your starter website because you're going to have to redo it anyways. Or you might want to give it a start and they could go ahead and adjust it. That's going to be your call. Play around with it. Find what works. Same thing goes with the way you might want to change that. Now the one thing that I never change is going to be my line height. For a very large text, I always use the M and I always use one. Now if I am going smaller in text, my line height gets a little bit bigger. So that is the next step. I'm going to go ahead and set all mine up. But now let's jump to the next thing we need to style up and that is going to be our colors right here. Now we have these default, the primary secondary text accent. Choose the names that you want and now my dogs are barking, which is probably telling me that this video is getting too long. So let's wrap this up and take it home. There's only a couple more steps over here. You want to set up, set something up for you to get started. These colors are not fun colors to start off with. The names aren't fun. When you do get started and you have a site ready to go, you have everything right here. All you're going in is changing the colors. You can see I have my style right here. I got my main color, which is usually my main dark. I have my main light and then I have my highlight colors and then I have all of my secondary colors and if you are going to use something like shading, then start off your shades. Create a shade grid right over here. And then one last thing, back over here, I forgot to mention this, and when you move this over, your starter site over to a brand new website that you're going to build, you're going to have all this here. But when you do set up your Elementor website for that project in the very beginning of the process, you are going to add your custom fonts. So you're going to install those. So that way, when you do go back here, all you got to do is go in and select it and it's already connected. It's going to give you a much quicker jumpstart. Now that's it for the Elementor site. If you do find anything else that you do over and over, such as creating your templates, you can go over here to your theme builder, you can create a header template, a footer template and a single post template and an archive template. Those pretty much goes on every single website. Think of all the things that you do over and over and over, whatever you repeat. And then here is the last part and that is going over to your plugins and adding your stack of plugins here. And here is my stack and it is a minimal stack. So first thing over here, I got an activity log. I use this for my security right here. Also for my security, I do a lot of stuff right on the server and with Cloudflare. So if you are going to set up something like WordFence or if you're going to use your security solutions, then you want to install them. You don't have to like turn them on and set them up, but just keep them ready so that way when you do push this to a live website, you just got to turn it on and activate it. Next up, I have my performance plugins. I use Perf Matters and Lightspeed. I do not turn these on for when I am building a website. So I always leave these off. I only turn them on at the very end in the final process. And then we got SEO Press. This is my go-to for my SEO. I do turn these on and I do use them because when I am building a WordPress website, I want to make sure I'm setting up the SEO during the build process. I got my short pixel. I keep that off. I do keep on SVG support. For some reason, whenever I start a brand new Elementor website, I always have a problem uploading SVGs. So I turn this on and that takes away that problem. And then right now I'm using WP code box. There are several other good ones. Code snippets is awesome. The Fluent team just brought out a new one. So whatever tool you're using, if you are using one for your code, then that is something good to have. And that's it. Put your starter. Now, let's say you use ACF or CrocoBlock. You're using JetEngine on a lot of your sites. Are you using them on all of them? That is the thing. If you are using the plugins on every single website, go ahead and add it. Add the ones you add to every website. The thing is, I try not to add a plugin until I actually need it. Because every time you do add a plugin, well, it starts to build up that database. And I want to keep everything as clean as possible. Once you got it all set up, this is what I am going to do here inside my InstaWP. So I got my site. It's right here. Over to my templates. And I want to create a brand new template. And this is the one right here, the Elementor Lightbox BP, my blueprint. Let's go ahead and create this. This is my Elementor blueprint. And then I give it a description, a quick way to start my Elementor websites. And now here is a cool part. For the template, I can either keep it private for myself or I can share it with all of you. You guys know me. I love to share stuff with you. So as soon as this video hits 100 likes, I'm going to share my template inside the descriptions. All right. When you see 100 likes in this video, I am going to have a link that is going to share to my personal Elementor blueprint. You could take it and use it as your own. Also like this feature for instant templates. I could turn this on and anytime I start a site, bam, this gets started. All right. So let me go ahead and save it. And the template has been taken. Somebody got my idea. Okay, I'm going to call this Lightbox because there's no other Lightbox Elements or blueprints. I am 100% certain of that. And now it's done. It was that quick. And now when I go over to my staging sites, and I want to add a brand new site, I could go here to my template, I choose this one, let me go ahead and create it. And that took less than two minutes. Let's go take a look at it. I'm going to log in. And now when I go back here, I could just go right to my plugins and I could see everything is set up the way that I want it to be set up. I have my Elementor settings, the way that I set them up and not by default. I don't have to worry about those. Even my Element Manager, it is going to be set up just with the elements that I am going to use. And all this takes is an hour or two hours of your time. And now that it is all set up, the next step that I will go to while I am starting a brand new project, I will go add my pages. I would go set up my menu, I would add in my custom fonts, that would be the next step. And then after that, we will go here to our site settings and set up our globals, which would be right inside here. And then you're ready to go and start building your website and have some fun being creative and cutting out all of that that tedious boring stuff. All right, I hope this helped out if it did, then definitely give a like and subscribe. And with that, we are good to go. Now with our starter sites, we can get to the fun parts of building a website much faster, which is designing and creating. Also we're going to be speeding up our processes as well. We're going to be geeking out a lot. I got a lot more planned for Elementor and also for bricks and breakdance as well. And other stuff too, all web design. Like I am really excited for what is coming this year on my YouTube channel. All right, well, that's it for this video. Thank you for watching. I appreciate it and I'll see you inside the next one.