 What's up everyone? I'm Jeffrey at Lightbox and in this video I'm going to show you step by step on how to build a complete WordPress website. Now this is for beginners and anybody who is brand new, even if this is your first time building a website, you can follow along. By the time we get to the end you're going to have a completed website. We're going to cover everything and I'm going to show you my own personal process. Now there is quite a bit in it, it's a bit lengthy, so there are timestamps inside the description. Use them that way you could skip ahead, bounce around, come back to the parts that you need to come back to. We are going to start with the setup and the preparations. Then we're going to go into building the website together. Now I am going to leave the creativity up to you. I'm going to allow you to build it the way that you like with your own style, because it's your website and for your own business. I'm simply going to show you each step of the way what to do and how to do it. Then at the very end we're going to wrap it up by setting everything up for security, SEO, and speed optimizations. That way your website is ready to go live. Basically we're going to be dotting all the i's, crossing all the t's, and you could use this sort of like a checklist to make sure everything is done that you need to get done in order to make your website complete. If you have any questions during this video, this tutorial, which is kind of long and I'm sure a lot of questions will come up, please drop them down inside the comments. I'm going to get back to everybody. I want to make sure everybody is getting support and help as they're building the WordPress website. Let's go ahead and begin and have some fun. First step to always building a new website is the preparation. This step is crucial. In fact, I would never begin a new website without properly preparing for it and you're going to see there's only a few things we need to do and by taking that extra hour out in the very beginning to set everything up, it's going to save us a whole lot of time later on. It's going to make sure that our web design and our websites come out a whole lot more professional and cleaner looking and it's going to give us something to work with. So we're not just building from the top of our head. It's going to make the whole process a lot more efficient and you'll see how it comes into play when we are building our website. So let's start the preparations and the first step is putting together a site map. Now the site map, this is going to be all the pages that are going to be on your website and you want to start off as small and minimal as possible. When you're putting your site map together, don't try to create too many pages. Try to just put the basics of what you need to start with because if you put too many to start off with, well it's going to get overwhelming and you might not ever finish or it could turn into a huge headache. Keep it minimal as possible only what's necessary. For this tutorial, we're going to be sticking with a very basic site map. We're going to have a homepage, a service page about us. We're also going to be building a blog inside this tutorial and then we're going to have our contact page. Now it's going to depend on the business you're making your website for for what pages you're going to have, but this is a very good start right here. The next step is we're going to want to put together a wireframe and look at everything I'm showing you right now could be done in a notebook. In fact, I do most of these inside a notebook. I don't always use a fancy design tool to put everything together. I usually just start off with a pen and paper. Now what the wireframe is going to do is going to allow us to think about the structure of our pages and kind of just think of it as a blueprint to your website. Now this has nothing to do with the design or the way it's going to look. It's only the flow and this the goal for this is to think about how you want to place your content. How do you want your users to flow through the webpage and what we have here is so we got a header we got an opening banner then we have the opening paragraph some text to let people know what this website is. We're going to start off with some features or these could be services right here and then we're going to have a section where we have an image then we have a paragraph and text and then we're going to have another one with another image and another paragraph a text. We're going to follow what up with a testimonial and we're going to end it in a call to action with the footer at the bottom. A very basic flow right here and that's what we want to start off with. The easier and the more basic the better because if we try to get too complicated well we want to make this easier for the users and for you and if you're building for clients and learning to build websites for clients you want to make it easier for your clients as well. The next thing we're going to need we're going to need our inspiration for this. It is good to gather maybe look for two or three websites that you really like that hey I would like my website to look like this and the reason why you want two or three is we're going to take little bits and parts from those other websites. Last thing we ever want to do is try to design or build a website from the top of our heads. I don't even do that I can't do it and here's an insight for designers most designers almost all designers use inspiration they find other designs that they like and then they try to recreate it with their own twist on it nobody really does it from the top of their heads and what ends up happening when we're trying to design or build something just from the top of our heads without inspirations and without guides well that's when a website looks really bad it comes out really messy and whatever we're visualizing inside our mind just doesn't come out looking that way on the website but when we have inspiration then we have a guide we have something to look at a visual guide on how we want our website to look and all we got to do is recreate it and then make our own changes to you know fit our own brand and use our own creativity. Now I use these three websites to find my inspiration I use awards.com I use Behance and then also this is probably my favorite and that's going to be dribble and with these I usually look for like two or three and then I pull inspiration and that's how I start my design so for this one I found this website right here let me scroll up and it's the ritual website I thought that this would be great for this tutorial I love the way this website looks it's very clean easy to read and use it's not over complicated to build either and we're going to be taking the styles from this website and using this as our inspiration now that we got our inspiration website the next step is to create a style guide and I always create a style guide first and you're going to see how this will make our job so much easier when we are building our website in fact spending time on this style guide right here and putting it together it is going to save you so much time and it's going to make building the website fast but also fun now for this there are links for everything inside the description I'm leaving this fully open to the public so please feel free to use this as your own style guide as a good starting point now for our style guide we want to set up our typography which is our font styles so we're going to choose our font we're only going to start with one font now it's best to start with one and you should never use more than two as a rule of thumb but one thing to keep in mind typography is actually quite intermediate or even advanced for designers train designers it's not the easiest thing to do it's it's quite complex to really have good typography and I was taught in the very beginning to choose one font and get really good at it before moving on to font pairings which is using two fonts so we're only going to stick with one font on this and what I did was I created a style for like right here our extra large titles our large titles all the different title sizes we're going to use created styles for the different texts that we're going to use and button text so we're going to set everything up when we build our website in the very beginning this will help us to keep our websites really consistent and clean looking next up is going to be our color palette and you'll notice I only got four colors plus our black and white which is going to be for text but we don't have a whole lot of colors and the same thing we want to keep it minimal less is better so even if you have two or three that is more than enough in fact right here I got four colors but actually I'm only going to be using really two of them which is going to be this dark blueberry color and this yellow color right here and then you can see I took that from our inspiration website because I like the look and feel of it now you're going to be able to find your website your inspiration you like the look and feel of and then you're going to use that to create your style guide right here so now we're all prepared it's time to start building our website the next step is going to be setting up our WordPress website part two we're going to be setting up our WordPress install and that is setting up a brand new WordPress website now if you already have the setup feel free to skip ahead there's timestamps and everything in the description to help you skip around to only the parts that you need okay so for this tutorial we're only going to be using one paid plugin everything else is going to be free and it's all going to be kept very minimal and this is exactly what I use to set up a WordPress website and to get one started this is going to happen with your hosting now if you have a good host then it should be really easy to do there should be like a one-click install some good documentation to help you out and there should be good support to help you out as well if you already have a host and you're finding it very complicated and you're not getting any help from the support you got to leave that hosting right away even if it means losing a little bit of money because what's going to end up happening is it's going to cause you a whole lot of problems in the long run and you'll probably also lose a lot more money in the long run as well I've seen it happen I've seen it with clients that you know happened in the beginning of my career that had bad hosting and it just turns into a mess it's really important to have good hosting now there's two that we use that my company uses I use personally and these are the only two that I could recommend and that first one is going to be cloudways now cloudways is it's fast it has so much that it could do but it is a bit technical their support is great they could help you get started but just keep in mind cloudways is if you're more comfortable doing a bit more technical stuff so if you got a little bit of tech savviness to you or you want to learn more cloudways is a good way to go but my new favorite right here is going to be Elementor cloud and I think this one right here for anybody brand new and starting off and anybody making a website for themselves this is the best one to go with right now first off is cost effective the $99 a year it covers your hosting but it also gives you the Elementor pro plug-in which is $50 a year so you're really getting hosting for only $50 a year which is super cost effective it's also extremely fast I've been testing it in fact it's my tests have been a little bit faster than cloudways in a lot of situations but the then you got support which is on a whole other level and you'll see as we build our website how the support you actually get a chat bot in the back end of your website where somebody can help you out at any time so if you're brand new this is definitely the one to go with now there are links in the description they are affiliate links they help to support this channel but that's not why I'm promoting these right here it's because these are what I feel are the best to use and what I personally use myself and I'm never an affiliate of something I don't use or don't believe in so I just want to make sure everybody has the best to get started with and for this tutorial we're going to be using Elementor cloud alright so I got a brand new install right here and if you were to say go in and you were to purchase Elementor cloud this is how your journey will look getting started so when we go in on the back end right here you're going to see we got my website right here I started it over so that way we're going to start from the very beginning you could go over here to manage this website and it's very minimal back here is very very minimal and in fact Elementor did this on purpose they wanted it to be minimal and easy to use so it's not overwhelming whereas if you were to start off with something like cloud ways it has a whole lot more you could do but there's a lot more inside it which could be a pro and a con alright so we're going to go here and click on open our WP or WordPress dashboard and we're going to get started with our website now this is how our website is going to look when we just start off so it's going to open up your should look just like this you are going to see right here it says site lock mode on this means your website can't be viewed from people just anybody who wants to see so over here you're going to see we have our domains and we got a temporary domain right here so this domain is the one that you use which is great because this is going to allow you to get started much faster right here by having a temporary domain but we don't want other people to just jump in and see work happening so they have site lock on and you can just get in with the pin code right here and then when you're ready to show your website if you want to share it to someone to take a look or go live you just turn it off it's that easy the first thing we want to do is we want to make sure we have our theme chosen so navigate over here to appearance and then over to themes and you're going to see right here with elementor by default the hello theme which is built by elementor is installed now this theme is a very light bare bones thing it has like nothing in it which is great because it's going to be fast and that's what we want to do now back in the days we used to have to buy themes from like theme forest and to use those and to find how we want our website to look and based on how we want our website to look and function well we would buy a theme that have a look and function in it already we don't have to do that anymore things have changed it's going to make a lot more sense later going on the best thing we could do is start off with a very light and bare bones theme I personally use hello now just about on 95 percent of the websites that we built the other themes we got here these are the default WordPress themes now we don't need them all we need is one we should always have one backup theme just in case it's just a good practice to have so let's go ahead and delete this theme right here and the reason why we're deleting them is we want to keep everything clean we want to make sure things are clean as possible I like to start with a clean slate always all right the next thing we want to do is we want to add a child theme now the reason why we want to add a child theme is again for best practices but we never know later on maybe a developer is going to help out maybe or you you might develop your development skills and it's better to have the child theme in order for future development work even if you're not going to do any development work it's just good to have so let's go ahead and let's go to right here get hub and this is where we have our hello child theme there's links and everything in the description everything I'm showing is all going to be found in the description in the video let's go over here to code and then to download the zip let's go ahead and download that and then go back over to our themes select on add new and let's upload our theme all right and you can see here we have a bit of a different message than you would by just putting in a regular theme and that it has recognized this as being a child theme that it requires a parent theme and that it found the parent theme which is hello elementor so let's activate this one and really now our website is using both of these so this is the main theme that it's using the parent theme but for development purposes and if we need to do customizations we got our child theme which is safe and the reason why we use a child theme as well let's say we got to do some extra development we need to add a function into the website if you were to put that code into the parent theme and then the update is required let's say it's a security update you have to update the theme it's going to delete any code that you put in there so by putting the child theme it'll keep any of the code that we have to use it's just good to have best practice and I only want to show best practices next step is going to make sure our site is clean so first off let's go over to our plugins and you'll see we have four plugins that came with our website first off hello dolly we don't need this one let's go ahead and delete it it's just a default wordpress plugin that has really no functionality it's just cool because it's old school wordpress we got activity log this one is built by the Elementor team and what it does is you can click on activity log here it shows all the activity that happens on your website it's really good for accountability and to understand what happened you don't need to keep this one it's not a necessity I usually like to keep some sort of activity log so I could always see if something went wrong I could diagnose where it happened at we could just leave it as it is then we have Elementor and Elementor Pro now we're not going to add any more plugins right now when we build our website this is it we're just using Elementor and Elementor Pro we're not going to need to add anything else right now I'm a minimalist especially when it comes to building websites I want to keep our plugins as minimal as possible and only add something if it's absolutely necessary that way the website stays fast and is going to reduce any chances of breaks and bugs and conflicts with the website happening later on next go over to your post this is where the blog posts are going to go and a default wordpress always comes with this hello world post so we're going to delete this go over to your trash and let's delete it permanently then let's go over to our pages and let's select all of these pages these just came with the install we're going to add our own pages in there we want to start with a fresh start so move these to trash then go to your trash and let's delete them permanently all right so the reason why we did all this is we want to have a fresh clean start with everything now our website is empty it has just the plugins that we need and it's ready to go all right really quick now this is how it is with Elementor cloud when you get started I wanted to show you quickly if you aren't using Elementor cloud how it looks like when you get started so here is a brand new wordpress website that's not on Elementor cloud and this is how everyone is going to look like unless if you're on you know Elementor cloud so this is your default wordpress website right here and they usually come with no plugins at all and so what you would have to do here is you would have to just install Elementor and Elementor Pro you would go over here to search plugins and you would search Elementor for the free Elementor version you would install it and then activate it now the only reason why I want to show this as well is because not everybody is going to be using the cloud and I want to make sure everyone has a good understanding of the process of getting started so next up was upload our Elementor Pro and click on upload I've already downloaded it now you can find the download inside your dashboard on Elementor it's pretty easy to find so let's click on install let's activate it all right the next thing is we want to make sure that we got our license connected let me go over to license and it's already connected because I ran a couple tests before doing the tutorial but you would basically just click on activate so now we're good to go okay so we're not going to build our website on this one we're going to continue on the Elementor cloud but everything we do from here on out would be the same no matter what install you have or whatever your website is hosted it's just going to be a basic WordPress website that is being used with Elementor to build it so the first thing we want to do is we want to add our pages now for that we'd go back to our site map which is right here and you would add your pages in there so let's go and add them the first one is going to be our homepage click on add new and then click on publish let's go back over to pages again click on add new and let's add the rest of the pages now all of our pages are added and this is the reason why I have been a site map is so important because it makes this whole process easy that we could just focus on building the site the next step we're going to want to set up our menu so navigate over here to appearance and then down to menus and we're just going to create one menu and we're going to name it right here I'm going to call this our main menu and then we're going to add the items inside there now if you have more pages and they're not all showing right here just go over to view all to find any pages are hidden and I'm going to select all right here and then I'm going to add to the menu and now we got all our pages and we could rearrange them now I do see a custom link and I think this came in pre-installed with the Elementor cloud so we're going to remove this now what the custom link is right here you got custom links let's say we're going to have a drop down but we don't want that top menu item to be clickable we just want it there to be a drop down say it's a service pages and you want to drop down showing your different services that's when we would create a custom link we put something like a hashtag right here in the url then we put something like services drop down now you want to put drop down you just put services but you'll see you got a custom link right there and let's say you want the drop down items and you got more drop down items so let's say this right here will be a drop down item you just move it over to the right now whatever's inside the menu is going to drop down is going to show what is underneath that so let's first remove these custom links because we're not going to need them inside this tutorial again we're going to keep it basic but if you are going to make a drop down that's how you would do it let's rearrange the order we want to make sure a home is at top and go back to the site map now the site map we did this purposely to show the order of our menu and we're going to start with the homepage the services the about the blog then we're going to end it with the contact us which is our call to action and let's go ahead and save it down here our next step is going to be our WordPress settings so navigate over here to the customize select on customize and now we have to set these up right here we're going to first start off with the site identity and give your website a name so this will just be lightbox tutorial that's going to be the name of this not tortilla tutorial and then go ahead and give it a tagline and that'll be the name and that's what's going to show as well when people are searching for your website so whenever somebody's searching for it this is what they're going to see inside the google results let's give it a logo now we need to upload our logos right here so i already have our logo selected but you can see right here i have a bit of a problem our logos are svgs and they're not allowing me to upload them go ahead and cancel that and go out let me click on publish we'll come right back because i'm going to show you how to fix that problem you may or may not have this problem but it's a very simple solution so if i go over here to media this is where we add our images again it's not letting me select it and let me try dragging and dropping it out if i try to put in our svg logo you'll see it says we're not allowed to upload this file type now svgs they're not like regular images are actually made of code but there is a simple solution go over to plugins add new and put in svg and what we're doing is we're looking for the svg support plugin this is going to allow us to add svg images which your logo should be at svg nowadays old school days was png but they look fuzzy they're very big file sizes svgs are the way to go when you're adding lo logos so this is going to make it so we could upload them but also that they're safe it makes us so it's more safe so let's go back to appearance back to customize let's go back over here to site identity and then to select logo and now here we go here's all my logos here are all my logos right here i'm going to upload them so you just upload all the different logos that you have and i'm going to choose the dark one right here and let's skip the cropping and select on publish next up we want to add our site icon and what the site icon is is going to be the icon that's right up here you see we just got this little globe we want to put in our own icon so i already uploaded my that's going to be this one right here now let's take a look this is a png you want your this is a time uh svg won't work and you don't want a jpeg either a jpeg can't work but you're going to get a white box around your image the png is going to look so much better in fact if you look up here in my top menu bar these are all png's and they all look super dope and yours is going to look that way too let's make sure that it is a box you see i got a 24 by 24 pixels so it's got to be a perfect square and it doesn't have to be big so select that skip cropping let's go ahead and publish and now we got that cool icon inside the tab all right next let's go back and navigate over here to homepage settings and by default wordpress starts off at your latest post what this does is it'll make your homepage your blog now unless if you have just a blog you're not going to want to do this you're going to want to have it on a static page so select static page and on your homepage choose your homepage right here now this will make it so your default homepage when someone goes to your website they'll land on your homepage and if you do have a blog right here where it says post page post our blogs then select on blog if you don't have a blog you're not going to do one you could just leave that blank let's go ahead and publish and that is it your wordpress website is set up now i do encourage everyone to take time later on to go through all the different settings in here especially right here inside these settings now i'm not going to go through everything because that would make this video probably two or three hours long and i really wanted this to be more of a starting guide like a check like a checklist guide like here is the path to go to building your website and to get it started follow one best practices so you could take time and go through that later but we're just going to build our foundation right now everything set up in wordpress now it's time to start with Elementor and building the pages the first thing we need to do is let's go to pages and let's go to our homepage and you can see here it says front page that means this is what is going to be showing for when someone goes to your domain and the first thing you want to do is go over to edit with Elementor and what we're going to do now is we're going to set up our Elementor settings we're going to make this right here this style guide worked for us in Elementor and it's going to save us so much time later on so what we're going to do is right here select on this icon go over to site settings and we're going to set up our global colors and then our global fonts and we're going to go through each of these and it's so important to set these up because once you set these up it's going to make building your web pages super easy fun and fast and yeah it'll all make sense very soon trust me on that so let's go to global colors these are the defaults we want to change them so we have our style guide for reference all right so let's take our color palette and all of our colors here and then we're going to put them right into our global colors our system here so first off we'll go one by one and I put the text here so let me copy and paste it and when you get to the text go ahead and put in your dark one so I got one that's almost black it's not quite black black but it's very close to it I find having it not absolutely like black as can be but like close to it a bit more pleasing on the eyes and then we could add more colors that we need all right and it doesn't matter if it's in system colors or custom colors only one I'll probably do would be the text but you could move all these around as well and you could change the name so I like to change the names and it just makes it a lot more easier for me later on as I'm building our sites so I'm gonna call this one blueberry blue I'm gonna call this one a lighter blueberry all right we'll call this one black all right we're gonna call this one very yellow I like to get a little creative sometimes I give star war names for all my colors I always do a different theme when I'm building my site I like to have fun I'm gonna call this not so yellow I know a pastel it's more of a pastel and I'm actually digging pastels right now I'm having fun designing with pastel colors okay and then we also want a white color as well you can move that one all the way up to white and we'll just label this white kind of boring not fun but it's all good you can have fun within a style it up as you like and then you're gonna see this already made some changes here it's all good we'll fix that in a minute as well let me go to update all right and let's go back next up our global fonts all right so this right here the reason why we spend time putting our typography together is because without doing this here first it could take so long to get your font styles right and please I employ everyone to use my guide you can use this for yourself as a good starting point because it could take a very long time getting font styles right and unfortunately a lot of websites just have bad font styles to it you know especially when you get down to mobile and stuff like that so a lot of this right here a lot of testing and care has gone into this typography to make sure it looks better all right so we're going to go over and I'm just going to set up one of them I'll let you set up the rest because it'll take a long time well not a long time but several minutes so to set it up first let's find our font family all right we're these are all google fonts here and we're using Montserrat and that is a google font so what's we could actually put it inside the search box or we could scroll down looking for it so here's Montserrat right here and then we got Pixel, PX, EM, REM and VW we don't want to use PX I used to use this back in the days but we want to use EM or REM for this we're going to use REM and the reason is it's for accessibility this means to say somebody has you know they have some vision and preparedness and they need to zoom in their screen well when they zoom it in the text is going to fit with the zoom versus if you're to do a PX well then the text would start to break whenever somebody zooms in so always use either EM or REM and right here we're going to first build our extra large title and you can see I have 4.8 REM and that's going to be for desktop the second one is going to be 3.5 REM that is going to be for tablet size and then we got three REM and this is going to be for mobile size so let's first start off with our 4.8 I'm going to select REM and just put 4.8 now let's go back over we see we got the font weight at 700 and that is going to be this right here the weight this determines if your text is going to be really thin or really thick since it's a title we want it to be thick we're going to leave transform alone we're going to leave style alone or we're going to leave decoration alone these are okay by default but we need to set up the line height and for our line height we're going to have 1 EM so select on EM and put 1 and then just leave the letter spacing and we're spacing alone these are fine right now at default next what we want to do is set up for tablet and mobile so right here by size you want to select this like desktop icon and then select on tablet and now let's go back and we're going to put 3.5 REM select on REM and make sure you select this because I've made a lot of mistakes where I don't select it it stays on pixel and then it doesn't come out looking right so make sure to select REM and we're going to do 3.5 the font weight is going to stay the same across everything and the line height stays the same it doesn't change next up let's go ahead and bring this down to our mobile view again select on REM and we're going to give this a 3 REM all right and everything stays the same and let's also change the name of the font this is going to be our extra large title and that's the reason why I gave names to everything so we're going to create our own names for our own system and then go ahead and go to update and to take it back to our desktop view we have the icons up here at the top we also have option down here all the way to the bottom for responsiveness so let's go take it back to our desktop and now oops go back to our global fonts now let's set up the rest of our fonts I'm going to do these really quick and I'll be right back okay now I got all the font style set up right here and hopefully you do as well so our fonts are set up and our colors are set up and when you see how we use these coming up you're going to be so happy that we spend time preparing these because this is going to make building the rest of the site so much easier and faster now we have other settings here for our theme style we're not going to go through each one of them because that'll make this video way too long and we don't need to go through these yet I'm just going to show you what we absolutely need just to get started and to build the first part of our site now first off this typography don't use it don't touch it it's going to mess everything up we were controlling everything with our global fonts you can set your buttons and create a global software button that's totally fine same thing with images or your form filled we're not going to do that inside this video but please feel free to experiment and play around with it later same thing with our header and footer we're not going to go through this right now because we don't need to not for this video we're just going to go through the basics of getting started off and this is actually what I do personally I don't do these right here I just focus on the global colors and global fonts because to me this is what's most important for building a website fast but keeping it clean and consistent now the one thing we do want to do is we want to set up our layout so the first one is going to be the width I want to make mine a little bit bigger and this is you see how I'm moving this and these are moving right here what this is this is your container right here so this is what's going to be inside the container and I want to start ours off at 1250 I like a good width across it helps out with bigger screens and I think it's okay now we just space you can leave this as it is and everything else you can leave it there are default page layout this one's important make sure we have a set to element or full width and then you can just leave your break points as they are we're good to go right here this is it for the setup in fact this is how I set up our websites I want to get going fast now you can play around with all the settings and go through each one of them they're fun it's amazing what it could do and I still feel like I just scratch the surface of element or and all the capabilities it has now we're ready to start building pages and starting to build the website everything is set up is prepared we're good to go we're going to start with the header and the footer which is going to be the top and the bottom of the website after we build those then we're going to start building our pages so to get started with that navigate over here to templates select on theme builder and right here inside your theme builder we want to start off with the header so navigate to the header and click on it and right here I have no templates in it but if you do by any chance have a template that came with the install go ahead and delete it get a fresh start always start with the fresh clean start it'll make it easier down the line so we're going to click on this little plus to start a new header template now it's loading and it always starts off with our pre-built headers and these are really good starting points right here let's say you want a header that has a certain style like not a style don't worry about the colors don't worry about the design look for the layout say you see a header in here you really like the layout that's how you want it well then that's how you're going you could go ahead and choose it like you could take in this one this one looks pretty cool right here let's go ahead and insert it and now all we need to do is go in and make our edit so first one we could go here to our to our logo click on here and let's replace it and let's put our own logo then we could go here to the text let's click on the text now this is cool this is our menu that we already have set up it's all good to have but we want to make sure we have our own style so we click on this let's go to the nav menu go over to style and for our typography you see this little globe right here this is where we're going to be putting in all of our styles we're not going to go through here and do each and every single setting because we already did that one time we did that when we set up our global fonts all of our styles are pre-built and right here so now we could choose i want a button text and we're going to put the button text right here and now we have that set up same thing here we could go ahead and do that to the phone number go on style go over to text let's find our button text and we could click that one right there and now let's do this to the background we want to make sure the color of the background is with our brand color and the color for our website let's click right here on the edit section go over to style and then we could go to colors now we have two colors going on let's go ahead and delete one you know let's try let's try gradient what let's see how it goes with gradient let me go ahead and choose our dark blueberry and then we could go ahead and put in our like yeah that looks pretty cool now we got our brand colors right here for our logo i want to make this a little bit bigger let's go over to style and i like it on pixels when it comes to the image i'll put this at 150 and then i want to make sure our layout let's go ahead and use our default layout now keep in mind whenever you do use a template some styles are going to go into it and you might want to go through and tweak them out now we're not going to go through every single one of these settings and we're not going to design and style up everything instead i'm going to leave that up to you i'm going to show you where to get started how to do it now you can go ahead and take time and building your header style it up as you would like to and then after you complete that i'll show you the next steps on where to go to to fully build your website there is one thing though i do want to show you really quick i think this is really important because it is april 2022 an Elementor has made a big change and unfortunately the templates if you are going to use a template they haven't changed yet with the new thing and that new change is going to be right here inside your section so you know you click on here your section is the outer part and then you got your columns right here which are the inner parts but this has changed in Elementor because Elementor no longer uses this instead they have containers i could keep it there as it is it's totally fine but going forward we're going to be using containers so you could actually convert this to a container right here and what a container is it's something that's just more efficient it'll take a long time to really explain and do a deep dive there's really good tutorials out there that are specific about containers and making that change i suggest checking some of those out so that way you got a good understanding of it but you can convert it right here once your header is built the next thing you're going to want to do is you're going to want to style it up for tablet and mobile and make sure it's good for all devices to do that go down here to your responsive mode click on that and you're going to see this toolbar open and you're going to select on the next one the tablet see how it looks and the good thing about the templates is already pretty much done for you you can see that the menu is already done here and then if we go to mobile again we could see that it's done over here now you'll need to go through make some tweaks over here inside your styles and your settings and i'll leave that up to you for right now the one thing i will suggest though is when you are styling for mobile and setting it up make sure you have your phone with you and check it out on your phone because whatever you see on the screen it's going to look a little different on your phone because it's just the way phones and computer screens work they're a bit different the screen right here on the computer it'll give you a good idea and it'll be close but things will actually look a little bit different on your phone and what i do is for my mobile designs i work with my phone and i make my changes an elementor and i keep refreshing my phone until it looks just right on the phone now when you got all that done the next thing you're going to want to do is click on publish and then right here you got your display conditions this only comes up if you're using a theme builder and the reason why is this is dynamic meaning we could choose where this is going to show on your website so if you're to click right here add condition by default it's going to show on the entire website which means this header this menu right here is going to show on every single page now you can have a show on all pages or you could choose the page you wanted to show on you could click down here and you could go to singular and then on singular you could go ahead and choose pages and then from here on pages you could put on what's a contact let me put in contact you could put it on the contact us page whoops and now this header would only show on the contact page which is amazing because what we could do with this is we could make say two different headers you can maybe make a dark one for some pages are darker you can make a light one for some pages are light you could control where they go and maybe you got a special promotion page where you want a special header and then you just for that promotion page well this is where you would do it you could even do something like excluded like you could choose a page hey I don't want this menu showing on this page right here but what we're going to do we're going to keep it for the entire site because we're going to keep it simple and I'll keep saying this keep it easy and simple at first and then experiment and add on after so let's save and close and we're good to go with our header now let's do the same thing with our footer click on this icon over here and we're going to go to exit dashboard I'm going to go back over to our theme builder and then from here we're going to go click on our footer now there's already something here uh the starter kit was deleted I always want to delete and start over fresh so we'll go ahead and move that into the trash make sure we got a clean slate that we're going to work with and then click on the plus sign and we're going to build our footer now we could do the same thing here and we could look for a footer that we're not looking for the design we're not looking for the color we're looking for the layout that works best for us now our website we don't have a lot of links in it so I want to make it a small footer I don't want a big one uh you know obviously if we got a big website with tons of pages you would use something like this right here but we don't have a big website so let's find something small in fact this one's pretty cool let me see here let's keep it minimal yeah that's good right there let's go ahead and insert this and now all we got to do is make our changes let's change out our logo I'm going to put in our dark logo for this one let's change the font to our font style and our font color so we got our text color was changed out let's make our own we could either use black but you know if we go over to our example inspiration website I like how they use the blue across all this I kind of want to replicate this right here so I think for our font text I'm going to use this dark blue I should have did it on the header I didn't put the color on the header I probably have to go back and redo that one but let's go ahead and make a dark blue our blueberry blue and I want to make this one a subheader right here yeah let's keep it small let's make these colors with our colors right here let's change the color to our blue and then do they have a hover on it they do have a hover so let's change that hover we can do it to yellow or to the lighter blue whoops it's right here and the hover will do to the lighter blue all right that's good right there and then let's go ahead and typography we're going to make this a subheader as well and then let's put our blueberry blue all right we could do the same thing here we go to the style of our form we're going to go to our buttons our background color we'll do the blueberry blue and then we'll click on hover right here and then we will do let's do a yellow yeah that's pretty cool let's do the background the text color on hover we'll do this blueberry blue yeah see that's the color I'm going for I think that's a really dope color combination right there and then we could do the same thing in our form we'll see where the colors are and we'll change all the colors to our style colors you see now how using the color and the font styles and setting those up in the beginning are going to save us so much time well this is it right here typography let's go ahead and put normal text background color yeah it's okay to have that let's make this stand out a little bit and we could leave these as is please feel free to get creative as you like I'm just walking through a couple of these I'm going to let you guys get creative and style it up as you like really what I want to show right now is how we could go through go through quickly but how we could use the styles that we set up in order to create our website that way it's consistent it looks good and we're good to go with it and all right we look good on all of it cool everything's looking good now for a form I probably need to put out a whole other video just for the form and how it works but these forms we'll do one on the contact page I'll go more into depth over there but it's very this form right here is worth the price of Elementor Pro because before Elementor Pro and building WordPress websites to build a form was quite complex you could you didn't have these options to style it up had to write a lot of CSS a lot of code and it wasn't that easy to do this right here is unbelievable so first off right here with the fields you're going to be able to create new fields you know we're going to go over this in the contact page but here in the email let's go ahead and set it up there's my email you could put your email address you could put where other people are going to respond to let me put that right here so it's from me and then we're good to go right there we got collect submissions okay we're good to go I'll explain all that when we get to our contact page so again we're going to click on publish it's the same thing as a header we're going to choose a condition on how we want the footer to go for footers most of the time you're just going to create one it's a lot easier headers you could get more creative and you could use different headers for different situations but footers usually you'll just do entire pages unless if you need to if you want to there is an option to do something different all right now we're good to go our header our footers are done let's check out mobile let's make sure we're good on mobile make changes wherever they need to be made we're looking good on mobile you'll probably have to make changes but usually the templates take care of that themselves we're good to go check your phone make sure it looks good on your phone next up let's go over to our homepage and start to build our homepage all right so we're back over here at our pages let's go over to our homepage and we're going to select on the edit with elementary right here the quick and easy way to do this is to use either templates or kits i'm going to show you both of them that's going to make your job go by so much faster and it's going to be a lot easier so first off if you want to use a template you would click on this box right over here let's click on that and we have all these templates coming up so you could either use a page it could go through and see which one you like again don't worry about the colors or the styles or the like the design we're looking for the layouts because we want to just get the layouts that'll give us a quick start right here so you can either do the whole page if you see a layout that is in line with let me go back here to your wireframe if you see a layout that's in line with your wireframe go for it you could go ahead and install that layout and then you could just make some edits and we'll do that right here on the homepage and then i'll let you do them yourselves and get creative on your own i just want to go ahead and get you started and if you don't want to do the whole page you could go here to blocks so you could select a block and go here to categories and let's say right here where's okay we're going to do a hero a hero is a banner so that'll be our first section right here and this is why having a wireframe is super helpful because you could just go from each section of the site like okay i need a banner right over here and then we'll look well it's a hero as well and then we'll go ahead and choose one so let's say this one right here this one looks pretty cool you see the style is nothing like what we want to build with but it's not about the style because what we're going to do is we're going to go inside each one of these and we're going to click on this one right here we're going to go over to style okay we're on the color we want to use that's good let's go to typography and that's where i got a subheader and that's what this is this is a subheader and then we could go here to the text to our extra large text let's make sure the color is our color and then we'll make this extra large text we'll go here to this one let's go ahead and change the color make it whites and in our typography we're going to use normal text and then our button we could go to our button and style it up as we like you know i want to do this one really quick with you guys all right so for the button you could change your text you could put the link where you want to go there's a lot of different settings in here again we're not going to go through each one of the settings i'm just getting you started and a whole process and system to building the website so we'll go over to style and this is just what i used to make my process go a whole lot faster first let me set up my topography i already got my button text and really quick i'm going to deviate for a second let's say you don't really like the button text like it's not really doing it for you like okay like it looked good when i set it up in here like it was okay but for some reason it's not looking that good on the screen what you could do is you could go back here to your site settings and you can make adjustments inside your global fonts and this way they're going to be in line okay so i want mine bold i want to bolt there we go and now look at it changed this it changed our menu it changed it across the board so we didn't have to go in and change each one at a time let's go ahead and update that and normal text i noticed something was off i noticed my normal text wasn't looking right so i must have made a mistake when i was putting it together so let me put that in there and there it goes now it looks right you do this long enough you could tell when a font is different even if it looks like another one cool let me go ahead and click off now we're good to go on this let me go ahead and finish styling up this button right here first thing i want to do is i want to remove this top padding right here and i'll explain why i do that in a minute i want to add 50 border radius right here let me do right i want to make it bigger 50 to make it more like a pill you know again i'm taking my inspiration from here i like the roundness inside here they got a lot of roundness and that feel so let me go back here and i'm going to change my color so my text color i'm going to make it blueberry blue my background color i'm going to make a yellow yeah i like that contrast and then on the hover let me reverse it so i'll make this yellow and then i'll make not the border color but the background color blue and i can make this one blue as well and then i want to take off the animation these don't use these animations please they're so old so if you see some weird animations or effects happening you can just go ahead and remove it i'm removing that because i don't know it looks kind of cheesy to me all right so now we got this background image right here let's go ahead and edit the screen style it up we could go ahead and trash that image you could put in your own image if you want i'm just going to put in a background color let me put this one in here right there i like that a lot and we got that background overlay which is making it darker i think it looks dope with that dark look right there i can go ahead and click update to save everything all right now what i want to do is i want to convert this all right i want to do one time i'm going to convert it and you'll see if we were to start say a new section we're not or a new element right here a new container it's going to be different you know here's a new container right here you see when we click on it it says container and you really want everything to say container it's going to take a bit of extra work if you're using the templates unfortunately hopefully this is something Elementor will fix later on i'm sure they're working on it those guys are on top of things i know that they're working on that because it is a new change that happened but let's go here to edit section that's going to be for this whole section i'm just going to convert it and what happens when you convert it it's going to duplicate it so now you have a whole new section here so what we could do here is you know if you can't say like i'm trying to move my mouse up to to touch the section settings right there but i can't because it switches if that happens just do a right click and then go to navigator and sometimes you have to use the navigator and you see here is our top section and then this is our newer section and then this one right here is another section down here we could delete that one there's nothing in there this section here you could right click this and delete it now we got the new container here let me go ahead and fix this up for you i'm going to click on advance huh strange this must be pulling it in okay strange so something must be happening with this header i probably have to go back and fix it in fact let me update this i want to take a look at something really quick let me click on update header you see you could actually edit your header or your footer inside that i could go down on my footer and change around but let me see something i'm gonna click on advance because to me when i see this this looks like it's pulling my section up i feel like it's pulling it up when it shouldn't usually when that's happening it's going to be here in the advance and yep there it is we got the negative margins now using negatives is a good trick to pull things the way we want them to go so a negative margin you go pull something underneath let's go ahead and remove that so it's just stacking on top of it we don't need that there we'll go ahead and save that one and now let's go back to edit page i'm gonna turn off the navigator i don't need it anymore okay but what we do need to do now is this is the new thing inside elements or and that is going to be our controls on how we are aligning everything this is called flex box now that's a bit there's that's a whole different video and probably another hour video to go over flex box i do plan to have out some more content that's broken down this is just a guide right here to help get you started but i think it's important to show this right here because this is the new way of building elements or so click on here go to the alignment and you could go ahead and align everything in the center the top or the bottom all right so i line in the center but i see nothing's happening so what that means is i got to go over here to my inner container right here so here's our container inside our layout and then we're going to click on items and this is going to control the items and which way we want them to go so i'm going to click on well to the left and then i want to justify it to the middle so play around with it you can have fun with this right here i think it's awesome and this is powerful in fact right here but this is up to you i'm just showing you the way to go to build a website you're going to take time right here on building your pages this is a learning curve getting the settings down but once you do they're pretty straightforward most of the time this is a new one though get very familiar with using these containers right here in these directions and you're going to find that here inside your inner container and then right here on the outer container as well so i want to fix up the height on this one i'm going to go to my layout and i see it's at a minimum height this is the vertical height right here and i'm going to reduce that this is basically the percentage of the screen so if you leave it at 100 it's going to take up 100 percent of the screen size no matter what the screen size is so we're just going to move that in i want this to be more at about 80 percent let's go ahead and save that background will probably look better with the background image but i don't worry about those right now and here's part of my process and a good tip don't worry about the images images and icons don't worry about them right now you could do those after your website is built same thing with content you can kind of like have an idea of where the content is but you don't need to worry about writing them in the first thing you want to do is just build the website after the website is built they could come back and you could start to change all the images around and making those final fixes and then fixing up the content and what i do for my images i use unsplash this is free right here and it has very modern versions of images i also use icon scout this is a great place to find free icons it's a really good website and it's easy to find your icons and i got all the links inside the description so you could use those tools for building your website all right so next up all you would do is you keep doing the same thing you would click on here for your blocks look for let's see uh maybe about all right so here we go we got an opening text if we look at our at our wireframe you see we got the opening paragraph right here so we have something with the opening paragraph we can go ahead and insert it let me remove that section right there we insert it let's go ahead and click on our section let's convert this and start off the right way so now we got one with uh new style let's click that off so now we're working with the container now we can go through each one of them let's change the color to our colors let's change the font this one we're going to use a minimum uh medium title don't want it too big right here let's go ahead and change this color we're going to change this also the blueberry blue i like that blueberry blue and then let's go here to our normal text and then for our this style you're going to want to change some of these like this green and grow not a fan all right let's go here to our button and actually what we could do here is we could make the same button and this is why i like to style up my own so let's go over here to our old button i want to use this button down here as well let's click on it right click on it and go to copy then we could go down here just hover over this icon right click and put paste style now we got you can just reset the style and you could copy and paste this all over the place and it's going save you so much time let's make this a little bit wider i'm going to click on here i'm going to open this up 800 pixels and there we go and now you could go through you can style it up as you see fit this is a bit long for me i don't know why it's so long probably the section right here yeah they got that minimum height i don't like using minimum height i rarely ever use it only on a banner don't use minimum height on anything else instead go to your outer container and control the padding right here and make sure you just work with the padding now here's another tip and you know i'm going to leave a link to another video that i made and that is on design systems it's a much shorter video to help out but when it comes to padding and margins you want to make sure it's consistent throughout the site and then you would just replicate and say you don't want to use a template you want to build it yourself all you do is click on this right here and look for something okay we want three columns i don't see three which is strange but i'll click on this too let me go ahead and duplicate this so now we got three columns right here and i could add in let's see we could search for it i'm going to add in an icon box and let's go ahead and style this up to how we like we can either upload our own svg you can get one right here an icon scout i do that at the very end for sure uh i don't want to start though so i'm gonna click on icon library get something kind of cool there we go something a little bit different uh go ahead and well you could go through the style on it only thing i want to do is i want to make sure it's in line with our brand style that we got so make sure our color is our color the typography was put a small title for the description let's go ahead and put in normal text and let's keep our blueberry blue and let's align everything to the left and then let's go to our advance right here and i want to add in padding right here i'm going to put 24 inches of padding and then on the margin i'm going to put 10 pixels did i say inches before pixels that's been a video has been going on this is actually my first long video i hope it's okay please let me know what you think drop your comments and feedback in the description i do plan to do more in-depth tutorials because i want to help people just get better help web designers improve skills and help everybody have a better website okay so now we got that going let's put a little bit of a background color on it uh we could find the background sometimes the background is in style sometimes it's in advance and this one i believe it's going to be in advance and it is there's always a background though so whatever it is whatever element you have there is a background and a way to put background color in it so let me put my background type and let me do lighter blueberry and what i'm going to do here is i'm going to change the opacity down to very very light just so that way it separates itself from the white okay now what we could do here is copy and right here we could go ahead right click and paste again right click and paste so the next steps on this is you would just go through your wireframe or whatever you want to have right here and you could choose you could either add a new template and find a section and then just change the styles to it or you could do it off yourself you could go ahead and add in your own container right here and then just make it aligned with what your wireframe is and that's it you go ahead and build it in once you're finished adding everything in here styling it up and you're happy with it then you would just go here to responsive mode and make sure to go through the responsiveness and make the changes and taking a look at your phone as you're making the changes but that's it for your home page and so we save it let's go back here exit a dashboard let's go here to visit site and now you can see if we go to a page okay there's nothing there we just got a header and footer we go to our home page we have you know right here is building on our home page now the next thing that you would do is you recreate just what we did right now on the home page with the other pages that you have and again do a wireframe you don't have to do anything like this just get a pen and paper draw it out first make sure you have a guide so you have a direction because this wireframe this is where you're going to be really putting in the thought and the strategy this is where the thinking happens and it's so important to take time to do that thinking to really think about how your website viewers are going to navigate through the website or you know so that is right there what's going to convert your users and it's going to make your job a whole lot easier because if you don't have this and you try to just build out your website from the top of your head it's going to be scattered it's going to be random and it's going to look and feel random all right so really quick I showed you how to use the templates and how we could do everything really fast as long as our styles are set up but there's another thing called kits which is a bit different very similar to templates but a little bit different but it could be used the same exact way let me show you really quickly so we're going to use the other website that I had set up because the kits what it's going to do is it's going to apply the theme across the entire website so go over here to the Elementor and templates and go over to kit library now these are full websites already built and ready to go like they are literally done like everything is already done on it all you gotta do is click on it install it and everything is set up and then you would just go through each and every single element and change the text the color the images to make it look like it's you know your style and you could do the same thing with the global fonts and global colors that we set up when we did it with the templates so over here is not that one not that one either okay here we go so here is the Elementor kits library and you could go through this and you could look for the website that you like and I know there's other resources out there you could look around this is just on Elementor alone but there are other resources that you can download and find other kits and install them into your website but to make it easy we're just going to do the elements or one and let me see there's one right here that I like and where is it at you know let's go ahead and do this one right here we'll click on this and you could get a good idea of how the website is going to look and everything inside of it so when you are choosing your kit what you want to look for you want to look for and make sure it is in line with your sitemap you want to make sure it has what you need on there so for example we're going to do services and about us so you want to try to find a kit you go through it you right here you can see the pages you want to make sure the about us page is like the about us page that you want you want to make sure there's a services page that's in line with it don't worry about the design the looks and the colors because we could change that easily with our global styles but you want to make sure the layouts are what is there because that's what's going to help you go really fast so I like this one it's pretty cool so this is how easy it is we could find that kit here let's say I went through the website I liked it let's go over here to view the demo and then you could get a good idea of how it looks and I'm good with it all you got to do is click apply kit let's put apply all I'm going to enable it this is for SVG all right now we're live we're good to go so everything's been rewritten on this I forgot to show you I clicked on apply all but there's another option you could actually choose what you put on there like your site settings and your content you can have that flexibility to choose it but let's go ahead and close this off let's close this down and take a look at our site now and there you go you can see that we have the full website over here everything is done just like it is inside just like it is inside the kit so let's go over here to edit with Elementor if you were to use a kit this is what you would do you would install it you put it in there and then you would go to your site settings and they already put some in there for the kit you would just change this around and put your own site settings your own colors that you want to use same thing with the fonts you would go in here and you would change them that way that they replicated your fonts that you have right here it's that easy apply the same method as I showed you with doing the the templates and you're good to go this is a very fast way to go if you see a kit that fits exactly what you're looking for definitely go in and do this one since it's going to save you a whole lot of time but if you want to get more creative and have more flexibility and kind of like shape out your own thing then go ahead and do it with templates or no templates and you can just go ahead and put in your own sections and have fun as well it's totally up to you and that's the great thing about this you have that freedom of creativity and so many options as long as you're following best practices you're going to be good to go next up let's go ahead and do the blog so to get started with building your blog go over here back to your dashboard and we need to first add our post so navigate over here to post and let's add some so click on add I want to call this where's blog and let's open up a new window type in lauren ipsum because we're just going to get some dummy text right now to use that's going to help us go faster so we got this lauren ipsum page right here I'm going to just copy and paste this fake text all right just so we have something let me go over here to the post and I'm going to add a featured image and let me upload I'm sure I have do you know what we could actually use the one Elementor gave us so we got this one from our template we'll use that as our featured image set it now if you're building your blog building the blog all you got to do is put your content back here this is where we always put our content what we're going to do is we're going to build a template with Elementor so your blog pages all look the same to start off with though you could put this here what's say you want to put an image just click on this plus sign right here click on image and now you could upload all right we got this gradient image right here then you could put in more text and let's go ahead and publish this and if you are creating blogs I suggest to I recommend to take time to to learn more about how blogs work with Elementor this is just a really quick way of doing it now if we preview it let's click on preview let me close these other tabs so they're not going to confuse us well here we go we got our blog right here and if we're to click on blog because we did set it up on because we set it up in our customized in the very beginning all the blogs will appear here and go ahead and add two more let's start off with three just because we need a few of them just for styling it up and building it up I'll be right back as soon as I add these other two all right now we got three blogs in here these are just dummy blogs these are just used to style it up I do plan on making more in-depth blog I love blogging like I blog myself I think blogging is so important now for websites because it's going to be the best way to build up SEO the best way to get traffic provide value give out information and help others and blog posts are a great way to do it so I'm a big fan of blogging and building blogs I do plan on building more in-depth just strictly focused tutorial on building blogs with Elementor so definitely subscribe you know all that good YouTube stuff that way you can get notified when it does come out now let me go back here to our blog page and you can see all of our posts here but they don't look that good so what we need to do is we need to build two templates first template is for this page right here this is the archive the archive is the page that has all the blog posts and then the second template we need to build is going to be for our blog single and that is going to be for the single blog page which again you can see it's not styled up so to do this let me go ahead and close this off go back to your back end navigate over the templates and back to your theme builder from here we're going to start with our archive so go to archive make sure we don't have any if you do have one that came with your site delete it but there's nothing there so I'm going to click on this plus sign and we're going to build our archive and now from here we have pre-built layouts that are already built for us so you could go ahead and choose one of these and then we could style it up it's going to this makes it a whole lot easier and faster to do so what we're going to do is I want to build one that's simple since we only have a few blog posts here but you could choose any style that you like even these down here you know what let's find something kind of cool and choose that I'm a bit picky okay you know what this is kind of neat let's go ahead and choose this one right here I think it might be a little bit of a challenge but it's all good we'll click on insert go ahead and apply all right let it load and do its thing awesome you know what I actually don't like it so this is what you could do if you don't like it just delete it it's all good so if you choose something you don't like it go ahead and delete it let's start all over click on this template piece right here you know what I'm just going to choose this one let's keep it really easy there we go and now here let me change our title you know let's put in our brand color and then here I'm going to put in let's put in a large title that's all good and now let's style these up right here I'm going to just click on this one so this is our archive post widget and here you could choose to style it up as you like you could choose a different columns there's so much of what you could do here the main thing is we want this to fill in line with our theme so let's go over to our style and again go back to content play around with it find what works right for you in fact you could even go to your example website and I'm sure there are blog posts let's see do they have a blog post here yeah they have a journal you see you could go and you could find something to make it look just like that when I do my designs and I'm creating blogs for our clients or even for myself I'm finding a blog that I like like look at this is really clean this is super dope let's make it look like this in fact let's make ours look like this right now so we're going to make this look like this let's go back click on here I'm going to go to content I'm going to go select on three because we want three rows and then what else do we have here we only have okay we don't have this option for the time for reading unfortunately so I have to leave that one out but we do got the title and we do got the excerpt right here let's remove everything else out we could go through we got the title the excerpt the excerpt what's making only 15 words so a smaller the title tag I'm going to take to an h2 and again I'm going to make a dedicated video just on blogs that will go more into depth I know this is a lot of information right here we're going to remove the read more all right we're going to remove the metadata which is the date and the comments right there so we're just going to keep this very simple and basic but we're going to style it up now let's go to style and let's start off with our image what should we put a border radius do they have one not square so let's go ahead and leave it at square but you could put a border radius on it which does look kind of cool spacing is all right and let's go to content now and we're going to go to color we're going to go to blueberry topography let's put a small title and then let's go back to our excerpt blueberry then we're going to put our normal text we could control the spacing we'll go to our title put some spacing in between there eight looks good all right now I know we could style it up more there's a lot more we could do but for the sake of the video moving along we're going to leave it here and this is just what you could do with it this is the potential you could do you could click on here and in fact let me open this up right here so that way it's full you know you do that in the full section in fact you would go to the section here and convert it which is the right thing to do delete that one so that way we're working with containers in our sections and there however you get it design it style it up and then after you are finished click on publish and then add a condition and then you can leave it already here on all archives you save and close let's click on preview and now if we go to our blog page you can see now we have our archive on our blog page this course it looks off there's a lot to do a lot to change especially that background color that background color does not really work and also let me see here you know and this is where having two headers could really help out you could put like a light header right here you can get really creative with this part right here and with this archive page you could add anything here like if you want to do a promotion you could put something in here for the promotion you could put any any element anything you want on this page if you want to put more text on here if you want to let's see uh yeah let's add some text right here let's go ahead and style that up just to show you how it will work you know you can do it like that now if we go to let me show you our website right here now this is a new website my new one I just launched and I just want to kind of give you a look into the possibilities like on my blog right here you can see I put in some promotional stuff like I got a course that I sell and I got in uh something for people to sign up for for the newsletter so you could get really creative you could put a search box in there you could put a filter so it's just the beginning but even as much as all that cool stuff is I just suggest to start off small and then build up the blogs are going to be so as long as you're blogging you're always going to be building it up all right next up let's do our blogs so it's going to be the same thing we go back to our dashboard we're going to navigate over to our templates and then to our theme builder and then from here we're going to do a single post so click on single post and again if there's one already in there go ahead and delete it start over fresh we don't have anything here so let's go ahead and click on the single post and you could choose the style that you want here or you could build it out yourself it's always good to start with a starting point it makes things a whole lot easier so let's see over here I think this one's a good starting point this one the main thing on the blog is to keep it clean and easy to read and let's go ahead and do this one I'm going to insert it let's see how it looks we might not like it if we don't like it we could delete it and find another one okay well I don't like this top part so let's go ahead and delete that all right I don't like all this space so I'm going to click on edit section and I want to convert it so let's get it checked out right away okay we could go ahead and delete the section so now we're with the container ooh but it made some changes here yeah that's a tough part when doing this all right so we're going to need to fix this first off the box we're going to remove that the width right here okay you know what this is pretty broken right here it's going to take time let's not worry about that okay we'll just delete it and start over so let's click on again let's find another one and we could go ahead and go with this one right here let's see how it looks all right this is okay we'll delete it we'll change it around to our style all right so this color let's go ahead and make it our color blue and then again let's do the lighter blue and that's pretty dope it matches in with our banner so that's gray the background overlay we could remove that and let's go ahead and make this smaller okay it looks like there's a minimum height on it let's move that down or you know what we could actually just take it off yeah I'm not a fan of minimum heights let's go over here to padding but you can find your own style I personally just don't like minimum height too much I'll go to 150 here do the bottom and this is why I like it I feel like I got a lot more control 150 150 okay that's cool and if we click on here you'll see this is the featured image right over here so let's go ahead and delete this right here let's say we want to put an image all your your your widgets for the blog are going to be at the top like Elementor already knows you're on a blog post template so they give you all the templates you're going to all the widgets you're going to need right up here so go ahead and click in the featured image and it's automatically going to show the image to the blog that you're on it's all dynamic right here this is going to be your post excerpt you can't see it but it's dynamic when you go to your post page you can let's go ahead and style this up so it's in line with our brand and our guide and we're going to put our button text right here let's style this up as well go to our colors we'll go to our primary color which is yeah we'll leave it out white secondary I'm going to put it out blue then our hover color I want our hover let's put it out yellow make it stand out a bit and now our text and this is going to be for all the content it's our site let's click on it choose our text color then our typography we're going to use normal text and then we could do the same thing here for our subscribe newsletter and you see how fast we could go with our styles set up inside here all I'm doing is changing the styles that's it that's all I'm doing let's use a no not the larger text then you know what I want to do something a bit cool let me remove that right there we could probably change the color in the back instead I liked what we did before with that light blueberry and we could just move that opacity over there we go then let's change up this form we'll go to the buttons and I want to put on yellow with blue text and then so on and then you do that for each element you could go here as well and do the same and just change each and every single one that's all you have to do in order to style it up to make it look nice and with your own brand when you finish styling up your post page go here to click on publish add condition and by default it goes on all singular so the singular that's for all singular post that's what it means and that's what you want to keep it on you can also put it on post it'll work the same and you can even choose which post you want it on in fact you could choose if you want a certain template just based on category you have so much flexibility let's say your website has three categories in your blogs you want one category to be like dark one category to be light one category to be a mixture of both you could create three different templates and assign them to each category based on whichever blog post the user goes on that's what they'll see for this one we'll keep it on all singular let's save let's go ahead and click on preview now to really see it let's go over to our blog and let's see it firsthand how does it look like on our blog okay I noticed something that the style isn't showing it looks just the same as before and I've actually faced this problem before and I'm going to leave it in here in case of somebody else faces this problem as well there's something we need to do in order to make sure that it shows up as our template so what we want to do is let's go let me close one of these out let me go to the dashboard let's go over to our blogs go over to post let's click on the blog post and I'm not sure when this started happening but I I I discovered in the last couple websites that I built that I ran across this issue that by default it wasn't showing there's another setting I had to change and that's over here in the template and then go over here and click on theme and select on theme now let's go ahead to our third post and refresh and now we can see our template is now working and we got a clean looking website we didn't style these up right here you know I'm going to leave that up to you it's up to you to build your website and have fun with it and be creative all right so the last page we're going to build together is going to be our contact page we're going to do something really simple for I just want to show you how to set up your contact form so navigate over to your contact page now you could get to your page two different ways you can either just go to the page and go here to edit page or you can go through the dashboard we're already here and this is easy so let's just click on edit page and then from here we want to click on edit with Elementor now if you don't have Elementor on the page you might just see the edit with Elementor up here either one is okay just click on the edit with Elementor and we'll get it started and this goes for all pages you're going to create all normal pages okay so we're not going to use a template here because I want to make this super easy all we're going to do is put the heading right over here I'm going to go to my container and add a little bit of spacing all right let me put 100 pixels up on top oops and 100 on bottom I just want to give a little bit of spacing to get this started now let's go ahead and put our text contact us and we can leave that at h1 put that at h1 with center it let me add my color blueberry blue and then my text I'm just going to put a large one I don't want something really big all right now let's put in our contact form and you can search in the top use a search and put in form drop that in right there all right that's really big and bright okay so let's style this up really quick I'll click on my form let's go over to style and you can see we got our colors here our text colors let's change these to our blueberry blue or if you're going to use black you can use black too that's all good I'm gonna go to my field I'm gonna do the same thing blueberry blue the background color yeah white is okay for our typography all right let's go ahead and change this to button text right here or you know I'm gonna use normal text and then let me go back here to my form because I got the label so the label is going to be this on the top and I want this to be let's see I'm going to make this a subheader I think that'll look better and it does cool and I'm going to add some spacing here and then you get to play around with it and style it up as you see fit this is just my process right here all right let's go to the field first let me see I'm gonna create some spacing right here so let me space this out to 20 and I'm going to go to my button now I want the background you know what no I'm going to make a hmm let's make it stand out text color very blue and then let's change the typography and we're going to make this our button text right here and you know I'm going to make this hmm let's put this at two how does our example look look all right see I like to look at our samples always this gives us an idea okay everything is squared off if you notice here so let's square off ours all right we want to square that off we could do that same thing with the fields let's square that off the border color we could go ahead and give that also the blue that will look really good and then the buttons let's add some spacing on it some padding we'll put 12 this is a big button right here let me take it down to 16 I want it too big I want it I want the button to be even with these fields right over here all right but now everything is styled up let me just do the hover real quick blue text color yellow so that way it's inverted all right cool now let's go back down to the content so we have a lot of different options you got your name and email and message these are the basics right here you might want to add something else you might want to add a phone number though I don't recommend requesting phone numbers but you might want to add something let's say services what services are you looking for so with that we would put down a select and now we have a select and we'll call this one services and now inside here we could choose to make it required yes we're going to make this required we need to know this information and here's our options so let's say this one is for web design next one for web development next one for SEO so we got different options in there and then you put your own services down here let me close that up I'm going to move that up over here and see you could control where it goes and now when someone clicks on here they could choose which one now another thing you could do as well is let's say for the name we want to make this a bit smaller so first off let me make this smaller I'm going to go to my container and I'm going to go to my layout and this time I'm going to make my layout smaller I'm going to make it at 850 all right and then I want to make my you know this this a lot smaller too and here's just a little tip the easier you make your form the less you put in it the more people you are going to get to sign up adding too much to your forms is going to results in a loss of signups and a loss of conversions I've done a lot of UX testing a lot of heat map testing and you'd be surprised how many people start the process of filling out a form but then change their mind in the middle so if you have too many fields you're opening up too much room for people to change their mind all right let's go here to name I'm going to make this 50% and now you can see this goes to just 50% of the width I'm going to do the same with the email take this down to 50% and then they stack up with each other now it's a bit smaller and you could do a whole lot more creative stuff with this like let me even make this smaller I'm going to have just a little bit of fun here all right I just want to show the possibilities of it let me take this down to 800 I'm going to go to my form widget right here I'm going to go to advance I'm going to add some padding on it I was taken to 24 if you guys notice so far all my pixels everything I do is always even numbers and in the multiples of four so I've got a very consistent a little bit of OCD but a bit of consistency when it comes to my pixels and then here let me add a border right here so we could put a border no not border radius right here border solid we'll put one we'll make this one blue and then we you know put a border right there you could put a box shadow to make it stand out let me move this over to 20 we're actually 0.15 and I got a box shadow video that shows all about designing really cool box shadows go ahead and move this a 10 move this down to 40 or up to 40 pull in the spread a little bit then we could update it you know you could do all kinds of stuff to make this look really cool all right let's finish up our form there because there's some very important things we need to do in our form let's go back to the form go back to the content and we need to set up where it's going to go to the actions so click on actions right here and now you have collect submissions which is by default we have email which is by default other things we could do as well we could put a redirect that way let's say you want to go to a thank you page you could set up a redirect to do that you could add email to and what this will do is it'll send an email straight to the person that filled out this form and there's a whole bunch more there's all these integrations that you could do like mail chimp and active campaign and there's even more even slack you could even integrate this with your slack it's super powerful this thing could do so much in fact for my own business I got our CRM totally connected within Elementor form so I'm going to put out some more in-depth tutorials on what to do with the forms and how to do them right now we're going to do the basic setup so the basic is making sure to have the collect submissions and what that is let me see here let me exit this and go back to my dashboard if we go to Elementor right here and you go on to submissions this is going to be the database that captures every single email that goes through here so anybody that signs up is going to go through here and you can see we already got a ton of them and I think that was from the previous website that I was building I'm going to have to blur all this out because there's some sensitive emails right here I might even have to just cut this whole thing out but that's where you would find it and then for the email you go over here to your email and you're going to make sure that it is directed to your email you can customize the message that you get this is for you and same thing right here like you could put in here let's go ahead and put in and we'll write a message to ourselves this is a contact form submission from our website now you will know what it is when you get it inside your email right here in the from email you want to make sure you put your email right here because let's say a customer potential customer emails you through your contact form hey I like your service I want to hire you or talk more about it you got to make sure you have this in here that way you can email them back and it's coming from your email and that's it that's all you need to do now very very important before you go live run a whole lot of tests on this make sure your contact forms are working tweak it out make sure it's fixed and working right there are other things like up here in the form fields you can give your form a name as well I think this is important to do I like to label them because as your website grows you'll get other forms you'll get newsletter sign ups things like that so it's good to label your forms that way when you do go to your submissions they're easy to find so we'll call this one contact page form let's update it and now we're good to go and that is it for building your website of course a lot of it is left to you to get creative and to build out the pages but if you follow this step by step you'll be able to build your own website and this is a good start to it but now all right we're not finished yet because after the website is built there's a few things we need to do we need to set up the security we have to set up the speed optimization and we got to set it up for SEO I'm going to show you the tools that I use I'm going to show you the free versions for them we're going to keep it really minimal right now again when you're ready to you know really get into SEO or take your speed optimization to the next level there are better paid options but for right now if you're just building this for your own business or looking to get started building sites for your clients this is a good start so first one let's set up our security for this let's go back to our plugins and that's what we're going to do we're going to be adding plugins and for all of these so add a new plugin and we're going to add word fence this is in my opinion I feel the best security plugin out there it's the safest one it's got a firewall on it and this keeps your site very very safe so let's install this and I've dealt with hacked websites hacking happens a whole lot a lot more often than you think you'd be surprised how often your website has attempted hacks every single day kind of scary you know if you really knew how often bots were trying to call crawl in and get into your site that's why you have to have good security set up and what I'm going to show you is going to really foolproof it so you go in through there go to your dashboard it's really simple to set up it only takes a couple minutes to do all right and we can see right here we're already looking okay it's pretty much a plug and play it's okay there are there is one thing you want to do you want to go in and you want to optimize the firewall so right here click on optimization we're going to need to oh sometimes you got to download a file just for a backup but it looks like we didn't have to do that here okay so one thing it does as well as a brute force protection this is going to help out especially from bots are trying to get into your website now if you want you could go through each one of these options and tweak them out as you like but it is pretty much like a plug and play the only thing you really need to do is this optimization okay I noticed it was only at 35% it should be at about 50% sometimes you have to do it a couple times all right we're good to go now you see now it's at the 55% yeah it takes a few times sometimes hitting that optimization but it's free you're good to go with it a couple other things we want to do for our security number one is one of them's already in there and installed the activity log activity log is great for security because if something does happen uh say somebody does gain access to your website you could go in and find out the next thing that I want to add is going to be hiding the login so just put hide login that's all you got to put in and then you want to use this one right here the WPS hide login what this is going to do is by default to log into your WordPress website is your domain slash WP admin or slash admin now that's for all WordPress websites that means every single hacker out there has created a bot to search for a slash admin or WP admin that leaves your website vulnerable so we want to change that so we're going to activate this and again this is free super easy to set up and I got it on every single site this is exactly what I do on all the sites that we build I'm going to go to our settings right here and then I'll change the url login you know like my login that's a simple one you can put something like cheese you know make something really weird that only you know about you know what I'm gonna I'm gonna do something only I would know about Jedi only all right so only Jedi's could answer this one that can't enter this website so we're good to go now security is set up let's save that all right the next thing we want to get is for SEO so let's go back to our plugins and add new now there's only two plugins I would recommend for SEO first off I'm going to tell you what not to use and that is Yoast I do not advise using Yoast it's an older one there are a couple newer ones that are far more better a lot lighter and that I've gotten just way better results with and that's going to be SEO press or rank math either one of those SEO press or rank math both of them have free versions and this is all you need right here I personally use SEO press because I've been using it for the last couple of years I've gotten great results with it I'm very familiar with it so that's oops that's going to be the one that I recommend but you could also go with rank math either those are going to be good so let's install that there is a pro version and the pro version actually is a really good price but you don't need it unless if you really are trying to take your SEO to the next level and ready to like seriously optimize it uh things like videos like optimizing for videos and there's so much you could do with SEO but right now we would just want to get the basic setup and make sure your website is doing right so let's activate this all right we don't need to go pro but you would just go to your configure your configuration wizard you go through follow the steps that'll get you started it'll get you index so that way your index with google this is going to take care of that for you let's go back the other thing you're going to have now you're going to have a new option when you go to your pages so let's go let's click that off so that way we keep everything clean let's go here to our homepage and now you have these settings down here you're going to see how is your website going to look like on google so you could change your title you could change your description you're going to want to put something longer on it it gives you a reference of how long to put your your information to put your details and then you could put in your keywords as well you're going to want to put in about four or five relevant keywords that you want to rank for and then it's going to give you more details of what you need to fix what you can't fix so it's really easy to use uh this is what i use and yeah the pro version is great as well now there is one thing we need to do here for seo go back here to settings then go to reading and this is super important do this when you have all your pages ready and you're ready for google to index your site click this off right here the discourage engines from indexing the site i think when you go through the seo press uh wizard for the configurations it'll alert you about this until you hey this is on this is a problem let's turn it off so turn that off we're good to go our seo is done you're going to want to spend time on it go through each one of your pages uh but the next thing we're going to do is our speed optimization so there are a few things we could do here first one is going to be adding a caching plugin we're going to do a free one now if you want to pay one a really good one i use wp rocket that's the best one out there that's one i suggest is about $50 a year it really makes a big difference uh but there are some free versions and i'm going to show you some all right here's one right here now i'm going to be honest with you i don't use free caching plugins i have wp rocket i've been paying for it for several years now but i have a couple friends that do use the free versions of optimizing their site and this is the one that has been recommended to me the wp fastest cache and then you can see here one million active installs and just amazing ratings another thing you always want to look at whenever installing a plugin check out the last time it's been updated if it hasn't been updated for several months or even a couple years if it hasn't been updated in a couple years you don't want to use it but if it hasn't been updated in a few months you might want to be aware of it you want to make sure you're only doing something that is active and the reason why is for security if they're not updating it it means the developers might just abandon it so you want something that's being updated so let's install this go ahead and activate it all right and then we'll go here this is my first time using it too by the way i've never installed or used wp fastest cache i've always used the same speed optimization one but they all pretty much work the same so i feel confident doing this on a tutorial all right so uh we want to cache the system so go ahead and enable cache preload let's enable it and you could preload let's preload the homepage pages post you could actually do all of them just do them all all right okay that one's okay yeah we could clear the cache on that so we want to minify html we want to minify our css so the things are going to make this fast is going to be the caching and the minifying so basically what this is doing is taking all that code and compressing it all together putting it all together so it loads faster and it does make a big difference we want to combine css we want to combine js uh we definitely want to do the gzip just go ahead and click on that disable emojis we don't need emojis on our site browser caching and then submit so just click on everything and if you are finding trouble in your front end something looks broken uh just disable it or clear the cache and see if that works right there and usually it does all right deleting cache you know whenever you're making changes to your website you would clear the cache and then okay image optimization is only on the free one which brings us to the very last thing we need to add and that is an image optimizer so if we go back to our plugins let's search for a new one and i use short pixel uh but i also have the paid version i believe there is a free version of this or you get a certain amount of credits for free so we'll do the image optimizer and there's a lot of good image optimization tools out there so you just want to have it it's going to make your images smaller but the most important thing is to optimize your images before uh do you know what here's a couple links right here some videos these are my first videos ever made by the way but they are to optimize your images before you even load them to the website so we're going to want to use either photoshop or i use affinity now and i optimize my images i make them smaller compress them that way they load a lot faster on the website because the most common cause for a slow website is when we have super large images and with that we're done that is it that is a full process of building a WordPress website from beginning to the end from the setup and preparation to installing WordPress to actually building the site with Elementor and then to wrapping it up with having security SEO and speed optimization added in it these are the foundations the fundamentals and this will give you a great starting point now it's a fun journey you can get creative you can do all kinds of things as long as you start off with the foundation and the fundamentals you're going to be good to go so i really hope this helped out if you have any questions you get stuck on something drop them in the comments there's something else you want to learn that you feel wasn't covered in here again drop them in the comments i'm going to get back to everybody and i'm also going to make some shorter tutorials on each of the elements that we went through inside this video like building a blog from the very beginning more in detail going through contact forms more in detail so yeah make sure to do all the good youtube stuff you know like subscribe and i'll be back again with more WordPress Elementor and web design related content thank you