How To Make A WordPress Blog with Elementor Pro

hello everyone this is Emmanuel and in today's video I'm going to show you how to add a blog to your WordPress website and how to customize it with Elementor pro so if you have your website just like this one but you don't have a blog page the first thing you gonna do is go to your dashboard by clicking on your name on the top left corner or clicking dashboard that works too then you're gonna go to pages and we're gonna set up a brand new page which is gonna be your blog page so we're gonna click add new and we're gonna load for a second and then we can title it whatever we want I'm gonna title it blog okay and we're gonna click publish and publish again and that's it now this is just a blank page right now it's not really anything we can leave it like that for now we're gonna click on top left to go back to the dashboard again now that we have this page we have to actually tell WordPress that this is not just a normal page that this is gonna be the blog page so to let WordPress know that any post that we make for our blog should be sent to this page what we have to do is go to settings and go to reading and we're gonna click right there and then here in these options where we have the home page which is a static page and the post page which is your blog page we have to pick a page for it and we're gonna click the blog page that we just made so that's gonna let word person know that all the posts need to be shown on this page so we're gonna click Save Changes and it's gonna load and save the next thing we want to do is we want this blog to actually show up in our websites menu when people go to it so let's go ahead and add this page to the menu to do that we're gonna go to appearances and then we're gonna go to menus and it's gonna load for a second alright and here's our websites current menu what we're gonna do is pick the blog page which it's not showing here we can click view all all right here it is for the blog page and I'm gonna check that one and click Add to menu and we can add here at the end you can also move it to a different part of your menu wherever you want it to be I'm just gonna have a right here at the end and we're gonna click Save to add that to the menu okay perfect so now if we click on our name again we can actually see what our website looks like now that we added that to the menu just to make sure everything is going smoothly so here we have our menu this is a button that separate and here is the last menu item which is the blog page and if I click this right now it's just gonna show empty there's no post or blog or anything that we've created yet so blogs have two portions first is the archive page so that's what this blog page is gonna be it's gonna show all of our posts once we have them and the next is the post page which is when somebody actually clicks on a post what that is supposed to look like so I'm gonna go back to the dashboard and let's make a fake post so to do that we're gonna click here where it says post and we can add a new post by clicking add new and here we can add what our post is gonna be called so hello everyone oops right and then we can write a little bit here oops all right and we can set an image for the post to show to do that you get a document can you go to featured image and this is the image that's gonna be shown front and center so we're gonna click set a featured image and you can upload an image from your computer by clicking here it says upload file or you can pick an image that you already have in your WordPress so that's gonna be the featured image you can also add an image to your blog post by clicking this little plus right here and you can add an image paragraphs of gallery headings quotes audios all kinds of things I'm gonna add an image here from my media library again I'm in a different way so I'll add this one just to make a little example blog post okay so they were this we're gonna click publish and publish again and we can see what this post looks like by clicking yours as a view post and this is what it looks like right now kind of basic kind of ugly a little bit disorganized if we click on blog we can see that it's a little bit more organized but still pretty basic not that great so now we're going to set up a template for the archive page this blog page and for the blog post to do that we're gonna go back to the dashboard and it's gonna load in right there then we're gonna go to Elementor and then we're gonna go to right here under elementary templates this is with Elementor pro and we're gonna click add a new template and it's gonna be for an archive and we're gonna call it blog you can call whatever you want I'm just gonna call it blog to make it easier to remember create template and with Elementor Pro we're gonna get some examples that we can copy here they are and we can import any of these we can also import some of these that's the easiest way to do it so what I'm gonna do is I'm gonna do a little bit of both I'm gonna import a little part and then I'm gonna add my own my own twist to it so this is a really simple one which is just like a little box with a picture and a title I'm gonna insert this one and it's gonna get right and turn right into the page the layout alright so this is what its gonna look like there's only one post to you it's really hard to tell it's fully gonna look like but it's pretty much in B boxes like this every time they add post so I'm gonna make a few changes just to make it my own I want to add a nice big image here and I want to write blog instead of archives so I'm gonna click the plus right here to add a new section just like this I'm going to add a background image by clicking in the center and clicking style and then go on a background type image and we're gonna add an image and now we can pick an image for background and let's see this one looks pretty cool I'm gonna add this one alright insert medium alright not to make it look good appear we're going to make it centered and we're gonna make the size cover so that it fits the screen evenly we have to add some space here so we're gonna go back to all of our options in elementary by clicking up here and we're gonna find a spacer and put them in there skin gives a little bit of space to being a little bit more let's put a hundred and fifty all right and let's right click and put duplicate now we have 300 and now we can actually get this archives and delete it and we can actually bring a new heading and put it right in the middle of two spacers and we can Center it and we can call it maybe you can call it news updates all right that's a little bit hard to see so we can go to style and text color we can make it white it's a little bit easier to read we can also go to typography make the font a little bigger all right 65 looks good you can also change the font weight and font type here these options but I like this part the other thing I want to do is make this background a little bit darker just so that this is easier to read a little bit more so we're gonna click right here in the center and we're going to click on background overlay classic and we're gonna pick the color black make sure it's black and then we can make it darker or lighter so I'm gonna do about I think 35 is good you can see the image and but you can read it easily as well okay a little bit too much space up here I'm gonna bring this up by clicking here this is either padding or module or margin I can go to advance to check and it is Patti we can change it from 100 to 50 I'm still too much maybe maybe 10 all right that's better perfect I want to take off this thing here or Sun categorized so I can click to edit this element as well and I can go here where it says metadata and I can remove the comments I can also remove the date I like with no date so that way that articles on the cold when they've been there a while badges we can turn that off that is actually what's a sarcastic and categorized their read more I want to make it blue so that it matches the blue of the website so style let's see content should be content here to read more and we're gonna choose blue which is the color that we want so this looks a lot better and we're gonna click publish and add a condition including all archives that's it and then click Save that's gonna load up and save alright and we're gonna click a little preview button not take a look and here is our new blog page awesome so let's click on blog again just to refresh great that looks much better than the blank one now we can also click here and read more to see what the post page it looks like and this one still looks kind of bad so now let's work on that one we can close out this blog editor let's go back to the dashboard and now we're going to go back to templates and then we're gonna click add new again and this time it's going to be single for a single post and single post and we're just gonna call this post and click create template and this way every time you add a new blog post it'll automatically be formatted to that correct design that you want so again who brings us some examples here and we can scroll down to see if there's any that we like let's see let's see there's a couple here I like keeping it simple so I'm gonna do let's see let's see something simple simple simple okay I know what I'm gonna do I'm gonna do this one so we're gonna click insert and click yes all right it's gonna insert that template for us so this background here is automatically going to be the featured image and I think all right there you go so it's importing an example from the blog post that we created I don't want it to say the category so I can right-click and delete that I don't want it to have a theme engaged I can right-click and do that this is the content I want this to be a different color also and I don't want these two things to be so close together so what I'm gonna do is I'm going to get a divider and put it in between just to kind of break that space up a little bit it doesn't have to be so long maybe can be like 80% and it's centered yeah let's make it blue like the rest of our website and let's make it a little bit thicker maybe - let's see how it looks all right and the gap mmm maybe a little bit more like 30 great there is a content there's an image share we can leave the share buttons this admin we can delete that comments I don't like having the comments because sometimes people use BAM comments so I'll delete that I'll delete this title for the comments just the share is fine this text let's make it blue make on their style click on blue and the title let's make it blue as well so that it matches perfect so here we have our featured image our title our content and some share buttons and we're gonna click publish and the conditions are including all post that's fine click Save and it's gonna save right there and we can preview it ok this is just a preview there's not what the final one is gonna look like we can go back to our actual website go to blog click on read more on this post and there we have what it would actually look like and we can see that there's an issue there's no title and this background is kind of crazy so we have to fix some things what happens if you need to fix something after you publish it very simply gonna hover over here or just edit with Elementor and now instead of just being able to click here you can click on the post page as well so we're gonna click post and we can fix this mistake that we just noticed so we noticed that there is no header and we notice that this image is not centered properly even though here it looks centered properly so to fix this image we're gonna click right in the center oops click right there click on style featured image and we see that here it's supposed to be centered and cover so for some reason it's not noticing that so let's do something let's remove fix put a default and then cover so maybe that'll refresh the settings that are controlling this and what was the other thing oh right there's no menu so to fix that we're gonna go here to this little Settings gear and if you here canvas canvas means remove the header and the footer so we can change this to element or full width all right and we're gonna click update and hopefully that will fix a little issues that we saw and let's click preview you might have to go to the blog page let's go to the blog page and let's click on this now and hopefully it got fixed that see for some reason it's not fixed the menu issue but it's not fixing the page issue for some unknown reason so let me try one more thing let's go back here and maybe instead of cover we'll just have a default or maybe contained let's do contained which is a smallest version to see if something is happening where it's not sending the information over properly let's see and I'm leaving this in because these are issues that you guys might have and it's perfectly normal sometimes websites do not cooperate like using it is not cooperating with what I wanted to do so when something like this happens don't stress it it's very simple we're just gonna have to do this ourselves we're gonna make a new section right here create it like that alright we know we're gonna have some space so we're gonna plop in a spacer BAM we're gonna make it nice and big maybe 350 like that we're gonna add a background image and that image is gonna be we're gonna click this little gear set see if we can do we're gonna have just whatever background image do we want and let me choose one let's see this building is gonna be fine all right insert cover Center Center all right and then we'll do is we'll have the featured image we'll have the featured image up here instead right under the name like that and we'll delete this perfect see okay update so sometimes I get stuck guys it is what it is you know don't be yourself about it we're gonna refresh all right see there you go now it's working so that's just how life is sometimes we're gonna go to blog and check it one more time looks good read more and looks good perfect so that's how you add a blog post template and a blog template and how you can fix some issues that sometimes just happen in life guys that's just this is real life web design not not perfect not the perfect world where everything works perfectly all the time I'm going to go ahead right now and add a few more blog posts just so that you guys can see what it would look like if it was finished all right so once your blog page is done and you have a couple of blog post posted on there this is how it should look you have a nice heading on here you have a nice display it's much easier and much better to read than the default one and if you click one of these it also looks a lot nicer when you go to read the post and this will just load up and there you have it your title your featured image your content and everything else that we set up in a blog like the share links so guys that's how you add a blog page and customize it with WordPress and Elementor pro if you guys have any questions or need any help you guys can leave me a comment remember to like this video it helps me reach more viewers as well didn't get so much have a great day bye bye

Channel: Enmanuel Diaz

Views: 41,576

Keywords: elementor, elementor tutorial

Id: AR9DPy2ANvA

Length: 17min 45sec (1065 seconds)

Published: Mon Jun 29 2020