 Hey, what is going on everybody? My name is Roddy and you're watching my channel Roddy the Brand. Today we're going to explore how to launch a WordPress website live on the internet without coding. We're going to be using Hostinger as a web platform and Elementor as a website page builder. I do have affiliate links and promo code in the description below where if you purchase one of the products featured in this video I earn a small commission. Essentially it helps me as a content creator and you get a good deal. Now let's jump into the computer and get started. For this video I'm going to be using Hostinger and the reason for that is because Hostinger is a reliable, cheap and super easy to use web hosting. The links on the coupon code will be in the description below and if you purchase through them you get a great offer and I might earn an affiliate commission from it. Now if you click on the link this will lead you to the Hostinger website and depending on which country you're in the currency might be slightly different but as you can see at the moment we have a great deal which is 80% off and if we scroll down you will see that we have different packages. The one that I have is the premium shared hosting and the reason for this is because I'm able to host 100 websites, I get three emails, one free SSL certificate. Note that we only get one but it's pretty nice to have then we get a free domain name with this one that we can choose and so on. While with the first one you only get one website you do get one email account and you don't get the free domain name. If you choose this one here and your business grows you can always update to the business shared hosting and that would also include a few other things such as daily backups and free CDN which can be quite helpful. CDN is a content delivery network which essentially will speed up your website throughout the globe so it'll be faster to access it pretty much anywhere in the world. As I said I've already got this one here but I'm going to walk you through it anyway so if you choose to go with this one select it and then we need to choose for how long do you want this hosting for and the best option I believe is the 12 months because you get the 80% off and it's not such a big commitment while the 41 8 months is actually if you think about it it is a better deal in the long run but it's a bigger commitment and everything nails I'm not sure if it's worth having because if you go with the first one here you actually have 30 days money back guarantee so you might as well try it and have a cheaper hosting for 12 months I think that this is the more reasonable one so I'm going to choose this one here and continue for the payment options you have credit card paypal coin gate google pay all you need to do is choose the payment option and then inside here is listed what you get so you get the premium shared hosting for 12 months you get a free SSL certificate you get a free domain name to choose from you get the cafe protection which can be quite useful and you get the setup which is awesome though this is all discounted to minus 80% and if you wish to use my coupon code let's have a look at what it's going to do so if we do ready the brand that will add a further discount actually it's not that big of a discount but at least it's something I think the offer is already good enough if you wish to purchase it all you need to do is complete the payment here and that will create the hosting for you as I already have mine I'm just gonna go and log in and show you the setup process okay once you log in you should be able to claim your free domain name if you went with the premium shared hosting or the one above and to do this all you need to do is click on claim domain here type the domain name that you want obviously you need to check for the availability and also you can choose different extensions such as .com help click link and so on hopefully the one that you want will be available and all you need to do is claim it I'm not gonna do this because I already have a domain name that I want to use but once you claim your domain name this will actually lead you through the setup of your first website and all it's going to ask you is to choose a location for your web server and usually I choose the location of where I'm located or where your website is mostly going to be used from so for me this will be United Kingdom or Europe and that's what I chose I'll show you in a second so that would be all set up for you if you go through this and if you click on home you'll see your domain name in here create it and you should be able to manage your hosting if you have a domain name that is hosted on another platform which is absolutely fine I've got mine on one two three red which I'm gonna show you right now and what you need to do is go to hosting so I need to create a new website I'm gonna click the green button at website and the domain name that I want to use is the ruddy the brand.com domain name and the reason for this is because I registered this a while ago and I haven't done anything with it so I want to make a use of this and I need to give it a password so I'm gonna use the password generator in here and let me hide it and I'm gonna use the password generator hide and this password can be useful if you want to connect via ftp and ssh we're not going to be doing this today but this can be quite helpful so make sure you save this password somewhere or you can create an ftp connection later on if you wish to so I'm gonna add this website in here and this will set up the website for me and if I was to go to hosting you will see that I now have two websites my ruddy.co.uk which I was messing around with today and I have the ruddy the brand that we just set up right now and if I click on manage this will give me all the hosting options in here so let's have a look at the side panel here so on the side panel in here you can choose the website that you're working on so I can select free ruddy.co.uk or ruddy the brand.com and then underneath here we have all the information about the server such as the hosting plan the location of the server which is europe and you can actually change this if you want if you change your mind you can just select one later on which is absolutely fine you have the IP address of the host here you have the main domain name which isn't that important you can set the main domain name to be this one here if you wish and then let me have a look we also have the name service here and for those of you who don't know what the name service can do is basically if you have your domain name in another platform you can point your domain name to this name service here and then you can control your domain name through hostinger which is what I'm actually doing and everything else as you can see you have usage and so on email account subdomains and so on now what I want to do is I need to find the ruddy the brand.com domain name in my 123 range and point it to this name service so I've actually already done that and the reason for this is because this could take a while to update sometimes so let me show you how to do it anyway so I'm gonna go to 123 range and by the way you can do this on any domain name platform and all you need to do is select your domain name for me this is ruddy the brand.com at the moment and if you scroll down all we need to do is change the name service so if I click on change name service DNS you will see that I have for name server one dns1.dns-parking.com which is basically this one here and then for the second one I have dns2.dns-parking.com which is the second one here and the reason I've done this before I started recording this video is as you can see it it can take up to 48 hours for the name service to be updated across the internet so I didn't want to start the video and not to to work if you know what I mean once you do this technically speaking if we go to the domain name ruddy the brand.com now you will see that we have your account has been created and the first thing that I sported is that this website is not secure meaning that we do not have an SSL cert installed so I'm going to close the domain name bit off because we won't need it anymore as you can see the domain name is working and I'm going to show you how we can install all three SSL so if we go back to your hosting job and if we are under hosting select the domain name that you want to install the SSL for and if you scroll down you should see under advanced SSL if we click on SSL then this will say install SSL and then you can select the domain name obviously I want ready the brand.com so I'm going to click install SSL and as you can see SSL is being installed your SSL is being installed for ready the brand.com in the background HTTPS will be automatically forced on your domain name so this is pretty awesome let me close this and as you can see oh okay that was pretty quick it's using zero SSL cert lifetime SSL cert so you don't have to mess around with this anymore it's installed and that's awesome so hopefully if I was to go to the website and refresh as you can see I didn't do anything else as you can see I get the padlock which means that my website is SSL secured and if I click on certificate it says valid which is awesome okay so this is the basic setup and now we can actually look into how we can install WordPress and go from there so if I click back on hosting click on write the brand manage and the couple of ways of installing WordPress but I'm going to show you the quickest way to do it and if you scroll down you will see this website section here and you can either click on WordPress if you want to migrate one or install one or you can do the auto installer I think this is going to be an easier way so I'm going to do auto installer and then all I want to do is install a new WordPress website choose WordPress and set it quickly so okay the first thing that I'm going to do is change the HTTP to HTTPS in here overwriting existing files is absolutely fine I want that ticked the administrator username I'm going to set up as admin but you can make it as sad as possible and we need to set up a password so I'm going to generate administrator password in here and make sure that you make note of the username and the password somewhere so we have admin and this the administrator email is going to be set to my default email address which is hello rady.com okay website item can be ready the brand language can be English that's absolutely fine create new database is what we want and also we can create a database password so I'm gonna create one for this as well and let's have a look at the other option so we have the space the PHP version minimum my scale version five that's absolutely fine and I'm gonna leave the update only to minor version in here ticked and click install this should take a couple of seconds to install and then we should be able to see or WordPress website working okay if I was to go back to my website so let's refresh now you should see that we are getting the default WordPress website here installed and it was that easy and that's pretty much it we're done with hosting it was that simple to install a WordPress website and now we can actually focus on building a super basic website just so I can show you how to get started so I'm going to close this and let's focus on our website so first of all if you want to access your WordPress admin dashboard you can go under your website which for me is rady.com and then you can do wp-admin slash and then that would go to the login screen and you need to use the username and password that we created earlier so admin and I'm gonna paste the password super quickly and click remember me okay this is the default WordPress dashboard if you're not familiar with it on the side here we have our dashboard which will show you updates that you need to do and some insights we have our blog posts in here we have all the media such as images svgs music videos and so on our pages are stored in here we have comments in here if you're creating a business website you probably won't have to have the comments enabled this is actually a plugin that you can disable but it's pretty useful to have in terms of if you want to link your google analytics and so on and we have wp-forms installed as well which I don't know if I'm gonna be using but they installed anyway appearance is where you can customize your website from we're gonna install a custom theme and a few plugins so yeah and now let me show you how to get started with Elementor all right so in this video we're going to be using Elementor to create our website and if you wish to support the channel you can purchase Elementor through my link which will be in the description below but also you can try the free version which is great but you just don't get the premium plugins widgets and so on so let me quickly show you what I mean so if we click choose your plan and scroll down a little bit you will see different plans that you might like if you just want to try on one website you can go through the $49 a year and you get updates all year long you get all the features as the rest of the packages the difference is pretty much that with the rest you get to create more websites with Elementor and with some of them you get VIP support as you can see and you get expert network profile so if you're an agency these three are perfect and if you just want to have it for one website you can go for this and actually happen to have this one here which is free websites for $99 and if you scroll down as you can see you can get the free version that I'm going to show you how to do that anyway and if you scroll down a little bit more you can compare it in here what you get so you don't get the pro widgets with the free version you don't get the pro teams with the free version and pop up builder and so on even if you try the free version at some point you probably end up using the pro just because it's really worth it for the $49 so if you wish to support the channel please order from my link which will be in the description below choose the tier that suits you the most click on buy now all you need to do is fill your details and choose a payment method and as you can see you get 30 days money back guarantee which is great and so on I've already got an account so I'm gonna quickly log in and show you what you need to do if you want to use the pro version if you don't don't worry just take a round for a sec and then I'll show you the free version as well I've logged into my account now and if I go to subscriptions you will see my Elementor pro advanced subscription here I have three websites and the first thing that I need to do is download the Elementor pro zip file all right this is already downloaded so I won't need this anymore let's close it close this as well and if we go back to our website there are a couple of things that we need to do all right before we start doing anything else I just want to disable some of the plugins just because I'm not gonna set them up yet but some of them are great to be fair all in one SEO is great to have all in one WP migration is great I've disabled the most insights because I'm not gonna link google analytics just yet but I want to remove this one here because it's just annoying and also I'm not gonna use it that's okay and let's update all the plugins as well this one is good for spam but we probably won't have any comments anywhere so I'm gonna leave it deactivated okay now that we have a clean WordPress installed everything is looking good let's start by setting up some of the basics the first thing that I want to do is go under settings general and make sure that you have the website title that you want and tagline maybe I can change chain mines to website design and development for now this is the administrator address and I can just save the next important bit that we need to do is change the reading WordPress is usually set to display latest blog posts on the homepage but we're creating a website today and I want to have a static page to do this if you go to settings read in and select this one here a static page and all we need to do is create our home page now at the moment we have about and sample page so I'm gonna open pages in a new tab like holding control and I'm gonna create a new page so add new page let's call this one home I've zoomed in a little bit that's why let's publish this publish let's go back and refresh this as you can see we have our home page here and now if I was to refresh under settings reading we should be able to select the static page and we can select the home page to be our page let's save this I'm not gonna bother with the posts for now let's save this and if we go back to the website you will see that we have nothing on our home page which is absolutely fine okay at this point we should be good to go and start installing or WordPress theme and Elementor Elementor is actually a plugin but it is capable to work with pretty much any theme out there but what I want to do is I want to use the most lightweight theme for this just because I want my website to be fast so to do this I'm gonna go under themes under appearance themes and Elementor actually has its own lightweight theme that I'm gonna install so let's click on add new and let's look for hello Elementor and this is the theme that I want to install so let's click on this and this will install it let's activate it and as you can see it says hello theme it's a lightweight starter theme we recommend you use it together with Elementor page builder plugin they work perfectly together so this is gonna ask us to install Elementor as well but usually you can go to plugins and search for Elementor in there as well so I'm gonna show you both ways I'm gonna click install Elementor in here and this should take a couple of seconds right now that we have Elementor installed let's just activate it and if you wish to install it manually you can just go to plugins add new plugin look for Elementor search where it should be the top one here it is only five plus million active installations I've already activated the plugin but you can install it from here as well and activate it so if I go to plugins you will see that we have somewhere here we have Elementor and obviously you can go pro if you wish to we have installed and activated Elementor and you can also tell by looking in here so Elementor and you have all the settings for Elementor one thing that I'm interested at now is if I click on pages let's have a look okay that's absolutely fine I'm actually going to delete this sample page here and I'm going to leave those now technically speaking if you click on pages you can start editing your pages with Elementor and that would be absolutely fine for some reason it's not showing on this one here but if you click edit and if you click edit with Elementor that would probably change that and as you can see we have Elementor here on the side and you can start using it so this is the thing with the basic you only get a few widgets but if you scroll down you get so much more with the pro let me show you how we can install pro if I go back to or WP admin and if I click on plugins to install the pro we actually need to upload the zip file that we downloaded earlier so if I click add new and then if I click upload plugin choose file I've saved the earlier in a folder called WordPress so this is the Elementor pro 3.5.0 open install now this should take a second and what you do is activate the plugin and of course I need to connect and activate the Elementor pro so let's do that super quickly so we can get the latest updates and as you can see it's recognized I'm already logged into my.elementor.com and all I need to do is connect my website with Elementor activate and that should be it okay that's it my status is active which means that I will be able to get all the plugins all the widgets and updates and so on so if I go back to pages let's edit the home page so I can now click edit with Elementor and if I scroll down you will see that I'm getting all the pro features which is really good now let's start with the basics and I'm gonna walk you through how to get started but of course I'm not gonna be able to show you absolutely everything in this video so to get started first of all let's go back to the front page and also I don't know if you noticed but the design has changed and this is because of the theme that we installed earlier anyways let's go back to the main page of the website and under edit we get site settings and theme builder let's start with the site settings so if you click on this there are a couple of things that we want to set let's start from top to bottom and I'm gonna explain so global colors is pretty much your branding I've already got branding outlines that I've created for my youtube channel and this one I'm gonna be using today but normally you'd have different colors different logos as you can see let me zoom out a little bit so normally you'd have different colors you'll have different logos I have two fonts and so on so I'm gonna be using this to change it all my primary color is quite dark I'm gonna change in here by pasting the hex value it's not fully black but it's closed my secondary color is the red color that you just saw so I'm gonna copy this and paste it in here my text color is literally gonna be depending on the on what I'm doing with the website but primary I want to set it quite dark so I'm gonna use the primary color for this as well and also I want to set a light version for the text color so I'm gonna create a new color here and just say text light and I'm going to put this to be white and for and last but not least for the accent color I'm gonna use the orange color that I have on my branding and copy the value right now and paste it in here all right make sure that you update this and then let's go back and let's have a look at the global font this should be in line with your branding and for the primary and let's change the global font super quickly primary I'm gonna go with work sans work sans this is a google font so it's gonna be available in here you can add custom fonts as well I believe but you might need to have the pro version unless you want to do it manually and so I'm gonna leave this now secondary color I'm gonna have as open sans save this text I'm gonna have as open sans as well and accent I'm gonna have as open sans as well okay I'm happy with this let's update here let's go back and see what else do we have so we have the global font let's change the typography in order for the team styles to affect all relevant elements elements please disable the default colors and fonts from settings so yes that's something that we need to do so you can click on this this and then all we need to do is disable the default colors and disable the default font if you want to change them save this hopefully if we were to refresh this so now if you go back to the topography as you can see we don't get that anymore after the refresh and we can start setting up some of these things if we refresh now and if we go back to h1 topography here you will see that we have quite a lot of settings that we can change so for the body text color if we click on the little plant here we can actually use one of the variables that we created earlier so I can use this text color here which is great so for the topography I can just choose the text topography which is the open sans then for the links I'm thinking of using the text color again but for the topography I actually want I actually want the text and I actually want to change all the links to be underlined so I'm going to click on this here and change the decoration to be underlined sometimes you don't want the links to be underlined but most of the times in blog posts pages you want links to be underlined usually so you know that they're clickable for h1 I'm going to use the text actually I'm going to use the primary color here topography I'm going to use the global fonts that's absolutely fine for the h2 I'm going to use the primary primary again and I'm just going to choose the primary for every single one and leave the topography as default so if we update this all topography should be good to go actually for the topography what I'm going to do is I'm going to choose the primary one so I'm going to choose the primary one all of them let's do that okay and I'm happy with this let's save it let's go back and let's have a look at what else do we have we have buttons so if you want to set up the buttons one thing that might be quite useful to do is when you change the theme styles and I should have been doing this just before I was doing the topography is that if you go to your website and edit with elements I would suggest you that you add a couple of elements normally I would drag a few elements such as heading so let's drag that in and I'm going to choose this one to be h1 so we can do h1 heading one then I would normally duplicate this right click duplicate and then I would put heading two change the style just so we can see how it looks like I would also duplicate this change it to heading three change the edit mode tag to h3 and duplicate this one more time four oops I didn't change this to four and one more time duplicate and I don't know if there were five or six I think yeah there's six and let's duplicate one more time but I would do this just so when I style them I know how they look like as you can see these are slightly different so what I would do is update this and also if I was to go back to the widgets by clicking this button here I would potentially add a few more elements such as a button and try to style this as well so I'm gonna update this so what I would do is save this go back to my home page and let's click site settings and hopefully you will be able to see this now and if you click on topography then you should be able to change them however you like so h2 topography I want to change to the primary and as you can see that's changed now and h4 I want to set to topography to be primary as well and now that's all I can get and the way I want and also if you go back and do buttons now I can change the button to look however I like let's say the text color I want it to be the text light and for the color of the button maybe I want to use the primary or the secondary I mean that would look pretty nice I think so I'm gonna leave it as this and just like this you can go through the setup and change pretty much everything that you want from your brand and change pretty much everything that you want from your brand name before you start developing your site so I'm not gonna go through absolutely everything here I will show you how to create a header a footer and before we do this we need to set up our site identity as well so for site identity this means that I don't want to have this I want to have a logo instead and I can just choose one from here and this is pretty cool you can actually choose svgs but unfortunately I just I just saved the png for this one so I'm gonna select and all I need to do is drag a file so I've already saved my logo as a png and I'm gonna drag it in here and as you can see it's my logo from my website and of course we can put a little bit of text ready the brand logo something like this I can copy this put on the title and insert media now that won't work straight away because we need to change this in a minute but also we can set a file icon which is the icon in here I haven't got I haven't got one prepared but if you make one with the dimensions of 512 512 pixels you can add one and that will look great so let's update this changes will be reflected in the preview only after reload so let me reload this and hopefully yep I can see the logo it's a little bit blurry because I save there as a png but don't worry about that that's what the site identity does but also you can change the background color the layout is pretty important if you wish to have the layout boxed quite a bit you can change this but maybe I'm gonna make it slightly big actually something like this and update all right let's have a look at how we can do a very basic header so for the header we want to be in the site settings and click on header now inside here the couple of things that we can do is if you have selected show logo and if you upload an image this is going to show the image you can remove the tagline which I'm actually going to do so I'm going to remove the tagline and menu show that's absolutely fine with box in fact we're probably going to be creating a header anyway so let's just update this and I'm going to show you how to do that next all right let's exit this so if you have over on the website name in here you should see this menus item at the bottom and if you click on this this will lead you to the appearance and then menus inside here we can create all sorts of different menus for example for now I'm going to create a main menu which is going to sit on top of my page in the header and so I'm going to choose display location header and I'm just going to create this menu you can also create different menus for your footer or if you want to have a special one for mobile and so on now at the moment we only have one page here which is the about page and if you want to add this to the menu all you need to do is stick the box and add it to the menu and that will add it but I actually want to create one or two more pages just so we can see how the menu looks and make the website look a little bit more realistic to do this I'm going to quickly open pages in a new tab and then inside here I'm quickly going to create two more pages so the first one I'm just going to call contact publish publish and let's go back to the dashboard and let's create one more maybe we can call this one articles and I need to publish this as well and let's go back and as you can see now we have the about articles contact and the home page so if we go back to menus which is here under appearance menus I'm going to refresh the page you will see that we have the most recent pages in here and what I'm going to do is just take every single one of them and then add them to my main menu now we can change the order here I want contact to be the last one and that's looking good we can also add the home page if we want to but it's not listed in here maybe we can find it under view all and here it is I'll add that as well and I'll have it here at the top so that's fine we can now save this and we can continue creating our header so to do that let's go back to the website first of all and here where it says edit it Elementor we need to go to team builder so for the team builder as you can see I've zoomed in a little bit just so you can see for the team builder we want to create a new header let's click on header and then add new this will show a lot of examples but all of them are actually coming from Elementor pro so unless you have it you won't be able to use any of them but as you can see some of them are pretty cool let's have a look at some for example let's have a look at this one I can just click on it it's going to display how it looks like and if I wanted to use this I can just click insert and this will be inserted as a header and I can actually start editing it if I wanted to but if you don't have Elementor pro let me show you how you can create a custom one so I'm gonna have to go back I think okay let's go back to the team builder header and because I didn't save this one it's not saved in here but what I'm gonna do now is let's click back on add new and now instead of choosing a header from the library I'm just going to close this and this will leave the editor open for me and now we can start building the header in here because I'm zoomed in things might look a little bit off so I might have to zoom out a little bit so let's start building the header the first thing that I like to do is to actually name the header as you do this you can click here at the bottom where it says settings and then just give it a title let's say custom header status will be draft and HTML tag we can set as maybe header like so and we'll publish this a little bit later on so let me zoom out and let's start adding some elements if I click on the plus sign here this will ask me for what kind of structure I want and I'm going to keep my menu super simple I basically want two columns but I want the menu to take a little bit more space so I'm going to choose this one here we can always edit this by dragging in here so if I was to click on this we can always drag the columns and change the width of them let's start by adding our logo so I'm going to click on the plus sign here and this will open the Elementor widgets in here so I'm going to just drag the site logo and this already knows what my site logo is because we we already done this through the site settings earlier in this tutorial so that's why it knows my logo but you could drag a custom image if you wish to and now I actually want to align this to the left side just like so and that should be good let's add to our navigation as well and I'm going to do this in here so click on the plus button and let's add the nav menu one I'm going to drag this and as you can see we already have a navigation that is working and as a default you just picked the main menu that we created earlier so what I'm going to do now is I want to align this to the right side and if you want to center this in the actual box as you can see at the moment it's kind of like here at the top if you want to center it we're going to have to click on the actual column here and then we can vertically align to the middle like so and as you can see this move to the middle we can have at the top we can have it at the bottom and so on so middle is where I want it and I also want to change the background color for this section so what I can do is click on this button here and under style I can just click on the background type click classic and then I can choose the color that I want from here so I'm going to choose the primary color that's actually looking okay and also for the logo one thing that I don't like about my logo is the hat is actually throwing off a little bit so if everything is aligned from here the hat is going to throw off the logo a little bit so what I can do I can click on the logo itself and I can go to advanced and I can just give it a negative margin so I'm going to unlink all the sides in here like so and I'm just going to give it a negative margin of left let's go with like something like this I think six will do I am zoomed in a little bit so it might be different that looks good to me so I'm going to save this and the logo should be straight with everything else on the website and now for the actual navigation in here what I want to do is change the colors from red to something else like white so to do this I'm going to click edit navigation here and then we can go under styles and we can start changing pretty much everything so if you want to change the topography we can change it from here maybe we can just set it to the primary or the text one I think this one looks a little bit better and if you want to change additional stuff for the letters you can click on here and start messing around with the font the size weight transform and so on I'm going to leave this as default and then I'm going to concentrate on the link itself and the next thing that I want to do is change the text color from red to white so I'm just going to click one of the global colors from here text light or you could click on here and give it a value if you wish just from the color picker that's absolutely fine as well and white is looking a little bit better as you can see I'm actually happy with this there is a little bit of a hover effect and I could change this if I wish to from the hover tab so text color I can change pointer color I can change divider I can add and so on I'm going to leave this the way it is because I already like it the last thing I want to do before we check the responsive design on this is the actual spacing I want to have a little bit of padding at the top and a little bit of padding at the bottom so what I'm going to do is click on this section and in the advanced I can just add a little bit of padding unlike this let's say padding top I want 10 padding bottom I want 10 I'm not sure that might be too much let's go for six and I think that looks a little bit better now we need to check the responsive design of this and to do this we can click on the icon here at the bottom responsive design sorry responsive mode if you click on this this will toggle this responsive navigation here which is quite useful when you work on your website so if I was to go on tablet this changes a little bit the way my header works and one thing that I'm noticing is that there is not much space on the left side here but maybe that's because I put negative margin on my logo we'll have a look in a second but the first thing I want to sort out is the navigation here so I want this button the hamburger button to be on the right side so I'm going to click on this and under content we can toggle align this to the right and as you can see it's moved but also we're having a problem with the contrast this is very hard to see in order to change this we can go under style and then under toggle button we can change the color the background color and so on let's start with the actual color I'm going to choose white color and now the background color it's actually okay the size of it I mean we can mess around with it maybe maybe we can just leave it as this I'm not so sure maybe let's just leave it as the default but you can change the size if you wish to and then the next thing that I want to test is the mobile so if I click mobile as you can see we are getting two columns which I don't want what I can do now is if I want these two to be on one row I can actually modify the columns themselves if I click on the first column here I can actually set the width of it so I can put 50% and if I click on the second column here and put 50% one more time as you can see they're now next to each other which looks so much better so if I go to tablet that's already good enough but again if you love is a little bit wider then you might want to click on this put it as 50% sorry and click on this one as well and put it on 50 as well and then maybe that would solve your problem but that's already looking good to me and one more thing that I want to do is check out the drop down menu so if I click on it as you can see it's kind of like it's a little bit ugly and it's only working of this column if you click on the actual nav menu here and if we go to content we can switch this to be full width by going under drop down menu here and then full width just toggle that to full width and that's already looking better there is a little bit of a hover effect that can be changed and also I want to bring this down a little bit so let's start by messing around with some of the settings here and a side or center that's really up to you I mean I kind of like a kind of like in the center so that will work for me then let's have a look at the style so for the style we can go to drop down and we can start messing with pretty much everything so one thing straight away that I want to change is the distance here at the bottom so I'm going to change this a little bit like so at the moment it's white on white and it's hard to see but everything is going to work absolutely fine and then text color is absolutely fine maybe the topography I can change a little bit for the size let's go with something a little bigger than this just so we can see and then we can mess around let's go with 18 and then we can mess around with the horizontal padding and vertical padding here so I could potentially just change this a little bit like so and that would space out the elements and it will make them easier to press obviously if you don't like this hover color we can also go to hover change the background color from here and I don't know what to choose it maybe we can just choose a slightly gray color like so but then it's really hard to see the text maybe then we need to choose maybe we just need to choose a darker text yeah I think that's working so darker text with lighter hover and that's already looking good to me so the last thing that I'm going to do is maybe if I click on the whole section here I could potentially create some padding on the left here so let's say 10 and I could potentially put some on the right 10 oh okay but that's putting 10 pixels everywhere now and I don't want it to be linked so I just want top to be six bottom to be six and 10 on each side and I think that's already looking good so if I go to mobile one more time as you can see this is looking good tablet is working and we have the desktop so this is a very basic header and I'm going to publish this now and show you how we can apply it on all pages so I'll publish this and click add condition inside here we can decide where we want to include this header or where we want to exclude it so I actually want this header to be on my entire website so I'm just going to choose entire website and just add this condition once we're done click save and close okay so this is our header if I go back to the website let me it's a fairly basic header but as you can see it's fully responsive and it works quite well now let's focus on making the photo to do this we can jump back to theme builder we can go to photo add new from here we can choose a footer from the pro so that's looking pretty cool yeah there are loads of cool ones that you can use but I'm going to show you how to create a very basic custom one that you can use so what I'm going to do is close this and I'm going to start building my footer so let's start by changing the footer name so settings and then I'm going to say custom footer like so and this can be let's have a look footer and I'm happy with this okay let's start by making the footer this is going to be a tricky one first of all let's click on the plus button here and let's select a full column and the reason I'm going to do that is because I'm going to separate the columns inside with an inner section so if we go back to elements in here and do inner in a section and just drag it in this will create two columns as default but I actually want four of them so I can do right click duplicate like right click duplicate or you can do you can select one and control and the to duplicate an element now this is looking a little bit weird so let's start styling it first of all and I'm going to click on the top container here the top section and give it a background color by clicking on style and then background type we can just choose a color I'm going to go for the primary color and I want to give it a little bit of padding on the top and bottom to do this we can go to advanced and then in the padding let's unlink all of this otherwise he's going to add the same number everywhere so I'm going to do top of something like 80 oops 80 and bottom is going to be 80 as well and this gives us a little bit of breathing space now for the columns what I'm thinking of doing is kind of like adding something about the company then useful links and maybe products and contact details it's just for a demo anyway so let's start by adding or first element here and this is going to be the site logo so I'm going to drag that in here it is the site logo comes up and I can align this to the left just like so let me zoom in a little bit so I can see better and now for this I'm just going to add some text so I'm going to go to elements and then let's just drag the text editor and that's it obviously you can see the text here because it's using the default text for the website so what I'm gonna have to do is click on this go to style and just change the text color from here to whatever I like I'm gonna go with white and that's it I'm gonna leave this as it is and I'm gonna concentrate on the other sections now so for the second section here I'm gonna click the plus button and add a heading this setting needs to be turned into white so let's go to style and let's click on text color and just change it to white like so and also I want the content to be set to h4 just because I'm gonna have a few of these headings and I want the text to be smaller as well so that's looking good and I can actually call this one something like useful links like so and then underneath this we can do a bunch of things we can list a few links or we could use the menu that we created earlier so if I was to do this I mean there are a couple of ways of doing this but if I was to use the navigation menu I can drag this in and potentially I could go to my menu screen and create useful links menu from there so then I can reuse this menu anywhere I want for now just to save some time I'm gonna leave it to the main menu but as I said just go to the menu screen and if you have useful links obviously create a new menu by doing this create a new menu give it a name and then create the pages of course so let's leave it as it is but obviously the styling does not look good so I'm gonna click edit on the nav menu here and I'm gonna go from top to bottom so that's absolutely fine layout needs to be changed to vertical just so they go down alignment is absolutely fine underline I mean you can't maybe none and then if you want a sub menu I'm probably gonna avoid doing this so I'm gonna remove it and for mobile drop down I'm actually gonna avoid having this as well so I'm gonna put this to none and that's not too bad the next thing I want to do is change the styling of this now if we go to style we can start by doing the normal styling so for the text color I'm gonna change this to let's just change it to some of the global colors white and I think that's looking pretty cool we can also change the horizontal pattern here and I'm gonna leave it as zero just so it's in line with my heading here and I think that looks a lot more professional everything else is actually fine I'm gonna leave it as it is of course we can change maybe the vertical pattern whoops I don't know maybe something like this obviously you can spend a little bit more time doing the design that's looking okay so let me duplicate both of those things I'm gonna click on this one and do Ctrl and D or you can just right click and duplicate if you wish to and I'm gonna drag this one to the next container and in fact I'm gonna duplicate it one more time drag it to the next container and let's copy this menu one more time oops I didn't mean to do that so right click duplicate and then let's just try it in here we have a second menu here again this one is gonna be called one is gonna be cool let's say products for example and we're selling some sort of products and again you can create a new menu from the menu screen and maybe call it products and just list it in here I'm not gonna do that to save you some time you've already seen how to do it and the last thing that I want to do let's do something different for this one and what I'm gonna do I'm gonna go to element and I'm gonna look for a list with icons so this one here is pretty good I'm gonna drag that in whoop I'm gonna drag that in drop it in here and you probably can't see anything because the text is the same color as this so what I'm gonna do is quickly go to style change the and change the icon to be color of white for example when we could change it to maybe the accent color I don't know let's just leave it as white I think and then let's change the we can change the size if we wish to but what I'm gonna do I'm just gonna change the alignment to be in the middle I just prefer like this and then for the text I'm gonna change the text color to white then we could change the text indentation if we wish to but I'm gonna leave it as default maybe we can change the space between a little bit just so we can space them out and make it look a little bit more readable and now let's just edit the information by clicking here and content for the first one let's just do something like let's say address so this is gonna be let's call it London and I'm gonna go with Piccadilly Circus and let's choose an icon you can upload one yourself or you can choose one from the library and I'm gonna go for a house let's choose this insert then you can also link it by the way but I'm gonna not I'm not gonna do that but you can do it maybe you can link it to Google Maps or something and then for the second listing here I'm gonna do email so let's do hello at ready.co.uk and for the icon I'm gonna go with an envelope maybe this one here insert it's looking good again I can link this maybe I can just do mail to and then I can list my email so hello at ready.co.uk and that will work that will make a link but I'm not gonna do that and for the last one we can do a phone number so let's do a random phone number so I'm just gonna press some buttons here and that's looking good for the phone number let's choose another icon of phone this one here looks good and insert that's looking pretty nice let's quickly test this on tablet by clicking on the responsive mode here I've actually already got it toggled so I'm gonna click on tablet and I'm not sure if I like it on tablet so much if we click on phone on phone this is exactly the way I want it but if I wanted to change it on tablet a little bit we might have to give each column a specific width so potentially I can click on this column here and maybe give it a 50% width and I can click on this one here again give it a 50% width I'm gonna have to do the same for the other two just so they kind of like stack and the last one here 50% and I think that's looking good mobile it's looking good of course you can add some space between the columns if you wish and tablet much good and the step is good actually I'm gonna do one more thing I'm gonna add a line underneath here so let's insert another intersection and drop it in here and then for this intersection I'm actually gonna remove one of the columns so where is it delete and then inside here I'm gonna add some text so let's go with text editor let's try it in and what I'm gonna do and first of all we're gonna change the color so we can see what we're typing so text let's centerline this and also let's give it a little bit of padding at the top so I'm gonna do unlink this go with 40 then I this is too much maybe maybe 20 okay that's looking good and now I'm just gonna write some text here maybe I'm actually just gonna copy some maybe I can write the copyright in symbol and then do 2021 and then ready and then make maybe we can do build with Elementor and then maybe we can do slash or maybe we can add a dot instead this is just a character so I'm going to build with Elementor and then dot and host it on hosting like so maybe I can link them so I'm gonna copy a link from to Elementor I'm just gonna paste it in here just like so and maybe we can do one for hosting as well double click on the hosting and then link paste the link in here and that's it we are pretty much done with a photo it should be all responsive now as you can see and it's looking fairly nice all right to publish this photo we're gonna have to click on the green button here publish and we're just gonna have to add a condition and the condition is just going to be for the entire website if we save this and close we should be good to go now if I go back to my website and as you can see we have the head at the top and we have the photo looking quite nice which is good maybe we could have done with a little bit more space but these are things that can be improved later on okay now we can focus on building the front page let's click on edit with Elementor let's close everything else that we don't need and I'm gonna just start removing everything and start clean so I'm gonna remove this and also this home thing here we can remove by going to settings and hide title you might want to have a featured image for this page but I'm gonna leave it as it is for now and just update so at the moment if I go to the website as you can see we have the header and the photo but our page is quite empty okay let's start building the hero section for this so I'm gonna click on the plus sign here and I'm just gonna choose this here so I just want one column like so and we can start styling it if I click edit section and then go to the layout there are a couple of things that I want to do for the height I want to set this to minimum height and I want to set this to around maybe 600 and the reason for this is because I want to add a background image and to do this we can go to style and then in the background we can add background type as an image here so you can add a gradient you can add a video you can add a slideshow and so on okay so I'm gonna choose an image drag one in I downloaded this from unsplash.com link in the description I'm gonna put an old text and insert as you can see the image is looking quite nice but there are a couple of things that we need to do the position you can change from here if you wish to but instead I'm just gonna change the size here and set it to cover so no matter how big the screen is this image is always gonna cover the actual the section and it's gonna look nice that's pretty much all I want we could have a few effects if you wish to so for example scroll effect that I'm not sure if we're gonna be able to see this now but this is pretty cool so you could have a little effect where when you scroll down it gives you like a little bit of a parallax effect I'll leave this one on but I'll let you explore the other effects from here which are pretty cool the mouse effect is pretty cool which basically it can track the mouse so literally I can just do this which is super cool but I'm gonna leave this off actually and the next thing that I want to do is add some text and make it look a little bit more real so let's go to our element and let's just drag a heading this heading is gonna be html tag of h1 I do want to type something in here so let's do something like actually I can just type in here let me change the color super quickly so you can see so text color white and I can just type something in here so let's do a creative web development agency like so and that would be our heading and then let's add a little bit of text so let's go to element and then text editor I'm gonna add this in here and for the text we can just do let's change it to white super quickly so white and then let's just change the text to something like award winning digital agency with specialized design and development for web and mobile now if we were to press enter this this is gonna the this is actually going to create two paragraphs which is not ideal because there is now too much space and I don't want that I'm gonna go back and instead I'm gonna change the max width to be somewhere around here and to do this I think that we can go and advanced then we can go to positioning and width we can change from here so I can do custom and as you can see this kind of like this doesn't let it go anywhere below this box that we just created so 460 and I think that's gonna look good and also I need to add dot to make it look a little bit better all right I'm happy with this let's add a button as well so let's go with a button and for this button let's just do something like call now call now you can link the button of course to a page or a phone number whatever you like you can even add icons from here and so on let's quickly test this on tablet so if I click responsive mode and go to tablet I am okay with this I'm pretty happy with it and if you go to mobile that's working pretty well we could potentially make this section a little bit smaller for mobile and to do this click on it click on the section then go to layout and then here minimal height as long as you have mobile selected we should be able to change it like so and I think this looks a little bit more reasonable now for tablet again we can change it and we can change all of this by the way if I click on it and maybe I wanted to change where let's have a look I wanted to change this to be in the middle as long as you some tablet mode I can just click middle and I can do the same for the rest so for this one here I might have to do alignment middle but in fact I'm gonna have to change the the width of it now so that's so I'm gonna actually have to change the width of this now so I'm gonna have to go back and maybe do positioning and remove this default with full width I can set this to and but it doesn't it doesn't look so good so I'm actually thinking of just going back with control and z a couple of times and leaving it as this but you can change all this and make it look a little bit better if we update this and if we go back to our website let's have a look at what we get we get this nice mountain and we get the parallax effect and everything is looking pretty cool all right one more thing that I want to add on this one is a I want to add a divide on this and to do this we can go back click on the actual section in here and if we go to advanced I believe it is style sorry it's in style and if you scroll down you will see this shape divider so I can click on this and just maybe do a bottom one and do a type of let's have a look at what's there that's pretty cool I love this one but it doesn't really suit the website so let's keep on going and as you can see there is a lot of there actually okay I think this one suits the website so I'm just gonna leave it as this one here I'm gonna change the height a little bit just so it doesn't take too much space I think that's pretty cool okay so let's call it 80 just so it's a round number we can and yeah I think that's pretty much it so I can update this and go back and you see there will be a separator now it doesn't look so cool because we don't have the other section which we can focus on now so to create a new section we can just scroll down and click on here so this is gonna add a new section for us and we can select this structure I'm gonna keep this one super simple just two columns side by side like so and inside the first column I'm gonna add an image and before we do anything else I'm gonna space this out from the top so I'm gonna click on the actual section go to advanced and then unlink this and just do 40 maybe and bottom let's do 40 I think that would be good enough and for this this is gonna be kind of like our story section so I'm gonna add an image in here first of all let's add one drag and I'm gonna upload a new one so choose image let me drag one in I'm just gonna put our story for now and insert it as you can see this is looking pretty cool and what I'm gonna do is add a heading here so let's just drag a heading and this heading is gonna be something like our story so let's do or story and then let's just add some text as you can see once you get used to it you'll become a lot faster and for the text I'm just gonna copy some lorem ipsum let me just put some more basically and that would be it obviously this is zoomed in a little bit and one thing that I would like to do is maybe add a little bit of space between them and the way you can do this is by clicking on the section and then and then under layout you can just do column gap and then just choose one that suits you so wider and that gives you a wider gap maybe we can even go for a wider one I think that's pretty good so I'm gonna update this and quickly test it for tablet I'm happy with this but for mobile I'm lucky to stack and I think that's literally what I wanted so if you want it to change up then again you just click on the column and as long as this is selected you can just change the width and alignment if you wish to so the alignment for this could be potentially middle and maybe that works for you and your image and then that also works for mobile and so on okay let's update this and view it on the front page so refresh and as you can see it's all looking pretty cool and let's do two more sections and we can wrap this up so let's do another section super quickly I'm gonna have this section I'm gonna have this section as one like one column and inside here let's go and add intersection like so and in fact I'm just thinking of adding one more let's add one more in a section so the first one I'm actually going to remove one of the columns by right click and delete and inside here I'm just gonna add a title so click title and the title for this is going to be something like all expertise maybe we can center this in the middle and maybe we can give this section a background click super quickly click on the section here style and then classic color and then maybe we can just do this one here I mean it's quite bright but I think that it's gonna work also let's give it a little bit of part in by going to advanced and link and then maybe like 40 and then what's the 40 I think that would work well it's a little bit hard to see now but we have two columns in here and if I right click duplicate right click duplicate we now have four columns what I'm going to do now is go to the elements and I want the one with the icon so it'll be icon okay it will be this icon box here is what I want I'm going to drag one in and this is basically giving us an icon with a heading and a little bit of text I'm just going to change the headings and the icon and then leave it as it is so for example I'm going to do web design maybe I can change the icon for this to be let's say let's change it to brush you can put a custom one if you wish and then definitely the color needs to be changed to of the icon needs to be changed to maybe the primary color I don't think that's looking so much better so what I'm going to do is click on this control and D or command and D if you're Mac and paste it a few more times paste it a few times like so and then I'm actually going to click on this section here and give it a little bit of space from the title so I'm going to do is advanced and then we can do maybe margin for this so I'm going to do margin of 20 or 40 okay that's looking good if we change those super quickly so I'm going to do so for this one I can do web development maybe for this one we can do mobile apps and for the last one we can do user experience and let's quickly change the icon so I edit and then just choose an icon from the library so we can choose a coding one here laptop insert for the mobile let's just choose a mobile like so insert and for the last one I'm not sure what to choose for this one maybe maybe this one here that looks pretty cool so I'm gonna choose this this is probably the best icon actually so I'm gonna choose this and that's it now let's quickly have a look at how this works on responsive so if I click on responsive toggle as you can see this is a little bit too tight maybe but on mobile it's pretty good so I could potentially change it on tablet so if I click on this I can change this to 50% and I can do this one as well 50% and this one as well 50% and the last one here 50% so hopefully this shouldn't break anything else it's looking good and if you wish to have a little bit more gap between them you can always go on the outer section here and just choose the column gap so maybe white wider and so on and that's looking quite nice actually okay that's it so this section I'm going to consider done let's update here let's go back to the website and refresh so as you can see we scroll down we have all expertise and this is looking super nice as you can see only took a few seconds to do so for the last section I'm going to do something similar to this and the reason for this is because I wanted to show you how you can actually copy sections and move things around easily so what you can do here at the bottom there is a icon called navigator if you can see it if you click it it pops up this menu here and you can see all of the sections you see here you can actually name them if you wish which is quite helpful if you have a lot of sections but what I want to do now is I want to focus on this section here so as you can see it's selected and I want to duplicate it so I'm going to right click duplicate and as you can see this duplicates the section I'm going to drag this section down and we just created another section I could have dragged it from here as well and let me just close this so what I'm going to do now is I'm actually going to swap the position I want the text to be on the left side here so I'm going to click on this move it click on this one move it and instead of having an image I'm actually going to delete the image with the delete button on my keyboard and I'm going to add a video this time so let's me add a video and inside here I can actually link any YouTube video and and control it so for example if I put one of my videos from YouTube you will see that it comes up straight away and you can choose the source YouTube Vimeo daily motion or self-hosted I definitely advise you to do it through one of these three because if you self-host there it might not load as fast and so on basically YouTube is pretty fast I would suggest you do it through YouTube if you can and then you can change the start time anytime but you can have as autoplay you can mute there loop it and so on as you can see and that's how easy it was obviously this is going to be fully responsive we go that tablet again I could maybe again maybe I can click on this maybe I can click on this here and I can potentially change the vertical line to be in the middle if you wish to and that's pretty much it so let me save this and let's see how it looks like refresh and the whole website is looking fairly cool for the time that we spend I guess and the last thing that I wanted to show you is that if we go to one of these pages obviously they're empty like so but they're all working of the header and the filter if you wish to edit any of those pages you can click on their page edit page and if you have an editor with Elementor before you might have to do it this way so edit with Elementor and once you do it I think that it's you're gonna have the option at the top so I'll to remove for example the contact here where is it let's say remove title and I can start adding stuff so for this one as well let me actually show you something else so I could potentially drag a template for this maybe if we click on this button here this folder here we can choose from the templates here maybe I can do your contact and you will see that there is a lot of contact pages let me insert this one just to show you how it works yes it's gonna overwrite absolutely everything on the page which is fine and obviously I would have to change the images of course but how cool is this it's pretty nice actually obviously the fonts don't suit my branding but I can always go and change them and that's super awesome and this is all responsive as well so let's go just save there by the way let me go back to the website click on contact and as you can see it's all working super nice and that's gonna be everything for this tutorial I hope that I enjoyed it that I hope that you learned something new let me know in the comments below what would you like to see next and as always thank you very much for watching and I will see you in the next one