Astra Theme Tutorial with SiteGround | Create a Website w/ Gutenberg

how to start a blog using the astra theme let's get to it [Music] what's up everybody it's david from websitecreatepro.com and welcome back to the channel so in this tutorial video i'm going to walk you through step one to step down on how do you start a blog using just the astra theme astra is definitely one of the most popular wordpress themes available right now it's designed to be lightweight fast and easy to customize this tutorial video is perfect for anybody who's been looking to start a blog an information oriented style website so you can make that money from affiliate marketing as well as running ads on your website the tools and resources that we're going to be using in this video are namecheap as our domain name registrar siteground as our web host then we're going to install wordpress and design our website with the astra theme like always make sure to check the links in the description for any resources mentioned in this video so let's begin alright welcome to the tutorial so this is the website we're going to be building we're going to be making an information oriented website and i'm going to show you how to design uh this specific website using just astra literally just astra and just the wordpress default editor you can actually do this it's pretty impressive anyways i'm going to show you how to obviously create a nice looking hero image how to add a text overlay uh buttons welcome message how to add these in-depth guides so like when you mouse over it gives a little bit of text going along with it how to add in like a section right here and break it up and how to make it super wide like this so it kind of visually stands out add text overlay over that's how to add in your latest blog post how to have an email opt-in form sit pretty at the bottom how to change the footer and add a privacy terms and disclosure page uh actual blog posts how do we how do we add in breadcrumbs like this how do we add in this default disclosure that's going to be on every single blog post how do you link to disclosure like this how do we add in a nice little box like this to promote products how do we add an email opt-in form to sit at the bottom of every single blog post uh et cetera so if you're ready let's get started welcome to namecheap.com so this is the spot where i recommend that you register your domain name now you can totally register your domain name at a web host but it's going to be more expensive long term and so i personally use namecheap i keep all my domain names with them domains can start at 8.88 a year and just that's a fantastic price so anyways to get started with namecheap it's very simple so you just come to the search box and put in the domain name that you want to register so type in my superamazingblog.com all right we'll click the search icon okay so mysuperamazingblog.com is available so to add it to your cart is very simple just click the add to cart button there we go okay so we'll go ahead and view item and let's go ahead and check out okay so this is the checkout page for name it cheap and so you're going to have to create a namecheap account obviously but here you have your domain name registration you can register a domain name for one year up to 10 years in advance i do recommend registering for a few years because you do lock in that low price domain names do renew about 12 so it's not that expensive but if you want to lock in that low 888 price then just go ahead and select like five years or whatever you think is best for your project now who is guard is fantastic it's free you get it completely for free web hosts and other domain name registers they charge extra for this if you're like what is this but whose guard keeps your information private because part of icann rules is that you have to disclose a contact information so who is really nice because it keeps just everything private and it's free forever and that is basically it so all you have to do is go ahead and click confirm order pay and create a namecheap account and you are good to go welcome to siteground.com so siteground is one of just three web posts that are recommended by wordpress and they are one of the fastest highest performing web hosts around they definitely outperform dreamhost and bluehost in terms of speed but their price point is a bit higher but what i really like about siteground is that they have a great introduction rate for beginners who don't even have a website to get started now on the homepage you're going to see a bunch of different options we don't want this one that says manage because we won't have to have access over the back end of our accounts we're not starting a store and cloud hosting is for high performing sites high traffic websites which is not us we're starting a brand new website so just go ahead and click on web hosting now we have three different options startup grow big and go geek i really like the grow big one the most and it's unlimited websites 25 000 visitors a month or so 30 000 visitors etc that's like a thousand visitors a day which is a good amount of traffic startup you can only have one website so i'm telling you like once you understand how to create a wordpress website you are definitely going to want to have unlimited websites anyways go ahead and click on get plan okay so now in this page we have to put in our domain name so we can register domain name through siteground which i do not recommend because domain name registration is 15.95 a year namecheap it's 888 which is why i had you go through namecheap so you should have gotten your domain name at namecheap so go here i already own this domain name okay now put in the domain name that you registered then click on proceed and there you go so now you just have to review and complete your payment information and create a siteground account i'm not going to insult your intelligence and walk you through like how to pay for something online just fill out the information as appropriate and you want to just come down here to make sure everything looks good so you have your choice of data center over here so if you want to change the data center we have usa australia germany so what this is like where where is your traffic primarily going to be coming from okay so if you have like an american audience then you probably want usa okay if you have a european audience maybe you want like europe or germany for example and that's it okay then come down here say i would like to uh i would like to see siteground news and updates maybe if you want and definitely you have to click on this one where i confirm i've read and greet to sitegrounds terms of service and then that's it so go ahead and click the pay now button and you are good to go welcome to siteground.com so after you submit payment you're going to be presented with your siteground web hosting account dashboard now we have to set up our website i'm going to show you how it's done quick and easy in like five minutes so you can just go ahead and click on this setup site there or you can click on the tab up top there and you can click on new website there or this one create a website there whatever they all drive you to the same exact page which is this page right here where we can add a new website so we can add a new domain name and so what that's going to do is going to register a domain name through siteground which i don't recommend temporary domain name means like box123.siteground.com whatever literally just a temporary domain name for like just practice something or whatever you want to do we want this one an existing domain name so now we want to come down here enter in your domain name so we want to use the domain name that we used when we signed up to siteground so let me just go ahead and put that in right here there we go and go ahead and click on continue okay so the domain name you use is not registered with your siteground account now to proceed blah blah blah okay all this is saying is that you're gonna have to set up name servers not a big deal don't worry about it click on continue okay so now we want to click on this one where we can start a new website because we're starting a new website we're not migrating a website from another web host etc but if you do have like a different hosting account and you want to move over to siteground you can just go here and migrate your website but let's go ahead and click on start a new website okay so now we can click on wordpress woocommerce webley other we want wordpress so let's go ahead and do that okay now wordpress setup login so this is going to be how we log into our website so let me go ahead and click on an email address so let me just put in my email address here okay and then let me go ahead and put in a password okay and let's click on continue now we can install siteground scanner which we're not going to do and go ahead and click on finish and there you go so now siteground is creating our website okay so it says we are all set but one thing we have to do is we have to point the domain name and so what that means is like we have to go into our namecheap account and update the name servers to point to our siteground account so very very simple so you just want to jump in here and you just want to take whatever your name servers are that you want to navigate to your domain name okay we want to come down here we want to go click this drop down you want to go to custom dns name server one paste that in boom okay and now go to name server 2 take it copy boom right there paste then click on the little check mark okay so now you've just successfully updated name servers it says it will take 40 i could take 40 hours is n i've never seen that it usually takes like five minutes so what you need to do now is just wait a little bit okay so just wait like five minutes six minutes for everything to propagate properly and then your website should be all set once you've waited about five minutes or so come back to your websites tab and this will have your website details you want to click on wordpress kit and then you want to go to wordpress admin because we want to log into our website so your admin for your page is always going to be your website dot com whatever it is slash wp admin now you should probably see something like this where a big scary message the reason is because this website doesn't have an ssl certificate activated and so we can go ahead and quickly and easily do that ourselves right down here so with the ssl come down here and click on add and so when sso does it adds the little icon up top there now we can use let's encrypt and let's encrypt is completely for free make sure that's selected come down here and click on activate all right so now we are in our ssl manager select domain name select the ssl certificate we want let's encrypt and go ahead and click on get all right so now it's installing the ssl certificate it does take a minute maybe two minutes not too long fantastic so let's encrypt is installed for our website fantastic so all we have to do now is click on go to my accounts and so that will navigate us back to where we were okay so let's go to websites okay go again go to wordpress kit go to wordpress admin and there you go so now your website should be secure and this is your wordpress admin so what you need to put in here is the credentials that you use when setting up the website so just put in your email address that you use as well as your password and then click on login welcome to wordpress so this is your wordpress dashboard and there's a couple of little back-end settings we need to take care of quickly into before we begin designing our website so let's just get to it all right so first thing i want you to navigate over to where it says plugins now plugins you get the wordpress starter plugin this is from siteground we definitely don't need it i would definitely leave sacrum optimizer this is a fantastic proprietary plugin by siteground that makes your website load faster for the end user so let's go ahead and delete that okay so the first plugin i want you to add now let's go to add and i want you to add something called yoast seo all right let's go ahead and click on install now and let's click on activate okay so what yoast seo does is it just gives us a little bit more control over our on-page seo like our page titles meta description allows us to have breadcrumbs on our website a lot of really helpful things so if you're like what are you talking about let me let me type in uh what website creativepro.com so what like a meta description is this section right top right here in the page title yoast allows us to have all that little granular control over how this appears to search engines etc now the next plugin i want you to go ahead and add is called smush so type in smush there we go now what smush does is it allows us to optimize our images that we upload to our website and so for example we come to website createpro.com this is a hero image it's a big image it's optimized so it loads quickly you know if i reload this look how just boom loads really fast okay because and that's what smoosh helps does that because it optimizes your images by making it made making it a smaller file size but still not reducing the quality okay and then the last plugin i want you to go ahead and install is called jetpack now jetpack is actually from wordpress and i like jetpack because it allows you to have uh primarily what it does that i like the main thing that i use it for is related pose so if we come down again to like websitegreypro.com let's just jump into the domain name register blog post if i scroll all the way to the bottom here you're gonna see a bunch of little uh you may also like boom boom boom this is being powered by jetpack and it's on jetpack servers not my server so i'm not like you know it's not taking up any bandwidth it's just a helpful little thing that increases uh people like clicking around your site internal links and pete's more time on your website etc and so just leave it there and so we're good to go that's all we need to do now i want you to navigate over to where it says users click on that alright so now we should have one user over here now let's open up this user and there's a couple little things you need to know so we come down here so right down here biographical information this is where you can put in like david likes to drink coffee and likes long walks on the beach et cetera blah blah blah you know you see a blog post you see an author bio at the bottom of a blog post that's where it's being populated from now you have your profile picture right there you can click on this and it's going to take you to a website called gravatar and so gravatar is a website that allows you to associate a picture with an email so when you leave a blog comments or your own website uh has a pic image to be associated with the email okay and so now here the account management here we can set up a new password and so if you want to change your password this is where you can just do it quickly and easily okay and now one other little thing too let's go back to all users we can also add new users we click on this now when you see the role right here so you can create a new username email first name etc then you can set the the role and so right now we're in their admin accounts okay so that's full access so for example if you were to hire a blog writer for example you could just have someone come in here and limit them to being an editor so they only have access to like say the blog post for example and so it's a good idea also just to create an editor account for yourself and log into your own website as like an editor or an author yourself okay and just leave the admin account for just you know editing the website etc totally up to you but it adds another layer of security okay now last let's come over here to settings and i want to come down to permalinks okay so now we want to come over here and we want to click on custom structure now for blogs i personally like the structure of slash blog slash post title now you can use either post name which which is good or you can do the custom structure that i like there's no right way it's not that big of a deal but i definitely prefer this type of structure because it provides a nice site architecture for the website organizes everything appropriately under the blog but it's totally up to you but you definitely don't want plain because it's p equals one two three that gives no indication what the blog post is about and we wanna shy away from anything with dates because dates are great if we're producing time sensitive content but if we're not like a news website then we don't need dates in our urls so anyways go to custom structure slash blog okay and there we go and now you want to click on save changes fantastic okay great so now we have our plugins installed now it's time to install the astra theme so let's go over to appearance let's go to themes now by default wordpress comes with a bunch of like themes already installed and i have tutorials honestly on this channel of each one of these if you want to check them out but again let's just go through this and we can just go ahead and delete each of these themes but let's go ahead and first install the astra theme so go ahead and click on add new at the top search for themes astra hit enter boom right here let's click on install and let's go ahead and click on activate great now the next thing we need to do is for security reasons we want to go ahead and just delete these other themes that are installed we don't need them on our website we're not using them there's no need for them to be here so let's go ahead in this click on the little delete icon and boom there we go and one last little thing that i want you to do is to enable https so we went ahead and installed an ssl certificate on our website through our siteground dashboard now we just need to enable it so you just have to navigate over to where it says sitegroundoptimizer and then you want to go under environment and optimization then you just want to make sure that you enable https and what this does is that it forces a secure connection to your website so functionally speaking you actually have two versions of your website you have an unsecured version which is the http version and you have the secure version which is the https version and so just by enabling this it will force anyone who tries to access the unsecured version to the secure version it's just something that really makes your website just more secure and better for the end user and you have any type of issue just come down here and enable fix and secure content if you're having any type of uh issue we are finally ready to design our website with the astra theme so if you take a look at like website createpro.com you can kind of get a feel for how i personally design all my information style blogs on my niche websites what i personally like to do is have a very beautiful impressive looking homepage and then i like to keep the pages and blog posts as simple as possible why because we're making a blog and what's the goal of a blog we want to rank well we want people to read our content click our links so we can make that money from affiliate marketing there's absolutely no reason to make some big overly complicated design nobody cares that much but it is important to have a very beautiful homepage sort of like a book okay like make a nice cover for your website then your pages are very easy to read understand and the end user can get the content in the whatever it is they're looking for quickly and effectively now astra is a fantastic theme overall i'm quite impressed with it because you can install like a plug-in like elementor and design your website you can design another plug-in like astra sites and download templates and then customize a template quickly and easily to get a website set up really quick and easily but we're not going to be doing any of that in this tutorial video there are no cheat codes i'm going to walk you through how to take astra and just edit it with just wordpress and you're going to be quite surprised about what you're able to create with just the wordpress editor no elementor no other various like third-party plugins just asha and wordpress so let's begin designing our website so if you take a look at a website like websitecreatepro.com what you're going to notice is that this is the home page and this is literally a page within wordpress i created to be the home page then you have a bunch of other different pages so for example if we navigate over to the blog page uh this is the specific blog page for the blog archive now within wordpress if you want to have a home page for your website which is what we're going to be doing you have to create a page and have it be set as your home page and another page and have it be set as the blog so let's just navigate down here we'll go to reading and we want to go to a static page now we have to select the home page and a post page but you'll notice something we only have sample page that means like we have to literally you have to literally create these pages so go ahead and click on pages and then we want to click on add new okay so go ahead and just type in home page okay and so we want this to be our home page so that's where we're going to call it that now go ahead and click on publish all right there we go now next i want you to scroll down here and i want you to jump down here to your meta description and this is where you can give your site title so you want to have something where it's like uh site title okay page separator and then a keyword description of the website for example if we take a look at website career pro page separator plan build promote profit whatever you want to do something similar have a keyword phrase that describes what your website is about then this is your meta description so your meta description should contain various keywords and phrases it should just describe what the website is about so for example if i type in website creative pro right here create a website start a blog launch an online store why do i have those words because this is helps describe to search engines and end users like what the website is about it's about creating websites starting blogs online stores free tutorials that sort of thing so it's a kind of a art and a science with your meta description but you want to put something in there and that's it and so next once you have your homepage launched we have to go back and go to add new and now we just want to do the same exact thing for a blog so go ahead and type in blog and make sure that the url structure right there is yourdomainname.com blog go ahead and click on publish there we go okay so again come down here and we want to come down to the meta description and this is where you want to put something you don't want it just to be this default uh structure so we want to just give it something for example with website great pro again i call it the website career pro blog case studies tutorials and more like you can just whatever your site is about so if you have like a coffee oriented blog for example the like the coffee the coffee house blog okay so page separator whatever advice advice advice and guides whatever you know something like that just have some thoughtfulness to your page description for your blog posts and the homepage alright so now we can navigate back to our pages we have the home page we have the blog we're good to go so once you set up the page titles and the meta descriptions then those pages are functionally done and so we can just come down here go back to reading and click on static page home page boom home page post page i want to be the blog page and then go ahead and click on save changes fantastic let's take a look at our website and there we go so now we have every now we have this home page is now set to be our home page and we're ready to customize the look and design of our website setting a hero image and a call to action so let's get started designing our homepage and so what i mean by hero image is this type of image with this text and a call to action etc you can totally do that with astra it's very very simple and so the first step in the process is to go to your homepage and you want to edit the page and so you want to edit your homepage okay and so right here in the sidebar we have astra settings okay and so over here is where you can have specific settings for this specific page and so we want to disable the title okay and so what that does that turns this off now the sidebar right here i don't want a sidebar on the homepage so we go here customizer setting we can say no sidebar now content layout we can have box content box full width cont and full width stretch so we want the image to stretch the full length right so we're going to want full we're gonna want right here full width contained okay we don't want stretch because what stretch does is it eliminates padding so everything just gets stretched all the way from left to right looks super weird so we don't want that we want it to be contained a bit and there we go and so let's go ahead and now upload an image so we come down here and then this is your block so click on the plus sign and you want to type in something that says cover now this is a cover block and now you have to upload an image and so you can find free images copyright free here at unsplash so for this tutorial i'm going to be making a coffee blog okay and so let's just go ahead and upload an image okay so i download this image from unsplash right here i think it looks really nice now one note about images you want to like decrease the size of them when possible for example like this image right here is 1500 by 1 500 it's big but it's not too big uh because if a big image would be will load way too slowly okay all right so right here it's very simple so now over this image you can start typing in your call to action so i'll say coffee coffee house okay and we'll just say advice and guides for brewing coffee there you go and so i want this to be centered okay and we'll leave it like that for now so let's go ahead and click on update there we go okay so let's reload the page okay so that looks okay so there's a couple different things so first off i want the uh this image to stretch from left to right i don't want this white space and also i want a transparent header like this so it's like looks like on the image behind it instead of the white header how do we do that very easy so again we have to click the home page now we're editing the page so come down here transparent header customize let's enable it okay and next we want to adjust this image so how do we adjust this image you click on it okay that's it now when you click on it it gives you a bunch of different options to edit this specific block so we want to come here and we want to change it to full width there we go now it doesn't change it on this end but it changes on the front end so let's go ahead and update this let's reload this okay so now we have a transparent header great and the image expands from left to right looks good now you're like why is it dark like i don't get it like why is it so dark well it's called an overlay okay so you have to come down here to the opacity and so you can turn this down you can turn this to like whatever you want if you want to be like a little bit dark or whatever and so just i would you know if you're going to be putting text in general you need an overlay over an image to make the text readable but again it depends on the image so for example maybe i'll make this text black or whatever but whatever so this is kind of like where you have to come down and change the opacity so if i turn this down just a little bit we'll say we'll say like uh we'll give it a two oh right down there okay so we like that let's go ahead and update that okay and so that looks a lot better that's a lot more uh readable and it's not super dark but it's really that simple okay so that's all you have to do to add a very beautiful hero image uh to your astro website okay so let's go ahead and adjust our call to action so again this is going to be your logo up over here on the website and your call to action should be a call to action like telling people to do something it should be like welcoming people to the site it should quickly and easily explain what the website's about and tell people what to do where to go maybe provide a button email opt-in form or just introduce the site and have some keyword rich title uh you know on the homepage and so that's what we're gonna do here so let me just adjust this so let's just jump back into our homepage and let me just get rid of this instead of calling it coffeehouse i'm going to say we'll say make amazing coffee okay and so that kind of helps describe what the site's about and then we have advice and guides for brewing coffee that looks good now if you want to change the colors you can just come over here and under here is where your color settings is so if you ever like if whatever your design is you want you need to change the text of black or gray or something else that's where you do it here but i'm going to leave it white for me because i think white looks really nice and so let me go ahead and just click on update all right so now the thing that i want you to make sure is that make sure that this is h1 so h1 just means header header one header header two header three your h1 tag there should only be one sentence that's h1 because it should be the page title now this is a subheading so we can go ahead and make this into a heading and we can make this into an h2 heading and then we'll center the text right there and let's go ahead and click on update and let me reload the page and that's looking better okay and so now if you want to change the font style and whatnot that's very simple with astra we just go over here to the customize option and you want to go navigate to where it says global okay so then you have to click on uh typography and then we want to go to headings okay so now we have the default setting for all headings so here is where you can change your header font family to something else we have a lot of different options again you can play around with it as you see fit i'm just going to use poppins very simple there we go okay so that looks good so now i want to customize the h1 so let's come down here to h1 font family set to inherit inherit just means like it's inheriting the settings that we have up top there so we can we can leave that as is all right so now i want to kind of change the line height so we'll make it a little bit better like that that looks that actually looks a lot better we'll leave it right there it looks good okay so now normal maybe i want to have this be like semi-bold that looks good and next we want to make the text really big so maybe i'll do something like 70 and now that looks really nice so we have a really strong call to action right there make amazing coffee it looks nice with the subheading a little bit smaller i like the way that this is looking and so i'm just going to go ahead and click on publish okay great and so let's click on the x and that looks really nice and so we can just leave it as is uh one little thing you could also do is right click and go to inspect now when you inspect you just want to make sure that you have it set to like uh be like what it would look like on a phone okay and so you always want to make sure with the actual theme to just load your website on your phone to make sure everything looks good because sometimes when you make the text too big uh it'll look nice on say a tablet or a laptop but when you're on your phone it could be a little bit weird looking so just make sure everything looks okay on both your uh laptop as well as your phone and that's really all you have to do to customize the text up top here now in order to add a button that's super duper simple as well just click the plus sign then you type in button okay and then there's a button boom okay and like right here you can customize the text of the button so shop i'll say shop now okay great so now i want to kind of adjust this and have this be a little bit centered now to add a button right here is very easy as well so we can come over here and we just have to navigate back here to click the plus sign and then you just want to type in something that says button okay and then click on button there we go now the button you have two different options so if you click the button you're editing the specifically the button if you click the block area now you're editing the block okay so if you're just wondering how everything works so if i click the block right here uh i can say something like subscribe okay we'll say subscribe boom like that now you're like i want to center the block you have to click the block section okay don't click the button because you're going to be like where do i center i don't get it that's because you have to click the block section then we come over here then we can align sensor and then that's it okay so when you click the block then you have a bunch of different options for how you want to change the look and the feel and the style of the um this button right here so if you want to have a default style not set outline you can just change things as appropriate right there so i'll click on update let me reload the site okay so now i have a transparent button so why is that transparent because i haven't set the default style as outline so i'll click and make that fill so then right here we can change the color settings for the button itself and so again what color is this background image you need to pick something that kind of matches a little bit maybe i'll go with like a black a little bit all right now you know our i'll leave the text white i'll make the button black there we go alright so now what i want to do is continue building out the body of the website so i'm going to lead off with a nice little welcome message that kind of explains what the website's about so this is just something i personally like to do i like to have a call to action at the top of any of my information websites then right underneath here a quick little like two three sentence paragraph that explains what the website is about in a little bit more detail but just help again scannable helps grab people's attention people kind of know instantly if this site is for them or not etc and so with wordpress and astro this is super duper simple so again we just come back to our page and all you have to do is add in a paragraph so you just have to click this plus sign and you just want to add in a paragraph and then all you have to do is just literally just write something that's it so i already went ahead and wrote something so let's just go ahead and do that i'll paste that in there okay so now i want this right here to be the title okay and so i don't want this just to be a standard paragraph so we'll make it a heading and i want that to be h2 then i want this to be centered there we go and let's go ahead and bold that all right let's go ahead and update and see how this is looking okay so let me reload the page okay so that looks okay so you're if you're wondering like well how do i add space how again how do i make it so it's not so wide there's a couple different options that you can do in order to change that okay so first off again to add any type of space again you just have to add in another spacer so again let's go here we'll just do this and we'll add in a spacer and there we go move that up move that up right there let's update that see how that looks okay so that's kind of giving us a little bit more we'll just reduce that just a little bit maybe like that okay let's go ahead and update that and take a quick look at it okay so that looks nice uh maybe you know whatever you know you can adjust as you want but that's how you would add space to different elements okay so now in terms of the width of the website where do you go to change that let me just reload the page quickly okay so to change the width of the page a couple of different things first off uh let me go back to this okay so if we come over here to actual settings we have full width and contained so if you come over here and you go full width stretched and we'll update it you'll see what happens is what that does that the text is stretched from all the way from edge to edge and it looks really weird so first things first make sure it's full width contained and then that means that's activated the container now you can adjust the width of the container for the page to do that again easy we have to go to customize and once you click on customize it it's going to open up and we can come over here to global and then we want to come over to where it says container and if you're like what's a container a container is just means like the the width of the page okay so now right here we can kind of play around and change as we want so if we want it to be really wide we can do that if we want to be a little bit more narrow we can go ahead and do that i would recommend something that's not too wide not too narrow just something in the middle like that looks okay right here we could always make the text bigger if we want to do something like that but again it's your website totally up to you whatever you want to do so if you want to like minimize as much as possible and so with this container option you can change the container for uh different aspects of your website like we have the page blog post layout archive layout and so you can change the width as you want right here uh so and that's all you have to do to change it so let's go ahead and publish that i kind of like the way that it looks so if i go to default actually default's quite wide it's 1200 pixels i do like to keep it a little bit like we'll just keep it at like 900 a straight 900 i think that's nice okay so we'll go ahead and publish that and so that makes that makes the width 900. all right we'll click on x okay so there we go so now we have our little message set up right here okay so let's come down here okay so now if we want to change the text size it's very very simple so we just highlight what we want and over here it's going to have typography and then you can just come over here and change to what you want so if you want it to be medium you can just do that quickly and easily or you can just make it a custom size as well and so let's make this a little bit smaller we'll say 18. all right let's go ahead and update that all right let's reload this and see how that looks okay so that's that's coming in quite nicely okay so i think i actually make that a little bit bigger 22 okay good all right so we got that all set let's make this a little bit bigger okay let's go ahead and update that and let's just take a quick look see how this is coming together all right so that text is a little too big actually so we'll come down here 18 update that and there we go okay so that's looking good okay so i like that it's like you know similar kind of readable not too small not too big what looks weird and so we're good to go so now let's continue adding elements to our home page all right so what i want to do is make the home page into a sort of like visual menu i think a visual menu is a nice layout for any blog information oriented style website it's kind of like what i do here on website creativepro.com where we have the best and pieces of content that going after very competitive terms uh tutorials latest blog posts at the bottom you can email opt-in form etc this is a nice layout for the uh website uh because it introduces the website and introduces the content so how do we get started so the first thing that we need to do is we need to add in a new plugin so go to your plugins go to add new and you want to find something that says stackable there we go okay so stackable page builder gutenberg blocks let's go ahead and install it now if you're wondering what the heck is gutenberg this is gutenberg this page this block editor that we've been using it's actually called gutenberg all right fantastic so gutenberg's installed let me go ahead and reload the page i'm reloading the page just because then the blocks are activated all right x out of this okay so let's get started so i'm going to add in a little title like this okay so i like giving my sections a little bit of a title right there so it's it's scannable it grabs your attention etc so go ahead and click the plus sign and if we click on browse all these are all your blocks you're going to notice it's like bright colorful blocks these are coming from stackable now the one that i want is columns and so what columns do is it just breaks it up okay it breaks up into two little blocks where you can add content now the column width over here i'm going to pick this one in the middle i'm going to make this a button and then this the title all right so let's go ahead and add in content so there let's click on paragraph and then uh let's say buying and brewing let's say something like that okay then underneath it's uh in or we'll say in depth in depth guides there we go now i'm going to make this a h2 tag so go here and heading h2 looks good and i'll keep that one just the way it is and let's go ahead and add over here a button so type in button and i'll add the stackable button right there okay so now that our button is black up top there we want this button to match so we want this button to be black as well and so right here first off we can change the button text instead of saying button text let's say uh we can say view all guides okay it may be like with this button you could link to a category page or you could have a dedicated page on your website however you want to set that up so you can just add this then right here you can put in the url that you want all right so now let's change the color of this so we have the button color right there i'm going to make this black there we go that looks good okay so now we can change the typography i want the typography to match the website so i've been using pop in so just change it to whatever type whatever font style you're using so it matches so because you want to have like uh your fonts all matched you want a font to be the body and then a font to be your title so you want two fonts you don't want three or four you don't want things to be like a different font style etc okay so let's take a look at that so so i'm liking the way that's looking let's see if there's anything else we can do in terms of the style right here so if we come over here we have hover effect like what happens when people mouse over the button all right and so we have here vertical padding border radius so if you want to make the button a little bit more round we can come over here maybe like like four a little bit all right so let's go ahead and update this and let's just take a look just eyeball it let's see how it looks all right so that looks good so i would prefer there to be a little bit more space above this element i'd like this to be a little bit more uh bigger bolder you know just stand out a little bit better so let's go ahead and fix that all right so first things first i want to go right here and we're going to add in a spacer all right so add in our good old handy-dandy spacer i'll minimize that just we just need a little bit of space not too much give some breathing room between the elements there we go okay good all right so let's go ahead and make this bigger so the default text size maybe i want to have this uh be bolded and default i want this to be maybe large i can come over here and have a custom size maybe we'll change this to like something like 45. all right there we go all right and so we can maybe bold that see how that looks let's go ahead and update that and let's reload this okay so that's looks nice i think maybe i'll get rid of that bowl that doesn't really match we'll just leave it like that all right let me just go here we'll take get rid of that and we'll change this color setting to maybe a gray and then i'll go to custom color and so i maybe i want just to be slightly gray just a little a pinch gray so just you know stands out just a little bit let's reload that okay so that's looking good maybe i can make this a little bit bigger we'll go with we'll go with 50 see how that looks okay so i kind of want this to fill up a little bit more of the space so let's go to like 54. all right let's take a look all right that looks good okay so now we have a nice little welcome message and we have a little introduction for the title right here about what the section is going to be underneath here and add in a button right here this is a link into the home page but again you can change wherever you want this to link so i'm having this like view all guides so maybe you could create a whole dedicated page on all the guides you have or you could link to a category page or whatever you have that flexibility so now let's add in some images underneath and link to our in-depth guides okay so now we're going to be adding like specific images to our website that have a little bit of a description to go along with it so first thing i want you to do is come down here not here okay because this one is associated with this block right here so make sure that you select a new block uh where it's in its own section right here the reason is because like this is split in half so we don't want to be adding images only under this like one section right here we won't have it be the entire section anyways with stackable because we installed that makes it very very easy so we can come here and we can go to say image box all right and so what image box does it allows you exactly literally what you see you mouse over it and it gives a nice little title and description all right so how do you add images so just click on the square and now you can select the image that you want so i already went ahead and selected a already installed a bunch of images on my site so you can go ahead and on your own time and do that so i'm going to add these images quickly and easily there we go and there we go okay so let's go ahead and do a quick update see how that looks all right let me reload the site all right so that looks okay so that's looking really nice we have in-depth guides boom we have different images right there and we can just start throwing in a title right now right here okay so um okay buying we'll say buying brewing and then we'll say fun facts i don't know fun facts good or not exclamation mark all right so now over here on this section is where you can edit the way each block looks okay and so we come i'll click on this one for example all right so right here you can change it to the blocks to be plain or basic you can come over here to the style you can change the the way the columns work so if you want two or three so for example like if you're like i don't want three i want two well that's where you can come in here and change it you can change also the height so if you want to be a little bit more square or longer or whatever so i think i would like it to be a little bit more square like like 295 okay now the border radius okay so here you go you can change things slightly so maybe just a little bit rounded not too much shadow outline so if you want these things to kind of pop off the page a little bit you can give it drop shadow and there you go so you can change the way things are aligned etc okay so now with the image section so the image large default here you can change specific things like cover overlay color so overlay color obviously what happens when you people mouse over the image i personally like the way it is by default where it gives a nice shadow dark overlay looks great and so you know then you can come over here and change the subtitle and titles uh for example right here we have the title so all the titles are h4 and so again you have to pay attention to that because like this is h2 this is h2 so what should these be these are a subheading of this section so honestly like these should be h3 to be honest with you so we're going to go ahead and change this change these all to h3 here we can change the size if you really want it to be obnoxiously big or small so we can change it just like we'll make it 28 that looks nice okay and then we can change the color uh of the font as we want over here and so again on your own time you can kind of just jump in here and edit things as you see fit and so you know it's really simple because right here you click this and then that's right down here is where you can add in a url so for example if you have a category page on buying or brewing or whatever or you just have a specific blog post you want to link to that's where you could do this right here and so you know we can get rid of let me just go ahead and update this let's just take a quick look all right so now when we mouse over css subtitle description so we do have to give yet we do have to give like a quick little description and a subtitle if we want uh or we just delete that too if you really don't want to put anything in there that's okay too so you can come over here and just backspace this all out and update that and reload it and we'll see boom nothing okay so it's totally up to you i kind of like that description comes up i'm not crazy about the subtitle uh but i do like the description so totally up to you whatever you want to do if you just want to leave it plain old like this and people mouse over it and then they can link to something you can go ahead and do that so you know it's your design your website totally up to you that's how you can add in these helpful little blocks to make your website more visually appealing now the next thing i want to add in is our latest blog post but from a design perspective i think it'd be really nice just to break up this section and then have like a image separator and then our latest blog post i think that would be a little bit more visually appealing uh so let's go ahead and do that so it's going to be kind of the same way that we added the image up top here we just have to do the same thing so we come down here okay so underneath our blocks right here we want to come to the plus sign and you want to navigate to where it says cover now you want to upload a new image okay and so i already went ahead and did that so i have this image right here i got this image uh from unsplash i resize it to make it a little bit smaller so i'm going to go ahead and click on select there we go now again click the image itself click here go to full width there you go now it's full width and so personally what i would do with this section right here is like maybe link to a specific product or course or maybe you have maybe you have gonna have a resource page or a course page on your website where you like list out the best coffee courses on udemy and skillshare et cetera as an affiliate whatever or your own product whatever so let's just type in i'll type in barista barista pro learn more okay so again i want this make sure that this is not just paragraph i want this to be a heading and i want that to be h2 and i want that to be centered default size normal okay so we'll just say normal all right we'll make this a little bit more visually appealing like that okay and so right here i could highlight this and then i could make this into like a specific link and link to a page and so not done yet we definitely want to add in a little bit more all right so learn how to brew great coffee with our by by learning with our favorite courses i don't know by learning with our favorite courses we'll just leave it simple like that okay let me go ahead and click on center all right so that looks good let's go ahead and update that and let's see how that came out so let's reload the page and there we go ah wonderful so that looks fantastic so maybe this overlays a little dark i think i would like to change that so again how do you change that you have to click the image okay navigate down go find where it says opacity let's bring that down from 50 let's maybe make that like 15 or 14. okay let's go ahead and update that let's reload all right so that's looking amazing so there we go okay so now we have our in-depth guides we have a section where we can link to maybe like a course as an affiliate or something and now it's time to add in our latest blog posts alright so now it's time to add in our latest blog post so i personally went ahead and published a bunch of blog posts i published four right now you probably don't have any blog posts so you can go ahead and do that at a later time but i just want to show you how it works when you're ready to add blog post to the home page so first things first we need to add a title so this like we have our little title there we need to do something similar right underneath there so it kind of matches on the website so again just go here plus sign and i'm going to go to columns okay and so advanced columns and grids and then i'm going to select that one again i'm gonna leave this empty this time but over here i'm gonna add in text okay and so uh latest publicly okay latest latest content whatever okay so there we go so from let's just say from the blog okay there we go whatever now you can change that to whatever you want whatever matches your site so again h2 now let's have it match so let's come over here we have custom size 54 and it's bold okay so let's just go do that so i'm going to go ahead and bold this boom i'm going to say large we're going to make this 54 so the font matches the one above there we go okay and so now i want to come over here and add change this okay and so what did we do over here we kind of made this a little bit lighter gray like a not black not jet black but just something a little bit lighter so come over here go that custom color there we go just we'll do something like that okay there we go so now let's reload the site make sure everything's in place okay so that's okay so again like if you want to have more space between this element or this element you can go ahead and do the separator i think that looks nice so anyways i'm going to add in the latest blog post so again we don't want to click this one because this block okay this this is adjusting for this section right there we want the brand new section right there okay so now let's actually add in our blog post so again make sure you're on a new section a new block you don't want to be editing this section only so let's go ahead and click the plus sign and you just want to type in post there we go posts boom there we go looks great so let's go to style and i'm gonna change this to maybe a column of four okay and i really like the way that's looking okay so this is all demo content i just uploaded quickly and easily and so i definitely recommend getting rid of most of this stuff uh so let's let's just let's just get into it all right so feature image feature image is this we want the feature image category up top there yeah that's kind of helpful i mean totally up to you if you want to have the category displayed or not so i think i'm going to leave that but i want the category to be black not blue all right and now we have the title right there yes we want the title to be displayed absolutely but come in here change the typography make it so it matches your website 25 that's fine okay and so let's just get rid of that okay okay now next thing we need to do is h3 so that's good because that's our h2 tag right there so these should be h3s okay so let's go back and click on the block again and okay so now we minimize that excerpt i don't want an excerpt excerpt means like the text that comes underneath that's completely useless let's minimize that meta description show author no show date no show comments no i don't really care about any of that all right so now we want to change the text color to black okay all right let's minimize that ah sorry let's come to the title it changed the title of the black there we go okay and so then we have the read more link right there so customize read more link so we can say like click to learn more uh read more whatever or if you don't want anything you can just get rid of it you just click that off and then people can click the title of the blog post to view the view the piece of content so anyways let's go ahead and click on update and let's reload the site and see how that looks alright so great so now we have links to our specific blog post so again if you want to get rid of the category totally up to you i think i am going to get rid of the category i typically you know as you can see over on website createpro.com i personally just like to keep things super duper simple so i just like to have for me i like just have the image in the title people can click on the piece of content and get more into it so let's reload that and yeah i think that looks great so maybe if we can make this font a little bit heavier it's like thin and just doesn't match as well so let's just jump back into the title okay so the size maybe we can make it the size a little bit smaller okay and let's go to typography and the weight default um we'll say bold let's see how that looks make the text a little bit smaller bold it oh yeah that looks much better okay so there we go so now we have our in-depth guides boom we have our little section where we could promote like a link to an affiliate product etc and now we have our latest blog post and so let's finish off the home page with like an email opt-in form or some final call to action all right so let's go ahead and add in a final call to action an image right at the bottom sitting right above the footer so this is definitely one of the highest converting spots on a website because people hit your website and then they scroll down and then they get to the bottom have something for them have a call to action direct people somewhere whatever okay it could be an email opt-in form product about me whatever it is just give people something to do when they hit the bottom you you could leave just the blog here that's okay but definitely it's better to just have something so the process is going to be exactly the same as adding this image and adding this image okay so let's get to it so we'll jump back into our editor click the plus sign and we want to add in a cover and so i already went ahead and downloaded this image of coffee beans i got from unsplash and so just get your own image again like resize it so it's like 2 000 by 2 000 not too big all right so let's make sure that this is full width and now we can write our call to action here so all right i'll say like get our free 7 7 day course on how to make the best cold brew you ever had from home there we go maybe we'll maybe we'll take this seven day free seven day course i'll take that and i'll bold that so that kind of pops a little bit all right let's go ahead and click on update let's reload the page and see how that looks oh yeah that looks fantastic great so i actually really like the way that this overlay looks the coffee beans where it's dark and just looks really nice now we need to add in like an email opt-in form whatever so whatever service provider you want to use this is just my demo account for convertkit but this works the same with any type of provider be it like miller lite mailchimp aweber etc and so we just need to get a form so i'm going to use the inline form right there and then i'm going to go over here to claire i'm going to choose this one okay so now here is you know within your email editor you can change things as you want you know as you see fit you can come over to settings and just play around with everything this is not a convertkit tutorial so i'm just going to leave it as is like this and so anyways actually let me just go ahead and change that button color we'll just make it something a little bit more there we go okay so i'll go to embed now we want to h we want html now i know you say oh but there's wordpress well you have to download the convertkit plugin i'm just going to use the html all right we'll click that copy there we go alright so now we want to jump back in here alright so what do i want to add in plus sign i have html type in html boom right click paste all right let's go ahead and preview then you're like well david it's like off to the left like how do you make it center like what the heck okay easy go here and we go to uh oop let's go back to the form html all right so yeah all i have to do is type in center so okay triangle looking thing center all right there we go and then the last tag so these are called tags guys okay so that's a center tag so we have center right there come to the very end click the end add in a closing tag okay there we go click on preview there you go now it's centered let's go ahead and click on update let's go back here and reload and that looks great so well yeah the homepage looks fantastic got welcome message guides boom like affiliate marketing right there perhaps from the blog and then email opt-in form sitting pretty at the bottom of our website okay so now we generally speaking have our home page designed properly so let's fix the header and let's fix the footer now so we're going to start with the header so what we need to do is we need to create a logo for our website and one website that i personally like to create simple quick logos is actually canva.com and so i'm going to be using the blank youtube thumbnail template you could use whatever template you want it's not that important so we want to just come in here and just use the tools available to you to create a logo so i'm going to go to text and i'm going to go to heading and i'm going to be calling this site like coffee house like let's pretend i had like coffeehouse.com or thecoffeehouse.com whatever all right so we have our title here and first things first we want the font to match so i want to do poppins bold okay there we go so just make this a little bit bigger there we go all right so now we could just leave it as text but we could go add something so i'll go to elements i'll type in something like i don't know coffee see what comes up okay let's go through this and just take a quick look oh that looks fantastic and it's free fantastic so some of these you do have to pay for it only costs like a dollar so you know it's your logo so if you think it's important crack open the wall and spend a dollar to get the graphics that you need but this one's actually free so i can just go ahead and use that so make that look like that okay good and so one thing i want to add too is maybe like a line underneath that so let's go here and go to line and see what comes up great okay so i got i think i'll actually add in this free one right here i mean i'll make it a little bit smaller so the lines not so thick and heavy alright so match that to the left all right so let's expand that all the way to cover the word alright so let me just minimize that i think i would like to make that just a little bit bigger there we go okay all right so we'll move that up there and good so i like the way that it looks we'll just reduce that to there and we reduce that to maybe there yeah okay so that looks alright so first thing we need to do is now download the image so download as a png png means that's going to be the highest quality image saved okay so let's just drag and drop that to our desktop now the first thing that we need to do is we need to cut out all that white space so we'll go to edit picture now again you can do this with any picture editor that you want i'm just gonna crop the top down right there we don't need all that white space there we don't need all this white space over here and same with this area over here boom and we'll get rid of that right there okay so we'll take a little bit more the top right there okay good okay now go to resize and we want to resize our logo a logo should not be that big like this literally needs to be like 200 and something pixels like logos are small okay you don't need some big complicated logo okay it's 260 okay great yeah literally that's that looks great so let me click the x i'll click on save now the issue is the logo is like has a white background so we're going to use a service called remove bg remove dot bg so remove background very easy let's go here upload your image boom boom done okay now this uses machine learning to automatically remove the white space there we go we can download our logo okay let me drag it drop it there let me go to rename uh coffee house logo there we go okay so now let's actually add our logo to our website so we have to go to customize all right and we want to go to global and then we want to go to up not global we want to go to header there we go okay so we want to navigate to site identity and right here is where we can upload a logo so let's go ahead and select logo and drag and drop our logo into place so we got 260 by 53 that looks good alt text we can just say that is the logo click click on select all right let me just get right there crop image and see how that looks all right so that looks really nice now you're like wait why does it say my wordpress well you just gotta remove that so come over here display site title nope there we go and so now the logo has been removed all right so now if you want to like make the logo smaller etc what you have to do is again just come back in here and again just edit your image again and just make it smaller as you see fit so if i wanted to like change that and make it even smaller like we'll say we'll say like 226 okay you just have to come in here and edit the image and so again play around with that and so you're happy with the way that your specific logo looks for your website i think that looks nice i'm gonna leave it the way it is just like that and that's it so that's how you add a logo so next we're going to be editing our menu okay so let's go ahead and adjust our menu now because this is okay looking but we can make it a lot better so let's go into our wordpress dashboard go to appearance go to menus now we actually have to set a new menu because right now we have a primary menu and a footer menu we have those two sections where we can add a menu but we don't have a menu so let's create one so i'll just call this primary menu make sure that this is selected primary menu right there go on go and click click on create menu there you go okay so view all and i'll add in the blog page and i'll go ahead and save the menu and let's reload this okay looks fantastic all right so let's continue on so let's customize this a little bit more so we can go over here and click on customize all right so first things first so if we come to header and then the primary menu this is where we have additional options for the menu so for example asher is really helpful because the last item in the menu if you want to add in a button there you go you know then you can change the color and and play around with it as you want or you can add in a search function okay or you can add in a widget whatever you want so i'm going to leave this leave the search function there now you may notice that it's blue the reason it's blue is that because all hyperlinks on the website are said to be the color blue uh and so you can change link colors but that this item is going to be blue all the time depending on what color you choose so anyways let's navigate over here we'll go to global underneath colors base colors link color so link color is blue so if you want to change it to something else this is where you kind of can jump into your own website and kind of change colors around so maybe i'll make something a little bit more let's see you want something that blends in a little bit so that doesn't really match so just keep it okay i'll just keep it blue like that that's that's subtle that's okay so let me click on publish all right so the next next thing is i don't like how thin that text is and so this is a kind of an astra pro setting personally in order to make like the menu items up top they're bold but if you know css you can actually just come in here and change it yourself and so i have a little bit of css i just wrote out so it's main header menu menu item font size font weights and so we can just add this into our custom css now if you pay for astra pro you can adjust the menu just quickly and easily if you don't like you have the free version like i do then you have to just do this in order to make the menu item a little bit more wordpress uh interesting let me click on let me actually save that something else save as there we go okay and i'll save it to my desktop there we go don't save all right so next all we have to do is go to customize and you just need to navigate back to like where you changed your uh header so we go to header site identity so we have our logo there site icon right here click on that drag and drop it into place okay click on select that looks good okay we'll click on crop image and there we go so now we have a nice little icon to associate our brand create an about page for your website so your website does need an about page a link to the about page to go in the main menu at the top or in the footer at the bottom of your site the about page is about the website it's not about you you should incorporate why you personally have the authority to write this website but nobody cares about you the about page is like what is this website about so anyways let's go ahead and create an about page so go to add new all right so again as you can see like i like to say something like welcome to the website etc etc so let me go ahead and do that welcome to the coffee house okay all right so now we want to make sure that the document is the says about that we don't want that to be like a long url we just want to change that to be about okay okay so let's go ahead and click on publish actually so i because i want to show you a couple of different settings so let's just open it up all right so right now by default your pages have a sidebar uh i personally it's totally up to you whether or not you want to have a sidebar on the pages i personally wouldn't and so with ashley you can kind of custom design each uh page just like you did the home page so you which i would recommend personally just following the same process so like come down here to page attributes for example and you want to come here to like sidebar you might have it be no sidebar okay then transparent header you want to enable the transparent header and then this you want to disable the title just like we did exactly like we did for the home page so disable the title okay then come over here click the plus sign go to cover and i'll go to our media library for example let's use that image that we used previously uh okay we'll click on that one and again go to this go to full with and then i could say like welcome to the coffee house okay and so you know come back over here maybe i can change this overlay to something a little bit like different or like a green color or whatever just give people like that they're on a different section of the website maybe a little bit more orange something like that and so and then right down here we can continue adding in text like text goes goes here and let's click on update all right and then let me open this page up okay so now we can have like welcome to the coffee house and then just follow the same process that we did for the home page and i would recommend doing this for each one of your pages like your about page contact page etc because you can make it really beautiful impressive looking website quickly and easily by doing this create a contact page for your website so i went ahead and already kind of set up the header for our contact us page uh again just follow the tutorial for the home page uh you know sending up the image etc so the thing we need to do now is i want to add in like a a form right here that people can just quickly and easily fill out and so how do we do that so first things first let's go through the contact page so the contact page you absolutely need a contact page the point of a contact page is to provide a way for people to send you a message so you should link to like your facebook page instagram you can give a quick little bio about like like what people should expect you should provide a form all that good stuff should go within the contact page and also the url structure i personally would leave it as contact slash contact okay and so we come in here again so you can again so i have the page title hidden and let's go under here to uh permalinks okay just change it and make it say contact now you want to make sure that you come down here and adjust your information as appropriate so i would change this to something like the the coffee house contact page then like page separator like need to get in touch question mark whatever something like that so let's go ahead and update that okay so when you're just follow along fill out the set uh set up this page as appropriate okay so let's add in a form right underneath here all right so to do that i'm gonna have to navigate back to wordpress and let's go to plugins and then add new plugin i want to install is called wp forms okay so wp forms let's go to install and let's click on activate fantastic okay so let's create our first form and we want to go to simple contact create a simple contact form okay great so now we can edit each of these sections i'm going to change this and just make this simple okay there's no need to have like first and last name we'll just keep it simple i like the way that looks that looks fine to me all right so you want to navigate to where it says settings and then you want to navigate to notifications and then notifications right here send to email address this is where you can change what email this gets sent to so right now it's sent to sent to the admin email if you want to change it something else just jump in here and change it as you want and that's pretty much it so all i do is click on save and go to embed all right so now wp forms it has this like these two buttons to kind of walk you through it i think it's a little bit annoying i personally just like to use a short code so click on use short code there we go we got our short code right click copy that okay so let's navigate back to our contact page we can go to edit page right here alright so right here again i would give some context like hey thanks thanks for your interest in the site etc etc etc okay so now we want to click the plus sign and you want to type in shortcode now shortcode there then right click paste that simple click on update all right so let's go ahead and reload this page see how this is looking alright great so you know again develop this a little bit more appropriately and then the form looks good and it works so again let me just show you the contact page for website createpro.com again that's just keep it super duper simple so it's like hello friends blah blah blah you can also contact us via our facebook page questions affiliate affiliate partnerships etc here's the form fill it out and you're good to go you can do the same thing right here so you know again like if you're like hey david that's too close to the top how do i again you have to add in your spacer okay so we go to spacer then boom up up right there okay so if you want to have a little bit more breathing room between you know your text paragraph in this image right here you can just do that quickly and easily like that and that's pretty much how i would approach the contact page just follow suit quick little introduction paragraph link to instagram facebook whatever way other way people can contact you your email phone number whatever you think is important and that's all you got that's all you have to do throw in on the contact page okay so now let's adjust the footer on our website so the footer is a section where like disclosures go privacy policy terms of use those kind of pages so let's get into it so first off let's click on customize and when you click on customize with astra you actually have a lot of different options for your footer so first off we have footer widgets so right now footer widgets are turned off but if we want to turn the footer widgets on we can go ahead and do that then right here you can add in different items if you're like well where the heck is this being controlled from personally you have to go to appearance widgets and then a footer widget area one two three four one two three four so if you want to go ahead and add stuff in here you can go ahead and do that i'm personally not going to be using widgets but i just want to instruct you so you just have full control and options over what you want to do okay so let's go to footer bar now i like this you know i personally keep again like everything i keep my footer as simple as possible so first off i want to change this background so i'm not crazy about i want this to be a nice black color okay i don't want this to be like a weird color black not like gray black all right so right up top here is where we can kind of change things and so let's back up let's get rid of all this say okay so we can say copyrights we can say copyright coffee house okay and then what i personally want to do is i want to add in like my privacy policy terms of use all those miscellaneous legal pages so we gotta navigate back to our our pages and we have to go ahead and create those pages but we i want to create those links to those pages first so let me just come in here and i'll type in privacy policy there we go terms there we go and we'll say like uh disclosures whatever all right so let's go ahead and highlight this and i'll bold it and then we'll add in a link and let's create a new link okay so we can just add in our site and i'll call this page privacy and then i'll do this again for this page right here bold and then this terms there we go and the last is disclosure awesome there we go okay now we have our links so now we come here and we want to edit as html there we go then you just take this up there we go wait there we go ah there we go okay copy boom come back over here paste and there we go so now we have a nice looking footer where everything's just added and subtly looks good uh maybe we can come over here and get rid of this separator right there all right so yeah i think that looks nice so now we have our privacy policy terms and disclosure let's go ahead and click on publish and there you go so for a brand new blog that's what i definitely would recommend starting out just create something quick and simple to the point as your site develops over time if you want to jump into they can create multiple widgets and have a variety of different pages linked in the footer you can go ahead and do that but for a brand new site with that doesn't have a lot of content i'll just do something like this keep it super duper simple your legal pages so now that we've set the legal pages in the footer you do actually have to go ahead and create these pages because it's going to come up as page not found so these are actually pages that you need to come and publish so go to pages go to add new and then i just want you to make sure that the page that you're going to add so for example let's go to let's go to the privacy policy here okay so by default wordpress comes with his own draft default privacy policy and so the link that i used was privacy in the footer right here so let's just go ahead and change this back out the url slug make it privacy then we could just leave it like that i'll click on publish there we go okay and so for example now i'll reload the site and we have a privacy policy okay and so you just need to go through and do that for each one of those pages you definitely need a privacy policy in a terms and terms of use page okay and so the goal of the privacy policy is just to disclose how your website collects data and information and then the terms is like what are the terms of service that people agree to abide by when visiting your site and then disclosures should be about like how anything that uh you know how your site like makes money for example like any conflicts of interest that sort of thing would go under the disclosures but at a minimum you definitely need privacy in terms that's pretty much it and then you have to just go in here and manually create these uh pages yourself okay so again go back and go in here add new and again check the link check the link that we created so this was called terms okay so it's called terms there so you can collect terms terms of service okay terms dash conditions people also call this page whatever okay then you have to create a page and i have another guide on my website creator pro that you can check out just google legal pages website creative bro and you should be able to find out how to write your legal pages in the real beginner's guide again i'm not a lawyer i'm not you know definitely want to consult with a legal expert as your business grows but just to help you get started you know just create something uh again it's not that important with a brand new website that has no content but long term is something that you definitely need to take care of so i just want you to be aware of that okay so now it's time to edit our blog post and the blog archive page so i went ahead and just added the about page in the contact page uh to the menu you can go ahead and do that too so that looks good so anyways let's jump into the blog archive page all right so this is our blog archive i think it looks quite nice just by default but there are a couple of things that we could change for example uh like this text right here coming up so anyways go to customize and under customize you have your blog section okay and so you have archive and single post so archive means like your slash blog page so go to archive here is where you can change things so for example if you don't want to have the category displayed just click that off author you don't want the author displayed just click that off and there you go okay and so post content excerpt full content unfortunately you have to display an excerpt which is this there's no other option it's either full content or excerpt so i just i would leave it as excerpt and that's pretty much it okay and so let's go ahead and click on publish there we go awesome alright so now we can edit this specific page itself and so now i'm currently editing the slash blog page and so right under here we have different astra settings so if you want to again if you want to have like disable the header or you want to like remove the sidebar you could do that but personally i like the way it looks natively right out of the box i think it looks decent for a blog doesn't need to be super duper complicated now this section is being powered by your widget section so again go over here and go to appearance and go to widgets and right over here main sidebar this is where you have everything over here so what should go in the sidebar well we definitely don't need login buttons for our website here and so we would just want to go here and we just want to remove a couple of different things really the only things that i would personally and would include in the sidebar would be like links to your archive pages like category pages and that's it like recent posts categories and then any type of like display advertising an email opt-in form okay that sort of stuff is what i would incorporate so let me just see how that looks now okay so there we go so you know you have your categories right there recent post email opt-in form right there an advertisement whatever you want so that's roughly speaking how you adjust the blog page let's add breadcrumbs to our website so breadcrumbs are really helpful for blog posts it gives a nice site architecture to your website helps search engine spiders kind of crawl and index different pages it just helps people understand where they are on your website so for example website creativepro.com right here this these are breadcrumbs okay so it's just helpful for the end user and it's not that difficult to add so anyways we're going to be adding breadcrumbs to a blog post so the first thing that we need to do let's navigate back to seo tab alright so i want to go to search appearance and we want to go to breadcrumbs and we want to enable breadcrumbs there we go all right so show blog page yep bold last page bold yep taxonomy to show in breadcrumbs i want to show my categories okay so i want the i want the categories to appear okay and so the categories appear there and now we can go ahead and click on save changes now if we go back to our post and reload it you're going to notice that nothing changes that's because we actually have to add the breadcrumb so okay so let's go to yoast bread crumbs all you have to do is google yoast breadcrumbs should be the first result page all right so now the thing that we just need to grab is the short code okay so right here wp seo breadcrumb boom right click copy all right so let's go ahead and add in a new plugin so let's go to appearance and let's go to plugins let's go to add new alright so let's go to uh p y r c ah not p o r c there we go p r y c wp there we go so go ahead and click on install there we are and go ahead and click on activate fantastic so what this does is it adds a little section right above the blog post so let's go to settings and then p r y c wp now content at the top copy and paste in uh our short code there we go take that wp seo let's jump into here boom there we go okay and click on save changes alright so let's just take a quick look let's reload the page all right so that looks good but let's get rid of all this other stuff so now i want to go into customize all right and so i want to go to blog and i want to go to single post and we'll say i want to hide the category we'll say i want to hide the author i want to hide the comments there we go so that looks that looks quite nice okay so let's go ahead and click on publish okay good all right so now we're good to go so now we could also add in like uh a disclosure if you want to do that like you know you see some websites that engage in affiliate marketing they always have like a disclosure at the top you can say something like uh we are reader supported supported uh links links to product we may earn like we may we may earn from links to products thanks for read more read read our disclosure for more we have something simple is that let's go ahead and click on save changes and let's go ahead and reload the site okay so that looks terrible so how do we how do we adjust this okay so first things first we want to have some space so we want to use something called uh break okay br slash so we just have to break it up that's called just a break tag and so let's go ahead and click on save changes and let's reload the site and so what that does just gives it a little bit more space okay so we can add in another one br slash there we go and one underneath as well br slash there we go br slash there we go and click on save changes let's eyeball this and just see how this is coming out okay so i don't okay so i kind of i kind of like this one to be a little bit closer let's click on that there we go great okay so now i kind of want this text to be a little bit smaller so we can add in something called a small tag okay and so we just do this small and then close the tag with slash small and what that does is it makes the text smaller so it doesn't uh blend into the paragraph we have see that looks really nice okay so now it's like well it's all off to the left is there any way we can like center everything like sure no problem so again we just go up top there we type in center okay then come to the end and close the whole thing off with center so slash center there we are okay and then click on save changes then we can reload and there you go so now you have a nice little you know breadcrumbs added to the top gives a nice site architecture and you have this little disclosure and so again like if you want to link to your disclosure page how do you do that well you have to use html in here not too hard okay i just showed you i just showed you everyone how to do it so we just go to pages okay and just jump into pages oops wrong one okay let me just go add new all right so we'll just go here we can type in like disclosure all right let me bold this highlight this okay let me put my website in there we go boom and then click here edit as html there we go then we can just take this right here just we don't need the paragraph we just need this okay the strong section right there there we go all right there we go copy and then we can come over here and we can just back out of this the disclosure and just copy and paste everything in boom so we have our strong tag right there there we go so click on save changes and reload and now our disco closure is linked appropriately to our disclosure page now please emphasize do not copy the p the p means paragraph we do you don't need that don't copy that in just copy just this middle section and there you go okay so not too technical there's a little bit to it a little couple things you kind of need to understand with like the break tags and center not super complicated but like once you're done you're done and so now now that looks really nice so we have breadcrumbs and we have a nice little disclosure that say hey you know whatever you know to comply with any laws and regulations and there you go okay so some blog post tips so i want to just finish off this section with just covering broadly speaking what how to approach your blog okay so first off you have a blog archive page i definitely recommend displaying the feature image on the blog post page now to add a feature image is very simple let's go to edit post and let's just jump into it alright so let's just minimize all of these so it's very easy to look at okay so now underneath here you have something called feature image right here is where you can upload a feature image and what the feature image does it associates the image with the blog post now it's really nice to do that within the blog okay because that makes it more visually interesting and easier for people just to navigate the website quickly and easily with these specific images it's also helpful because at the very bottom right here again so you have images being displayed these are feature images but as you notice me for me personally i don't have feature images on the actual piece of content and i recommend you do the same because you know this is the blog post i mean if you want it's totally up to you but i personally don't like to have the image because it just pushes all the content down it's not particularly helpful and so again we can just jump in and go to the at the blog post and then right over here you can go to astra settings and you can disable uh disable the feature image okay click on update and so what that will do is it's only hidden okay it's only hidden when people actually open up the blog post but it's still available when people are on the slash blog page so you have a nice visual appealing you know blog archive and then when people actually open up the piece of content boom they get right into the content as well okay so anyways now to adjust the text and whatnot within a blog post it's simple okay again with an actual you have to go to customize and then you have to go to global and then typography okay so base typography right here and so right here is the font size so if you want to make the font size bigger you can do that if you want to change the line height and separate things just a little bit more to make it oh that's too much just a little bit you know that's still too much we'll come down to there that's too okay something like that whatever okay and so you can kind of just play around with the the way the content looks as you want so maybe if i'll make it 17 okay that's nice and big nice and readable etc so let me go ahead and click on publish okay all right so that's kind of like how you adjust the text now with blogging you have to organize everything under a category i definitely don't recommend uncategorized and so when you publish a piece of content right over here uh let's come down here categories you can add a new category i definitely recommend with a blog just start off with four categories that's it only four pick four so like if this is a coffee blog i would pick like uh you know uh buying guides uh brewing guides you know facts and then like something else you know or equipment whatever you know pick four categories that you can fill out with content quickly uh and easily you don't want to have you don't want to like create a like a different category for every single blog post that's crazy you know like with website creativepro.com i only have seven categories on this website it's like website builders domain names web hosting content marketing uh that sort of thing so things that are keyword rich and relevant to the website that's what you want okay like one to two word uh long category titles and that's that's all you have to do okay and so let's just come over here okay let's just jump back in here um another thing you can do too is go into your post and go into your categories and so right under here categories this is where you have all your categories and you can add new categories from here as well as within the blog post section uh so anyways for example if i had like coffee beans you know i'll create a new category and then i'll call this uh beans whatever click on add new category i can open this up and then like here i can come in here and like have a description of this specific category if i want and then down here with yoast you can change the way that this actually looks it's like coffee bean archives and that's okay so like uh the best like all all content all content related all right all about are all about coffee beans whatever you know you can give it a nice seo title instead of just being like category archive page blah blah blah like very robotic you have a little bit more personality okay and that's all you have to do with regards to you know your categories uh et cetera so i went ahead and updated the category from uncategorized to coffee beans okay so what i did functionally is we just navigate let me minimize style permalink there we go categories okay so i just have it checked off as coffee bean and also with categories make sure to add it to one category only you don't want to add a piece of content to two three categories one blog post for one category and so now if we click on coffee beans right there boom okay so we're now we're on the category page for this so let me just reload this page there you go coffee beans now description goes here okay so this is being powered by this right here and so like you can hyperlink things as you want etc and so this is really helpful because now when people visit your site they can click on this category then they're on this dedicated page that's only related to this category and you can create a nice helpful description for this category page right there now in terms of the actual content for the blog don't forget like you're using the wordpress editor so you have access to all the different blocks that we've been using this tutorial and so i definitely make sure to break your content up into different sections okay so for example i make that an h2 right there and you can check the structure of your blog post up top there see how it says title h2 okay and so pretend like this is another piece of content right there and we'll just say i'm gonna break this up and make this maybe its own little section right here so okay i'll take this and i'll make this in h3 so heading then h3 okay and then we can take a look at this and so you just want to make sure that your document outline uh has a logical structure you don't want to have this h2 then this is h1 you know you don't want to do that so h2 again stands for header okay so let's go ahead and update that let's see how that looks let me reload the site yeah there we go okay so that's how you kind of break things up with different specific titles now because we installed stackable we also get access to a lot of really helpful blocks so let me go ahead and add one of those blocks i really like so we come over here you can type in something called like feature and then we have a feature box right here and so this is really helpful for like affiliate marketing and so i'll just say like uh product title goes here then we have a nice description then you can add an image of the product over there so i can make this basic style uh we can come down here and just change things as you see fit okay so you know come over here to style let me come down here to container there we go so border radius shadow outline and i think that looks really nice and so i'll just click an image and let's just add a random picture i'll add this one in okay let me go ahead and select that and okay so that looks good and we come here to image okay so maybe i'll make that square or circle or a blob whatever you want to do so anyways let me go ahead and click on update okay let's reload the page okay so there we go so now we have like a nice little product box great for like recommending like products and services uh by having something like really stand out now one last little thing that we can do is we can also add in related posts and so let me just quickly go back to websitecreatorpro.com and just show you what i mean so if we go here let me just open up this website builder blog post i have so if we come down to the bottom here this is related blog post to add that i use something called jetpack which is a plugin by wordpress so let's just go to plugins and let's go to add new all right let's type in jetpack oh there it is jetpacks right there ah jetpack's already active okay so make sure you have jetpack installed and so we come over here and you're gonna have to set up jetpack on your own so let me go ahead and do that all right so let me go ahead and approve so okay so once you get everything set up with jetpack you're just gonna have to create a wordpress account you will probably be presented with a page where you can like paid upgrade et cetera but like once you just create an account jetpack is already installed so anyways you should just navigate back to your website jetpack will be good to go and all you have to do is click on settings okay and then we want to go to i believe it's traffic ah there we go yep traffic and then related pose then you want to just make sure to turn this on that's it okay and so here we go the relay post will look like this and we want to highlight related posts and we also want to show the feature image that goes along with it that's it okay that's all you have to do just install a jetpack navigate to traffic click this button click these buttons on and as your site grows and has content this will just be automatically populated without you having to do anything okay and so then you'll have really nice attractive blog posts located at the bottom of your blog post okay so that really helps internal linking gives people something else to click on et cetera now one last little thing i just want to bring up is because we also have an additional plug-in let me navigate to where is that settings there we go p-r-y-c one cool thing about this is we can also just add content to the bottom so if you want to throw in like an adsense ad here then all an adsense ad will appear at the bottom of every single blog post or you can add in an opt-in form or you know amazon associates display ad whatever so anyways let me go here and let me just add in a form really quick just to show you what it's like so i'm going to do inline all right so come down here i'll i'll add in mills right here okay that looks good let me go to embed and let me go to html go ahead and copy take that all right so let me navigate to this content bottom copy and paste that in literally like that just the html go ahead and click save all right so now if we reload the blog post we're going to have an email opt-in form sitting at the bottom of every single blog post and so that's what this that's why i love this plug it's very very simple and underrated uh because it's just so helpful you can put stuff right at the top and the bottom of your blog post with ease and that is it and that's how i would recommend you go about customizing your blog posts quickly and easily so there's not much to it okay so that's how you install breadcrumbs that's how you add this little disclosure underneath h2 h3 title tags take advantage of the different blocks you have with your wordpress editor and stackable add in related blog posts at the bottom that's also how you add in like an email opt-in form or an ad at the bottom of your blog posts installing google analytics on your website so google analytics is what's going to tell you like what pages are getting viewed how long people spend on your site etc and once you have analytics installed then you're able to then verify your website with search engine console where it is okay and so first step is to install analytics then you can come over here and log in and verify your website and it'll it'll detect that you have analytics installed and so then you'll be able to uh guess that with search accounts just make sure you use the same email when you're logging into analytics that you are with google search console anyways now i'm not going to walk you through how to get set up with analytics there's other tutorials on that so we're going to i just want to get right to the point once you get to this section where you actually have the script you want to copy it and then it says you have to put it in the head of every web page you want to measure okay so with astra how the heck do you do that very easy we have to go to plugins again and the plugin that we're going to be installing let's go to add new okay now we want to type in header and footer okay very very simple plugin there we go one million plus activations there we go let's install it and click on activate all right great so navigate over to settings and go to insert headers and footers now we want to insert the script in the header why because it tells us to literally and so this is just going to allow us to add google analytics there we go then go ahead and click on save right there and that's it okay and so now google analytics is installed give it a little bit of time for it to start collecting information uh and then that's it okay then you're ready and you're gonna start getting uh data from google analytics and then you can go ahead and go over to google search console okay and then once you go into search console over here you can click on start now then all you have to do is verify your website so you just have to put in the website and make sure you're walking with the same email just put in the your domain name here it'll detect that you have analytics installed and then it'll verify the property that way and search console is very helpful because it tells you how your content is ranking within google and what how much impressions you're getting et cetera and so it's very helpful so that's why you want to go ahead and install analytics and so that is it alright everybody that is it for this tutorial video on how to start a blog using the astra theme overall i'm really impressed by what you're able to create with just astra and just wordpress now the only design limitation is that you are stuck with a white header so if you want to change the color you are going to have to upgrade and pay for the more premium version of astra but for the free version i think white is acceptable for most people anyways if you enjoyed the video consider subscribing hit that like button my name is david webster pro.com thank you very much for watching and have a great day bye you

Channel: David Utke

Views: 6,594

Keywords: astra tutorial, astra theme, start a blog, blogging astra, create a website siteground, siteground astra, make a blog with astra theme, astra free version tutorial, start a blog with astra, astra theme wordpress tutorial, astra theme customization, astra theme blog, siteground astra theme, website creative pro

Id: 4NKBsx5Rwzg

Length: 111min 45sec (6705 seconds)

Published: Wed Dec 09 2020