WordPress Blog Tutorial for Beginners 2026 - Step by Step

this video is going to take you from knowing absolutely nothing about building websites to having your own WordPress blog up and running in less than 2 hours I'm going to show you step by step Click by click how to create your own blog on WordPress whether you want to create a travel blog a personal blog a food blog a finance blog or any other type of blog this is the perfect tutorial for you the design of our blog is going to be very simple and clean in the header we'll have our logo and our navigation menu on the homepage we include a title an image and a newsletter signup section we'll also showcase our latest blog post on homepage on the blog page all of our blog posts will be displayed on the left and on the right we'll have our Side bar with features like a search bar an About Me section social media links another newsletter sign up option and our recent posts this sidebar will also be visible on the actual blog post as well then we'll have a simple about page and of course a contact page and at the bottom of our blog there will be our footer with the logo a newsletter signup section and again our social media links this blog will also be optimized for mobile phones and tablets to make sure it looks amazing on any device we will only be using free tools to build and run this blog so the only cost we'll have is hosting and I'm going to show you how to get the best hosting deal for your WordPress blog so let's not waste any time and get started building this blog [Music] all right so let's get started building your blog now as you probably already know we're going to be using Wordpress to build and run your blog which is still the best and most used option to uh create blogs then the next thing we're going to need is a hosting provider because we need to rent some space on a server where all of your website files or images your text is stored so that people can visit your website at any time and read your blog posts and then a the hosting provider that we're going to be using is called hostinger this is the one that I recommend this is the one that I use now you can also use another hosting provider if you want to then you probably want to skip to the uh part where we start in the WordPress dashboard of this video just skip ahead there but if you don't have a hosting provider yet then I would highly recommend you use hostinger again I'm very happy with them and I've been using them for quite a while so to to get the best deal with hostinger you want to go down to the video description and click on the first link you find there this is my personal referral link and this will make sure you get the best deal that is currently available now depending on when you watch this video this page is probably going to look a bit different because right now they have the Black Friday sale going on so everything looks a bit different here but as long as you see my picture here and the medx media logo then you're at the right place and you're going to get the best deal it's also going to enable you to use my coupon code which is going to give you an additional 10% of your hosting plans and by the way you also have a 30-day money back guarantee so if for any reason you want to uh not start a blog or use a different hosting provider within 30 days you can just get your money back no questions asked so once you're here just scroll down and go to the web hosting plans we're going to go for the business plan this is has everything that we need for our blog so we're going to click on add to cart then here we can choose our payment period which means how many months in advance we're going to pay for our hosting so the by far cheapest option is the 48 months option this way we can pay for four years of hosting today at this reduced price and this is going to allow us to save lot of money in the long run so I recommend to choose the 48 months option but you can also look at these other options right here just keep in mind that the free domain is only going to be included with these plans right here the three on the right side so I'm going to go with the 48 months option here then let's scroll down and here type in your email address and choose a password when that's done let's scroll down to the payment methods and before you choose your payment method or type in anything here make sure to go to the have a coupon code link here click on on it and then make sure to type in Medics media as a coupon code click apply and this is going to give you an additional 10% discount then once the payment is completed we should get to a page looking something like this now we want to get to our dashboard as quickly as possible so we save some time by not answering all these questions so let's just click on the hosting logo right here at the top and this will take us directly into the hosting or dashboard and here the first thing we're going to do is verify our email address the one that we have used to sign up for hostinger with so just go to your email inbox look for an email saying verify your email address from hostinger and then click on verify email perfect so now that your email address is verified the next thing we can do is choose our domain name the domain name is simply the name of your website so just like for Facebook the name name of the website is facebook.com for Apple it's apple.com so now we're going to choose our own domain name for our blog and because we have chosen one of the plans where the domain is included we can see here that it says claim domain so when we click here we can choose the domain the first thing I would recommend is to change the domain extension here at the end toa.com this is what most people are used to and what I generally recommend you're using you can also use one of the other ones here but I usually recommend to go with a do com if you can then here you can just type in the name of your blog so as I'm creating a travel blog as an example blog here I'm just going to type in madx travel and see if this is still available click uh check availability and as we can see here this domain is still available so let's click on claim domain then to complete the registration of your new domain you're going to have to fill out some contact details so just do that now and then move on to the next step once that's done we get to the next page where it says your domain is being secured so let's click on continue here then here we can just ignore this offer because we already have a hosting plan so let's click on skip I don't need a website and this should take us back to the hosting or dashboard where we we once again need to confirm our email address this time for the domain we have just registered so let's go to your email inbox and then you should see an email saying important verify your contact information for uh the domain you have chosen so let's just click on this link right here in your email and then when you get to this screen here we can basically close the page go back to our um hosting or dashboard reload the page and then we should be able to see the verif email verification status is now verified great so now that we have successfully installed your hosting and also your domain it's time to install WordPress so let's head over to home right here on the top left and then here under business web hosting let's click on setup then click on start now and then here we're going to skip all these questions so let's click on on skip down here at the bottom then let's click on create a new website and then here we can either choose the hostinger Builder or WordPress in this case we want to choose WordPress so let's click on select here and then here we're going to have to create a new WordPress account so I would recommend to just keep the email the same that you've used for your hosting provider then choose a password and click on continue now we don't need any pre-installed plugins on our website so let's just click on skip I will manage plugins later and the same thing goes for the templates let's click on skip I don't need a template and then Here Also let's click on skip I will write content later then here we can choose our domain the domain we have registered before is already pre- selected so let's click on select and then here we can choose our server location like I said the the server is the place where all of your website files will be stored so if you want to change it you can just click here and then you can choose any of these locations here um I recommend to just keep the server as close to your visitors as possible so if you have if you're going to have more readers in Europe then you want to choose one of these locations in Europe but if most of them are going to be from the US then you probably want to choose the North America server I'm going to leave it as it is here in the US and click on change and then let's click on finish setup then once WordPress has been successfully installed we can go to our WordPress dashboard by clicking on admin panel right here and now we are inside of our WordPress dashboard and as you can see here we have this checklist by hostinger which should help us building our website just ignore this for now we're going to disable the hosting or plug-in in a second um in fact let's just click on dashboard here on the left side so we get to the actual dashboard which most people are familiar with and if you haven't used WordPress before don't worry I'm going to take you through everything step by step and you're going to learn exactly how to and do everything inside of your WordPress dashboard this is basically how you build your site how you control your site and so on the first thing I want to show you though is how to get to your dashboard uh very easily because many people when they start a new site they don't even know how to get to their dashboard so the easiest way is just to uh open up your browser or open up a new tab here and then type in your domain that you have chosen before so for me this would be madx travel.com and then instead of just going to this side you want to type in for Slash and then type in WP for WordPress hyphen admin and then click enter and this will take us back back to our WordPress dashboard now as you can see here sometimes we actually need to log in again so just type in your WordPress Account Details and then click on login and this will get you back to your dashboard another way is to just log into your hostinger account and then you're going to go to websites right here here you can see all your websites here you can see this is our website and then we just click on admin panel right here and this will also automatically redirect us to our WordPress dashboard what I personally like to do is to just create a bookmark for this WordPress dashboard by just dragging down the URL from the URL box down into the favorites right here and then all I have to do is click on the bookmark and it will automatically take me to my WordPress dashboard great so now you know how to get to your WordPress dashboard and the first thing we're going to do in here is we're going to do some cleaning we're going to delete some stuff that we don't need and we also going to look at some of the basic settings so right here under dashboard we're going to just clean this up and just delete all of these boxes here by going to screen options here at the top right and then we're just going to disable all of these boxes here and as you can see this will make everything disappear here at the bottom don't worry we don't need this right now you can always add these things later and you can add whatever you want basically later on in this dashboard but for now we don't need anything we just want to make things simple for us then let's move on and go to posts later on I'm going to explain what the difference is between a post and a page um but for now we want to delete everything that is already in here by default so we have a Hello word post let's just select it here then click on move to bin up here click apply and then then let's to to delete it permanently we're going to have to go to bin and then click on empty bin right here and this will get rid of this blog post then let's move on to pages right here then we can see we have a default page which is a privacy policy page we're also going to delete this one by selecting it then going to bulk actions move to bin and then apply and then go to the bin and and empty the bin by clicking on empty bin there we go let's move on down the list here let's go to appearance and click on themes then here as you can see we have already three themes on our dashboard we're going to delete all of them but for now we can Al we can only delete these two because there's always one theme always has to be active so let's just click on this one here and then click on delete okay delete then this one as well delete okay and then this one we're going to delete it later once we have installed the theme that we actually want to use then let's move on and go to plugins right here here you can see that we have already three plugins that come pre-installed with um WordPress uh when you go when you get it through hostinger so what I want to do is just get rid of both of the hostinger uh plugins right here so I'm going to select them here um then go to bulk actions and first of all click on deactivate because now they are activated click apply and now select them once again go to bulk actions and then click on delete apply okay and now this has also gotten rid of the hostinger menu option here at the top left of the of the dashboard and the only plugin that we're going to keep is the light speed cache plugin because this is going to make our website faster and but for now we're going just going to click on deactivate because now we are just building the website so we don't need it yet so we're going to leave it at that for now later on we're going to install some more plugins to help us build our blog but I want you to know what each plugin is for so we're going to install them as we go building the website for now let's move on and go to settings and then click on General then here we can change the site title I'm just going to name this site Medics travel and then scroll down here you could also change the date format and so on I'm going to leave it as it is it looks good to me then clicks click on Save changes now we're going to go to discussion right here and then something that I recommend when you're starting out is to disable comments on your blog posts because usually you just get spam comments and it's very annoying to deal with them so I would just untick the allow people to submit comments on new post option right here and then click on Save at the bottom and then the last thing we have to do is go to peral Links right here and then change the post link structure so um I'm just going to go to this blog right here it's called nerd wallet and then you can see uh the URL here always has the blog um post name at the end of the URL and this is kind of the structure that we also want to use for our blog and by default you can see there's something weird here with the year the month and so on so what we want to do is just click on post name right here and then as you can see it changes and then we want to go back to custom structure and delete this last part this forward slash right here because as you can see here on this blog as well they don't have the forward slash in fact most blogs don't really have it so I like to delete this as well so I just click on delete and then we just have the um blog uh the website name for SL poost name so whatever blog post this is and that's it so let's scroll down and then click on Save changes all right so now that we have cleaned up our WordPress dashboard we are ready to start building our blog so whenever you want to see how your blog currently looks like you can just go to your blog name right here at the top top left of the dashboard then right click on visit site and click open in a new tab then your website will basically open up in new tab it will simply go to your uh website name the URL here and then you can see how the website currently looks like obviously there's nothing on here yet because you haven't done anything so let's go ahead and change that now the first thing we're going to do in the dashboard is we're going to add a new theme to our uh blog so let's go to appearance here on the left side menu and then go to themes then here you can see the theme that is pre-installed with a new WordPress account is the 2023 theme so what we're going to do is we're going to add a new one by clicking on add new at the top left and then we get to the theme Library where we can choose from multiple different themes the theme that I'm going to use for this blog is the ocean WP theme which is this one right here this is definitely one of the best themes you can use if you want to build a Blog and if you don't see it right here you can also just type it in the search bar ocean WP and then it will come up right here so let's click on install right here then click activate and now this new theme is active that means we can now delete the old theme that was pre-installed before so let's click on the 2023 theme and then on the bottom right let's click on delete confirm and there we go there's just one more thing we want to do and that is enable auto updates so just here below the the name you can see enable auto updates let's click on this and there we go so let's just now close all these windows right here and now we have installed the new theme so now we're also going to install a few plugins that will make building our blog a lot easier so let's head over to plugins then we can see there's one plug PL that came pre-installed this is the only one that we haven't deleted before plugins are basically an extension to your website that allows you to do things that you wouldn't normally be able to do with the default version you can kind of think of it like installing apps on your smartphone and because WordPress is so popular there are thousands of apps that you can install so the options of what you can do with your blog in the future are virtually endless so to install a new plugin we're going to Simply click on add new here on the top left and then the first plugin we're going to install is going to be our page builder which is called Elementor this is the most popular page builder out there so just type in Elementor here in the search bar and then here it comes up right now as you can see more than 5 million active installations so as you can see this is very popular and used by a lot of blogs so let's click on install now here now the next thing we're going to install is the ocean extra plugin this will just give us some additional features for the theme we have installed so let's come over to the search bar type in Ocean extra and it's this one right here so let's click on install now great now let's head over to our plugins let's go to plugins installed plugins and then we can see here are the two new plugins that we have installed currently they are not active yet so what we need to do is activate them so we can either click on activate right here just below the plugin for each one or we can also select the ones that we want to activate go to bulk actions and then click on activate apply and now we can see these two plugins are now active we can also see it because they have a light blue background here and we're going to leave the light speeed cache uh plug-in deactivated for now one thing that we do want to do is we want to enable auto updates so on the right side you can just click on enable auto updates for each of the plugins we have installed if you don't see this um this column here just go to screen options on the top right and then make sure the auto updates is checked then I always like to just close down these uh these windows right right here because they just make things messy now before we start building out each page of our new blog I want to give you a quick overview of what we're about to do just so it's a bit easier for you to follow along and so that you don't get lost so this is the basic page structure uh of a Blog we have the homepage we have a Blog Page which holds all of the blog posts this is the actual content of your blog then we have an about page and a contact page then you can also have more pages if you want to so in the future you can add more pages and you're going to learn how to do that as well but for now we're going to keep things simple and just focus on the main structure right here the first page we're going to create is going to be the homepage which is this page right here and the first thing we need to do is we need to create some dummy blog post just some placeholder content so we're able to create this design I've already prepar them for you to save you some time so now I'm going to show you how to import those posts let's go back to the WordPress dashboard then let's go to tools and click on import then let's click on install now for WordPress then click on run importer and then to download the dummy blog post you want to go to the link Down Below in the description it's probably going to be the second second one which says Google Drive and then you're going to be uh on this page right here this is all the files that I'm using for this blog you can just click on blog post right here and then you should see this file dumy posts you can just click on the three dots and then download download anyway then once you have them downloaded you want to go back to the dashboard where you have started the repter for WordPress and then you can simply click on choose file and then choose that file or I'm going to Simply drag and drop this file right here and then click on upload file and import then here choose the your account as the author and then also take this box right here and click on submit there we go now when we click on posts right here we can see we have six dummy blog post imported and now we also want to add the featured images for the blog post which are these images right here because we have to add these uh individually so let's Click on each of these blog posts and hold down command or control on Mac and this will open up them in a new tab you can also just uh right click and click on open in a new tab and then you have all of these blog posts open and then you want to go back to the gole Google Drives folder again the link is in the description and then go to blog posts again and click on blog post images and then you just want to download all of the images right here once you have them downloaded let's go back to the first blog post that we have opened before then go to the right side go to featured image and then click on set featured image then then you can just select files here or I'm going to just drag and drop all of them into the canvas right here once they're all uploaded I'm going to choose the first one click on set featured image and then click update and then we have to do the same thing for all the other blog posts as well so let's go to the second one and then scroll down go to featured image set featured image now the images are already uploaded so I can just select the second one set featured image update it doesn't really matter which image you choose because these are just placeholder blog posts so it doesn't really matter um just do this for all of the blog posts and once you have added all of the featured images you can just close all of the blog post tabs that we have opened and now we can start creating the homepage page to do that let's click on pages on the left side and then let's create a new page by clicking on add new let's name this page home and then we want to change some settings so let's click on this icon here at the top right page settings go to General and then for the content layout we're going to change it to 100% full width and we're going to disable the paddings here then we're going to scroll down and go to title and we're going to disable the page title then we're going to click on publish publish and now we can click on view page and this is the page that we just created as you can see there's nothing on here but when we look at the URL here at the top we can see that there is a forward slome because we this is what we have named the page but when we delete the home at the end of the URL and hit enter this will actually lead us to another page not the homeage that you have just created so we actually want the homepage to be uh just on our URL so we need to go to the dashboard and tell WordPress that this is our homepage so let's click on the WordPress icon here on the top left this will take us to the dashboard then let's go to settings click on reading and then for your homepage displays let's click on static page and then for homepage we're going to just select the page we've just created which is called home then click on Save changes and now when we go to Pages we can see that next to the home it says front page this means that this page is going to be the page that people will see when they just type in our URL so let's again click on our page here and we're going to be building this homepage using the page builder that we have installed which is Elementor so let's click on edit with Elementor here at the top now we are inside of the page builder where the first thing we're going to do is we're going to build this section here the top section of the homepage so this has two columns on the left side there is some text and the email signup section and then on the right side we have this image so let's go to our page builder and then we're going to click on the plus icon here and we're going to choose the two column layout which is this one so click on it and then we're going to go and drag in the first element so to see the elements we we can click on these nine dots at the top left and then we're going to look for heading and there it is we're just going to drag and drop this heading into the First Column like this and then we can change the text so I'm just going to copy and paste it from this example website here copy and paste it in here obviously you want to change it to your own specific tagline and then you can see that the text is this blue which is the default color now if you want to change this color we can simply go to style and then change the text color here but what we want to do is we want to define the global colors first so we don't need to to do that every time we add a new text element or any button or something like that so we what we want to do is go to the three lines right here and then go to side settings and then under Global colors we can set our default colors for the entire website now unless you are a designer yourself I recommend to use a predefined color pet with colors that already kind of uh work well together in of us trying to guess what looks good and then having our website look very bad at the end so to make it look professional um what I recommend is to use a tool called human I'm going to leave the link to this down below in the description this is just a color pallet generator you can use to just kind of find different variations of uh of colors that work well together and then you can just look for something that you like for your kind of blog and then just use the colors that you can see on top here I actually like to go to website here on the left side and then um we're going to keep things simple and just go with one accent color so I'm going to click on one accent and then you can see kind of a demo website with the color theme we can see here and if you don't like this you can just click on generate at the top right and then just look for different themes uh and then choose one that you like so I've decided to go with this color pette here we have this kind of grayish background the dark blue text and then also the red as a accent color now I'm going to use these colors I have them all locked here at the top just click on the the lock sign and then I can just copy the code right here so first I'm going to copy the uh the text color which is this one here just copy the code and then go to our page builder here and then I'm going to just use this for the primary color just paste it in here and also for the second one like I said we're going to keep things simple you don't want to add Too Many Colors otherwise um the chances of you messing up the side is going to be a lot higher um so now we have the accent color um so let's just take this here the red one go back and then change this to this color and then I'm going to use two background colors so I'm going to click on add color here at the bottom name this one background one so this is going to be the light gray color so just paste that in here and then I'm also going to just use an all white as a secondary background and just click here and then just choose the entire white so there we go now we have our color pet ready so we can click on update at the bottom left and then we also want to look at the global fonts so let's go back one step here and then you can see just below the global colors we have the global fonts let's click on it and then what I want to do is just use the same font across the entire blog so I'm just going to click on the primary one here the default one is Roboto which you can use if you want to that's fine as well I'm going to change mine to open sense and I'm going to do that for um for all of the different styles so open sense there you go now I have open sense for primary secondary text and accent now let's click on update then go back uh and then click on the cross icon and this will take us back to the default page builder View and we can see that for the heading that we have added the font and the color has now changed to the default ones and we can also see it when we click on it and go to style you can see the text color here has changed to the primary blue that we have added and then for the typography the font has also changed to to open sense so now we want to increase the size of the heading so let's click on the element go to style and then click on the pen icon next to typography and then under size we're just going to drag this slider here to the right uh maybe kind of like this and then I'm going to make this a bit Bolder so under weight I'm going to change it from 600 to 700 and then maybe decrease the size just a bit so we have three lines and then I also want to increase the line height just a little bit so let's go to line height here and just increase the line height maybe like this and that looks good once I'm happy I'm going to click on update next we're going to add this text just below the heading so let's go back and then click on the nine dots to see all the elements in this case we're going to drag in a text text editor just below the heading like this and then first I'm going to replace this text here so I'm going to just use the one on the example side here copy and paste it in here and now I also want to change the the size so I'm going to go to style go to typography and then just increase the size just a little bit I think maybe this looks fine 16 or even 17 and then I'm going to also change the line height just a bit probably like this looks good now we're going to also add the email signup section which you can see right here now this stab is optional so if you don't want to collect any emails and send out email newsletters then you can skip this step however I do recommend to add this and start collecting emails just from the beginning because maybe you want to use them in the future so let's go back here then go back to the elements then scroll all the way down and then under WordPress let's click on the drop down arrow and then we're looking for something called MailChimp this is going to be the email marketing software that we going that we're going to be using so let's drag in the MailChimp element just below the text here and then we want to do some changes here so I'm going to delete the title I'm going to also delete the text delete the gdpr terms and then your email is fine as a placeholder and then instead of the go I'm going to change this to join then I want to move this signup box a bit closer to this text so to do that we're going to go to Advanced and then we're going to take away some margin so I always have padding and margin margin is outside of the element and then padding is inside just so you can understand the difference I have this picture opened up here where you can see the content then we have the border right here the border is this magenta line around the element and then when you add margin it will add some spacing uh around the border and if you add padding it will add spacing inside of the border so that's something to keep in mind right now we want to decrease the margin so the one outside the border so we're going to unlink the margin values so we can just um manipulate each one of them separately so let's unlink them and then I'm going to take away some margin from the top and now as you can see the uh the uh sign up section moves closer to the text above and now something that you might have noticed is that the join button here is still in this default blue color and not in the accent color that we actually want to use and that's because we have only changed the default colors on the Elementor level so for the Page Builder and not really on the WordPress level so that's what we need to do now in order for us to to change the color of this join button so before we do that let's click on update to save our changes and then we're going to have to go to the customizer for WordPress and the way we do that is just by um copying our URL here at the top left just copy then open up a new tab here and then just paste in the URL and whenever we are logged into WordPress and go to our own website then we can see this bar here at the top so here let's click on customize then go to General options General styling and then here we can see that we need to change these colors as well so let's go back to our um color pallet and then just copy the accent color right here go back to the customizer and then under primary color we're just going to paste that in here all right and then for the hover color I usually just make this color a bit lighter so I paste that in again here this is the color that will will be shown when somebody hovers over the button so I'm just going to make this a bit lighter like this and then um we're going to leave these as it is the background color color I'm going to leave at White that's fine then for the color the link color I'm going to also change that to my text blue so this one here and just paste that in and for the hover color I'm going to change that to the accent color as well which is this one so we can copy it from here as well hover and then paste so we can now click on publish and now when we go back to our homepage by just deleting the end of the URL here hitting enter we can see that the color has now changed to our accent color so let's go back to Elementor and then here we can also reload the page so the updates are visible here as well now it's also red and by the way later on I'm going to also show you how to connect this signup section to MailChimp our email marketing provider so you can send out newsletters to whoever enter their email address right here so now we are finished with the first section of the homepage which is this one right here the next part is to add the image on the right side so let's just do that now let's go back to Elementor and then go to the elements and drag in the image element to the right column then we want to replace the image so let's click on choose image here then here click on upload files and then you can simply upload the image that you want people to see when they visit your homepage now depending on what kind of blog you're creating this might vary so if it's a personal blog you can just upload a picture of yourself if it's like a marketing blog you can add a picture related to marketing whatever kind of blog you're creating now if you're looking for copyright free images there's two websites I can recommend that that are free so the one is uh PEX excel.com here you can find a lot of free copyright images so for example marketing you can just type that in here and then you can find a lot of uh images that you can just download for free in a good quality whenever you download these images what I would recommend is to download the medium siiz version so when you click on the image and then you go to the drop- down and use the medium size otherwise if this if the files are too big this will just decrease the load time of your website which is uh something you want to avoid then another good site is unsplash.com they also have a lot of very nice copyright free images that you can just use for free on your website again here make sure not to upload the largest version so here I would also go with the the medium size so I'm going to upload a picture that I found on pexels I think it's just kind of a a traveling couple here then click on select and this will add the image to the right column now we also want to add these round corners that you can see here on this example page so let's go back and then select our image element then go to style and then under border uh we're going to just increase the Border radius so first let's unlink these values here and then we can just play around with this so we can maybe add let's say 250 for the top then for the right let's add 220 then for the bottom let's add 270 and for the left side let's add 240 obviously you can play around with this however you want this is just an example if you want to have a shadow around your image you can just click on the pen icon next to the Box Shadow and then this will add this kind of Shadow around the image and you could also add a border right here under border type just choose any border here and see how it looks so um for this example I'm just going to leave everything um as it is so I'm just going to add the rounded Corners now the next thing that you notice is that the alignment is kind of off so everything should be in the center as it is right here so let's go and highlight the or select the entire section by clicking on these six dots and then we're going to go to uh align items and we're going to click on the center right here and there we go now everything is centered now when we go to the example page you can see that there is a slight gradient that starts from this very light gray all the way to White so we also want to add this so let's go back here then let's again highlight the entire section and then we're going to go to style and then under background type we can either choose a classic so this would be just any color so here you could use just any color you want but I actually want to go with with a gradient so I'm going to choose gradient here and then I'm going to choose for the top color I'm going to put it to all white and for the bottom color I'm going to use uh one of the colors that I have in my pallet which is this gray here so I'm just going to copy this and then paste that into the color code here like this and now we have this nice gradient starting from here going all the way to the top the next thing I want to also do is add some spacing here to the top so the header isn't as close uh to the image so I'm going to again highlight the section go to Advanced and now I'm going to add some padding so I want to have some space inside of the Border going to unlink these values and then on the top I'm just going to add 30 pixels just like this and click on update now maybe we also want to add some more space between the text and the image and decrease the size a little bit of the image so to do that we could just go to the image element and then go to Advanced and then add some padding so I would just leave all these values connected and then just add the the values here so on each side we're adding some pixels here so we have some more space in between these elements as you can see padding always inside of the border so now we are done with the first part of the homepage and we're going to move on to the second part which is this part right here where we display the latest or the most popular blog post directly on the homepage people will also be able to just click on these posts and then it goes directly to the blog post now in order for us to create this very easily we're going to install a new plugin so let's go to our WordPress dashboard so go to the URL box type in your url then for/ wpen admin hit enter and this will take us to the WordPress dashboard now as you can see whenever you uh install new plugins uh they will the these boxes will kind of show up again so you're going to have to go to screen options and uh then untick all of these boxes if you want to keep things clean usually you don't need these informations here so let's go to plugins and then we're going to add a new plugin so let's click on add new and then going to look for something called post grid and it's just this one right here so let's click on install and activate then here let's scroll down and click on Save changes and then let's go back to our plugins right here and make sure to also enable auto updates so click enable auto updates and then also for this plugin that we've installed before enable auto up updates great so now we have installed the new plugin so we can go back to our Elementor um screen here and let's first reload the page and now when we go to our elements we can see we have some new elements right here so what we want to do is first create a new section just below the top section so let's click on the plus icon and now we're just going to create a regular one column section so let's choose this one here and then we're going to go back to elements and we're going to drag in this tpg grid layout let's just drag that in here and now as you can see it automatically shows us all of the block post the dummy block post that we have created before and now to make this look like exactly what we can see here we're going to do some changes so uh let's make sure to select the element then on layout uh layout one is fine so let's go to the settings then I want to disable the section title which is this one here so let's just disable this and then also disable the metadata then let's move on to exert content then for the exert limit I'm going to decrease the number of characters here just a bit so I'm going to do 170 and then for the read more uh button right here I'm going to change this from the default style to only text button and then I'm also going to uh do the icon here and here I'm going to choose one of the icons let's just search for Arrow I'm just going to choose let's say this Arrow here insert now we're also going to do some changes to the text colors so let's go to style and then we're going to start with the title so under title color let's click on the globe icon and then choose our primary color for the text and then I also want to change the hover color so whenever I hover over this text it changes to the accent color so let's click on Hover here then go to the globe icon and then choose our accent color now when I hover over the title it changes to the accent color then let's move on to the exert content this is this text here then change this color to the primary color as well and then for the read more button here I'm also going to change the text color I'm going to change this to the accent color so I'm going to go to the choose the accent color here and that's it now if you want to add these rounded Corners that you can see here we just going to go down uh under style to card post item and then under cardboard radius you just want to increase the size of this uh radius here let's maybe do 20 looks pretty good and then you can also add the Box Shadow which looks like this outside of the post here you can just um enable this by hitting the um pen icon here and this will automatically add the Box Shadow now we can also go ahead and change the the text size a bit here so when we go to post title and then go to typography here we can play around with the size so maybe we're going to make this a bit larger I think this looks pretty good and then for the text size we're going to go to exert content and then typography and then here we can also play around with the size of the text I think this looks pretty good so let's save the changes by clicking on update so now our post grid is completed the next thing we need is a title for this section so so let's go to our elements and drag in a heading then we're going to change the text to latest posts and then go to style go to typography increase the size to 36 pixels change it to a bold 700 and that looks good now let's also add some margin to the top of this section so let's click on it here and then go to Advanced unlink the margin values and then let's add let's say 20 or maybe 30 pixels to the top and then let's also add some to the bottom so let's add let's say 100 pixels to the bottom of this section and then one thing I forgot to do is to add some spacing between the heading and the blog posts so let's click on the heading element go to Advanced and then um unlink the margin values and then for the bottom we're going to add a few pixels let's say maybe 15 pixels is fine then again click update and now we are finished with our homepage so to see how this looks like we can just go to the I icon on the bottom left preview changes then the page opens up in a new tab and we can see how everything looks so we are done with the homepage the next page we're going to work on is our blog page which is going to hold all of our blog posts so let's go back here then let's go back to the WordPress dashboard and then here let's create a new page so let's click on pages and then let's click on add new then let's name this page blog and click on publish publish and now just like we've done with our front page the homepage we have to tell WordPress that this should be our post page so that WordPress will place all of the blog posts into this page so let's go back to the dashboard by clicking on the WordPress icon then let's go to settings and click reading and then under post page we're going to select the blog page we have just created then click save changes and now when we go back to Pages we can see that the blog page is assigned to the post page so let's click on it and then let's go to the Page by clicking on this icon here view page and here as you can see there are all of our blog posts that we have added to our website and now for this page we want to change the design to what we have here on the example page so here all of the blog post and then on the right side we have this sidebar as well and we're going to do these changes in the WordPress customizer and we don't need Elementor for this step so let's come over to the customizer by clicking here from here we want to First change the general layout here so let's go to blog then go to blog entries and then we're going to change the blog style from large image to thumbnail and this will change up the layout I think this looks much better than what we've had before now we're also going to disable the page title where it says blog here so let's go back uh two steps then go to General options then to page title and then under visibility we're going to click on hide on all devices and then this should be gone the next thing is we want to adjust the typography so we want to add our font as well well and then increase the size of the textt just a little bit so let's go back um to steps then go to typography and then under body we're going to change the default family to open sense or whatever font you're using I'm using this one so I'm going to choose this and then for the font size I'm going to increase this just a little bit to 16 pixels just like this that looks good so now we can click on publish to save the changes next we're going to take care of our sidebar so let's go to widgets then go to default sidebar then click got it and then first thing we want to do is just delete everything here um so we start with a empty sidebar so just click on the elements here then three dots delete and do that for every element that is in the sidebar and then the first thing we're going to going to add is this search bar here at the top so people can search for specific blog posts so to do that we're going to go back and then click on the plus icon and then just type in Search and there we go we just select this search bar here and then it should be automatically added to the sidebar the next thing we have is the About Me section so let's look for this just go to the plus icon search for about me and there we go we choose this and then we can uh just do all the changes here so the title should be maybe because this blog is for a couple I would change this to about us then for the image and we can upload we should be able to upload it here so let's click on upload image or actually this doesn't work so we have to upload it in our WordPress dashboard and then we have to paste in the link right here so to add the image let's go back to the dash board um let's actually just open up a new tab type in mics travel.com wpadmin and then let's go to Media right here and then you want to just upload the image that you want to use for the About Me section um I'm just going to drag this in and again you're going to find all these images in the Google Drive folder if you want to use the same ones um then I'm going to click on this image and then right here we have the file URL so we're going to copy that copy URL to clipboard and now we can go back to our blog and then we can just paste that in here paste and then as you can see the image changes now we can change the name here as well so this would be Jamie and Alex and then for the description you can also change this I'm just going to copy it from here copy and paste and then uh we can also add some Social Links so at the bottom right here we can add these Social Links um you can just type in your social URLs here so Facebook URL um and then Instagram URL and so on as long as you type in the URL here these icons will show up and the link will go to whatever you type in here so obviously make sure to actually add your correct social media links then next we have this newsletter signup section so let's just scroll down and then click on the plus icon then you want to type in MailChimp there we go let's click on this and then we can change some settings here I'm going to leave this newsletter then for the text let me just copy what I have here join journey paste that in here then I'm going I'm going to delete the accepting gdpr uh field label and placeholder is fine and then I'm going to change the go to join and now we have the newsletter signup section here in the sidebar as well then next we have the recent post so here I want to display the most six most recent posts of the blog so we're going to um look for recent and then we're going to go for recent posts here and by default it only shows three so we're going to have to increase the number to Six and now we have six you can also add more if you want to or less whatever you think looks the best and that's pretty much it for all these sidebar elements what we can do now is also increase the text size a little bit so to do that we're going to go back up here then go back to steps then click on typography and then we're going to look for the sidebar widget heading this is the headings right here so here I would just maybe add 15 pixels so to increase the size of these headings a little bit then go back and then also go to the uh widgets let's add 14 pixels like this and then we're done with the sidebar let's click on publish to save the changes then we can leave the customizer by clicking on the X at the top left so now just as a reminder where this sidebar will be displayed on your blog it's basically your blog page so when people click on the blog page they will see all the blog posts here on the left side and then on the right side is going to be this sidebar and then also on each of the blog post so when we click on the first blog post then the blog post will open up and people will be reading right here and then on the right side they always have the the sidebar elements here great so now we already have two of the pages completed of our new blog which is the home and the blog page and now we're going to quickly take a look at the blog post page itself this is going to be this page right here where people will read your content so this area looks pretty good we have a feature image at the top the title some metadata the content the text this is just some placehold text obviously and then at the bottom there's also going to be um other blog posts that are in the same category um so maybe let's go to another one maybe let's go to this one here and then let's scroll all the way down and then here you can see you might also like the reason uh why you can see this post is because both of them are in the same category which is the Europe category as you can see here by the way very nice picture of Rome right so now to make some changes here let's again and go into the customizer here on the top left then let's go down to blog then single post and then the only thing I want to adjust here is the information in the metadata right here so let's scroll down to where it says meta and what I want to change first of all is I want to change the date which is the publish date I want to change that to the modified date so if you update a blog post then people can see that you have up ated it on a specific date so I'm going just going to deselect the date by clicking here and then I'm going to add the modified date and there we go the second thing I'm going to do is I'm going to deselect the comments here so you won't be able to see any comment icon here as well and then you can also deselect the categories if you don't want to show the category but I'm going to leave it because for a d travel blog I think it makes sense and that's everything going to change the next thing I'm going to show you is how to change the name right here so currently it just says our domain but we can basically enter anything we want here so let's first save the changes by clicking on publish and then we're going to have to go to the WordPress dashboard to change this I still have it open right here so then let's go to users and then you can see we only have one user so far you can also add new ones by clicking here but let's just change the name of this one by clicking on the user and and then we're going to scroll down and then for the nickname we're going to change this to whatever you want so let's say maybe Alex and then for display named publicly as we're going to change it to the new one which is Alex and then scroll down click on update profile and now when we go back here we should be able to reload the page and see the changes right here and there we go now we have Alex as the author so now let's move on and create our about page so let's quickly show you what this is going to look like on the demo website I'm just going to go to about right here and then we can see we just have a a heading some text and then we have an image here at the bottom of the about page so let's head over to our WordPress dashboard then let's go to Pages add new then we're going to name this page about and then again we're going to do some changes here so let's click on this icon here at the top right then under General we're going to make this page 100% full width and disable the paddings and then under title we're going to disable the title then let's click on publish and now let's click on edit with Elementor and then we're going to create our first section here by clicking on the plus sign we're going to choose the one column section and now we're going to start with the heading so let's go to our elements and drag in a heading then let's change the text I'm going to change it to about us and let's go to style go to typography and then increase the size to 36 pixels and then make the weight a b old 700 and that's it for the heading now let's drag in a text editor let's go to the to the elements then drag in the text editor and now you can add your about text into this field I just used chat gbt to create a demo text so I'm just going to copy and paste that from the demo website and I'm going to paste it into this field and if you want to you can also highlight specific sentences by just um making them bold by clicking on this bold icon here just to make things a bit easier to read and another thing I like to do is just decrease the width of this text here just a bit so it's again a bit easier to read you can also add pictures uh along the way so if you go to the elements here you can just drag in images right here and then uh kind of tell your story how you uh created this blog or why you created this blog now I'm going to also add another uh text at the bottom here which is going to say um jam and Alex in this special font so let's again drag in a text editor right here then we're going to type in Jamie and Alex and now we're going to change the font of this text and let's go to style and then let's go to typography and then we're going to change the family here from open sense to maybe something like this um yeah I think this looks fine so you can just play around with these fonts I think I typed in something like handwritten or something uh maybe like this yeah that looks good so then I'm going to increase the size just like this and then I want to want to have it a bit closer to the text here so let's go to Advanced unlink the margin values and then for the top we're just going to decrease the margin like this and next we're going to also add a a picture so let's again go to elements then drag in picture and then I'm just going to add the same picture as in the sidebar which is this one right here click on select and then we can decrease the size of this as well by just dragging the Border here at the right side maybe a bit further like this and then I want to make this picture round so let's go to style and then for Border radius I'm just going to type in just a high number let's say a th and this makes it round then I can also decrease the margin here at the top so it's a bit closer to the to the names here so let's go to Advanced unlink the margin values decrease the top pixels like this and there we go now we have our about page and one more thing we need to do is increase the margin at the top and the bottom of the entire section so let's click on the section go to Advanced and unlink the margin values for the top we're going to add again 30 pixels and then for the bottom we're going to add 100 pixels perfect then let's click on update to save the changes now let's create the final page of our blog which is going to be the contact page let's quickly see how this is going to look like so on the demo page let's go to contact and then here we can see we have a heading we have some text and then we have this form field that people will be able to fill out uh to get in contact with you so in order for us to create this form field we're going to install two plugins so let's head over to our WordPress dashboard then let's go to plugins and then click on add new and then let's look for the plugin called WP P forms and this is the one that we need so let's click on install and activate and now we're going to again click on add new because we need one more plugin to have some more design options with this form let's go to the top search bar and type in qi add-ons and we're going to install this one right here Qi add-ons for Elementor install Now activate then once these two plugins are installed we're going to first of all enable auto updates like we always do when we create when we install a new plugin and then we have a new element here in the menu which is called Qi add-ons let's hover over this and then click on widgets and then we just want to deselect some things that we don't need with this plugin so we can deselect typography deselect business deselect create creative um deselect showcase deselect SEO infographics and then for the form style we're going to leave this on because this is the one that we need from this plugin for the wp forms and then we can also deselect the wers one and that's it now let's create our contact form using the wp forms plugin because we have installed the plugin we can now see the wp forms right here so let's click on it then let's click on add new let's go and then we're going to start from a template we're going to use this simple contact form template so let's click here then here I want to make some changes to this form so let's start with the name field let's just click on it and then we have some field options here on the left under General let's switch the format from first last to simp simple so it just asks for one name then under Advanced I want to hide the label so I'm going to take this option here at the bottom and then for the placeholder text I'm just going to add your name then let's move on to the second field the email field I also want to hide the label so let's go to Advanced and then tick hide label and then for the placeholder text I'm going to just type in your email then let's move on to the Third Field the message field and I'm first of all I'm going to make this one required by just ticking the required option so they actually have to type in something in here if they want to complete the form and then uh let's just uh delete the comment just let it be message or actually we can um delete this entire label as well by going to Advanced and hide label and then for for the placeholder text it will just be your message and then the last thing I want to do for this message field is make this larger so under field size we can change this to large great so that's our form let's click on Save and then close this window and now we can see that we have our simple contact form here under our fors so now we can go ahead and create our Conta page so let's head over to Pages then create a new page we're going to name this page contact and then again go to the options and under general make this a 100% full width disable the paddings and for the title we're going to disable the page title and then click publish and confirm then let's go to Elementor edit with Elementor then let's create our section first so let's click plus then choose the one column section and then let's drag in our heading like this then I'm just going to name this heading contact us and then go to style and under typography let's make this again 36 pixels and make the weight a 700 then I'm also going to add some text below the contact us title just so people can also see that they can send us an email if that's easier for them so let's go to the elements drag in the text editor right here and then I'm just going to copy and paste this text that I have on the demo page paste that in here and next we're going to add the contact form just below this text so let's go to the elements and now we're going to search for WP forms and because you have added the QI add-ons plug-in we can now see two different ones and we're going to use this one right here so let's just drag this in and by using this we get some more design options for our contact form so now I want to change the style of this form so it looks exactly like this form on the example page where we have the drop shadow the rounded corners and also the button in the accent color that goes across the entire form so let's go to Elementor and then make sure the element is selected then click on style and then let's start with the button style then under button full width let's choose yes to make this go across the entire width and then let's also change the color so under button background color let's go to the uh global colors and then choose our accent color like this then let's scroll down and go to spacing style then for the input padding we're going to add 15 pixels on each of the sides and then let's go to Advanced and now under border we're going to uh activate the Box Shadow so let's click on the pen icon and now we have the box Shadow then let's go go to layout and then add some padding inside of the form so let's first unlink the padding values then for the top I'm going to do one for the right I'm going to do 30 and also for the left 30 and then for the bottom Let's do let's do 18 and then let's also add the rounded Corners here so let's scroll down go to to border again and then for the radius let's add 30 pixels and now we also have this these rounded Corners so now we're done with the form the only thing we need to do is add some margin to the entire section at the top like we've always done we're going to add 30 pixels so let's select the uh the section go to Advanced unlink the margin values add 30 pixels to the top and then to the bottom we're going to add 100 pixels then let's save the changes by clicking update at the bottom left and now just so you understand how this form field works I'm going to do a quick demonstration so let's go to this page by clicking on the preview changes icon at the bottom left then our page will be opened up now let's just type in something random so let's just say sam email is Sam one23 or something at gmail.com then let's just hello I like your form then let's click on submit and then you will see a message thanks for contacting us we will be in touch shortly and then when you head over to your email inbox you will be getting an email every time somebody sends you a message through a form that says new entry simple contact form this is the name of our form and then you can see the information here so the name their email and then also the message they want to send you now you can reply to them directly from from your uh email account by clicking on reply and then you can see the email is already filled into to the recipient field then you can just start an email conversation with them all right so now we're done creating all of our Pages for our new blog and we can also see this in our dashboard under Pages we have the homepage the contact page the blog page and the about page now when we go to our website and see how it looks like then we can see that there's still still one thing missing which is the header so the logo and the navigation menu and the footer all the way at the bottom so that's what we're going to create now first we're going to uh create this um this menu here now we are on the example page so we're going to create this menu so let's go to the WordPress dashboard then let's go to appearance and then click on menus then here let's create a new menu so let's just just give it a name I'm going to name it main menu and then let's click on create menu now we want to add some pages to this menu so under Pages let's click on view all and then we're going to add the blog page the about page and the contact page let's click on add to menu and now we can also change the order of these pages so I'm going to start with the blog page then about then contact that's fine if you want to change it you can just move them around like this and then we want to tell WordPress where to display this menu and we want to display it at the we want to use it as the main menu and so we tick the main and this will mean it will be shown in the top header then let's save this menu and now let's look at our website again so we're going to go here right click open in new tab and now we should be able able to see our main menu here at the top now in order for us to change the style of this menu we're going to go customize and here the first thing we're going to do is disable this top bar which is visible above the header so let's go to top bar and then General and then we're just going to untick the enable top bar click on publish and now it's gone the next thing we're going to do is disable this gray line that you can see here just below the header so let's go back to steps then let's go to header General and then we're going to disable the header border bottom and now we're going to add an effect that will be shown when we hover over the menu something like this here where we can see this underline below the links so to do that we going to go back one step here then go to menu and under link effect we're going to choose the underline from left you can also play around with the other ones here and see if you like one of them but I'm going to use this first one here and then click publish and now we should be able to see this underline here below the links and now we also need to change the colors so for link effect color we're going to use our accent color so let's go to our color palette here then we're going to copy this code go uh back here and then we can just paste that code in here and now we can see that when we hover over it we can see the accent color we also want to change the link color to our uh regular primary text color which is this one here so copy and and paste in right here next I want to disable the search icon here at the menu so let's scroll down until we find the search icon and then for search icon style we're just going to choose disabled then let's click publish now we're going to also increase the font size of the menu so let's go back here two steps then go to typography then look for main menu and then for the font size I'm going to change it from 13 pixels to 17 pixels click publish now we want to also add our logo to the header so let's go back to steps then go to header and then click on Logo so here's basically where you can upload your logo and I want to quickly show you how I created the logo that I'm going to add for this website which looks like this so to create this logo I've used a tool called canva which is something you might already be familiar with if not you'll find a a link to this website down below in the description this website allows you to basically design pretty much anything very easily so sign up for a free account and then click on create a design at the top right then you already see a couple of um the templates you can use but we're going to do a c size here and then for the width I'm going to do 1,200 pixels and the height is going to be 200 then let's click on create design and then we have an empty canvas here where we can start our design and the first thing I'm going to do is I'm going to add some text I'm going to keep things very simple here so I'm going to add a heading I'm going to type in Medics travels and make this all caps then I'm I'm just going to make this a bit bigger like this and then I'm also going to add an element here on the left side so I'm going to go to elements and then type in let's say travel icon because this is a travel blog then under Graphics I can see different things I can use um everything with this Crown here is only available for the pro version so um if you want to have one of these elements you can either go for the pro version or you can simply pay for your icon one time I believe it's like a doll or something for one of these icons and but we can also go for a free one so maybe uh let's use this one right here this is a free one so we can just uh add this in here and then I also want to change the colors to my brand colors so for Medics I'm going to change this to let's see what we have here it's just this blue so let's go to our color pet and then P copy and paste this color code into canva text color and then we're going to just paste that in here and then for the travels I'm going to change this color to my accent color which is this one add new color and paste in the code and I'm going to also use this color for this icon just change the color over here and then we already have it in our pallet and there we go now I just created this in like one or two minutes so maybe you want to spend some more time on your logo um once it's done what I would recommend is to click on the duplicate page button and then I would change everything that is dark to a white to also have a logo for a dark background so I'm going to change the medic to a white and then I'm going to just change the entire background to a black so we can see how this logo would look like on a dark AR background then to download your logo you just want to go to share and then click on download and then if you have the pro version of canva you can click on transparent background and then the background will be removed but if you have only the free version then you can't use this option so we just want to click on download and now once you've downloaded it and to remove the background there's another free tool you can use which is called remove. B G you can just type in this in the URL or the Google search and then you'll find this website and then you can just drag and drop your logo into the website here and then the background will be automatically removed and you can just click on download right here and you can save your logo uh with a transparent background so once you have your logos ready we can start uploading it to the website so back here in the customizer under logo we want to go to select logo and then I'm just going to click on upload files and I'm going to drag and drop my logos in here I'm just going to drag in both of them so the one for the light background and the one for the dark background and I'm going to choose this one for the header let's click on select and then we want to make sure the entire logo is displayed so let's just drag out the borders here click on crop image and now obviously ly this is way too big so we're going to go and reduce the maximum width here to something like this and then we can also upload a retina logo this is for the desktops or screens that have more pixels and what you would do here is just double the pixel size of your logo so in canva you can just um when you download your logo you can just uh go to download and then for the size we just want to increase it to double the size so 1,200 becomes 2,400 like this and then download it again remove the background again and then you can upload your retina logo here as well so um just click on select image and then upload your uh your logo that is bigger in size so that the um it will still be displayed sharply when people use a RNA display so now I've added my RNA logo as well so let's save the changes by click clicking on publish so now we are pretty much finished with our header there's just one more thing I want to show you which is how to add categories here to the header menu as well so for the example a travel block might have categories related to the destinations uh they've covered here on the blog and we can add those here at the the navigation bar as well so to do that we're going to go to the dashboard again then under appearance go to menus and then we can go to categories right here and then we can add the categories here to the main menu so for example we could add Europe and then click on add to menu and then you can see here it will be added so we could maybe put it here in the front click on Save menu and then when we go back to our page and let's just load the regular page here then we can see we have now Europe in the navigation bar and when people click on it then they will get to the blog site of this category Europe where they can see all of the blog posts related to this specific category all right so let's move on to the footer of the website which is going to look like this we have two columns on the left side the logo And the tagline then we have the email signup section some social media links and then the copyright notice all the way at the bottom so let's head over to our website then go to customize here first go to footer bottom this is kind of the bar just below the footer which you can see here here we're going to add our copyright notice so I'm just going to copy it from the example website copyright medic travels 2023 just going to paste that in here and then I also want to change both of these colors so the footer color and the bar below the footer to my my um primary blue color so I'm going to copy it from my color palette here let's click on it copy and then for the background color I'm going to switch this to my own color then the text color um I'm going to reduce the uh opacity just a bit maybe let's do 55 or let's do 60 and then the links color we can leave as it is color we can leave because we don't have any links here and then we're going to click publish and now we're going to take care of the footer itself so let's go back one step then click footer widgets and then first we have to decide how many columns we want in our footer we're going to do two columns so let's decrease the columns here to two and then we also want to change the color so let's scroll down for the background color we going to use the blue again so let's paste that in here um text color is going to be uh White and Border colors uh we're not going to need them link color is going to be white that's fine and then link hover is going to be our accent color so let's just copy and paste that from here and paste that in all right now let's click on publish then let's go back one step and now let's add some content to the footer so let's go to widgets right here and then for footer one this is going to be the First Column so we're going to click footer one and then just like we did in the sidebar we can add the elements here so let's add our first block this is going to be an image because we're just going to add the logo and we already have it here so let's click on image and then we already have the logo in the library so we can click on media library and then we're going to use the uh version for the dark background so I'm going to choose this one click on select and now to decrease the size we're just going to drag this dot to the left and then just experiment until it looks good great now I also want to align this to the left side so I'm going to click on this icon and then click Aline left that's it now I'm going to add the next item which is going to be the text so let's click on the plus icon and then let's just use the paragraph and then we can just type something in here I'm just going to copy and paste it from the example page right here copy paste and that's it for the First Column now we can move on to the second one so let's go back one step and then go to footer 2 and now I'm going to first add an email signup section so let's click on the plus icon type in mail then we should see MailChimp because we have added the plugin so let's click on it and then here we can also mess around with the settings so let's just change this to join our journey for this davel Blog then the text I'm just going to delad all of the text then I'm going to delete this as well and then placeholder your email is fine and then I'm going to change it to join great so this is our email signup section now we're going to also add some social media links so let's click on plus then type in Social or social media and then we're going to click on the social icons here and then we can also do some adjustments so so I'm just going to change this to follow us on social media then the style I'm going to change this to the simple style and then to see how it looks uh we can just add some social media links so here you just want to paste in your link to your Twitter so I'm just going to type in Twitter so we have something in here and then whenever you type in something the icon will show up and when people click on it they will go to the link you just put in here so let's just add a few and then um I'm also going to increase the size of these icons just a bit so for the font size I'm going to change it to 25 pixels awesome let's click on publish great so now we have a nice looking blog on the desktop version but we also want to make sure that everything looks good on Mobile screen sizes as well because nowadays a lot of traffic just comes from mobile phones and tablets and stuff like that so you want to make sure everything looks good on all devices so to do that let's go to the WordPress dashboard and then let's go to pages and we're going to start with the homepage so under homepage let's click on edit with Elementor and then we want to go into the responsive view so on the bottom left let's click on responsive mode here and then here on the top we can see that we are currently on the desktop view we can switch to the tablet portrait View and then the layout kind of changes and then we can also switch to the mobile portrait mode now one thing to know here is that whatever we change here on the mobile portrait mode will only be changed on this View and not on the tablet or desktop view and whatever we change here on the tablet view will be changed also on the mobile portrait view but not on the desktop view so you want to go from left to right and then adjust everything to make it look good on these screen sizes as well we've already um optimized the desktop view as we can see here so let's move on with the tablet portrait mode here and the first thing that I want to change here is the size of this text so let's click uh to the element here and then go to style typography and then I'm just going to play around with the size here decrease it probably like this and then I'm also going to decrease the line height here so under line height let's decrease this to something like this and then just to check we can go back to the desktop view and we can see that nothing has changed here so whatever we change here on the uh tablet view um is it's not going to affect the desktop view and then we're going to also do the same for this text so this is a bit too large as well so uh highlight the element then go to style then typography and reduce the text size maybe like this then maybe decrease the line height as well just a tiny bit like this and this looks a lot better in my opinion then let's scroll down I think this looks good so we don't need to change anything here and then the footer is already optimized as well so now we're already done with the tablet view now we can move on to the mobile portrait view so here we also maybe want to change the size of of this text just a bit so click the element go to style and then typography change the size maybe like this then I'm going to leave this text as it is um this is fine and then we have the blog post just below each other that looks good as well the footer looks pretty good as well the only thing that we need to change here is the size of the logo but we can't change that in the Elementor Builder we have to go to the WordPress custom cizer so let's save the changes by clicking update then let's go to our website and then open up the customizer and then let's go to header then click mobile menu and then here we can upload a separate logo for the mobile version so let's click on select image and then choose one from our library we're just going to use this choose IM image and then under maximum height we can Define the maximum height in pixels so maybe you have to experiment with this a little bit I'm just going to use 35 pixels and then click on publish and then see if that is better so let's go back to the Elementor editor then reload the page then we have to go back to the responsive mode and click on the mobile phone and now we can see the logo is smaller and everything fits a lot better now I also want to make some changes to the mobile menu so I want to remove the text I want to change the animation when you click on it and then I also want to re remove this search bar right here so to do that we're going to go back to the WordPress customizer we still have it open here and then go to header mobile menu and then we're going to scroll down and first deselect the display menu text and then we're going to go to the uh custom hamburger icon and change this to 3DX to kind of change the animation you can play around with this as well if you want to use another one and then we'll also going to scroll down and deselect the mobile search so let's do all that and then publish save the changes now let's go back again reload the page then go to the responsive mode go to the uh mobile view and now we can see we have just the hamburger icon when we click on it we see this x right here this is the animation and then we don't have any search bar just like I wanted so the heading here could be a bit closer to the header so let's just adjust that as well so we can select the entire section go to Advanced and then under padding we're just going to reduce the padding um let's first unlink the values and then instead of 30 we're just going to add 10 and then we have it a bit closer and again this won't affect the other uh screen sizes so when we go back here we can see it's still 30 so now we are done with the homepage it looks good on pretty much every screen size so let's save the changes click update and then we're going to move on to the next page so let's close this window and then go to our WordPress dashboard then go to pages and now we're going to go to the about page edit with Elementor then go to the responsive mode and go to the tablet view here I would just increase the width of this text here so let's just drag this out and then we could also increase the size of this image so let's just drag the border to the right there we go then let's move on to the the mobile view and here I think the text looks good and maybe we could also change the image size yeah I think it looks good so we are also done with the about page let's click on update and then here for the contact page there's nothing we need to do because it already looks good on the tablet and also on the mobile view so now all the pages should be optimized for mobile screens as well but just to make absolutely sure I recommend to take out your phone go to your blog and then go through all the pages on your phone and see if there's still some adjustments you want to make now one thing that we still need to do is to connect our website to the email marketing provider MailChimp this will allow us to send out email newsletters to our subscribers the people who type in their email address into this field or when they read a Blog and then they type it into the the sidebar here or even on the footer right here so let's look at how to connect your website to MailChimp MailChimp is one of the most popular email marketing providers and I do have a complete tutorial on how to set up everything with MailChimp how to create email marketing campaigns and so on but now we're just going to focus on connecting MailChimp to your website so everything is automated and the email contacts will be in your MailChimp account once somebody signs up now you can sign up for free so they have a free plan for up to 500 contacts and then you can send out up to 1,000 emails per month so make sure you sign up for a free account and then once you have your account you can log in once you're logged in go to your account icon at the top right then go to profile then here go to extras and click on API Keys now we need to create a new API key so let's scroll down and click on create key then here we need to name it so I'm just going to name it by my website so uh Medics uh travels blog and then click on generate key and now we're going to copy this key by clicking on copy to clipboard now we want to go to the WordPress dashboard then here in the dashboard go to Ocean WP here just click on skip here click on integration and then let's scroll down to MailChimp and then here we can paste our API key then we also need the audience ID so let's go back to our mailchip account then click on audience go to all contacts then go to settings and click on audience name and defaults and then here under audience ID we can just copy our ID copy and then we can just paste that in here and then click on Save changes so now MailChimp is connected to our website so we can now test it out and go to our website here and then just type in a random email um random1 123@gmail.com and then click on join to see if this contact will actually end up on our our email list in MailChimp so let's go to the MailChimp account and then under audience let's go to all contacts and here we can see that the email we have just typed in is now on our email list and we can start sending them our newsletter and again if you want to have some more information on how to set up your entire MailChimp account and how to set up your first newsletter campaigns then I'll leave a link to a MailChimp tutorial Down Below in the video description that you can watch it will walk you through everything step by step now there's one more plugin I recommend you add to your website this is a security plugin to make sure your blog is safe and this is called word fence so let's go to plugins add new then type in word fence and it's this one right here let's click on install Now activate then click on get your word fans license then we're just going to go for the free plan here get free license then let's click on this link here I'm okay waiting 30 days and now let's just type in your email then here click uh yes and accept the terms and click on register then go to your email inbox and you should find an email that looks like this your word fence license click on it click on install my license automatically and then again click on install license great now the license is installed we can click on go to dashboard then let's go back to our plugins and then here we're now going to also activate the light speed cache plugin which will make our website faster because it will use caching so let's click on activate here and then we also want to make sure that all of the auto updates are enabled for all of our plugins so there's just one we need to do it on which is the new word fan security plugin so let's click on enable auto updates here congratulations on building your very own WordPress blog make sure to watch this video next where I show you step by step how to index your new blog with the Google search engine and also how to write optimized blog posts that will actually be found on Google so make sure to click this video and I'll see you there