Building an Elementor Starter Blueprint Site

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 and 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 Elemental 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 setup 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 steps 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 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 rightclick it and then we could save it as a blueprint and that's what we're creating a element or starter site it is a blueprint site the second option is to use your hosting some of our hosts like runcloud or cloudways they do give you the option to use temporary domains or you could always create a subdomain 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 insta WP 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 uh let me know I'd be happy to do that but for now let's go ahead over here to instant WP 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 cuz 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 with the new WordPress FSE the full sight 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 anytime 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 could get indexed and then I'm going to go over here to permal links 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 to 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 a 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 be because this is going to change on a 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 in 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 Elemental 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 cuz 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 could 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 can use svgs and Json 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 uh but this is my setup right now and 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 uh 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 Le nested elements I'm going to turn this on inactive uh lazy loading I'm going to turn that inactive I have other plugins for performance that 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 and active now for the stable features okay I always leave this on active our 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 uh we could leave that active uh 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 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 informs unactive 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 I'm going to leave it on that condition right there next up let's work our way down cuz 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 cuz look at 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 here it is this is pretty much all I use on every single side 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 uh 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 more quicker and I 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 would 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 or trying to use both of them just creates a mess so I would avoid the typography I never touch this layout though this is what we want to change the first thing is a seter 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 it's 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 cuz I find 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 uh 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 break points go ahead and set them up but for now I am good on this I don't use a lot of break points because I use Rim I use uh 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 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 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 there 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 you us 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 subhe header 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 cuz you're going to want to make 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 are going to create a mess typography is very difficult the more minimal and the less that you use the better outcomes you are going to have when it comes to your typography and your design next up you're going to set up the font sizes and you could do this two different ways you could go ahead and start with rim and set up your font size let's say I'm going to do 72 pixels 4.5 rim 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 then you can 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 1,200 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 uh 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 semicolon here so there you go so it catches it all right you might not want to do this on your blueprint or your your starter website CU you're going to have to redo it anyways uh or you might want to give it a start and then can go ahead and adjust it that's going to be your call play around with it find what works same thing goes with the weight you might want to change that now the one thing that I never change is going to be my line height for 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 uh 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 uh something like shading then start off your Shades create a shade grid right over here and then one last thing back over here 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 jump start now that's it for the Elementor side if you do find anything else that you do over and over such as you know 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 Cloud flare uh so if you are going to set up something like word fence 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 light speed 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 Elemental 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 uh 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 croca block uh you're using jet engine 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 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 insta WP so I got my site it's right here let me go 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 Elemental websites and now here is the cool part for the template I could either keep it private for myself or I could 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 oops and the template has been taken somebody got my idea okay I'm going to call this light box cuz there's no other light box 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 2 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 can see everything is set up the way that I want it to be set up I have my Elemental 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 2 hours of your time and now that it is all set up the next step that I would go to while I am starting a brand new project I would 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 would 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 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 could 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 break dance as well and other stuff too all web design like I am really excited for what is coming this year on my YouTube yoube 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

Channel: Jeffrey @ Lytbox

Views: 4,495

Keywords: elementor, elementor tutorial, elementor blueprint, elementor wordpress, elementor pro tutorial, elementor start from scratch, elementor starter templates, elementor starter theme, elementor getting started, elementor pro getting started, elementor 2024 tutorial, elementor wordpress tutorial 2024, wordpress elementor 2024, elementor website 2024, elementor beginner tutorial, elementor beginners, elementor for beginners 2024, elementor website beginner

Id: iP0OcXdUhxM

Length: 27min 24sec (1644 seconds)

Published: Tue Mar 19 2024