How to Make a Customizable WordPress Blog in 24 Steps - 2024

this tutorial is a complete guide on creating a customizable WordPress blog it's Unique because it's actually part one of a two-part Series in this first video you'll learn how to build and customize your blog the second video to be released in a few weeks time will delve into monetizing a Blog and how to make a passive income from it so for this video I actually dedicated over one month to create this tutoral to make sure that it's personally something that I would want to watch as well because I remember the ini ual confusion and frustration when I started to create a blog using Wordpress I didn't know which themes or plugins to use and I could never get the result that I wanted so this really motivated me to conduct a lot of research on popular blogs across various Industries as well as identify things that were actually missing in existing YouTube tutorials so after a lot of Designing testing building recording and editing this is the final result and I've broken it down into 24 simple steps so that you can follow it to create any type of blog that you want so let's jump in and explore exactly what this tutorial covers so let me give you a quick tour of exactly what we're going to be building today so I'm going to show you guys how to create a free logo and add it onto your blog I'll also show you guys how to add in a Fab icon which is the little icon that you see on your tabs then I'll show you guys how to create your simple header design with your different pages and navigational menu I'll show you guys how to create a simpler page and obviously you can change the layout or anything like that as well I'll show you guys how to add in a blog page to display your blog post I'll also show you guys how to add in this over here which is called the mega menu and here you can actually display your different categories and posts in a very visual way and I'll show you guys how to create a simple contact page with a contact form and a map and I'll also show you guys how to create a search function so basically people can search for specific keywords to look for your blog post and they can click into the results so this is especially great if you have a lot of blog post then I'll show you guys how to add in your hero section so you can have a slider image or just an image or even a video background I'll show you guys how to add in text and buttons and scrolling down here to the body of our homepage we have this section here which actually links to your specific categories and you can actually create any type of design and layout that you want because everything's going to be a visual front end drag and drop Builder so you don't have to switch to a different theme you can build everything with just this theme so here we've also got a really cool feature where people can click on the different categories and it'll actually show the specific categories only like that and on the right hand side we have a very simple sidebar which is totally customizable with the content that you add in here so in this case we've got an image some text social media links as well as the mustre Articles and here you can also add in a Banner advertisement it could be an affiliate link it could be Google AdSense or it could be just like a sponsorship and we've also got the categories again but again you can change the layout if you wish and scrolling down here we have an email sign up form which I'll show you guys how to add I'll also show you guys how to add in an Instagram feed as well as a very simple fooa design and a back to toop button like that so probably the most important part of a Blog is the blog post itself and in this tutorial I'll actually show you guys how to add in a table of contents so this is a very popular feature among popular blogs but not many tutorials actually show you how to achieve it so in this tutorial I will show you guys how to add it in and your viewers can actually click on the specific heading and it'll scroll to that specific section and what's cool is it actually stays there so it's also known as a sticky and for your blog post we have a title here image and then we've also got social media sharing icons so if your viewers like the post they can share it on their platform to their friends really easily and for your blog post you can literally add in any type of content that you want anything from the Builder and you can add in links uh for example your affiliate links um images videos and things like that we've also got a sign up for Weekly Newsletter again and you can change the position of that if you want to you know even add it to your sidebar as well and we've got a related post so displaying posts from the same category and we've also got a section where your visitors can actually leave a comment and you can reply to them as well and another really unique feature is that for this specific blog post we have a different sidebar so instead of having the content sidebar what I've decided to do is I just wanted a simple sidebar so what you can actually do is you can create different sidebars for different post or specific categories as well so for example this category which is the stories category I didn't really need a contents so I just created a very simple sidebar basically just to demonstrate how you can actually use it so again this is a very popular feature among popular blogs and not many tutorials actually show you guys how to actually do that and of course your blog will be mobile responsive so it's going to look good on all mobile devices and tablet devices I also tested our blog on G2 metric and we scored close to 100 so this is really important because it means that our website and blog is loading quickly and that's going to be important ranking Factor when you want to rank your website on top of Google to get traffic to your website so before we actually get started in the tutorial I just want to mention that all the resources and everything that I mentioned will be linked in the description below including the download links for the theme plugin as well as the images that go along with the tutorial and I've also written down all the timestamps in the description so you can skip to any step that you wish and also make sure to subscribe because in in around few weeks time I'll actually upload part two which I'll go through exactly step by step on how to monetize your blog and how to make money so what do we need to get started with our WordPress blog the first thing that you'll need is a Hosting account so what is hosting hosting is essentially a bunch of computers also known as a server that allow us to store our website and blog files there so for example your images and text and this allows visitors all around the world to visit your website 24/7 the second thing you'll need is a domain name so domain name is just going to be your website's address for example your name or your brand name.com my one is hogan.com Google's is google.com and we can actually get those two things at hostinger which is one of the most popular hosting providers out there because they have really affordable plans and they also have really fast servers that allow your website to load really quickly and they make it extremely easy for us to install WordPress so for those of you who are not sure what WordPress is they are a Content management system and in short it's sort of just like a software that you add onto your hosting and that allows you to create a website blog or e-commerce site without any technical or without any coding knowledge and an interesting fact is that they actually power over 40% of the internet and they're by far the most popular way to create a blog so you can actually get hosting at other hosting providers as well so you can actually follow along even if you don't get hosting it but I do highly recommend them so without much further Ado let's get started so to get started in this tutorial you can click the first link in the video description which is going to take you to this page that hostinger have created for our viewers essentially giving you guys a discount on the web hosting plans so here we have three different plans that you can choose from to get started with your WordPress blog you've got the Premium plan business plan and the cloud startup so generally for most people I do recommend and the business plan because for the price you do get the best value so you get the increased performance you've got the nvme storage daily backups for your website and blog you also get the free CDN included so essentially the CDN is sort of like a network of computers that are around the world and you sort of save your website's data there and it allows users all around the world to access your website it basically loads faster for them and it is a really great feature so over here we also got the cloud startup so if you want the best performance and you have the budget then you can go for the cloud startup but again it comes at a much steeper price especially when you renew you've also got the Premium plan so if you are on a tighter budget you can also choose this plan over here so you got the standard performance you get the weekly backups instead of the daily backups and you don't get the free CDN so with all three plans you also get the free domains included which is is really great cuz a lot of Hosting companies actually don't include that so for this video I'm going to go ahead and choose the business plan but you can choose any of these three so click on add to cut so we can scroll down over here and you can choose a period so generally I recommend 12 months or longer so if you go for the month-to Monon plan it's not really worth the money because let's say for example we do get it it's like $14 per month and if you keep your website for 12 months then it already equals around $170 and it doesn't include the free domain name either so you also add another $5 for the setup fee and essentially it's the same price as if you get the 48 month plan uh which is 4 years and as you can see the price there so it's not really worth the money now the main difference here between the 12 and 24 and 48 months is going to be the lower pricing and you can also see the lower pricing as it use as well so if you know that you're going to keep your website for a long time then you can go for a longer term but for this tutorial we're going to just select the 12 month plan and we're going to scroll down so here we can create your hosting or account so just entering your email and your password so this is basically to log to your Hosting account or you can use your Google or Facebook account as well so over here we can select a payment method enter in your details and we can scroll down and and here we can click on have a coupon code so you can enter in the coupon code Hogan Cher so h o g n c Hua and then click on apply and hopefully that's going to save you some more money as well so I believe it gives you an additional 10% uh discount or so and then once you're ready then you can enter in your credit card details and click on submit secure payment so I'm going to quickly do that and I'll see you guys on the inside okay so from here we can click on start now and I'm going to click on skip I don't want the personalized experience because I'm going to walk you through exactly what to do so here we can click on create a new website click on select and we're going to be using Wordpress to create our blog so we're going to click on select and here we need to create our login details for our WordPress account so enter in the email that you're going to be using to log into your WordPress account with so I'm going to set in my email and set in a password then click on continue so from here it's going to ask you to add some plugins to your website so what we're going to do is just Skip and I'll click on manage later and we're going to scroll down as well and click on skip I don't need a template so I'll show you guys which template we're going to be using so click on that and here skip I'll write the content later so here we can claim our free domain name and we're going to click on select so if you are creating a personal Blog then I might recommend choosing just your personal name for example my one is hogan.com you might go for your name.com or whichever extension that you may want so if you don't want to choose your personal name and you're not sure basically what name to call your blog and website then you can go to a website called Nam links.com and you can enter in a few keywords so for example if you want to create like a food and travel blog so you can type that in and then click on generate and here we can just select auto style click on next for the randomness if you want some more ideas then you might select the high option and click on next and here we can enter in the brand information so we can create a food and travel blog for the one sentence description so you can add that in or you can ignore that and then click on on generate and as you can see we have a ton of different ideas here and you can take inspiration from that and come up with a name to enter in here so I'm actually going to create a blog sort of for like creators um helpful tips and reviews for Content creators so I'm going to call this one next Creator and I'm going to select the extension and click on search so as you can see it is not available cuz someone else has taken it already so perhaps let's just take away the O next Creator something like that and click on search okay so if it is available then click on continue and what I'm going to do is just click on next step and essentially I'm going to fill in the details over here so once you fil in your contact details then you can click on finish registration and that's going to help you register your domain name so here we can choose our server location so you can click on it so this is especially important if you are a local business so you can choose a server location which is closer to your audience allowing your website to load faster so generally for a Blog so if the main language for your blog is English then I'd probably select uh a server in the United States so I'm just going to keep it as North America and click on change then we're going to click on finish setup so what you want to do now is to make sure to verify your email address with hostinger so go to your email and let's verify our email so let's go back over here to our email address and click back to inbox we also want to verify our domain for our contact details so let's click over here and we want to click on this link and we're going to verify our details we're going to accept and please select one of the options we're going to click on approve and then we're going to click on submit so once you've verified your domain name as well as your email address then we can head back over here and click on the admin panel and that's going to redirect us to our WordPress dashboard area and if we go and visit the site this is going to be the front end and what your visitors will see so let's head back over here to our dashboard so I wanted to show you guys basically how to log out and log back in so if you want to make changes to your website let's click on log out and if you want to log back in you're going to be greeted with this dashboard so we need to type in our domain name and then type in wp-admin and then click on enter and this is going to redirect us to the login page of Wordpress so this is where you enter in your details that you set in earlier for your WordPress account and you can click on login so another way to actually log in is if we head back over here we can click on manage site and you can log in through the H panel area of your hostinger's account so basically you'll need to log into hostinger with your details and then we can navigate to websites and then over here we can click on admin panel and then that's also going to take you back to the WordPress dashboard area so as you can see that's also going to take you to your WordPress dashboard area and you can start editing your blog so what we're going to do is we're just going to close all the tabs above here and let's just close them all okay so step number one and two we've completed those so I'm just going to cross that out and the next step is basically setting up the best settings for your WordPress website so let's click back to your website and you want to click on the dashboard over here and what we want to do is clean up this dashboard area because once you actually get started with building a website it becomes quite messy in your dashboard area and Things become quite confusing and most of the time you don't really need all this information showing so what we're going to do is actually just dismiss this over here and let's just minimize all of these minimize that minimize that now if you do want to remove them you can also click on screen options and we can remove that as well because once you start adding themes and plugins and adding post it's going to be quite overwhelming so we want to try and clear things up first of all and here we want to hover over settings and then here we can click on permal links so we want to make sure the permal link structure is set to post name basically which will show your post title in your url okay or your page title in your url so you don't want something like like this P1 23 because that's not very search friendly or user friendly so choose post name scroll down and save changes then the next step we can hover over users over here and we can click on all users so here this is you and we can click on edit here you can actually change the color scheme of your website too so you can update that depending on essentially what you want so I'm just going to keep it as modded and we're going to scroll down over here and just enter in your first name or it could be Alias name and you can also enter in a last name if you want to as well so basically we can actually display the name publicly as your name otherwise when you are adding blog post then it's going to show the website name which is kind of weird so we want to put our name here so we can select it so once we're done we can scroll down over here you can also set in a new password if you want to here as well and then we can update profile so another thing that you can actually do for your website is to add a profile picture and you can actually do that through gravitar so you can create a free account on gravitar and add your profile picture so then it's going to show you as the author of your site so once you've done that you can click on update profile and with plugins so plugins are essentially applications that you can add onto your website and they give extra functionality for it so you may have the hosting AI assistant activated and what I do recommend is probably deactivating for now cuz we're not going to be using it and same for all plugins that you're not currently using so especially if you follow like another video or you just want to start fresh I do recommend just deactivating most of the plugins that you're not using because it just makes things a lot simpler so let's just close these on the top over here and appearance is essentially where we add the theme and I'll show you that in a minute so comments is where you can manage your blog post comments you can basically approve them or you can uh trash it as well and Pages this is where you can create your pages for your website like your homepage Services page Blog Page media this is where you can upload all your images so then you can choose your images to basically use for your website and post is basically where we can add in our blog post so right now they do have a Hello World post which which is let's open that up close that for now and over here is the hello world sample post if we actually go and update that and let's click on view post then this is the blog post okay so what I'm going to do is actually just go ahead and select it and then we can just move it to the bin apply and go to the bin again and then delete permanently so step number three is completed so let's just check that off and we're going to go ahead and install our theme so the theme is basically going to be the appearance of your website and it also features the drag and drop Builder which basically allows you to build any blog or any website that you want without any code so let's click on appearance this is the default Theme by WordPress themselves so the 2024 last year was the 2023 theme and every year they will come up with a new theme but it's quite basic in terms of the features it's very very simple and you can't really customize it to the way that you like um you can but it does take some work and yeah it's quite Limited in terms of features in my opinion so we're going to go ahead and add a new theme and there's quite a lot of different themes you can actually use as well uh most of these are going to be free um and if you do want additional features you do have to pay for it as well so the theme that I personally like is themify ultra so this is one of the most powerful and flexible themes that I know so it's not as popular as for example like the elemental themes and things like that but in my opinion I think it's quite easy to actually use for beginners so I've actually partnered up with themify to share this theme with you guys for free so it is a premium theme um but you can you know update it and you can actually get the support if you do want to but you don't need to right you can continue to use the theme um however you like even for your your own website or for your client site so we're going to go ahead and install it so before you can install it you'll have to download the theme which is going to be in the description of this video so the file should look something like this themify dultra doz now sometimes your browser may actually unzip it um into a folder so you want to make sure you actually compress it back into the zip file because you won't be able to upload the folder and I've also got a link to download the contact form plugin as well as well as the images to follow along with this blog tutorial so you can download that while you're there and let's head back over here so upload theme choose file select the file so make sure it's zzip and click on open and then install now and then let's click on activate and you may actually see the skins and demos pop up um but what we're going to do is just keep it as the default skins and demos and just click on save so you can actually change the Skins a little bit later so basically it changes the fonts and some of the styling of your site but let's just build out the basic layout first and then we'll talk about um changing the colors and the theme a little bit later on so once you've done that and selected the default one we can go to our website to see what that looks like on the front page so you can click on the top over here okay and that's going to direct you to the front end so this is what your customers or your visitors will actually see and if we go back here to our dashboard so this is also known as the back end of your site so this one is actually from the theme itself we can actually minimize that if you want to and what we're going to do now is we're going to go ahead and create some new pages so step number four install theme is done so let's just check that off and the next step is to create your pages so let's come back over here to your dashboard section and then we can click on pages and we can click on add new page and for the title we're going to create our first page which is going to be our home and then on the top right click on publish and you'll need to click on publish again so if you just want to click on publish one time without the pre-published check you can also disable this and let's click on publish so now the page is live so you can access your page by clicking on view page you can also click on view page on here as well so let's say for example let's open this in a new tab and this is the homepage right so we're going to add a few more pages then we're going to set this as your actual homepage without the for slome so for example when you click over here then it's going to display so I'll show you that step by step shortly so let's go back over here and let's click on the WordPress icon to click on view Pages again and let's click on add new and we're going to add about page publish and then we're going to come back over here add new page so this one is going to be the blog page and publish again and then we'll add our contact page so let's click over here again add page and you can create as many pages as you need so pages are going to be sort of sort of like a static Pages such as your homepage about page contact Pages um it could be like a products or Services page and your blog post will have basically sort of like an author and then it'll have like a category as well as a date and things like that so that's where you publish sort of your blog post articles click on view page over here and you can manage your pages here so let's go to our site and as you can see the pages will display on the top so let's click on the homepage and what we want to do is make this our actual homepage without the for slome so let's go to customize and then let's click on back and homepage settings set a static page and for the homage select home then click on publish and close Okay so as you can see this page now is just your domain.com The Next Step before we actually turn on the Builder and start building is we need to configure the default sort of page layout first so as you can see we only have a small sort of space to drag in our modules and build the website what we want is sort of like a whole section so as you can see we can create our sort of custom layout like that so what we're going to do is head back over here close that and let's navigate to the dashboard themify Ultra hover over here click on themify settings then click on default layouts click on default page layout so essentially this is going to create the default page layout for all your pages and I want to select node sidebar and you can also hide the title so let's click over here so we can hide the title and as you see we've selected the full width one without the sidebar so this will be removed so let's let's select hide fatet image let's just leave that as is Page comments I'm going to disable that then click on Save and if we come back over here refresh this page then right now you're going to see the title has been removed as well as the sidebar so if we turn on the builder then we sort of have an entire section to work with for our layouts so step number five is done so let's select it and let's check that off and the next step step is to edit the menu navigation which is the menu here so as you can see it's not in order right now it's because we haven't set it in yet so to customize it we can click on customize on the top and then click on the back arrow then click on menus and here we want to create a new menu so for the menu name I'm going to name it top nav for top navigation it doesn't really matter what you name it as long as you personally know what it is and we can set it to the main n navigation so if you set it to the footer navigation it's basically going to appear on the footer section which is the bottom of your website so we want it to appear on the top so let's set it to Main and click on next and over here we can click on ADD items and from here we can add the pages that we want to display in our menu so I want to add the about page the blog page and the contact page and we're going to leave the homepage out because generally when you click on the logo it's going to redirect to the homepage anyway so let's click on publish and you can see how that looks so as you can see it's going to be about blog and contact it's in order if you want to change the order you can click it and you can drag it and sort of drop it on the top and the order is going to change like that you can also do a drop down menu so for example let's say you want the blog to drop down for about then you can put it under so sort of put under about and indent it and when you hover over it it's going to drop down you you can also do like for example contact under blog as well so drag it and sort of put under blog and then that's going to drop down again so about blog and contact so it's very simple to set in the menu navigation I'm going to put it back and then that is looking all good so once that is good then we can publish that so a little bit later I'll show you guys how to create the mega menu essentially allowing you to display your categories and post like this so people can navigate it quite easily your entire website and let's head back over here and let's click on close so there is another way of setting the menu which is the back end of your website so you can actually go to your dashboard section here as well and you can go to appearance and then you can go to menus so it's essentially the same thing but on the back end of your website right so you can also click on the manage uh with live preview and it's automatically going to direct you um to the front end to edit your menu okay so in this section of the tutorial I'm going to show you guys how to create a free logo and a free Fab icon which is the little icon that you see on the tab over here and show you guys how to add it onto your website now for those of you who have a logo already then perhaps you can skip this part but I do want to give you just a few tips before we actually get started because sometimes when people follow my tutorial they add in the logo and they show me the website and it doesn't look very good so so for example one of the big mistakes that people make is when they add in the logo over here they don't upload a transparent file format so as you can see that's a JPEG and that's a non-transparent file format basically it has a white background on it so as you can see it does look transparent but if you actually change the header so for example we changed the header background to any color it's going to have a white background and that's not going to look very good so so what you want to do is you want to make sure you upload a transparent PNG file format and what you can do if you do have a JPEG logo you can go to a website called remove BG and upload image and then click on open and that's going to take a few seconds and it's going to remove the sort of white background on it and then you can download it as a PNG file format and then from here you can upload it onto your website so then when you change the header color it's going to be transp so another tip that I do want to give is sometimes people upload a logo which doesn't fit the size of the header section so as you can see the header section is quite sort of uh narrow it doesn't have such a big height on it so therefore you want to create a logo that fits into that space right so think of your logo sort of like a fridge and let's say if you're moving into a new house sometimes you have a limited amount of space to put in your fridge or you know maybe let's say you might even want to put like a bed in your bedroom and you might have a limited amount of space so you want to get something that fits into that space right same with your logo you want to make sure you manipulate it a little bit so it's basically like horizontal in style like that for example sometimes I see a lot of people upload a sort of really big type of square logo like this and when you resize it for example like let's change it to 64 it creates a big space here and yes you can actually move the navigation down but then again I feel like it doesn't look as good so you can perhaps manipulate it into a horizontal style for example like this where you have the logo on the left hand side and then you have the text on the right hand side and if we change it to like 32 it's going to fit perfectly you can also do something like just having the logo itself or the icon and that's probably going to look even better so that's definitely what a lot of websites um will have basically just the icon itself rather than like having any other text there and yeah for sure you can actually have the square logo um on your other branding materials where you can actually fit that in but for this section what I do recommend is making sure that you keep a horizontal style or perhaps just have the icon itself so those are the two tips uh for people who do have a logo already so if you have a logo and I'm going to show you guys how to create one on canva so you can go to like a place like 99 designs where you can submit a brief and then a lot of different designers will actually come up with different designs and you can launch a contest so then you know people can submit their designs and you can choose the best one this is what I recommend if you're creating something like a really professional website and I've used this a few times and it's been really really good you can also use something like fiverr.com um they do have different logo design Services probably starting from around $10 or maybe even $5 but I'm not really sure how good that's going to be um because obviously you know it's so cheap you want someone to actually really think about your brand and really create something that's really good so yeah you can look through these and you can look through 99 designs but I'm going to show you how to create a quick one on c.com so what I recommend you doing is go to ca.com and you can log in with your Gmail or I think connect it with your Facebook and on the top over here click on create a design so on the bottom left you can click on custom size and we're going to set the custom size to something like 500 in width and maybe 100 in height and create new design so as you can see the layout is sort of horizontal style and first of all we can add a text you can drop in a heading so let's just say for example you add in your name or your brand name and and here we can change the font so you have to be careful with the font that you actually choose because each font has a different style it's going to change the sort of feel and Vibe of your website so be careful um choose one which is sort of most related to your brand and what you want people to feel so some of these fonts which have the crown icon on it those are only available for the canva pro users and I do think they have a free trial as well so you can check that out uh if you want to and you can change the font to whichever one that you like and then we can manipulate the sizing over here so let's just make sure that all the text fits in so let's just try 50 I think 54 might be okay so 54 and let's pull this out a little bit okay and then let's drag our logo up into the middle like that okay so I think that's pretty good so as you can see there's kind of a little bit of white space on the top and on the bottom I do want to kind of remove that okay a little bit as well so for example you can also add in um different elements and you can search for different things over here which have like different icons and things like that as well and you can just drag it like click it and just drag it on here and then you can resize it but generally for me I'm not going to do that because with these icons anyone can use these icons and that's why I do recommend something more professional where you know you do have someone who can actually create a unique sort of icon for your brand rather than just choosing one from the library over here but obviously yes you can if you're just starting out so I'm not going to do that but what we're going to do is I'm going to try and reduce as much white space as possible so I'm going to go to magic switch on the top and then go to custom size and I'm going to reduce the size a little bit to about 80 the height and then I'm going to go ahead and continue then I'm going to resize the design okay so we might need to adjust the size again so let's change it to 54 again pull it to the left over here to the right let's move it up a little bit okay something like that so whenever you create a logo you want to make sure you keep the white space to a minimum because when you actually resize it over here then it just resizes more proportionately otherwise if you upload something that has a ton of white space it's going to resize and it's going to look too small so let's head back over here and what you can do is you can also duplicate this and then what you can do is you can also create like a a light and then a dark version of your logo okay so we change the text to White and I'm going to drag this out and I'm going to click on the background here and I'm going to change it to maybe like a gray okay so you can actually see that let's move that over here and then what you can do is you can click on share over here and click on download and then click on transparent background so what I do recommend is if you have the free trial available just sign up for the free trial for I think 14 days or something like that and then you can download it straight away as a transparent background and then click on download just save it onto your computer and then over here you'll have the zip format you might need to double click it to unzip it and then you have your logo inside okay so you have a dark version of that which is transparent and then you've also got a white version of that which is also transparent if you can't download the transparent file then you have to use remove BG again and you can figure that out yourself it's quite easy just upload it and it automatically turns it into a PNG go back over here so you want to go to your customizer and that's going to take you to themify options and then we can click on the site logo and tagline and then if you don't want to create a logo then you can also um you know create just add your text in here site title and then you can play around and change the fonts on your website as well okay um or you can click on logo image and we can upload that logo that we just created so upload files select files and then I'm going to choose these two and open and then I'm going to upload this one insert file and then I'm going to have my name on the top just like that so here this is going to be the height and I'm going to leave this empty and change it to 32 okay and then that should fit in normally should fit in quite well okay or you can adjust it however you like to maybe like 30 or something like that so try to see which one is best for you so that's how you resize It generally you want to just keep this one as empty and resize the height only so that it uh will automatically resize um here rather than you know trying to crop it out and things like that so just do that click close over here and sometimes you may need to manipulate uh the menu navigation a little bit then you can go to menu navigation and then we actually need to go to advanced settings sorry publish it first go to Advanced uh more options go to the menu navigation and it's going to be the menu container and you want to go to the the margin okay let's untick that so here sometimes you may need a adjust it I think so you can move it down like that okay like 10 pixels generally probably only need to move it a little bit so then it's going to move down like that okay and then you can click on publish and that's basically how you add in your logo over here so you can also do the same for your footer so if you want to add your logo there we can go to the footer so let's go to footer footer logo logo image and then let's say for example you do have a um footer background which is a dark color then we can upload the white version of it let's just resize it a little bit um let's try 32 perhaps like that Foo wrap let's say we change the background color to like a dark color um I think that looks okay like that and then yeah so we can click on publish right so I'm actually going to um just delete that for now delete that and I'm going to select just the site title and for the background color let's just remove that for now okay so I'll show you guys how to edit the footo in a second let's click on publish and let's click on close to add the fav icon we can go to the dashboard section okay and to create a Fab icon it's quite simple go to file and create a new design custom size let's do the width to be 5112 512 so it's like a square format create a new design and you can you know add a element as before as an icon or you could do like initials so let's just do for example simple HC and then select it and then let's change the size so probably needs to be way bigger so or maybe even bigger let's try 240 okay let's move this to the left and then move it there to the center like that so with this you can choose a transparent PNG file format or you can upload a JPEG so many times people will have a background like that so basically kind of makes the sort of uh text a little bit easier to to read when you do have kind of like a background so I'm going to leave it as that might duplicate it let's just say for example we have a dark version of it so black and then choose the text here change it to White okay so I got two versions let's just share download so we don't really need to download it as a transparent you can but let's just download it as a regular um jpeg or PNG download open that and and unzip it let's come back over here to our dashboard section themify ultra themify settings and then here on the general tab click on fav icon click on upload choose the file where you have downloaded the logo so here is basically like the white version of it so upload that and then click on Save and then head back to visit site and then on the top over here we will have the the logo or the Fab icon sorry and if we upload the other version of it then I'll show you guys um let's go themify settings okay so that's looking pretty good so we've completed step number six and step seven so we're going to check that off and move on to step 8 and N where we're going to edit the header layout as well as the footer section which is the bottom of your website so for example we're going to show you guys where you can actually change the layout on the header section and also where you can change the layout for your footer section as well as add in social media links on the bottom if that's what you want to do so we can head back to our dashboard section then we can go to themify ultra themify settings and then go to theme settings and then we're going to go to theme appearance and here we can edit the header design so you can choose from number of different header designs depending on what you personally want for your website so for example if we choose the header block and I'm going to open this in a new tab let's save it and then let's refresh so this is going to change the headed design as well so depending on uh what you want so for example if you want something like this something more unique then you can edit that as well all right so here I'm just going to keep it as the header horizontal and you can also exclude certain things like the site tagline the search form which is essentially this search form over here you can exclude it and you can play around with the different settings you can also change the mobile menu style as well so if you want to see basically how that sort of looks like then what you could do is you could go to your settings on the right hand side here go to more tools and then go to developer tools and then from here we can select the dimension so for example iPhone 14 pro Max and you can see how the mobile menu looks um if you actually change the settings over here scrolling down over here you can also change the footer design so I'm going to select the footer block design which is something like this and let's go ahead and Save and then let's refresh it let's close the developer tools first and you can see how that changes all right so a common question that I get asked is how do you remove this section over here which is powered by WordPress themify WordPress themes so what we need to do is we need to scroll down and it's going to be the footer text over here so here you can add whatever you want in the footer text one or for text 2 but we're going to click on hide for text 2 click on Save and then let's go back over here refresh and then basically that's going to disappear okay you can also exclude the site logo too so for example um let's go and exclude the site logo for the footer design then we can click on Save okay so you can play around with the different settings um it's really dependent on you and how you sort of want to make your blog look okay the next step is I'll show you guys where you can actually edit the Social Links so if you want to add your Social Links in the footer section which is a common thing that a lot of websites have then I'll show you guys how to do that so to add in your social media links it's fairly easy you'll need to head back to your themify settings and then click on Social Links and here is basically where you can add it in so for example you'll just paste in your Twitter profile URL so I'm just going to put in a placeholder just #for now but you just need to paste in your for example your channel URL Facebook profile um and Pinterest and let's say for example you have Instagram and you want to add that in you can click on ADD link and then from there we can add in a title so Instagram and for example if we have our Instagram profile URL we can copy that to our clipboard and just paste it in over here and here we can select an icon so insert icon and we're going to click on the font awesome okay and here we can search for it so insta so over here this one and that's added in so you can change the icon color and the background as well but generally I just leave it as default because you can change that later on individually or you can change it here if you want to as well you can also click on the image Tab and essentially if you want sort of like a different sort of look to it then you can upload your own custom designed icons as well but I'm just going to keep it as the icon font over here you can also rearrange the order by just clicking it and dragging it once you're done click on Save then before it's going to display on your uh footer section of your website we need to add it onto the widget area so we're going to go over appearance and then click on widgets let's close close this and then scroll down to the footer social widget so click on the button over there click on plus and then let's search for social and then let's click on themify Social Links and then over here we can select it to open link in a new tab so when people actually click into that it's going to open up in a new tab rather than um opening in your same tab so let's click on update and then let's go back over here let's refresh and there's your Social Links so what I mean by that is when people click on it it's going to open up in a new tab so that way you know people can still stay on your website okay so that's basically it now in terms of the colors and the um settings over here I'm going to walk you through that a little bit later um it's basically in the customize section because basically what we're going to do is sort of like build the structure of our blog and we weite first and then towards the end of the video we'll start changing the colors because I'll also talk about colors a little bit and how to actually apply it onto your website so it actually looks good because sometimes you know if you start adding colors now it's going to be a little bit overwhelming because like you don't really understand like how where to add the colors and then you sort of add it in as you go um and sometimes your website is going to turn out like really ugly because you you know aren't really following a set theme so I'll just go through basically where you can actually change the colors if you want to know now it's basically the header section here over here and this is the header wrap which is the background color and then if you want to change like the header links and the header fonts this is the settings over here and on the footer section you can change the footer background which is the footer wrap and you've got your footer links and things like that over here okay so that's basically where you can actually change it but I'll walk you through that towards the end of the video so let's click on back over here and one last thing is how do you achieve this sort of um animated background color changing so we can go back over here and go to the dashboard and this is actually a setting in themify Ultra so hover over here theme settings and let's go over here theme settings animated background colors and we can set in the animated colors in the footer okay so by default they've also got colors selected pre-selected already so you don't have to actually select it um but if you do want to manually select it you can also do that as well just by clicking over here and then click on Save and let's go back to our homepage and as you can see the colors is basically changing so what I'm going to walk you through now is essentially how to um use the Builder to build out your hero section over here okay so we're going to start building now um and then after that I'll show you guys how to add in your blog post so I do really want to you know go through this tutorial in sort of like a structure so that you can sort of skip to any part and watch it understand it and then also just apply it without it being like all over the place right so there's a lot of videos which you know go and skip a lot of different things and really not really sure what's happening so let's just go through over here and we've done these two already and let's just check these two off and let's go through the Builder Basics and build out your homepage layout right now so what you want to do is turn on the Builder and here what we're going to do is hover over this section which is going to be your row and we can click on the styling option here so it's the little paint brush and then click on background and then here for the background image type you can select image you can also select a gradient as well as a video so you'll need to upload a YouTube video and you can also select a slider so let's just say for example we want to add a slider then we can go ahead and insert Gallery So Below this video there's going to be a download link which you can actually download the images to follow along with this tutorial so you can download it onto your computer and then we can upload those images so let's go over here and I'm going to go ahead and find the images so this one's going to be the hero slider images we're going to select that and open so you can also download your own images from a website called unsplash which you're able to use the Images copyright free and you can use it for personal or commercial purposes and there's also another website that I like which is Adobe uh stock images those are paid images but you do get more specific type of images as well so once you've uploaded those images you can click on add to Galler gy and update gallery and that's basically going to set it in so what we want to do is for the image size I'm going to select it as the original image size full cover slider speed you can change it to normal fast or slow let's just keep it as normal so as you can see right now we can't really see the image so what we want to do is hover over here and you're going to notice a purple sort of uh uh overlay and you can click it and you can drag it so basically that's going to add padding which is spacing so we can do the same for the bottom as well so just click it and then pull it and pull it down let's just do maybe 230 or something like that okay let's just pull it down 230 make sure whatever you do to the top you should do to the bottom okay and you can also click it so you can click it and you can actually type the number in as well so if you can't pull it exactly click it and type it in okay then the other thing that we want to to do is over here as you can see the image it doesn't go all the way across on the left and the right and also doesn't go on the top as well so you can go to the row options over here and you can set the row width okay and that's going to basically um Go full width but what you're going to notice is that there's also going to be space on the top so let's click on Save first and then let's go to the back end so click on back end and then what you can do is for the page layout you can set it to the full width layout like this right so we can update it and then we can view page over here or we can just click the URL as well like that and it's going to open and then as you can see there is no space on the top so there's also another way that you can do it so if we head back over here and let's click on the WordPress logo on the top go to themify ultra themify settings go to the default layouts default page layout and instead of the no sidebar option we can actually select the full width so for all the pages that you create it's always going to be full width by default okay so that's if you want to do that um which I'm actually going to do okay um or you can just select the no side by one which basically will have the space and you'll have to do that manually okay let's click on Save and then go back over here and what we could do is just refresh that first okay and then we can turn on Builder so let's add in some text in here so on the left hand side we have all these different modules and you can click it and drag it in so the first module that we're going to add is going to be a text so click it and just drag it and drop it and then over here we can set in the text so let's just say for example make a Blog so select the text set it to heading one okay so generally for each page you should only have one heading one font set in okay so that's for the search engine purposes and normally it's going to be the most important keyword that you're targeting for that specific page so in my second part video I'm going to talk a little bit more about that so let's just set this in for now and what you can do is go to styling go to font and then text align to the middle okay and then here we can also change the color as well like that and you can also click it and then you can also edit the headings from here you can also text align it bold it change the color directly using this little panel area so the next thing that I want to do is make sure that the size of the text a little bit bigger so right now it's kind of small can't really see it let's go to styling and then go to General Okay click on that tab there go to heading so we're going to set a specific font for the heading one font here so what we can do is we're going to leave the font as default I'm going to change the font size so for example I might set it to let's try 90 and see how that looks okay so not too bad 90 or you could do maybe a little bit bigger like 100 and as you can see we can't really see that text because it's white so what you can actually do is you can actually add something called The teex Shadow so here we can set one one oops so let's delete that one and then for the blur let's add five pixels and then over here we're going to select the color so select black okay and then what you want to do is drop the opacity down to like 0.30 like that so around 30% opacity and then what you could do is we can click on done save it and let's close it for now so we can have a quick look at how that looks you can also use the preview button so as you can see that makes it pop a little bit better so let's just turn that on again and instead of exiting you can also click on the preview button so this one over here and hopefully that will actually give you a good preview as well without you saving and exiting the Builder you can click that back again and you can also make the text Pop even more by adding in a background overlay so you can click on the row here click on the paintbrush row overlay select the black color okay and you want to drop the opacity down so let's just do like perhaps 0.20 like 20% opacity and then we can do a little preview okay so that's basically how that's going to look and as you can see that makes the text Pop even better so let's click back over here now the next thing that we're going to do is add in a sub headline so to add in a sub headline you can drag in a text module or you can actually duplicate this current text module here so we can click on duplicate and you can actually duplicate different elements as well as different rows as well and different sections so over here we can click into that you can make the text edit here or you can just click into it and you can edit it directly here as well so for example let's just delete that so I'm going to change change the heading so okay let's just type something first so make a WordPress blog so let's just do WordPress tutorial and then select this text and here we're going to change it back to the paragraph format and here we can also click on the font and you can select the fonts over here but generally I'm going to go to The Styling on the left click on font and then here I'm going to change the font size so perhaps let's just do 28 okay maybe a little bit bigger so let's just try 32 okay so I think that looks pretty good so as you can see there is going to be a bit of space over here and this is actually taken up by this module so what we want to do is we want to reduce that spacing so click into this top text module click on edit click on styling and then click on margin so for this margin what we want to do is to reduce the space so we want to do a negative margin on the bottom so we could do 20 okay and that's going to move it up like that you could also increase it to maybe -4 something like that so I think that looks pretty good at the moment depends on the size of the text but I think that's pretty good you can also reduce it more if you need to and so with the margin and the padding there's going to be a little bit of a difference so the padding is basically going to be the space inside the sort of box okay so as you can see right now um for example we' added the space to the hero image that's going to be the padding okay that's inside the box now if we actually add let's say for example we click on the purple okay The Styling here and we click on the margin over here and let's just add 100 pixels so that margin is going to be outside of that purple box okay so that's margin so difference between margin and padding is that padding is inside the Box and the margin's going to be outside so generally when I'm using margin most of the time I'm using it to do a negative margin just like what we've did before and most of the time I'm going to be using padding to add space within the box or the sort of element okay so that's looking pretty good and what I'm going to show you now is click on done to add a button so let's just add a button in there so drop it below here we have the button text so you can click it and we can change it so for example it could be like learn more or it could be like uh read more or go to the blog and you can change the title then you can also change the link here so for example we want people to link to the blog page so over here we can right click the blog and then copy link address and then just paste it in here so then when people click on that it's going to link to that specific page so you can select it to open link in the same window light box or a new tab let's just keep it as is and here we can change the color okay so you can play around with the different colors I'm going to keep it as the default for now and you can also add an icon but I'm just going to keep it as is click on button appearance you can also change the size so let's just keep it as the default you can also change the shape as well so for example this rounded shape looks pretty good you can also change it to outline or transparent and yeah so you can also add a downloadable one so for example you want people to uh Download a pdf then you'll add the PDF link here and when people click on that it's going to download okay so if you have a PDF you can actually upload it into the WordPress media library and you can grab the link and then paste it into here let's click on disable for that for now cuz we're not linking it to a specific download and we want to move this into the middle so how can we do that we can go to The Styling font and let's click on Center and that's going to move the button to the middle just like that so another thing that people often ask is how do you add two buttons there right so what you can do is we can grab a row so this row here has two columns and we can drop it below that and let's click on this button and drop it in there like that and then duplicate it drag this button on the right hand side like that and and then next we click into the first button styling font and align it to the right and then for the second button click on it edit styling font align it to the left so here we can also click into that and we can also edit that so this could be like um let's say contact or it could be like making a booking contact us something like that and then you can link it to the contact page for example ex Le so we probably want to change the button color okay so it's a little bit different from that one over here now if you want to edit it to be a little bit closer so if there's a little bit too much Gap what we can do is hover over here this pink and then over here we can actually click on the narrow Gutter and that's going to move that a little bit closer okay so the the spacing is going to be less so I think that looks pretty good and if you want to change the color specifically for the button click into the button go to styling go to General button link and here we can update the color specifically so for example if we have orange we can change it link let's change link color to white like that and then you can also click on Hover and you can change the hover color as well so for example something like that okay and we can click on preview okay and that's basically how you can actually change the button color specifically so we'll do that probably a little bit later on but I just wanted to show you quickly where you can actually do that so let's just remove that for now and keep it as default so click on done save and close so finally we've finished step number 10 and we're ready to add in a blog post so I know you guys have been probably waiting for this for a long time but I really wanted to cover everything um before we actually add in the blog post so step number 11 let's go ahead and add it let's go go back here you can add it a few ways you can hover over here on the plus new and click on post or you can also go to the dashboard area and you can navigate to the post as well so for example click on the dashboard area here okay and you can click on post from here you can click on add new post so those are the two main ways that you can do it you can also do it within here as well so plus new and click on post to add a new post so let's click on add new post So Below this video I've also included a link with the Google Docs with some of the sample blog posts that you can actually use to add in so we're basically going to add this in first so that you have some content to work with uh when you're actually displaying your blog post so don't worry about you know starting to write your blog post right now just focus on the design first and then you can update your blog post later on so you can also go to chat jbt and you can also ask it to write blog post um as your sort of dummy content so you could do like write a 500w blog post about the top five things to do in Japan click on enter and that's going to basically generate some content that you can use so obviously I don't recommend just copy and pasting you know everything that you get from chat GPT because that is probably going to um impact your search rankings cuz it's probably going to be duplicate content you do want to add your own sort of unique take on it but as an example we're just going to add in these sample blog post so here we can just add in the title so copy it come back here paste it in on the top and then what we could do is click on the categories here so click on the categories and we're going to set a new category so this one is going to be for example just stories add new category scroll down you can also add some tags uh we're going to set in a featured image so again you know you should have downloaded the uh images that you can actually add on as well or you can upload your own and click on upload files select files and we're going to go to the blog post okay and I'm going to select all these images here and then I'm going to click on open and I'm going to select the post one image which is this one of the grab driver click on set featured image and then here that is done for the excerpt it's basically sort of like the summary of your page you can add that in uh which is optional I'm going to leave it as default for now and discussion here you can allow comments and things like that or disable it so once that is done we can click on publish and depending on if you actually set it to uh do a publish check you will have to click it again but I've just disabled that earlier when we created our pages so here we can click on The View page which will be on the bottom here or you can just click on the URL and click over here and that's going to take you to your blog post so to add in your content we can click on turn on Builder and what I do recommend is if you're writing a blog post don't write it directly on your WordPress website I recommend writing it on like Google Docs or somewhere externally first where it's saved onto the cloud and then you can add in your content so just in case anything goes wrong then at least you have all your content saved properly so over here um as you can see we have all these different modules that you can add in just like when we're building out our homepage so in this case we're going to drop in a text module so drop that in and let's go back over here and you can add that content in so for example let's just copy that content so scroll down over here copy that all to our clipboard come back over here and and we can go ahead and just paste in and match style and then you can also click into it directly here and you can start formatting that so that it's easy for your viewers to sort of read your content so we can change that and you can also set it to perhaps this one could be like heading 3es okay so heading 3es like that actually so let's just do that quickly so let's just click on preview zoom out okay so that looking pretty good for our content and you can also click on here let's click on done you can also add in images videos anything that you like so for example you know if you wanted to add in a video so I could drop it in down here and then you can paste in your YouTube URL and then you have your video there and you can also drop in an image so you can drop that in there as well and upload your image and then it's going to show there um if you want to sort of add in your image in between that text then perhaps you could separate your content into two text modules so it's really customizable in how you want to sort of edit it okay because uh we have this Builder section over here and you can literally do everything um just by looking at it so once you're done click on Save and then we're going to close and I'll show you guys how to add in another blog post and then you can add in a few so what I do recommend is probably adding at least six blog posts so that we have some content to actually display on our website so let's head back over here click on and hover over here on the plus new click on post and let's add in the post number two so unlocking the secrets how to make money with blogging copy paste that in add new category so this category name could be about blogging or it could be about finances or making money click on add new category so it's important to separate the categories so that later on you can sort of um you know easily make sure that people can find your content by clicking on different categories so set that in properly and set in a featured image so this one's going to be the post two so I think it's this one over here post number two and the size of the image is around 1,200 by around 800 and generally what you want to do is you want to keep them all the same size like this as you can see I've cropped them all to the same size so there are different tools online that you can use if you're not using like Adobe um you can use Cana to do it and there are other free tools as well to sort of crop your image sizes and with these images I basically have downloaded them from unsplash so you can check that out but if you do have Unique Images that you've taken yourself I think that's even better so let's just add that in set featured image and then we can click on publish let's click on view post you can click it over here or you can scroll back up and click the link here and then I'm going to copy the content to our clipboard so copy that come back over here okay so what we're can do is turn on the Builder and then we're going to drag in another text module over here then you can also just paste in the content like that but it's going to leave some spacing there um that might not look very good so let's just control or command Z okay to undo that let's just paste and match style like that and then you can go ahead and set these to The Heading three okay so you can do that for each of them so you can also link different words to different pages on your website or perhaps an external link or maybe even an affil link by clicking on link and pasting in the URL over here you can also for example you can also do it you know and edit the text from here as well so selecting it clicking on the link and then here we can click on the link options um you can type in or paste in the URL or you can search for a specific uh content that you have on your website already for example we want to link it to uh this blog post and it's going to select it or you can just start typing in the title there as well and then add link okay so here we can click on Save and then I'm going to click on close and basically right now I'm going to add in the rest of the sample blog post and hopefully you guys can do the same um at least add in six so then we can actually display the content on our homepage like that okay so it looks really nice so what I want to show you guys is how to add in your social media icons which allow your visitors to share your post or your pages so there's actually two ways of doing it so the first way is very simple so if you just want to to share the individual page only then you will just drag in the social share module just like that and you can play around with the different sizes as well as the icon shape and you can also style it further by going to styling and editing it over here so the second way of doing it is basically it will actually show for all your blog post so this is the way that I personally prefer so what we're going to do is we're going to go to our dashboard and what we're going to use is the layout parts and also the hook content so navigate to your dashboard hover over here and then click on layout parts and then I've actually already created mine social share blog post and from here you can just click on add new and then you'll just need to add in the title and then click on publish on the right hand side once you've done that you click on the Perma link here and that's going to take you to the front end end so from here we can click on turn on Builder and all you need to do is to drop in a social share module in here so you can click into it and you can edit it however you like and then once you're done click on Save and we can close that so the next thing that we need to do is we need to copy the short code so to copy the short code click on edit layout part and then scroll down to the right hand side here just copy the short code both of them will do so I'm just going to choose the first one let's go over here to themify settings and then you can go to the hook content scroll down click on add item and I've actually already added this one over here so once you've clicked on add item you can click on see hook locations and let's say for example you want to add it to all the blog posts we can go ahead and click into that and then you can select the location that you want it so in this case I want to display it after the post title and then you can just click on it and then that's set in and then just paste in the short code and then you can save you can also add in specific conditions if you want to set it to display on specific post or specific categories so here let's go navigate to our post and basically it should appear just after the title like that and what's cool is you can actually click into that and edit the layout part directly and you can change the styling or whatever you want here as well okay so I've just added in a few more blog post obviously you don't need to add this much but if you have like six blog post then I think that's good enough so that we can actually have something to display when we display our blog post on our homepage so we're going to turn on the Builder and what we want to do is we want to create a section to display our blog post and a section for our sidebar so what we can do is hover over here on the row and we want to set in the columns so the column that I'm going to select is this one so 75x 25 two columns and if you do want to adjust the width of it you can also select it as well and you can pull it and drag it in like that or drag it like that as well inside there to make it a little bit skinnier so that really depends on you but I'm going to keep it as just the default I think that looks good enough and here we going to click the post module and drag it and drop it into the section so over here we can select the specific categories that we want to display so for example if we just want to display travel we can select it and it'll only show the travel category in the blog post section and I'm just going to select all and if you do want to sort of exclude certain categories um you'll need the slug or the category ID which I'll show you how to find that in a second and that way you can actually um remove certain categories if you want to to so for the Post layout this is basically how it's going to display uh here so I'm going to select grid number two so you can select any one that you like but that's personally that's my preference and I'm going to select the post filter so the post filter is essentially going to show the categories on the top so then when people click on it it's going to only display that so this is great if you have a lot of block post and it allows people to sort of filter the categories so for example example if we go to the preview mode so if we click on stories then it's just going to display that so if you actually notice here it doesn't actually show all the categories so if you want to show all the categories then you want to select the Ajax filter and that's basically going to enable um if people select it it's going to enable all the blog post so if you just select the post filter it's only going to pull the categories from what is actually displaying here so only the travel category and the stories if you select the Ajax filter it's going to pull from all categories that you actually have so generally I would select that one and I would also recommend selecting the aligned post so sometimes if you have uh longer titles then it may actually sort of um move the sort of post down so yeah so I highly recommend selecting that one and then basically we're going to select the number of post to six and then you can also order by date and things like that um I'm going to display as excerpt so the excerpt length I might do like 30 characters U 30 words sorry and then here you can also adjust the featured image size but I'm going to leave that as default you can also hide the post date like that and if you want to hide the post meta we can hide it like that um you can also hide certain things as well like the author or like the category that really depends on you and you can also add a pagination as well so basically on the bottom here it's going to show the pages but if you actually select the Ajax filter then it's going to basically just show the load more okay um but if you don't select it then it's going to show it like that so if we select the Ajax filter so it's just going to display like that so we're going to turn on the Builder let's click in into it again and yeah so basically that's it and here we've also got the styling options so you can edit the styling for each of the individual sections if you want to as well let's go back to our dashboard area and I'll show you where you can find the category ID so if you want to sort of exclude certain categories you can do that so let's go back to our dashboard let's go to post and then click on categories and then here we can can find the slug and also the category ID number generally the slug is probably just going to be the same as the name of your category okay like that so it's probably easier to use the slug um because the category ID it's just hard to remember which one is which but if this slug is the exact same name as the category then it's just super easy for you to exclude so for example if I want to exclude the stories category like that I will just go to visit site here let's turn on the Builder and then click into here then we're going to exclude so we're going to do a minus and then just uh minus stories and then I'm going to click outside here so then as you can see the stories category has disappeared so that is looking great so I'm just going to delete that and then I'm going to click on done so what we're going to do is also add a little bit of padding so for this row I'm going to click it and drag it so let's just do like 50 pixels I'm going to click into there 50 I think that's looking pretty good okay so what I want to show you now is how to add in the content for your sidebar section so for example your images text social media and the mustre blog post so let's head back over here and let's go ahead and check off what we've done so far so we have done step number 11 and step number 12 so let's just check that off and I think we are pretty much halfway through the tutorial so let's go back over here and what we're going to do first is we can drop in any module that you see here so you can really customize it however you like so first of all I'm going to drop in image and then I'm going to go to upload files select files and there's also a folder with the profile pictures that you can use so you can upload that one here um I've got my image um but I've actually used a tool called The pfp Maker so for example I'm going to select uh let's see maybe this image here open um so this is the PF P maker um it's a free tool which basically can upload just any image of yourself and it sort of enhances a little bit and it changes the background I think it's really really cool so uh make sure you check that out so I've uploaded my image and just insert file URL and here you can play around with the different appearance settings um the size settings as well but I think that's looking pretty good then what we could do is just click on done and the next section is I'm going to add in some text so we're going to drop in a text module so just drop it in below your image so here it's going to be about me and then I'm going to set this to heading four and then I'm going to add a little padding to the top so maybe let like do 20 uh okay 24 okay some reason this thing is covering it but we can actually edit this on the side over here on the left hand side as well so let's just click on edit again and I'm just going to paste in the text from here so you can write maybe like three sentences or two sentences about yourself and just paste that in then to add in your social media we can drop in the widget module so drop that in below there and we're going to select the widget so here we're going to search for social and then we're going to drop in this one themify Social Links and here are your Social Links so we're going to open link in a new window so when people click on it it's going to open in a new tab and you can also add in a title too so for example follow me so you can do that or you don't have to have have the title um you know you know it's really dependent on what you want click on done and the next part is um adding in the mustre blog post so we can do that uh we could just drop in the text module as well and here we can do must reads of 2024 select it set it to heading four like that and then what I'm going to do is I'm going to click on Save first and then I'm going to close first so what I'm going to do is I'm going to open the blog post that I want to um display over here so let's say for example we go to blogging and then we could just open this one and maybe let's open this one as well and then we could go to the travel category let's add in this one and maybe this one as well and then let's go back over here and turn on the Builder so what we're going to do is just basically we just need the title so I'm going to go over here and just copy the title name copy that to your clipboard come back here edit hit on enter and then paste and match style then I'm going to do the same for the rest so copy paste and match style enter and then we're going to select this one copy last one here and then paste that in so what we're going to do now is to link it so we can select the text and then we can click on the insert link so what we can do here is there's a few ways of doing it so you can either just copy the link uh directly from here just copy that and just paste that in and then apply um alternatively you can also select it select link and then you can start typing the uh title so a comprehensive okay and then it's going to pop up so it's this one over here so select that one and then click on apply uh same over here click on that one you can also click on the link options so here um it may be easier for you to use this one and then discovering the okay so this one and then add link and then same one for here there we go add link and there we have it so the only other thing that we would need to do is probably just add a little bit of padding there as well so let's set this to 24 like that and click on on save so that is pretty easy so here we can add in like a ad placement for example you may have a affiliate Banner for example you might be promoting a specific tool or a product and then you can have an affiliate link so for example um let's just say what we could do is we could drop in an image so we can drop in an image like here and then upload files select files then this one is going to be the advertisement Banner MailChimp open insert file URL and then here we have the image so pretend that is your banner for your advertisement and then here we can basically put in the image link so you can copy in the fillet link and paste it into here so for example let's just copy the URL here and then pretend that's an affiliate link click on done so when people click on that and if people will purchase then you may receive a commission for that sale so the next section I want to show you guys is this section here so I actually see this quite a lot on a lot of blogging websites where they have categories and then it's sort of uh with the title in the picture like that so for example something like from this blog pinch of yum it's popular uh recipe blog where they have the picture and then you've got the title in the picture like that and then it links to that specific category so how can you actually achieve that um for your own website here so I want to show you that so to actually achieve that design first of all we need to create the image and we can create the image on something like canva.com or you can use Photoshop or other photo editing softwares to create it so essentially what we've done is we have created a canvas size of around 500 pixels time 250 so this is a size that I'm going to use but you can choose different size as well and then basically I have uploaded the images that I wanted so for example here and we can just drag and drop it in there just resize the image and move the image to where you want then we can add in an element so add in an element here like this and just drag it across and then we can move it into the middle like that then we could drag in a text module so you can just drag in a heading here and we can just type in the category that we want so this one luxury travel perhaps like this and then we can just move it into the middle probably need to expand the background a little bit too okay so I think that looks pretty good then we can change the text color and also the background color so I'm going to choose this blue just like that and I think that looks pretty good and then you can just download that uh onto your computer and then you can come back to your website here so then for example what we could do is we could first of all we could drop in a text module here there and then we can type in catgories set this to heading four let's move the padding down a little bit so like 24 25 okay then what we want to do is drop in an image module so let's find the image module here drop that in upload files select files and we're going to select the category banners and we can upload those so those are actually included in the download link below as well so for example we can upload that one first and let's just duplicate that a few times let's edits here let's just change the image and same thing here edits and change the image too and then what we could do is add a little bit of spacing on the top as well okay something like that and then what we could do is we can link those to the categories so how we will do that is we will find the category link so for example if we want to link it to the travel category as you can see uh we can hover over that and then you can actually see the URL so you can right click it okay so what we need to do is click on the preview right click copy link address turn off the preview come back over here edit and then you could paste the link in here okay click on done and then save so you can do the same for the rest of these categories scroll down over here and then if we click on that then it's going to link to the travel category so let's click back over here and I'll show you one other way to display it so let's turn on the Builder and so what if you want to display it like this so to do that it's quite simple let's head back over here and what we can do is drop in a three column row so drop it above here like this and then what we could do is we can also just zoom out the screen a little bit so it just makes a little bit bigger and I'm just going to duplicate that and then I'm going to just move that over and then you can just put that there just like that and then you can do the same here duplicate that duplicate that one drag it and just move it across and then the other one here okay and then I'm going to just reduce the padding there cuz we don't need that anymore um yep I think that's looking pretty good let's just zoom back in okay don't need that padding there let's remove that one set that to zero so what I'm going to do is hover over here and as you can see you've got that pink hover so we're going to click it and then add some padding so perhaps we could do around 40 pixels or so like that so I'm going to type that in okay I think that's good enough and just click on save so that is pretty much it if you wanted to do a category section like this where you show it on the top um or you can also do something like that so yeah hopefully that has given you some idea of how you can actually display um different layouts on your website step number 13 is done so let's just check that off and now what I'm going to show you guys is how to add in your email optin for your blog so what we need to do first of all is to use something like MailChimp so it's email marketing software and you can use other ones um as well but the setup process is going to be fairly similar we just basically need to connect the email software uh to our website so what we need to do here uh for MailChimp specifically we just click over here and click on account and billing for example if you're using some other ones then what you can actually do is you can use the search function and we want to look for the API keys so click on Extras and click on API keys if you can't find it then use the search function to search for API keys and all we need to do is to connect it so we can create a new key and the API key name so this could be like your website name so next Creator generate key copy that keyd clipboard let's come back to our website here let's head to the dashboard section so we need to paste the API key into the themify settings so let's head back here to our dashboard section then hover over themify Ultra click on themify settings click on the integration API and then for the optin click on MailChimp paste it in and then save so it's going to work uh fairly similar for the other ones so you can just click on it and paste in the information that they require and then just click on Save once you've done that then click on visit site then we can turn on the Builder scroll down to the bottom so we're going to add the email optin in this section down here so what we can do is look for the opin form click it and just drag it in like that and here we can choose the layout so this is the one that I generally prefer just a simp simple horizontal one and here we can select the opin provider you can select the list so I think you do have to create the list or also known as the audience if you haven't done that already and you can select which list that it's going to be under so when people submit the email um they can be directed to the right uh list so over here we can also edit the labels so for example we can hide it okay um you can also delete this and then you can put the the name in there like as the placeholder like that we can hide the last name okay and then for example we can also copy that put that as a placeholder and delete that uh that might look a little bit cleaner so you can do that and you can also change the Subscribe or submit button name as well I'm just going to keep it as that for now and you can also click on the success action so you can uh drop in a different message here or if they um subscribe then you can also redirect them to a specific URL if that's what you want to do I'm just going to keep it as the default and then what we could do is we can basically style it a little bit so what I'm going to do is I'm going to do a module title so we're going to do sign up for our Weekly Newsletter I'm just going to copy that and you can just type that in um so it's not loading right now but don't worry about that let's click on done first save it and then I'm going to to close it okay so that is there the title so what I want to do is make it look something like that so what we're going to do is we're going to add some spacing change the font size as well as basically add this light gray background so what we could do is turn on the Builder again let's go here and we're going to click into that click into styling and for the background we're going to set in a background color so this is going to be a light gray so F6 F6 F6 so this is a good color to start off with and then I'm going to add some padding so click on padding and we're going to add some padding to the top so let's just try 50 see how that looks uh 50 to the bottom too and maybe the left hand side and right hand side we could do 50 oops 50 something like that um maybe let's just try 60 for the sides okay and then what we could do is let's make sure that for the font so the font here let's align it to the center and then what we can do is perhaps change the font size so let's just try 36 um okay so that's changing the whole entire font let's go to the general tab here module title font let's try this again 36 okay so I think that looks better and then you can also change the color of it as well so we can edit that later or you can edit that now so for example we can change it like that okay I'm just going to keep it as default for now and another thing that I want to do is I want to edit the fields so let's go to here go to the input fields and for the Border I'm going to set it to all and I'm going to set it to none so essentially doesn't have that border and just has a very very clean look and that looks very nice so then we can click on done and I think that looks pretty good so we could do that you can also round the corners as well so let's just try this so edits and then we could go here and then we could go to the corners so perhaps we could add a rounded Corner as well so that makes it look kind of stylish as well okay so I'm just showing you the possibilities here um and maybe I might just change it all to around 20 so we're going to link it okay all to around 20 so I think that looks pretty good then we're going to click on save so one thing I want to show you guys is I'm going to go over here and hover over the three dots and I'm going to click on save so I'm going to save this as a layout part and then I'm going to title it as well so I'm going to name it and we're going to do email optin and I'm just going to call this Main and then click on done so this is going to be saved as a layout part and basically uh when you save a layout part you can use that layout part Elsewhere on your website as well without sort of redesigning it again so I'll show you what I mean so let's click on Save and close so let's just say for example you want to add the email optin for a uh for your blog page so you may want to display it down here so we can turn on the Builder and then we can add that layout part there so we could go to the saved and then we can click on the layout Parts email opin Main and we can drop it below like that and then here that means people can sign up for your newsletter as well without redesigning it again so another cool tip that I do want to show you guys which I think is kind of important because um as you can see we've added it to this blog post but you know what if you want it for all your blog post so if we click over here then scrolling down it doesn't display for this blog post and you'll have to add it individually as well so what we can actually do is we can actually go to the dashboard and we can go to them thei ultra themify settings and we can use something called The Hook content so click on hook content click on add item and then what we could do is we can go to see hook locations and what we want to do is we want to click into a blog post and then we can see where we want to add the email optin so I'm going to add it at the post end so I'm going to click it and it's going to set the location here and what we want to do is to paste the layout part into here so how we can actually do that is go to layout parts so right click and open link in a new tab and what we need to do is paste in the short code so just copy that to your clipboard copy that and then just paste it into here and then click on save so then right now if we go back and visit site and we go to a random blog post post for example this one here and we scroll down then it's going to appear so the hook content is actually a really really useful feature um because you don't have to download like another plugin and you know additional code or whatever um it's really really easy to actually use so you can actually edit and add conditions as well so you can set it to appear on certain category Pages um it's a very useful feature uh so we're going to click on Save and I'll show you a little bit later L on so that's basically it for adding your email opin next I'm going to show you guys how to add in your Instagram feeds so if you want to add in your Instagram feed first thing to do is to log into your Instagram account and once you've logged in then you can go back to your website and then go to plugins then here we're going to click on add new and we're going to search for a plugin so Instagram feed and then and click on enter and it should be this one the first one by Smash balloon it has over a million active installations click on install and then activate from here we can click on the launch Setup Wizard and we're going to connect the Instagram account so click on add new select the account that you are connecting I'm going to select personal for this case I'm going to untick this and then click on connect I'm going to click on allow and I'm going to select yes it is my domain okay so it looks like that has been connected then click on next and here basically we have the configuration uh features so what we're going to do is I'm not going to install these at the moment so basically it's going to install some more plugins I'm going to disable that and also going to disable the custom review one as well for now so you can install that later on if you need and then I'm going to go ahead and click on next next and again they're asking if you want to install some more plugins I'm not going to do that for now and I think that is all good to go so then we're going to just click on complete setup without upgrading so the next thing that we need to do is to create our feed so click on add new and I'm just going to select the first one here so click on next and then we're going to pull it from the Instagram account that we just added click on next so I'm going to close this for now so here on the left hand side we can actually configure how your Instagram feed looks so we can go to feed layout and these ones are the pro options so we do have the first option available for the free version of this plugin and here we're going to scroll down and I'm going to display the number of posts for desktop just eight and for mobile I might just display four and for the columns I'm going to keep it as four 2 and then I think that's going to be Mobile's just going to be one so that is good then we can scroll back up click on back and then here we can change the color scheme so you can choose it from like a light to dark one or a custom I'm going to keep it just inherit from theme click on back here and then here we can click on the header and we can actually customize uh a few things so we can change the header size to small medium or so you can actually remove that too so if you do want to remove that then what we can do is we can just disable that click on back here then click on the post images and video so I'm just going to keep that as default let's go back here load more button so this is the button here so we can click on that and you can change the text you can also change the color I'm just going to keep it as default for now or you can disable it click on back here and and then you can also change the follow Button as well and you can also disable it if you want to let's go back over here and if it's looking all good then what you can do is do a quick little preview on how that actually looks on each of the devices and once you're ready we're going to click on save so we can click on the embed and all we need to do is copy this short code so we can click on the copy and that's going to copy over close it let's head back to our site turn on the Builder scroll down to the bottom and let's add it just below here so you can add it anywhere on your website first of all let's add a little bit of padding so perhaps let's just do 100 pixels Also let's click into there and just type that in manually click on enter Then what we can do is drop in this module html text short code click cck it and just drag it and drop it into the spot and then what we need to do is just to paste in the short code so just paste and match style and then we can click on done and that's going to display your Instagram feed so before we close it and save it let's just add a little padding to the bottom too 100 save it and let's go ahead and close and so we can see how that looks on our website okay so that's looking great so what we're going to do now is ensuring that our website is mobile responsive so it looks good on tablet and mobile devices so so far we've completed step number 14 and step number 15 Instagram feed so let's go ahead and check that off so the next step is to ensuring that your blog looks good on tablet as well as mobile devices so we're going to go ahead and turn on the Builder so we can click on the different settings on the top here so you can click on tablet landscape to see basically how that layout looks on tablet on the landscape mode you can also click on the tablet portrait so as you can see we can adjust the actual layout for this specific device so the thing that I personally think that I would want to fix is this section over here it does become a little bit narrow in terms of for the blog post because we've got two blog post and we don't have that much space so one of the things that we can do is we can basically change the layout of the blog post so what we can actually do is we can click on edit and we can change it to list post like this right but the problem with that is if we actually change that to list post it's actually going to change for the desktop view as well so what we're going to actually do we're going to go over here here edits keep it as Grid 2 and here what we're going to do is we're going to duplicate this module so duplicate it so now we have two identical versions of it so what we're going to do is for one of the versions so for this version we're going to set the visibility so hover over the three dots here click on visibility and this one I want to hide on tablet portrait like this and then click on done so then we can scroll down this is the other one so then over here visibility we're going to hide for everything except the tablet portrait and then I'm going to click into it edit and then I'm going to change the list post layout like that okay so this is the visibility settings that we can adjust and we can also hover over here hover over here the options and change the two column to 65x 35 like this so our sidebar section has more space so let's go ahead and save and I'm going to give that a little preview so what we're going to actually do is click on the three dots over here on the top of your browser and then go to more tools go to developer tools and then here we can set to perhaps the iPad mini and here we can actually see the layout so as you can see we have the grid post one layout and then we've also expanded the sidebar section A little bit so made it a little bit wider so it's a little bit better for viewing and that looks really good so let's close that let's go ahead and turn on the Builder and have a look at the mobile view and see if there's anything that we need to change so your layout might be a little bit different so the visibility settings is definitely an important setting so I've shown you that and let's click on the mobile setting so here for the mobile setting as you can see we need to fix the layout a little bit so here for the buttons we're going to click on the button and then here we're going to go to button appearance we're going to make sure that's in the middle so okay so we can't align it over here let's go to styling font and align Center same thing for this button styling font F align Center and let's add a little bit of padding for that button on the top so let's do like 24 or something okay so let's just type that in like that and let's perhaps reduce the padding on the image so let's click into that and let's just do perhaps 200 pixels same thing here let's just do 200 like that you may want to adjust a little bit more if you want scrolling down and what you can actually do is you can actually hide the entire section as well so for example we could hide this entire section so we can hover over the pink here visibility and perhaps we can just hide it for mobile so we don't want to display this there we just want people to go straight ahead to the block post like that and I think that looks pretty good for the most part so we're going to leave it as is okay so generally when you're adjusting like the set of padding um it's going to retain um for that specific device so it's only when you actually edit like for example change it to grid number one or grid number two then it's going to um also change for the desktop view as well so once you've actually done the settings then we can click on save so what I recommend you doing after you've done just click on the settings here more tools click back on the developer tools and then let's go to perhaps the iPhone Pro Max to just double check the layout and see how that looks on an actual mobile device right so I think that looks pretty good and then let's close that let's go over here check the desktop view okay so that's still the same and that's looking really good so once you finished each page in terms of the layout design then you want to make sure that each page is also mobile responsive so you want to check how it looks on the tablet views as well as the mobile views and adjust it accordingly so what I want to show you guys now is how to recreate this about page so you want to go back to your website navigate to your about page and turn on the Builder so the first thing that we're going to do is to add in a background image and some text in the middle so over here hover over the row and we can click on the paintbrush click on background and we you can select image and here for the background image click on plus so we're going to upload some new images so again this is going to be in the download link in description the one that you have downloaded earlier so select files select the about folder and I'm just going to upload the images that I've included in there and then click on open then I'm going to select this one so the about hero insert file URL and I'm going to select for the background mode to full cover and then what we're going to do is we're going to add a little bit of padding or spacing to that image so we can actually see it so we can drag it and just pull it down I think we're going to do around 200 and the same for the bottom so it's even so we're going to do 200 again okay so let's just type that in okay that's looking good then what we could do is we can also arrange the back position of that image so because I want to see the people a little bit better and the bike so we can just pull that down change the background image to something like that I think that looks pretty good and then click on done then we're going to drop in a text module so for our heading so here we're going to type in about me set this to heading one like this and we're also going to go to styling go to font I'm going to change this to White uh move it to the middle and because this is the heading one font we're going to change the size here so click on the general tab click on heading heading one fonts and we can change the size here so I think we're going to do 90 pixels and we're also going to add a text Shadow so because this is white text and the background is kind of light color it's not very visible so we can add a text shadow so for example we can do one PX one there and a blur of five and then we're going to select a color so you can select the black color and then just drop the opacity down to around 0 0.2 like that uh you can change it to a little bit higher if you want to as well then we can click on save so the shadow you can't see the effect yet uh once you close the Builder you'll be able to see it but right now we're going to add in another text module on the bottom so sub headline drop that in and then here we're going to type in my story of Where it All Began okay and then go to styling font change the font size to perhaps 24 and then move it to the middle let's change it to the white text uh you can also add in a text Shadow here as well so I might just do that as well so 11 5 change the color to Black and then drop the opacity down to 0.2 okay just like that so the only thing that we want to do here is we want to make sure that this text is a little bit closer to the Head headline so let's go to edit for the main heading for the about me go to styling and we're going to add negative margin so click on margin and let's just do a negative margin of let's say 24 like that and then click on done then we can click on Save and just close that so we can preview how that looks okay so that's looking really really nice so what we're going to do now is to create this text section as well as with it profile image so I'm going to copy the text here so I'm just going copy that and and there we go let's go back here so the first thing that we'll need to do is to separate the row into two columns so one on the left and one the right and for the left column we're going to add in a text module just drop that in and we're going to type in my mission set this to heading two okay so make sure it's not heading one because there only should be one heading one font and then what we could do is just click on enter and I'm going to paste in the text so this could be a little bit about yourself and then we could do yours truly like that and then we're going to click on done and then on the right hand side we're going to add an image so here we're going to select this one here just like that and you can also adjust the appearance as well I'm just going to keep it as defaults so the next thing that I want to do is I want to add a another image module just below this text so here we can add your signature so you can sign it on a piece of paper and then perhaps scan it onto computer and then you can upload it so we can insert that in there and I'm going to adjust the size a little bit so I'm going to change the width to 200 okay keep the height as is because uh once you change that it's automatically going to resize the height and that's going to keep it proportional so the only other thing that we need to do is just to add a little padding to the top so let's just do perhaps 100 okay and then for the bottom so we can do perhaps 100 again like that okay I think that looks pretty good let's preview that really quickly okay perfect let's click on that again and as you can see here we do have a little accent little line there um to add that in if you want that we can add that in quite easily it's the divider drop that in there and this is a solid line so the thickness is going to be two and then we can also do a custom width like that so we could do perhaps just like 50 or something okay something like that and then once we have determined the color scheme of the website we can change the color as well so you might want to change the thickness maybe to three I think that's probably a little bit better and then the other section that we want to do is the quote section so before we actually do that what you can do is hover over here hover over the options and then for the alignment you can align it to the middle okay so that basically aligns the image to our text uh or basically to the left section like that so everything is aligned in the middle and that looks really good so here we've added a quote so here you can add your favorite quote or perhaps it could be your own quote and the first thing that we want to do is to add a new row so add a new row so here we have added a background color so we're going to click on the styling okay background and for the background color I'm going to add a light gray okay so a light gray is a very nice color to add a very nice neutral color and it basically helps us sort of separate the content and a lot of websites use it uh this method of separating the content content and you can use it any time as well so let's just set this to 100 and then also for the bottom let's do 100 as well okay like that and then all we need to do is to drop in another text module so drop that in here and then we can I'm going to copy this quote and then go over here I'm going to paste that in okay okay so you can select that and then you can click on the Block quote and that's going to add this line here and then on the bottom you can type the author name and then we're going to go to styling font let's change the font size that's looking really good let's bold the author just like that and I think that is not too bad so because there's quite a lot of space on the bottom I may want to reduce the space here a little bit so let's just try 70 okay so that I think looks a little bit more even I'm going to try and uh click on the preview okay so that's looking really really nice and let's click back on the preview so one more thing I want to show you is uh very important so hover over here on the top and you can hover over the three dots here and then we're going to click on save so what we're going to do is actually save this specific row because we're going to create the blog page and the contact page which is also going to have a hero image and you don't have to recreate that every single time so here we could just do like about hero maybe V1 version one or something like that click on done and we don't need to save it as a layout part cuz we don't want it to be um you know you don't want it to be exactly the same cuz like if you save it as the layout part what basically happens is if you make changes to the that specific layout part it's going to affect uh all the sort of layout parts that you've added so not for this specific purpose click on done and save it as a row so then this is going to be on the save section here like this so once we've done the about page we're going to move on to the contact page so step 16 and step 17 we have completed that so let's just check that off and let's move on to the contact page so this is the page page that we're going to recreate so it has a text here with a contact form and a map so we can head back to our website and over here just go to your contact page and turn on the Builder so the first thing that we want to do is to add in the row hero image so because we already created that and we've saved it as a row what we could do is click on the saved on the top and we're going to click on the about hero and we can just drag and drop it in like that so here from here we can just go to the uh paintbrush and then go to the background and let's just change the image so we're going to upload files select files so we're going to upload the contact hero image click on open then insert file URL so here we're going to change the text so instead of about me we can do contact me or contact us and then here for the sub headline so we're going to do where can you find me so where can you find me so you can do get in touch as well if you want to do that and here on the top we've also got this little icon so how do you do that icon so here what we can do is just drag in the icon module drag on the top and for the icon we can click into that so here we can search for the Arrow so we can have and have a look at oops I think this one's location actually okay so it's a location um Arrow so it might be this one or it might be the themify one I think so we can click on themify and let's search for location okay so it's this one here and here we can change the color so it's going to be white and the background I'm going to delete it for the icon label hide the text as well so here's the icon it's tiny you probably can't see it so click on icon layout change it to extra large and then here just move it into the center like that so then the next thing that we can do is we can do a negative margin go to styling margin so click on this so we're going to unlink everything and for the bottom we can do minus 10 or let's just do minus 12 like that and I think that looks pretty good and then save okay so the next section that we're going to do is a little section for your text and then a section for a contact form so we can hover over here and change it to two columns so we can drop in a text module and I'm just going to copy the text over here and I'm just going to paste in a match style change this to heading two whoops okay let's hit on enter one time changes to heading two okay and then here you can put in your address if you want to you can add a phone number email address whichever way that allows your customers to contact you and then what we're going to do is I'm going to add probably 100 pixels again for the padding for the top and then also we're going to try 100 as well for the bottom like that and I think that looks pretty good so for the contact form this is actually a plugin so what we can do is we can go ahead and download and activate that plugin so before we do that you can also add in social media if you want to drop in a widget and then here all we need to do is search for social select themify Social Links click on open link in a new tab and then you're good to you go so let's head back to our dashboard section where we can actually download the contact form plugin so click on plugins and below this video we do have the download link for the contact form plugin so make sure to download that to computer as well and it's going to look something like this Builder contact. zip and if it actually unzips into a folder you want to write click it and you want to compress it back to the zip file then come back to your site and upload plugin choose file and then we can upload that plugin so this one here Builder dc.zip open and install activate so once that is done it should be added here so let's head back to our contact page where we can add that in so after you've added the contact form then the contact module will actually be added to your themify Builder so you can drag it in anywhere on your website so on the left hand side on the modules scroll down and you're going to see add-ons and this is where we can click the add-ons uh click the contact form and drag and drop it here so here we can change the layout so we can change it to different layouts like that I think that looks pretty good okay so it has the sort of placeholder text in there um and it saves the ton of space and here we can send a email address to the admin address okay so this is going to be your login email or you can set a specific email to where the contact forms will be delivered to okay so set that in or you can set it to admin um yeah so you can set that in then scrolling down over here you can also do a success URL so once people have successfully sent a message they can be redirected or you can just send a uh success message okay so I'll show you that and then we can scroll down down and you can play around with the different fields that show so here we' got the name email subject message and you can also add additional fields for people to check as well and then we can scroll down over here okay so for the send button we can keep it as is we can click on the icon and you can select a icon if you want to as well so let's do wand this one over here okay and then yeah so that's the basics of it you can also edit the styling of the contact form here so you can edit each of the individual sections for the contact form so I think that looks okay so I'm just going to leave it as that for now and then how do you add a map so to add a map all we need to do is you can go to Google Maps Okay so go to Google Maps type in your address and then go to share embed map copy the HTML so copy that to your clipboard just by clicking on that going over here and let's say you want to drop in your map here so what we can do is drop in the HTML text short code just drop that in okay and then we can just paste a match style so we can just paste the the map in there right so as you can see the map doesn't go all the way across so we can actually edit the width and the height here so for the width uh currently it's around 600 pixels so I'm going to set it to 1,200 okay and that's going to go pretty much all the way across you can also edit the height so right now it's around 400 let's just change it to 400 sorry it was 450 now it's 400 and I think that's looking pretty good so then basically we can just add uh 100 pixels here so add a little bit spacing there I think that looks probably a little bit better and what I'm going to going to do is add in also a divider just above there so it's kind of consistent throughout uh my website as well because I do have that on my about page so let's just do I think 50 um and then for the thickness let's try three and then you can change the color a little bit later as well so let's do a quick preview I think that's looking very very nice uh for our contact form contact me where can you find me send me a message for business inquiries and then you can enter in your details people can submit a message and that'll be sent to you and they can also find you uh via the map as well as I was looking at different blogs on the internet for example pinch of yum back Linko copy blogger TechCrunch in gadget as well as the Huffington Post I realized that for their blog their design was kind of different like each one was kind of different so what I want to show you now is basically how we can achieve sort of different designs and different layouts when you're displaying your blog post so that you have some idea and I can basically inspire you to design something different and perhaps you can use the same skills here and apply it onto your homepage let's say for example we want to recreate the layout so we're going to go to our blog page turn on the Builder and from here what we want to do is we want to add the blocks um sorry save so we actually have saved the hero about so just put that in there so here we can just change the text so we're going to label this perhaps as latest post you can also click into the inline editor like that as well and we're going to change the text here so find all the latest blog post just like that and scrolling down here so what I want to do is recreate something like this so what we have is basically two columns one on the left and one on the right hand side and I've actually taken inspiration from back Linko where they have something similar like this so to do that we can go back here and hover over the row select two columns let's click on done and let's go back to modules so here we can drop in a post module so drop that in there and here I just want to display one post just this one okay so I will basically just go to post so you can select by um specific post but let's just say for example we don't do that let's just do uh categories select food and we're going to select the grid list post like this okay and as you can see there's a lot of blog post showing I just want want to display one so we're going to set to one like this okay and to edit this we can perhaps edit the excerpt length which is like the summary so display excerpt and we can set it to perhaps 25 words okay so it's not refreshing yet but um it'll basically cut it off and scrolling down over here you can edit the post date and post met and things like that but basically that's it okay and the next next thing I want to do is probably add some spacing on the top let's just do 100 pixels just like that and then let's click on done so on the right hand side over here we're displaying basically four blog post so what we can do is we can drop another post module again like this and we can set it by post uh with using the post IDs basically so what you can do is first of all let's change change the layout let's change it to list thumb image and we want to hide certain things for example The Meta and the summary so display none for the excerpt and then for the post date we can remove that post meta we can remove that and if we want to basically select what appears in here so we can actually go ahead and select the food category but what happens is this category still appears here as well so what you can actually do is you can use post IDs right so basically you can go to the Post so we can go over here to our dashboard section and then for example let's click into it so 1 2 3 and four Okay so we've got four posts over here for the Post ID it's 126 and 121 so it's all in the URL here so you can go back to your blog over here and just type that in so I'm just going to copy that so copy that and come back here like that and then just comma and then here one 21 copy paste that in comma and then over here let's copy that so generally this is going to be useful if you have a lot of blog post and you want to organize everything and really have flexibility in your design so paste that in and I think there we go okay so it doesn't show that one let's go ahead and just save that okay so that looks pretty decent um so for example it might look a little bit not aligned because there's so much space down here so either you have five block post or perhaps you can also remove the excerpt over here so let's go over here okay so they don't have the date so we can remove that let's go here let's remove the post date um um does it have to post meta no it doesn't so let's go ahead and remove that too and then also for the exerpt let's just do 20 like this and let's just keep actually the post meta and just keep the category like that okay and what we can actually do is you can actually go over here hover over here and then s this and basically it lines it in the middle like that okay so if that's what you want then you can keep that now next what we're going to do is sort of recreate the section over here so how can you do that so let's just go back and turn on the Builder so this is again another design that you can do so we can first of all let's just add some padding there so 100 okay so what we're going to do is go to styling background and I want to add F6 F6 F6 just a light sort of gray background to basically separate the content a little bit so let's click on done and here we have a title and then a sub headline so I'm just going to copy this text here so let's go back here let's drop in a text module just going to paste that in edit as pcks and then just going to copy that as well paste that in change this to heading two let's add maybe some padding there as well let's just do 100 again okay and here we can also change the set of fonts of the body text as well but I'm just going to leave it as is so next what we're going to do is we have the post so we can drop that in here so we're going select that that one okay so this is going to be the Grid 2 thumbnail and here we don't have the content so for example the excerpt is going to be none and then we've also got the post date post meta that's none too so something like that okay and then obviously you can change the category so let's just say for example we have the travel category and that just displays like that right so we're going to add a little bit of padding here to make sure that's even so it's 100 pixels save it so as you can see that layout has been achieved like pretty easily so obviously you might need to add a little bit of padding down here as well um but we're going to create the next section so over here how do you create something like this so to create something like that uh it's fairly easy as well so let's head back over here turn on the Builder let's just add a little bit of padding there maybe 12 pixels or something 10 okay like that and here what we're going to do is to create the layout so let's drop the post in here what we're going to do is Select grid three like that okay and as you can see with the sort of outline here it's sort of in a box so let's go back over here and we can actually select the layout content layout to be boxed and that's basically going to box it like that and I'm sure that you've probably seen a lot of layouts that look like this so what we can do is we can hide the post uh content so let's just hide that To None like that and you can have it something like that um we're going to also change the number of posts to six posts like that so let's head back over here and check the layout so this one doesn't have the author so hide the author hide the comments and then you have a very similar layout to a lot of different blogs so what you can also do you can also go to styling and you can go to the general container so this is the container and we can actually add some padding like 10 like that okay and that's going to add some padding um in the container so as you can see it sort of moves that image in a little bit and adds a little bit of space there and um I think that looks pretty good um perhaps we could do 15 and make sure you sort of link it as well so making sure that we link it okay and that applies the padding everywhere so if that's what you want you can do that um obviously you can delete that too so when people hover over that so let's say for example let's go to uh copy blogger when people hover over that it sort of sort of highlights a little bit so we can go to here and what we can do for the container is we can add like a shadow click on Shadow click on Hover and let's just do one one blur let's do five and spread perhaps we could do five as well and then here we're going to select F6 F6 like that okay and then what we could do is go to normal and we can hover over that so as you can see there's a very slight sort of hover effect on that and let's just click on preview to show you like that right it's very very subtle but I think it looks kind of nice so we can click on Save and obviously add some padding on the top over here drop padding so let's just do 100 and you can do that for the bottom here as well and then pretty much you are done with the layout so let's just zoom out of the layout and you can see that we have basically done three different layouts and you can use what you learn here to apply it to your home page so what you can actually do is you can go over here to the row like this and then we can go to save so this could be layout one done and then you can add you know and save layout 2 layout 3 and then for whichever page that you want to display your blog post for example homepage you can use that same layout um without recreating it again so the next thing that I want to show you guys is how to customize the sidebar section of your blog post so let's just click into one of these posts so what you're going to notice here is the default sidebar and this has the default content set in and I'm going to show you guys exactly step by step how to change it so this is actually going to be different from the homepage sidebar that we set in so this this one is just specific for the homepage only and let's say if we click into that blog post then we need to set in the sort of default sidebar and what content it displays as well here so there's essentially two ways of editing the sidebar section I'm going to show you the first way which is what most people actually do but then I'm going to show you the second way which is what I recommend and it's probably going to offer you the most flexibility and best for you in the long run and it's actually not that much harder perhaps it could be even easier so let's go ahead and edit the sidebar section so we can go back to our dashboard and what we're going to do is we're going to hover over appearance and then click on widgets and let's go over on the top here and I'm going to open the homepage and then go to and open a blog post so then once we edit the settings we can see what we've done so click into that and over here we can scroll down to the sidebar section so we can click on the drop down and this is the content in the sidebar so as you can see we have the search function recent post recent comments same thing search function recent post and recent comments so you can go over here and you can remove it just like click on delete and then over here we can just delete it again we can delete it one by one and here go over here and delete and I think this one we have to delete that too so now there's nothing there so what we can do is click on the plus icon and then we can go ahead and build out the about page just by clicking the image and then we can upload the image so we can choose the profile image so I'm going to choose perhaps this one here and then for example uh we can click on the plus again and here we can go ahead and browse all so we can drag in any of these widgets so let's say for example we want to add a little bit of text so we would add the paragraph and just drag and drop that in and then we could type in about me and then we could bold it or we can also change I believe it to a heading as well so for example bold it and then we can write a little bit about um ourselves so let's go over here and and copy over this dummy text and then just paste and match style and we can update so then we can go back over here and refresh to see basically how that looks okay so the changes haven't been made there what I'm going to do is hover over this icon and Purge all so that basically clears the C so as you can see we've edited the sidebar section so it's not bad and generally that's the way that most people actually do it but it doesn't really offer too much control in my opinion because you have to sort of switch back and forth in terms of seeing how that looks on the actual uh page that people see so here like the widget um settings over here it's a little bit hard to edit as well in my opinion and you know moving things around you sort of move it like this move it up and down and it's a little bit harder to edit so I personally don't like it so what I'm going to do is I'm going to show you the second way and I'm just going to delete all the content first so we're going to go ahead and delete so now that's clear I'm going to click on update so what we're going to do is we're going to hover over themify Ultra click on layout parts and we're going to create a new layout part so this is going to be like your sidebar layout so click on add new and and this method of doing it it really allows you to even control where you want to display your sidebar so you can create multiple sidebars so a lot of different blogs will have different sidebars for different categories or different posts so you can do that too so you can call this sidebar main or sidebar 1 depending on what you want to call it click on publish and once we've done that then what we want to do is we want to go back over here just click on layout Parts again so from here we can actually get the short code so copy the short code like this to your clipboard and what we want to do is we want to utilize the hook content again so we're going to go to themify settings and then we want to go to hook content and click on plus item and here we can see the hook location so let's just paste in the short code first and see hook locations navigate to a blog post and just click into that okay so we can scroll down um as you can see we want to put it in this section here but it's neither these two so it's going to be the sidebar start so scroll down and click on the sidebar start like that okay and then make sure you put in the short code and then click on Save then what we could do is go back to this post and let's just refresh it so as you can see there isn't any content at the moment so what we're going to do is go back to the layout parts and for the side by main let's click into that and let's go to the front end so what we're going to do actually we're going to just turn on the Builder and add in perhaps a image module first so just drop it in there and then we can upload our profile image so let's just say for example just keep it as that one okay like that and then let's click on Save okay and then let's close for now then let's navigate back to the post refresh the post then you should be able to see your image there okay so now you'll be able to edit your layout part so you can click edit it and from here we can again recreate our sidebar with the drag and drop front end Builder so we got our image here so next what we could do is we want to add some text so drop that in there and for example we're could do about me and I'm actually going to go over here and I'm going to just copy what I have already so I'm just going to go over here so I'm going to copy this text over and then come back here oops and then just go over here set this to heading four again and paste in and match style then from here we're going to add again the social media links so let's go back here click on done click on the widget drop that in so I'm just going a little bit faster here because I have shown you guys already but this really gives you the option to be flexible so I'll show you in a second what I mean so put in the themify Social Links open link in a new tab click on done and then what we could do is we can also drop in the widget module again so if you want to display your specific categories we can do that so we can search for categories and do the theme of our list categories like that and we can list out the categories you can also exclude certain categories by using the category ID so I've shown you that already so again if you don't are not sure of the category IDs um it is in the dashboard section and it is where you hover over the post here click on categories and when you click on that then it will show you the category ID number like there and then you can exclude it here if you need to so we can click on done so you have really total control over it so if you want to do your popular post you can drop in a text module and and you can um again show your popular post like that and do the ad placement so if you want to paste in any sort of Google AdSense ads then you would use something like the HTML short codes and drop that in and then you can really just put anything that you see here into the sidebar section so this is going to be your default sidebar on all your post so it's different from the one on your homepage now where it is like really flexible and Powerful is where because we've actually put this into the hook content and we've used a layout part is you can edit the layout part here but also if we go to the themify ultra and if we go to layout Parts here we can create multiple sidebars so we can create like a sidebar for your main one then we can have a sidebar for like perhaps your money category and then a sidebar for your travel Cate and each sidebar can have different content right and how you would actually set that in is you would go to themify settings and then go to hook content and then here we would click on ADD and edit conditions so click on categories and then from here you can select the specific sidebar to only appear in specific categories so perhaps you could have a sidebar for your blog you could have a sidebar for your food category a sidebar for your travel category or you can even have it um for specific uh post as well so you can have it specific uh maybe perhaps for your most popular post you might have a different sidebar um yeah it's really dependent on what you want to do um but you can add as many as you need so that's like the biggest benefit of it and of course you know having the option to easily just edit everything on the front end it just makes things a lot easier so another super cool feature that I almost forgot to mention is that you can add table of contents so you can drag that in and you can add it to your sidebar layout part and just drop that in and here we can actually set in the anchors by tags so earlier we've actually set these to heading three so what we can actually do is we can deselect all the other ones and we just want these to be our contents so for the container because because uh we're not using the current Builder which is going to be this part here this is a layout part we do need to select all the document okay and that way it's going to pick up on the tags uh for the whole entire document and here we have all the table of contents so you could do like a title table of contents like that and then if you want it to be a sticky so for example if someone Scrolls down it stays there you can go to the animation tab and then for the scroll effects click on sticky and stick at and here we can stick at the top position so it stays on the top or you can also do offset which is sort of like a padding so let's say for example we do offset of like 250 so if we scroll down over here that's going to be the spacing or the offset so as you can see we have the table of contents and if we want to skip to a specific part it's going to scroll there like that so you can click on Discovery Niche it's going to scroll back up up to our content area so obviously you probably have a little bit more content um that's why it's all highlighted in red because that's the specific section that we're on but um yeah so I think it's really really cool feature and you can even enable it for only specific blog posts as well because not all blog posts need table of content since it might be like a little shorter um content uh but some might be like a very big blog post and you may want that so step 189 and 20 we have completed that so let's check that off and let's go ahead and edit the default post layout settings so I want to show you basically where you can change the default post layout as well as changing the layout for your archived post which is for example your category pages so if we click into one of the categories like for example travel then we can change the layouts for that too so as you can see it actually displays the whole post so generally you do want to change that so what we're going to do is we're going to open the dashboard in a new window and over here we can go to themify settings then click on the default layouts and then click on the default archive post layout so this is going to edit the default layout for your category and your tagged pages so by default it's set as the list post so as you can see it shows the whole post and what we want to do is I want to change it to grid number two and depending on what you want if you want to hide the sidebar section you can do that too for example right now we have the sidebar you can also change it to no sidebar for example this option here and for the Post content you can change it you can also add a post filter and align the post as well if you want to which I'm going to do you can basically edit all the settings here depending depending on what you want to show and what you don't want to show so for example you can even change the post date so for example if you want to change the dates into inline text instead of the circle style then you can do that let's just go ahead and save and I'll show you what I mean so we've saved that and let's go refresh the page here then as you can see for the travel category it's just very basic with the title on top and then we've got the Grid 2 layout and also with the dates that has been changed to the inline text like that without the sort of circle thing and as you can see it still shows the content so we're going to go over here and actually for the content I just want to display the excerpt only and I'm going to set it to maximum of 30 words then I think that's looking pretty good we can go ahead and save and then refresh the page okay so that's looking very good now the only thing that is showing that I don't want to show is this email optin which is a layout part so we actually go to back over here go to the hook content and this is the one that we added earlier so we want to actually edit the conditions so add and edit conditions here and then I just want it to show on the single post view Pages without showing on the other ones so just set that in as single post views and then save so that way it's only going to display on the actual blog post not on for example your archive Pages which is your category pages and there we go so let's go ahead and click into the blog post as well and you can also edit the post layout too if you want to so I generally I think it is pretty good but you can edit it so you can go to default layouts and then you can scroll down let's minimize this one first and then over here the default single post layout you can change the layout too so for example you can change the sidebar location you can change the post layout you can hide certain things like do you want to change this date thing as well then you can do that by editing this here okay and yeah so pretty much you can edit that by yourself and then we can save it then we can refresh it so now we're just adding the finishing touches to our blog and I'm going to show you guys how to add this Mega menu where people can hover over it and it can display your category post like that which I think is really nice and I'll even show you guys how to add this uh animated butterfly as well so let's head back to our website and I'm going to open the dashboard in a new tab so then we can edit it and then refresh our page so hover over appearance click on menus and what I'm going to do is I'm going to create a new uh menu item called featured now you can make it drop down down under from the blog as well if you want to but I'm going to actually just put it onto a new menu item so I'm going to create a custom link because it's not an actual page so we're going to do just a hashtag and then put in for the link text featured add to menu and that's going to add a new menu item so I'm going to drop it below blog just like that and then I'm going to click on categories and then over here I'm going to select the category for example blogging travel and food add it to our menu and then what I want to do is I want to make sure to drop it down from the featured menu item so click it and sort of indent it below featured like that and the next step that you will need to do once you've done that then click on the drop down here for the Mega menu click on Mega post and save menu so once that is done that should be updated and we can refresh the page and then it should have added the new menu item here so what you're going to notice is sometimes the sort of blog post uh thumbnail image here is going to be a little bit blurry because we need to make sure we set in the correct Dimensions according to the size that we've uploaded on our blog so what we're going to do is head back over here and we're going to go to themify ultra themify settings and then we're going to go to theme settings Mega menu so here we can actually set in the number of post to display I just want to display four and then click on save so here is where you can edit the size of the thumbnail and this is important because sometimes it might actually be different for you as well so let's go to media and let's open it in a new tab so for our blog post featured images I've actually uploaded them all to be the exact same size cuz I actually cropped it in Photoshop before I uploaded all of them and what I do recommend is making sure that when when you upload it just making sure all the dimensions are similar so this is a good Dimension to start off with if you're not sure 1,200 by 800 pixels so that's the width times the height and what we need to do is take these two numbers and just open up a calculator okay and we want to um make this image a little bit smaller but also make sure that it is uh proportional okay so let's do 1,200 and let's do divide by 6 okay so that's 200 so we can put in let's say 200 pixels for the width and for the height what we want to do is to take 800 pixels so 800 / by six okay and that's 133.33 and then just put in the number here like that and then click on save so then once that is done we can refresh the page and then we can hover over here and then you can see a slight change in the size of the images and now it is very crisp and it looks high quality so if you've uploaded a different size image for example let's say you know it's like 1,500 time maybe 1,000 then you want to also reduce the size but you also want to make sure you do it proportionately so like 1,500 perhaps divided by maybe 8 and then you want to make sure you divide the height by eight as well okay so for example you would put in here you would do let's say 1,500 / 8 and then you'll put 187.5 here and then here on the next section you would do 1,000 / 8 again and then 125 and then save okay that ensures that the thumbnail image is proportional okay and then it's just high quality so I think that's pretty much it here so let's just close that and close that and if we want to add for example this animated butterfly it's very very easy and you can add it on your website too so for example all we need to do you can drop this icon module here drop it below there and select Lotty and then here we can select it from the Lotte Library so you can click on that and then we can search for butterfly and then let's say perhaps we want this one here we can click on it download and use file and then pretty much we've added it in so it's on the left hand side here and we can for example we can change the background let's just delete the background remove the icon label icon layout let's move it to the center make it larger and here we go we have the butterfly and since we have the butterfly there I'm actually going to reduce the to top padding a little bit okay because it's just too large to maybe 200 or maybe even less but I think it's going to leave it as that for now and yeah so that's pretty much as simple as that for the sort of animated butterfly and then just click on save so what I want to talk about now is colors and fonts because it can change the whole feel and the vibe of your website it can make your website look ugly or it can make it look really professional so what I want to go through now is sort of help you understand a little bit more about it and then also show you how I would actually apply it onto our website so first of all when we're looking at fonts we have two main different type faces you got the sand Ser of type face and you've also got the serif type face so the difference is as you can see the edges are plain so it's just very clean and plain The Strokes are also even width but with the serf type face you've got curves on the edges and with The Strokes as you can see that's thinner and then it goes thicker so thicker and thinner and generally the look of it is more traditional it sort of has a handcrafted elegant look and this is going to be good for if you're creating maybe perhaps like a food blog travel blog maybe a lifestyle fashion blog but if you're creating like a tech Blog then you'll probably want to stick with something like a sandera type face so once you understand that then you can go to different websites like for example if you go to Apple then you're going to notice that they don't use any serif type face it's mostly just sand very clean and simple because it's something to do with tech so if you go to perhaps like a Blog uh for example for food then you're going to see more uh for example this one which is I think a serif type face um again same thing with the body text and you want to look at your competitors's websites as as well as perhaps websites that you're inspired by you can actually download a sort of Chrome extension called what font and you can click it and then you can hover over the font to see what fonts they're actually using but generally just by looking at it you'll be able to see whether or not they're using a serif type face or a sand serif so for example here it's a sand serif and this makes the website look kind of simple and easy rather than if you were to go with something like this it just makes it more sort of handcrafted Vibes um and perhaps if you're creating like a you know baking blog or something like that it might be more suitable so really look at your competitors and inspiration and figure out you know maybe what type of font that you want to choose so once you have an idea of it then you can go to a website called fonts. goole.com so the Google fonts are free and they're actually available on your website so here what we can do is we can actually go through the most popular ones because let's say if we go to our website over here and if you actually view the font so if you actually go to customize there's just way too many fonts to choose from and really I don't think you know a lot of them aren't really good for websites like sometimes you might use it for like you know print or maybe like on your social media but for the website um for the text on the website you want to make sure that everything is very visible uh very readable so if we click over here on the drop down you're going to see just hundreds of fonts like some of them it just makes your website look really really bad like for example this one so you just wouldn't choose it right so that's why it's good idea to actually go directly to Google fonts and find the most popular ones so let's say for example I want to create um a luxury travel blog so I would do something like I'll type in like the keywords so luxury travel blog like this and I'll basically look through it so for this one I want to go for a serif type face and I want to look through the different fonts here and what I can do is actually go here click on the most popular and then see which one is most suitable for what I want so I was actually initially going to pick the Playfair display but I figured out it's kind of more suitable for like maybe like a lifestyle fashion blog so I'm going to decide on the notto serf so this one over here okay you've also got the slab serif type face so this is a little bit less common but the difference here is the as you can see with The Strokes it's more even width um but it's also got on the sides the uh edges as well okay so this one makes it look a little bit more mechanical industrial it's more rectangular in terms of what it looks like I probably wouldn't choose this for like the body text but perhaps for maybe if I creating like a you know baking blog and I was using it for the headings then I could choose something like this so I'm going to go ahead and um choose the Noto serif for the heading okay and then for the body text I'm going to go for a Sans so for the body font I'm going to choose a Noto Sans so I believe that's from the same sort of family or the same um person who actually created the Noto serif so I think they're going to go well together so so what I'm going to do is apply it onto our website so let's go back over here so before we actually apply it we do want to enable all the Google fonts um just in case you might not actually see them so let's go back over here and go to dashboard and then go to themify settings and then over here we're going to scroll down click on Google fonts and I'm going to do show all Google fonts okay and then click on save so let's let's head back to our site and I'm going to show you basically how I would actually apply it so let's click on customize so you want to navigate to the themea options and you can click on the advanced options for more options here so I'm going to click on headings and we're going to edit the heading fonts so click into it and then here we're going to search for notto serif and then select it okay so as you can see it changes it for the headings so I think that doesn't look too bad I think it looks pretty good um for the uh text so what I'm going to do is also add a little bit of font weight to it because it is my heading and I want to change it to 600 font weight you don't want it to be something too thin like that it just doesn't look very good cuz it's not very readable um and I think 600 is definitely a good place to start with and I also want to change it for the heading 2 as well so I'm going to change it to the same one you you don't want to randomly you know choose a different one um again so keep it the same keep it very consistent okay like this this is going to be the heading to um here and I'm going to change it to perhaps 500 I think that looks not too bad or 600 yeah let's just keep it as 500 okay heading three we're going to edit that again so Noto serif and then here I'm going to change it to 500 as well heading 4 so heading 4 I think I believe it's some of the headings on the right hand side here okay and let's change it to 500 okay maybe let's just go for 600 okay so I think that is looking pretty good and for heading five and six I'm going to leave it as empty for now so let's just close close that and close that and then publish so I actually realized after editing the video I actually forgot to add in the body font so here click on body font and right now it's just the default body font so I'm want to change it to the notto Sands and just select that okay so as you can see that has been changed and that looks pretty good so in terms of the size I'm going to keep it just as the default size I think that looks pretty good and with the font weight I think 400 is pretty decent because anything sort of thicker I just think it looks not that great because there's not much separation between sort of the heading and then the body font so you do want to have some kind of separation or some kind of hierarchy so I think that looks perfect if it's like 100 then that's way too thin and that's not readable at all um 200 still the same uh 500 too thick I think 400 is perfect so we're going to click on publish so I'm going to close that as well and what I'm going to do is also change the background image as well as change the text as well so I can see if it fits it well so let's just turn on the Builder because right now um we're just using a very generic heading so I'm going to change this to luxury travel okay so that looks a lot better already let's edit the background color sorry the background image change it to the image okay something like this luxury travel and I'm also going to changed the sub headline as well so perhaps find all the find all the newest hotels and destinations something like that okay and then I'm also going to change this butterfly 2o to something related to travel delete that click on LY library and I'm going to try and look for something that has to do with searching or location or something like that okay so this one might not not too bad okay actually this one you just click that download and use file and then okay that's added in sometimes it may not be able to download for some reason not sure why but just try to find one which you can and then we can scroll down okay so that looks very good let's just close that so now we can also go into our blog post to see how that sort of looks okay so I think that looks pretty good and I'm actually going to go to our homepage and update my blog post as well so the images that you use on your website is also going to affect how your website looks as well so I'm going to click on edits and for the categories I'm going to select the luxury category which I added in earlier click on done let's Zoom zoom out of our website a little bit okay so it is really taking shape our luxury travel blog okay so let's just close that and what I want to do is I actually want to change my logo to just something a little bit more luxurious I guess because right now it's just very plain and generic and that's also going to affect the look of my website so let's go site and Logo here site logo and instead of just the basic one I'm going to go site logo image okay so this is is the one that I actually uploaded I think that looks quite nice uh for my brand let's close that okay perfect so right now I'm going to talk a little bit more about the colors and how to actually apply the colors onto your website so as you guys know if you have a ton of different options when you're picking colors it's very important to to be sort of consistent otherwise your website's just going to look very tacky and also an important thing is when you're adding colors to your website you also want to find a little bit of balance as well and making sure that everything is visible and readable for your uh visitors so when we're choosing colors I like to go to a website called colors. so you can actually go to this website here and what you can actually do is you can actually click on the space bar to generate colors and if you like the color you can lock it in like this so generally when I'm choosing colors I like to pick one primary color and then one secondary sort of accent color that uh sometimes I might need to use and then the other three colors or so I'm just going to use a very neutral color okay so you don't want to pick like five different colors because it's kind of hard to to match it especially if you're not a professional and it's going to take you more time it's sort of like if you're choosing an outfit for the day you know if you just go all black or you know maybe maybe white T-shirt and blue jeans it's very very simple and easy to match with like any shoes or anything like that but then if you choose like five different colors then you're just going to look like a rainbow right so it's very important um to just not go overboard especially if you're just starting out so what I'm going to do is as you can see over here I'm going to create a luxury travel blog so I want to think about what colors sort of represent the keyword luxury right so for me I think something to do with gold so what I've actually done is I've actually chosen the color palette here okay so this gold is going to be my main color and this is going to be my accent color and these ones over here is just going to be um my neutral colors okay so this one is just uh what I've chosen but this one is basically a shade of that one so what we're going to do is you can also go to um here and you can also find an image that you really really like so find something that you like and you can upload that image here and you can take the color palette from that image so let's just say for example we um upload a image so we're going to upload a hero slider image let's say for example you really like okay you're creating a food block okay open and here you know this could be your color scheme and then you can click on next open in generator and then you can use this color scheme here so this one could be a primary color perhaps uh this one here can be a secondary color these ones are kind of like very neutral tone um so I'm going to keep these and you can just lock them in like this okay and what I recommend is obviously saving it um because you don't want to close it and then forget your color palette right so you can do that you can also go to Adobe color as well so for example we can go over here go to Adobe color and then go to explore okay that's going to take you here so you can start typing in some keywords like luxury and then click on enter and it's going to have have some luxury sort of um color schemes and you can for example click into it and then you can copy the code here like for example maybe this one let's go back here and then you can click here and just change it like that and then just use this one I personally prefer this one because you can also click here to view the shades as well which you can apply to your website and I'll show you how that kind of works so this is going to be my color palette and I'm going to close these ones for now and also close this you can also read up on different color meanings as well before you choose the colors you can also go to um the website itself so for example if you like this website if you like that specific color and you want to go for a similar theme then you can also download a Chrome extension called colorzilla and then pick color from page so perhaps I want that blue okay so you got that blue and that's going to copy that uh hex code to the color here and then you can add that here right so let's go back over here so what we're going to do is we're going to go to customize and kind of show you how I apply onto the site so then you can do something similar so here we're going to click on the accent colors and then click on accent colors and for the theme accent color I'm going to choose this one so we're going to copy that click that and that's going to copy to your clipboard so I'm going to go a little bit faster cuz I hopefully you guys um you know know where everything kind of is now I just want to show you basically the thought process behind everything so the theme accent hover this is basically um the color that we're going to hover so for example um okay so here as you can see the hover color is um kind of black or dark gray okay so this is going to be the theme accent hover so what I want the hover color to be is I'm going to choose paste in the hex code here and generally what you want to do is pick perhaps two or three Shades Darker or you can do something lighter okay so that people know that it is a link um so let's just go back here like this okay so if you go to let's say let's say if we go to Apple and we hover over the button okay so it just um I think it goes a little bit darker um but it does do underline over here but when you hover over the continue There is a light it goes lighter right so people know that it is a button okay so if you go to maybe another website okay when hover color it hovers into a dark gray um which is also a good option too um but generally I like to choose just a darker shade of my current color like that right it's very subtle and it just looks very sort of seamless the semi accent color I'm going to choose the pink color here I'm going to copy that and then paste that in here okay and I think that changes this color over here as well so we can click on publish now if you do want to update this button here this is going to be the footer and it's going to be the back to top button so here um you can change the background color as well right so we're going to close this so now the website is sort of taking shape and I'm going to show you where else I'm going to apply that color so we're going to turn the Builder and we're going to start with the buttons here so we're going to click into that and click into styling click into the button link background and I'm going to add the color as well so copy that again come back here paste that in okay like that and I want to change the link color to uh it's going to be just white okay and the hover color we're going to click on Hover actually I'm going to click here and add this color into the color palette here so I can easily select it for next time and the hover color let's go Three Shades Darker come back here paste that in also add that in too so when people hover over that it's going to be a nice color like that so with this color over here you don't want to use the same color here because you want to sort of separate it a little bit so you can keep it like this like a just a neutral color or you can go for perhaps you can use your accent color so let's go bottom link background and we could use this one here so I want to see I want to see how that kind of looks so I haven't really tested this um so you do need to test it so I think okay that's not too bad um and then again for the hover I'm going to go for just paste this in here go for Three Shades Darker paste the hover color in there okay so not too bad um especially if you add it a little bit more consistently throughout your website too so it kind of matches up and balances out I think that is looking pretty good let's just add the color to our color palette too so we can use it for later and then click on Save so let's just zoom out and let's preview our site okay so that's looking pretty good okay so let's just edit the footer section to Let's close that so the first thing that we need to do is to go to our dashboard and disable the animated background themify settings and then let's go to the um scroll down here theme settings and then go to animated background colors so you can you know know if you want to um choose a color that you've chosen for example the the gold color okay and if you want to use that for your animated background so it kind of you know changes colors you can actually do that too but I'm just going to disable it and keep it simple save it let's head back over here turn on the customizer and scroll down and for your footer section we're going to scroll down to the footer footer wrap and for the footer wrap let's say for example we pick a gold color um I don't feel like you know looks that great I would either go for a neutral color which is for example just a white and simple color or I'll go for something like a dark dark gray so I think that kind of looks nice like that you can also um choose a color from the shades over here so it has a tint of that gold color um as well so I'm going to pick that one and see how that kind of looks okay so not too bad so it has a tint of gold and I feel like that adds a really professional touch so once you change the footer background color you want to make sure the links are visible so you want to go to the footer link and you want to make sure that the link is you know that color okay for the footer text which is the 2003 which the ones without the link I'm going to keep it like that I I think kind of looks nice like that um or if you want to change it you can also change it here the photo font color okay so for some reason this button over here um it is this gray so let's click over here let's edit that quickly okay so I'm not sure why that is gray perhaps I'm going to click the color as okay so I'm going to select black here click on done okay save it so let's head to our about page and see what we can actually change there so let's turn on the Builder so as you can see we've added a sort of a divider line here so we can click on that divider line color we could perhaps choose this color here or we could choose the pink like this accent color so what you don't want to do is like randomly introduce like another color right so you want to stick to your color palette so either pink or you know a neutral color like this is fine um this gold color is also fine too so I'm just going to do the gold save it and you can also for the background color perhaps you can go here and instead of the light gray which kind of looks nice already you can go for perhaps if you want a little tint of gold then we could go over here choose that one let's go back here delete that and paste that in okay so it could be like that too right so I think that looks not too bad um perhaps I would make the text a little bit darker because a little bit too uh let's change the font color okay like that and save congratulations we've completed step 21 22 and 23 so we're going to go ahead and check those off so what I want to show you now is how to create a free professional domain email for example hello aty domain.com and then show you guys how you can actually connect it to Gmail so you can basically send email as well as receive and manage all your email in your Gmail inbox so you want to go to hostinger and just log in so you'll be redirected to the H panel here we want to click on emails so we're just going to set up the free email service so we're going to click on setup and here we can select the domain that we want to create the email on so in this case it's next Creator click on confirm and then from here we want to click on manage and click on select so here you can enter in the name so for example it can be your name it could be hello uh it could be sales or info anything you like and I'm going to make this my admin email then set in a password so this is going to be the password that you're going to log to your email with and set in a password recovery email then click on create a new account so if you want to access your email then we can click on access Webmail so to view your email as well as to send and manage your email you'll need to log into to this email panel okay so it look something like this and I'm just going to click on get started so you can customize your profile click on next and I'm going to unselect that one let's just click I'll do this later I'll do this later okay so this is going to be your inbox and to send emails you'll have to send it from here as well as where you can read your emails now if you want to connect it to your Gmail account I'll show you guys how to do that so let's go back over here and then I'm going to click on emails again on the top click on manage and then over here I'm going to click on configure desktop app so here we just need the details so we need the details to basically connect it to our Gmail account so right now you can log into your Gmail account and then we're going to click on settings on the top right hand side see all settings and I want to click on account and imports so over here I want to basically check mail from other accounts so I'm going to add an email account so here we're going to put in the email address so our email address is hello at next Creator so I'm just going to copy that come back over here okay just paste that in click on next and then I'm going to import emails from my other account next so here we need to put in our username so again this is going to be the same so next Creator and then the password so the password that you set in earlier and the pop server so the pop server will come back over here and we will basically get the details here so this is going to be the incoming server copy that come back over here paste that in okay and for the port so the port is 995 set 995 and if you want to leave a copy on your hosting a email you can select that if you want to so I'm going to do SSL label incoming messages and then click on add account so right now email has been added and it's basically going to retrieve email from that account so right now it's asking us do we want to send email as so I want to do that so I'm going to click on next and then I can put in my name click on next and then here we need the SMTP so the outgoing server details so we can go back over here and we need the outgoing server details here so copy that to our clipboard come back over here paste that in and the port number is going to be the SSL so 465 and then for our username which is going to be our email address and then the password that we set in earlier and then always select the SSL sell one click on add account okay perfect that's successful so now we'll basically need to confirm that in our Gmail so let's head to our Gmail account and let's go to inbox so we're going to wait a few minutes and you should receive an email okay so that took around 2 minutes and we received the email here let's click into that so what we want to do just click on this link to confirm that okay so now we can actually send email as so if we go back here to our inbox okay so just refresh the page and let's say for example if you want to send email click on compose and here we can select from the email and we can select it from hellc creator.com and then you can enter in the email subject as well as the message and then click on send then it's going to send as this email here okay so congratulations we are pretty much done with the tutorial so just some final things now if if you do get an update message in your dashboard section it might show over here or um if you actually click into the themify settings you it might actually show um on the top over here or something you can also go to the change logs and see if you actually have the latest version of the theme so this is the latest version of it now if you do need to update the theme there is basically two ways that you can actually do it so the first way is the manual way and you can update by going to Hogan in.com update and downloading the latest theme so you can click on it just like that and again just download it onto your computer and then you can go back over here so what you'll need to do is just go to appearance themes and what you'll need to do is you'll need to basically select this theme over here so any other theme and activate that one then from here okay go click into the themify ultra and just delete it okay and then go back over here add new theme and then upload theme choose file and then choose the themify dultra doz open install and then you want to reactivate that theme like that so you can head back to your site and everything should actually retain right but you will have the updated version of the theme so if you want to get automatic updates then what I do recommend is actually um clicking on the link over here so you can purchase the Single theme for $59 and you can choose the themify ultra theme which is the one that we used in the tutorial it's also the most popular one or you can go for the master club which includes all the themes so themify also have other themes and they've also got the plugins and Builder add-ons and that's going to be all included with the oneyear support form and the automatic updates because you'll get the license key and you'll have access to the themes and you can actually download the updat so with the updat you'll get the license Keys included so with the updator basically you'll be able to sort of automatically update the theme so for example let's go back over here to our dashboard section and you'll upload the updat plugin add new plugin upload plugin choose file okay so I actually have it already so once you do have the themify updat installed you'll be able to update it automatically within your dashboard area um you don't have to redownload and delete the theme and reactivate the theme so you can also get themify membership and that actually gets you the support as well so with the support um you get access to the support form so basically you can ask any questions and things like that um you can click on the theme start a new topic and um yeah basically if you want to really take your blog to the next level and really learn how to customize your blog because a lot of people actually have very specific questions and things like that I really can't get back to everyone and um yeah I think it's a really a great deal to get the support member and then also get the automatic updates but again you didn't have to I've also um allowed you guys to download the updated version for free okay and you've also got the slider Pro and the Builder Pro so with the slider Pro and the Builder Pro so basically with the Builder Pro you can really design your theme um from the top to bottom including being able to customize all these different sections every single detail about it so you can really customize how you want your blog post to look um and things like that I've also got on my channel uh videos on how to create a custom header as well as a custom C footer um and you can do that for free using the basically the layout parts and the hook content basically um exactly what I've shown you uh in the tutorial before so in around a few weeks time I should have uploaded the follow-up video to this current video which basically talks about how to make money from your blog more specifically talking about affiliate marketing and passive income so yeah thank you guys for watching this video hopefully you guys have really enjoyed it if you have any questions you can drop it in the comment section below

Channel: Hogan Chua

Views: 70,929

Keywords: how to make a blog, how to make a wordpress blog, how to design a blog, how to create a blog, wordpress tutorial, wordpress, how to create a website, how to make a wordpress website, hogan chua

Id: Akt9O_f_Vfo

Length: 207min 13sec (12433 seconds)

Published: Mon Jan 01 2024