How to make a blog on WordPress for beginners - Divi Theme Tutorial

in today's video I'm going to show you step-by-step how to create a professional-looking blog step-by-step with Divi so the example I'm using in this blog is a gardening blog but of course you can use the same techniques that I'm going to use in this tutorial I mean and apply them to any type of blog it could be a baking blog it could be sewing it could be crafts whatever it is the technique is the same and I'm also going to be using a template which will just transform and make it easy for you to create these blog posts alright so let me show you quickly what this looks like so here I've created the main hero area so this is where you can just add your text and just pretty much talk about what your blog is about and if you have a culture action you can just add it over here on the bottom here it shows us the latest post and again as you can see I show you how to make it look clean and very very simple now if I click on this blog post now notice what happens we have a custom design for this layout which looks really really nice so everything is going to be consistent throughout the whole website making it look very very professional so when I scroll here we have a beautiful feature here where the image fades away to give access to the viewer to read the article even much much easier so notice what happens here there we go so now the viewer can read all this text here and we also have social links and when I scroll down here there's also an option to sign up for your newsletter and as you can see it fades in as you scroll towards the bottom of the page so over here now you can see we also have a read more so this is a section which will be populated by even more blog posts as your site grows so when I scroll all the way down here we have our comments area and we also have this beautiful footer now let's click on this next post and see what it looks like so remember I mentioned that this is going to be consistent if I scroll down here and I click here on the next post again you're going to notice that on the top here we have this image which is which has an overlay looks beautiful makes it easy for this post I mean these post titles to be read and also these post titles they are automatically created in the that when you add your own titles for your post it will just pretty much you know updated automatically and you can see here it pretty much has the same style now let's move on to the next post and again you're going to notice that everything is going to be consistent now look at how beautiful this is right so I'm going to be showing you step-by-step how to create this in a very very short space of time now I'm gonna be using a theme called Divi and this is what I recommend is very easy to use and it also comes with a template so once you buy Divi using my affiliate link I will also give you access to that template but this only applies if you buy the Divi theme now this template cost $19 so if you want to if you've already bought the Divi theme you can go head over to funnels to income and purchase it there but if you have just beginner you're getting started so you haven't designed your website yet I have an affiliate link in the video description below if you buy GV using that link just let me know I will give you access to my web design a formula course a course that teaches you how to design professional looking websites from scratch so it's gonna be really fun let me show you step by step how I managed to create this blog website from scratch let's dive in alright so step number one in creating your blog is to choose a domain name so the service I use for that is hover calm now the reason why I use hover calm is because this is purely a domain registration service so you don't want to mix your hosting and your domain registration together because if you want to change services you may have a little bit of a problem in the future so make sure your hosting and your domain registration is separate so as I mentioned this is Harvard com this is the service that I use to search for my domain names now after you've chosen your domain name you have your account and then the next stage is to choose your hosting so when it comes to hosting days manage hosting and then there's shared hosting so when it comes to manage hosting the service that I like here is flywheel now this service is fantastic but of course it comes with the price so as you can see here this is $15 per month now if you are serious about blogging well this price is absolutely worth it because when you blog the last thing you want to do is to worry about backups and spyware or any of these things that can make your website go down as you're running your service now over here let me just give you a brief overview of how flywheel works so over here you can see I have my website it's called learn - now this comes with his own dashboard so if I click here this will take me to my website dashboard so here I can take a look at my stats and you know pretty much have an idea of what is going on on the actual server next I have my backups now this is the most important part so this service here actually does backups for you you don't have to worry about doing your backups because it does these backups every day for you so let's say something goes wrong with your website if you install the plug-in it damaged your website all you have to do is to come over here click on this three little dots and hit restore and boom your website is back you don't need to stress about finding someone who can fix your website for you over here on the Advanced tab you also have a few features here you can flush the cache but to be honest you don't need to worry about this I hardly use this anyways and then over here you have your performance so this is where you can have your performance insights but to be honest I don't use performance insights as well now the one thing that I really really like about flywheel is you can start designing your website and they give you a free 14-day site where you can just create it start working on it test it and do whatever you want and then once you're happy with that you can then switch it over to a paid service so to add your site you want to come over here to the top click on new site you give your site a name so you can see here that I already have a site on this on this plan so it won't allow me to have a site unless I go in and upgrade but you can create a demo site so this is what I was on about so if you create here on demo site this will just pretty much create a WordPress website for you and you can you know get up and running without even paying for the upfront costs so if you want to trial this blog and see if this is for you this is what you need to use all right so I've talked about this service the main takeaway from this is it has great support number two they take care of the security for you so you don't need to worry about your site getting hacked or your plugins not working well because you forgot to do your update so they take care of all of that for you that's why the price is slightly more expensive now let's take a look at shared hosting now this is the best plan in my opinion when it comes to shared hosting this is way cheaper so here you have a three month startup hosting for only 99 pins okay this is really cheap but of course with this you want to make sure that you keep on top of you plugins your themes and make sure that everything is all up it's all set now when it comes to supports it's not as good as the support you get with flywheel but if you are a bit of a tight budget and you want to get up and up and running fast this is what you want to do so you set up with side ground now there's two options here and you'll notice that let's say we choose this one here if you choose get plan this will now give us the page where you can register with them now I highly don't recommend this you want to make sure you have your own domain now if you take a look at step number one that's where I said you need to use hover to register your domain names so this is where you come and say I already have a domain name and then you enter it here and then once you enter it you could then proceed and set up your hosting so this are these are the main two things that you need you need your posting you need your domain name now let's move on to number three now when you set up your your site over here or even with flywheel if you set up your website they give you a wordpress website so the WordPress website looks like something like this in fact let me just go to the main page so this is what it looks like so as you can see this is pretty much plain you're very limited in terms of going in and making this look really really nice and this is where you need a each builder now in my opinion the best page builder out there is called Divi and if you buy Divi using my affiliate link as well I'll give you access to my web design a formula course of course that teaches you how to design professional-looking websites with Devin alright so this is the basic site that you get let's take a look now at Divi so over here when you purchase Divi it's 89 dollars per year or use 289 lifetime license so links that and the description below so I already have a license lifetime license of course so what you want to do is to log in to your members area so once you're logged in you want to go to your products and download the Divi theme so here it is I'm going to click on download and this now is going to be downloaded on to my computer now once you download that the next stage is to go to your account and scroll all the way down to API keys now API Keys is very important because this is where you want to get that key that allows you to get all the updates from Divi okay so on a clicking on API keys then I'll scroll all the way down here so this is my API key copy that okay so now that we've copied our API key the next stage is to install Divi so I'm gonna come over here go to my dashboard and then I'm gonna go to appearance themes add new upload theme choose file now my theme is in the Downloads folder and here it is double click on that click on install now so this will take a while a little short while to install so now it's installed click on activate so you can see here DV now is installed next you want to come over here to theme options remember that API key that we copied you want to come over here to updates enter your username paste your API key click on Save Changes so now you're good to go the next stage now is to pretty much have a look at what our website looks like so we're gonna come over here and we're just going to click on visit site I'm gonna open this in a new tab and this is our website I know I know you might be thinking well the default one that we had from WordPress actually looked great but you know what we can actually transform this really really fast and make it really look awesome but before we transform this I want to start off by adding all my images are for my blog so the blog that I'm going to create here is a blog about gardening so in your case you may choose any type of topic it could be sewing it could be painting it could be baking whatever it is it could be even a tech blog so the process is the same on how to create this alright so what I'm gonna do next is I'm going to come over here to my dashboard and then I'm gonna create my pages so over here I'm gonna click on add new so my very first page is going to be my home page in fact I'm just get rid of this right so my first page here is going to be the home page and I'm gonna click publish publish one more time the next page I need is the blog page so go back over here to my dashboard so you can see here my home page has now been added let's add our blog page so I'm gonna name it blog publish publish one more time now you may also need a contact page so people can contact you if they need to okay so I'm gonna go back over here add new contact publish publish one all the time great so now I have the main pages that I need so back over here now what you'll notice is when we take a look at our website is not going to have a proper menu setup on over here on the top so what we need to do is to go into appearance menu so we need to create a brand new menu so my menu name here I'll just call this main menu you can call you whatever you want then I'm gonna click on create menu next I'm going to take a look here at all the pages that I have on my site and it's the home blog contact those are the main three that I need something add them to the menu so you can see here they've been added and then the last step here is to make sure that you assign this to the primary menu so I'm gonna select primary menu then I'm gonna click on save menu alright so now that we have our menu let's just double check and make sure it's looking great here so I'm going to refresh this and there we go home blog contact great so now that we have this menu all set the next stage is to come all the way down here to Divi click on theme options now we need to add our color palette so since my blog here is going to be a blog about gardening you want to choose colors that work with gardening now I go into a lot of detail when it comes to choosing your colors and choosing your fonts in the web design formula course so if you buy this template using my affiliate link you'll get access to the course that teaches you everything so I've gone ahead now and created my colors for my blog so I'm gonna start adding all my colors in so I'm gonna come over here copy that add my first color paste it in here move on to the next one copy that back over here paste mine color one to the next one so let's go with this one here copy that it's my color move on to the next color so as you can see all I'm doing here is I am just copying and pasting my colors so these colors here is important that you add them initially because it makes it easy for you now to start using these colors when you start designing your website right so this is my last color paste it in here and then what I do what I normally do here is on the last one I just add white to all three of them sometimes what I may also do here is to add gray for my fonts so I'll just add like gray over here okay so let me just go back to this color here I don't think I copied it correctly so let's go back and copy it one more time so i'ma make sure I have all my colors in place okay so that looks like it has been selected okay now that I've added my color palette I'm just gonna click on Save Changes right so the next stage now is to create our landing page so I've gone ahead and added all my images that I need and to add all your images you want to come over here to media and then you want to click on add new so this is how you add all your images to your media library all right so next I need to come over here to all pages so let's go to our homepage I'm gonna hit edit and then I'm going to click on edit with Divi builder so we're just gonna click create our main landing page for our website so when you first install Divi it gives you this step-by-step tour so I'm just gonna go ahead and click on start building all right so let's build our pay page from website from scratch I'm gonna click build from scratch next I am going to just close this click on this plus button and we're gonna add a full width header so I'm gonna go ahead and select that right so I'm gonna snap this over to the left so here is where you want to add your main title for your blog so I'm gonna call this gardening okay let's call this fun with gardening okay you know I just thought about this on the fly so we can change this later on if we need to okay so next this description here is also very important so I'm going to be using lorem to in fact let me get rid of some of these pages these pages here because I don't need them anymore alright so here we're going to use our lorem text so this is dummy text in your case you want to go in and use the proper text for your blog okay so here I'm gonna add add this text and then I'm going to come over here to my background and I need to get rid of this color here so you can see the colors that we added earlier on are all here so I'm gonna add my video Doc Brown here and then I'm gonna choose my image by clicking here and I have my images in the media library so I'm gonna go ahead and select them here click upload an image now what I'm gonna do now with my image selected I'm gonna come all the way down here to my blend mode click on multiply and then I'm gonna go to my color and then I'm gonna drag the slider down just to show a little bit of my image there in the background alright so great next I'm gonna come over here to design layout and then I'm gonna set this to full screen so you can see here my image now is full screen now there are several ways that you can set this up you can add a gradient over here to the left if you want to show more of this image but I'm gonna show you two ways to do it so this is the first one if you really want to text here to stand out okay so now that I've set this all up I'm going to hit save just for now then I'm going to drag this on the bottom okay so over here we are going to add a single column and in that column we're going to add a module and the module that I'm going to add here is a blog module so I'm gonna go ahead and select it so I'm just gonna use this as you know pretty much a placeholder I'm not gonna add anything yet so now I'm gonna go ahead and save the next step now is to go back over here to my dashboard and this time what I need to do is to set my pages up correctly so I'm gonna come to cities click on reading so what you want to do is to make sure you assign your homepage or your main page to home and then your post page to log this is very very important click on Save Changes right so now we have this main home page here there is no styling at all as you can see but this will be fixed very very soon all right so what we're gonna do next is to add our blog posts so I'm going to come over here now and click on all posts so by default you get this hello world we don't really need that so let's send it over to the trash so let me add my first blog post so I'm just gonna close this now notice how I'm adding my blog posts here they're going to be added in the normal default editor so I'm gonna call this post 1 use default editor and then I'm gonna paste my text in here so I'm just gonna copy a bunch of text from here I'm just gonna pretend this is my actual post paste it and then this is very important you want to come over here and set your featured image so let's go ahead and do that so let's say this is my first featured image publish that blog post hit publish okay now let's view this post as you can see here this is my blog post you know it's not styled it looks pretty boring so we are going to fix that so let's go back to our dashboard let's create a second blog post so here I'm going to click on add new let's call this post two and again only use my default editor and paste my dummy text back over here on the document gonna add an image and this time we are going to go with this one here set featured image publish publish one more time great next I'm going to add another blog post so I'm gonna go back over here add new so this is going to be post three use default editor paste my text in here then I'm gonna add my featured image and this time I am going to go with this one set featured image publish publish one more time great so now we have three blog posts and here they are post one post to post three so as we look at our page here our main landing page if we go in here now we can go in and customize how our blogs are going to be laid out so I'm gonna click here on this gear icon and now I can say postcards three if I need to show three so these this is where they all going to show and I can just say all categories or if I create my own categories it'll show they're all my categories but as you can see here this doesn't look great I mean this normally looks really nice in a grid layout but before I do that I just want to come over here Wade says use post accepts I'm gonna say no and then over here on the design I'm gonna change my layout to great so now when we take a look here at our layout you can see this looks much much better I'm sure you can agree with me let me save that now let's give a title to this so click here and add a single column and in that color we are going to add text and here we're just gonna give this a title and we're gonna call this latest posts I'm gonna save this and since this is a title I'm just gonna drag it above my main blog posts there we go so now this is take this is beginning to take shape and then finally over here I'm gonna show you the second option or the second design that you could do it over here so I'm gonna click on this gear icon so let's say you want to add gradient I'm gonna come over here in fact I need to go all the way down here to background so I'm gonna go back and just delete this color here okay so now you can see everything is bright and if your white text is gonna be very difficult to read this so now let's add a gradient so I'm gonna click on this plus button so my first color here is going to be let's go with the really dark brown here okay the second color is going to be transparent so now all we have to do is to fix the direction of of our gradients and as you can see here most of it is now over to the left so I can now adjust my start and end position so I'd like to leave it at about 22% and end position I'm just going to drag this down a bit to about so the end position here I'm gonna set it to 18 now over here if you see that this is a bit too much all you have to do is to come over here to the main color and add a bit of transparency to it just like that okay so that's looking great now I'm gonna go to the design and then I'm gonna go to sizing because over here I need to adjust the content width off this and bring it down to about let's say let's try 40% all right so I'm gonna save that and save this page now let's do a quick preview and take a look at this page all right so I'm going to exit the visual builder and this is what our page looks like and our blog posts so here's the fun part so this is where now the power of the blogger pro template comes in I know I mumbled up my words there but hey the blogger pro template okay so this is where it's gonna come in and starline's pretty much everything that we have here okay you can see our blog page here it looks very very basic so I am now going to transform this and make it look really really really awesome alright so what I want to do is I am going to use this at a later stage so I just want to copy this so we can do it before and after okay so that's our blog page let's do our home page as well so what we're gonna do next now is to install the blogger pro template so over here I am going to go to my dashboard and all the way down here I'm gonna go to Divi click on theme builder and now I'm going to click on these two arrows click on import select file and my template is over here on the desktop so when you first download it and by the way this is a paid template so I'll leave a link to the post in the show notes below but if you buy DV using my affiliate links you get this template absolutely free just remind me about that okay so here now you want to first unzip this folder here called blogger pro and once you unzip it you get this little file here called blogger pro Jason click on that click open import templates so this is going to just pretty much add all the styling that we need for our website and once that styling is added pretty much you have a completely designed layout it's really really awesome all right so it's gonna take a while here two to install because there's a lot of templates that this template comes with so let's have a look let's take a look here there we go so now I'm gonna hit save so if i refresh this page now notice what happens in fact you know what let's open this on a new tab because we might need that for our before and after okay so what you first notice here is our header here has been changed we have our social media icons here and this has also changed our font here has been updated we also have some some colors here but we are going to go and change this because this doesn't look great on this dark background and then if I scroll down here you notice that this has been completely customized and this looks way different now let's go ahead and take a look at one of these posts and there we go and you can see here our post page looks blog page looks much much different if I scroll here can see that looks really nice we also have a sign-up so if you have a newsletter service you can connect this to it used to newsletter and over here we also have the link I mean the latest posts and this will take you to post one now let's take a look at our blog page so again if I take a look at our blog page here you can see these are neatly laid out it looks really really nice looks very beautiful if I click on that it now takes us to our post page and again all our main images here which are featured images they're going to be shown over here on the top and as I'm scrolling here you can see it fades away to give us more focus to the actual text that we have here you also have the next post and we also have the next post that you need to take a look here when you scroll all the way down to the bottom now if I scroll all the way down here you also notice that we have this area here which allows people to at the post which is great and we also have a footer so this is really really awesome it is transformed our blog page read it really fast as you can see now back over here what I want to do is to go to my main home page so I'm just gonna go to my main page and just fix a little few things here so I'm going to click enable visual builder so I'm gonna go here to my settings and start off with this title so I'm going to change the color here you can see it's very easy to change the color now if you want to have this call to action you can have it or you can get rid of it but in my case I'm just gonna leave it there as it is and then over here I'm just gonna increase my body text size let's go with 23 and I'm just going to reduce my line-height okay so let's save this next I am going to come over here go into my module settings so what you can do here is you can reduce the excerpt length so let's say gonna go with 70 you can see now I've reduced it and you can also do a few customizations here by going in and specifically disabling what you don't need here so let's go ahead and do that so I'm gonna click here on elements so show date in fact it's not sure the categories so now I just have the author and the title so remember we had a color that we chose for our color palettes so what we're gonna do now is to go in and customize this template to make it really look you know different and custom to us because as you can see these colors here don't work don't work well with our design so let's go ahead and fix that so I'm going to save this and so this is the final tweaks that we need to do on our blog so now I'm gonna go to my dashboard and then I'm gonna come all the way down here and click on theme builder so all I have to do is to go to my global footer so the very first thing is to change this color here so I'm going to go to my background oops background so here we're gonna add our own background so you can see here immediately I've just changed that so I'm gonna save that and then over here I'm gonna do the same I'm gonna go in go to my background change my color but this time I'm gonna make it slightly darker save that okay so pretty much I'm happy with this save this now there's also a few areas that we need to go in and customize so let me close this so that's our footer all fixed so okay so now let's take a look and see if my footer has been updated so if I scroll all the way down you can see here that this has been updated now and it's looking great okay so the next step is to change the footer for my blog posts so as you can see if I go to my footer here it's gonna have my old color right there so I need to change this so let's go ahead and do that and to change it you go to all posts and then click here on this gear icon and this will take you to your footer so over here now I can go in like I did before go to my background and change my color save that change this color as well we've gone background and remember we made the slightly darker save that okay now you can also change the links here too to your social media icons but you know what I'm gonna keep them as they are so let me save this okay I'm gonna close this and save changes now there are also other changes other pages that you may also want to change and this is like the custom 404 page so this page shows when you go to a page that doesn't exist on your website anyway but before I do that let me just refresh this so you can see the changes so as you can see here my footer here has been changed now I need to change the comments area so I'm gonna come back over here go to custom body and then I'm going to scroll all the way down here to my comments area so again I'm gonna go in here go to my background and change the color save this one more time save this and then I'm gonna just close out of his Save Changes now if I go to my blog post and refresh you notice that now we have our color it's seamless and this has all those earthly colors that I was talking about earlier on when it comes to choosing your color palette that works with your blog so here if we go to any post is going to have the similar design so let's go to post one and if I go to post one if I scroll all the way down here you're going to see that this still looks really really awesome now you may not have this sign up I mean this email sign up for the newsletter option so what you want to do is you can go in and disable it if you don't need to use it as you're starting off so let me show you how to disable it so if I scroll the way down here if I click here on this row settings click advanced then you want to come over here to visibility and then just disable it on all devices so that's all you have to do if I click on save and then if i refresh this page now this sign up for the newsletter opt-in is now gone there we go okay so pretty much this is how you go in and customize or build a blog from scratch so we have a home page we created our blog posts so pretty much you can use this template for any type of blog to be baking it could be gardening like in this case it could be a tech blog and so on the most important thing is to make sure that you choose your write colors and you go in and just replace the colors that I have on this template with your colors pretty much this is all I have for you in today's video thank you very much for watching and I'll see you in the next video

Channel: MAK

Views: 20,753

Keywords: Augustine mak, How to make a blog on WordPress for beginners, how to make a wordpress website, divi builder tutorial, wordpress tutorial for beginners 2020

Id: ikn6v2CiJeI

Length: 34min 18sec (2058 seconds)

Published: Sun Apr 19 2020