How To Create A Conversion Focused Blog Page With Elementor Page Builder

In this video I’m in a show you some ways to spruce up your blog index page this is the page on your website were all your blogposts appear I will show you how to get more out of that particular page it’s ideal forElementor users but if you’re using another page builder I believe that they have ways of improving that as well and so that’s doing this video it is kind of sparked by people asking me how

I got my blog page looking like this is the page on my website where I have blog posts but I also have other things going on here that I end up having full control over to make it a better experience for the people that visit my website so anyways were to jump into this just was my names Adam WPCrafter.com if you’re new here there’s a subscribe button but let’s just jump into the content of the video right so here is a basic WordPress installation has a website already loaded up on it so the first thing that you can do is just use what your theme has built into it but what ends

up happening when you do that is you’re just getting a list of blog posts you don’t have full layout control over your blog index page something I’m in a show you how to do so let me first to show you what it looks like when you have a blog page that is controlled by your theme so here is a blog page right here just so happens also be set as the homepage and when you scroll down there’s this nice and great here of the variety of blog posts and this does look pretty nice this is a theme that happens they have lots of great options if you want your theme to control your blog index page for me

I rather make my blog index page myself using my page builder but that’s the best first advice if you don’t want to use a page builder to do it make sure you have a team that gives you the options to make this blog index page look exactly how you want it to look okay but were not to do that so what not everybody knows this but in WordPress, you tell WordPress which page is going to be your blog index page and have all of these blog posts listed on it and

you can is simply on tell WordPress that that is your blog index page and this is what I’ve done to have full layout control over the blog index page on my website it’s super simple to do you just go to settings and then you go right here to reading and there’s this option right here that says post page well if you change it from whatever it set to select you can make any page on your website be this blog index page you simply need to create the page and add

a link to it in the menu navigation and you have all new blog index page but you need a tool to then also pull in those lists of posts and that’s where using a page builder will come in so let me go ahead and save the changes here and now when I go to my pages you’re gonna see that here’s that blog page again but when I go to view it doesn’t look anything like it did before and that because WordPress

is just sees this as a normal page on your site and that is perfectly fine and that’s exactly what we want to hear someone go into it right here and then I’m first to click on edit with Elementor and then it’s going to open up in Elementor right now and the reason you see this going on with the headers because this particular page in the theme is said to have a transparent header so if I was to add a new section to Elementorand then maybe add sort of a contrasting color by choosing the section and then going right here and then entering a background color you’ll see what I mean so lets the go-ahead

and just choose a color right here and we can go something like my cow look before it doesn’t matter we can go like that and let’s add some basic height to this summit to go from heights and I’m in a go minimum heights and there you can see I have some minimum height here now when I collapse the Elementor interface you’re in a C and this is the theme that doing the header part the transparent header part you can see I now have a beautiful transparent header and I can put anything I want in this

section I can have a background image I can color gradient I can make this look however I wanted to look next is what should some of the elements first be that we can put on a blog index page other than just our posts because doing the post is gonna be very easy if you have element or Pro there is a posts module in there so let me show you how that’s done and then we’ll talk about what we can do with this other space here so if I scroll

down to the elements there’s the option of this post right here I can just drag and drop that right there and you can see where they are and there are different skins there is the classic skin and the CardScan just like that and then you can start tweaking away and enabling and disabling things I didn’t want this avatar here I can scroll down here

and I can just turn that off and then we lose that so now what we have is this space here that we can utilize for more things and then when you scroll down we have a list right here of the various posts that are on this website we can tweak this out will probably want to add some spacing right here let’s go ahead and do that now as a matter fact so I’m in a go into because if I don’t to his father be okay some to go there to the section I want to click on advanced and I’m then adding some padding to the top into the bottom some then unlock them and I’m thinking probably about 80 pixels let’s see what

80 looks like that looks good and will put 80to the bottom and that’s looking pretty good so we now created it with Elementorbut there’s a lot more that we could do here we could put a nice headline here soI can go and drag a heading and I can

center it I would probably want to make the color of the text one that looks a little better for right there but another thing that we can do is add an opt-in form so this is a great opportunity to since people are on your blog page to allow them to give you their email address if they’d like to be notified when there’s new content on this blog page again while there are lots of ways to do this but if you already have Elementor Pro you can scroll down to the Pro

elements and then there is a form option right here and we can drop that in right off the bat you can see this and say whoa that does not look right but we can easily tweak this small we want for whatever is great for this is I’m just getting used the email address or right here I can get rid of the name and I can get rid of message now we just have email and the button but there’s a lot we can do here to spruce this up to let’s first spend a moment here to try to improve the

look of this so we have the email field right here it’s named email and we don’t have to have it say email there we can put something a little better for the placeholder like enter your email address there we go right there and to your email address and we could then go right here where it says the column width and let’s change this to say 75 and what were going to do is where to put the button in that other 25% of

the column with space right there okay so we have this label right here that says email I just might want to get rid of that right there so now we got rid of the label and let’s see what other tweaks we can do so we have our input size I should’ve left that saying email and just disabled the label you like to leave my little mistakes here so you can see them and we all make them okay and that got rid of my label that is perfect so that is our first form field and then our submit button such as column width and cinema hundred let’s move this to 25% and you can see how it’s been merged onto the same line which is kind of what I was after now for

the text here it says send let’s change that a little bit to something along the to communicate what they’re doing by putting their email and then clicking on submit so let’s change this to subscribe I think that is fine right there so next let’s see what other options that we have here we can add an icon to the subscribe button I probably don’t particularly want that now you can integrate this with your email services and at the end of the video I’ll tell you what email services that I’m using if I remember but you can do that right here you can see you can put here what happens after someone submits this okay and then we got some additional options

all right so now let’s see if we can kinda spruce it up a little bit, okay so we have this gap between the two here so I’m going to see what happens when I get rid of that action that is what I wanted I wanted to get rid of that gap right there we’ve got some letterspacing let’s go ahead and take a look at the field options I’m fine with those let’s look at our button options, okay so we have this button border radius want to do something interesting there so just bear with me so on the right I think it might be 30 so there’s 30 and

then on the bottom, I’m gonna do 30 mL what is it kinda made it like a pill shape it’s a little rounded right there and it kinda looks like it’s together actually want to do the same thing over here so just kind of looks together like it’s one thing so let him go back to the field and see there you go I got border-radius here so I’m in a do this to the left like this 30 and then I believe bottom note that was in it I think I need to do on the top there it is so now we have this kind of pill

looking thing going on here I do need to change the color of the button a little bit some to goto button and for the background color let’s make it something a bit brighter no lets choose a color something okay that’s right that’s fine alright so now we have kind of a nicer looking opt-in former someone can just pop their email and it’s filed a little bit nicer, of course, it’s all done on the fly the last thing that I want to do is make this not be so wide there’s

several ways we can go about doing that so we could just for the element here we can add some padding to the left and right but if you do it that way you have to make sure on a mobile device that you tweak the setting for that so just to get a quick idea of how this would look XM and add margin sorry so for the right to let’ said 200 like that and then for the left let’s add 200 like that it’s still a bit on the wide side so let’s make this 250 and then let’s make this 250 and they have it looks a little bit nicer I’m not going through every little fine detail to make this look beautiful but you can get the

point out tighten that up a little bit more now as I said on a mobile device you’re going to need to tweak it by going here and clicking on this little icon and then changing it for a mobile device but you could see were already made a much better looking blog index page here where you could do a lot more things with it like have an opt-in form here and it would look better if it was styled another interesting thing and you can see I did this on my website as I didn’t add an opt-in form probably should though instead I and added a search box and this is also a feature found inside of

Elementor Pro so I go down here to the Pro elements right here in I scroll down little bits are here and here it is it’s actually found under theme element elementsand then search form I can go ahead and drop that in there and we have this same kind ofsearch for more we can do something very similar we can tighten it up we can style it we youcan you have full control over this search form she can see I did the whole pill thingagain and I did the same pill thing with the search button and I made it so there is nospacing between the button and the field and you can also put whatever you want to be theplaceholder text so for me there I what I put in there is giving people ideas of whatthey could search in there and so that’s how I ended up with mine so let me actually getrid of this right here so this is the first thing that you can do to really spruce upyour blog index page and you can style this and tweak it to your hearts content you

couldput calls action here you can obviously put an email sign-up form or any search form orof wide variety of things that you do here for your local business you could have somekind of an advertisement in their call today and will give you XYZ for free there so manythings you could do with this space rights here okay so this is one of the things wereable to do just with Elementor Pro okay now the next thing I wanted to do is show youhow with this Elementor add-on called Elementor extras they also have a post grid elementthat adds some additional features that I think are actually kind of neat so let meshow you those right now so one of my need

to do is go here and save this and then I’min a get out of it but I’m in have to come right back in some a good exit dashboard I’min a go right here to plug-ins and it’s right here Elementor extras I’m an activated hoopslooks like a need updated as well I want to go back into pages and for a blog I’m in ago and jump right back into Elementor an hour can have some additional modules that areonly found with Elementor extras and the ones I’m specifically looking for is the post extrasall right so let’s go ahead and do that RK where we okay here we go okay so what I woulddo is I’m gonna delete the Elementor grid and then I’m going to scroll down to the

Elementorextras it’s good to be down here somewhere underneath WordPress’s there it is okay soit’s right here or post extras now does a lot of the same things that the ElementorPro posts module does but it also expands a bit on those features and it add some thingsthat really might interest you and in fact I do use this on certain parts of my websiteso you can have a carousel if you want to go classic right here not to get into allthe intricacies but what I wanted to show use the one thing that I really like and it’scalled filters some return filters on and then I’m to go right here to filters and I’mgoing to choose categories and did you see what it did it added a list of the categoriesright here at the top and when I click

on its I’ll get out of this and show you wouldlive when I click on it it filters that list of posts it to just show the posts that arein that particular category some to go ahead and click on updates enema click on previewchanges it’s opening up here in the new tab and here are my blog posts right so when Iclick on say cocktails I think they might all be cocktails okay there’s moods you cansee now she’s showing me the food and then here is another option right there Nisha showingme that so this filter feature is really really nice I do use that on my website now obviouslyyou’re going to want to manipulate some of the styling gel full style and control overall of

this and how it looks you can do some really neat things with it let’s just takea quick look at their website to see what options this you can make your posts easilylook like this or this is a carousel if you wanted a post carousel here’s how they styledthat filters so you can go like this and it’s filtering it see how nice that looks so theseare more options that you have available if you are using the Elementor extras are rightso now let me do one more thing I’m to show you one more option that is out there andavailable to you for creating a beautiful blog index page some to go back, click onexit the dashboard and it’s another option to enable someone to go to plug-

ins now thisis actually a plug in that I did a full review on several months ago and it’s called JetBlogfor Elementor summit click on activates and I’m going to actually deactivate the Elementorextras it might make our page look funny for a moment and then a minute jump right backinto Elementor on that blog post by clicking on edit with Elementor and so we might nothave that block yeah just like I figured because we disabled it it just made it entirely disappearlet me show you what JetBlog does a for a quick moment here is a website that they havethat shows you some of the options and essentially what this is going allow you to do and it’sthe simplest way to get to this point this plug-in allows you to create these beautifulvariety of newspaper style layouts but using Elementor and your blog post content so I’llhave links to all this stuff in the video description box just you know so you can havelists of posts like this

you can have this what’s commonly referred to as a tile gridlike this you can see looks really nice with the right images only challenge with somethinglike this is it does different things with the images that you use in your blog postit starts displaying them in different shapes and so some of your featured images mightnot look right you always want to think before about what a blog post featured images tolook like in these various layouts before you choose one all right so let’s see whatwe can do here so I’m in a scroll down we’ve got our Pro elements are theme elements andit should be right underneath widgets and here they are so it’s adding these six

differentelements that you can add so let’s first choose maybe the smart post title some to go througheach one of these but you can quickly see how just dropping that in it looks reallynice obviously we have some styling issues that we would need to fix to change the fontcolor and maybe reduce the amount of text could you get full control and there’s alsothis gap between the images you can have full control over that but I do have to say justa moment ago I said you gotta be conscious of your images and all the images that areon this demo blog look fantastic using this add-on to have these various grid layout optionsof just wanted to images side-by-side it could look like that it can look like this if youlike that layout there’s

all of these various layout options right here that you can turnon with one click and then you have pretty much full styling control so you’ve got yourheight option right here so I can make it taller to fit more stuff in there if that’swhat I wanted you have full control over these various data points so if you don’t want themetadata you can turn that off you can just start turning different things off you caneven feed in custom fields that’s actually very interesting so for style you can seeby default by default they really should changes the not have it be this color it should probablyhave something a little different by default so if I wanted to change the text I believethat would be underneath content and then for the title we probably need to just gostraight whites you can see I’ve already changed that

and you have full control over it eventhough it might not be looking the best the way I just threw it in their really quickso we also have other options so these are smart post titles and then you can do listsand that the best thing when you have full control when you’re building your blog andexplain just way and you have full control over you can do a variety of different thingsso I can say have a new section right here and it can be a two column section and I canuse this smart post list right here and I can have it be a format like that and I canalso use the same module right here and I can just have

different settings for differentcategories different styling different layout I can do whatever I want with it and to createa really dynamic looking blog index page like you see being done here with your tiles andeverything and so it also include some other things like a video playlist which is actuallyreally cool to only they had a like about is it yet because YouTube you have to havethis YouTube API and that so if you want more info on this plug-in will deftly want to checkout my

video where I went through it in a lot more detail so anyways this is some waysthat you can do more with your blog index page and it really boils down to just nothaving WordPress’s manage and control it but instead building it out with your page builderit’s really simple to do and then leveraging all of these elements that are available toyou for from Elementor or maybe from one of the various add-on packages you can do somereally neat things some really creative things and really make the best to use out of thishighly visited page on your website so anyways if you enjoyed or found any value out of thisvideo if you could consider giving it a thumbs up as if you want

more videos like this youcould subscribe to the channel and turn on notifications if you want to know when theseare uploaded I do have links to everything in the video description boxes are probablyall going to be referral links except Elementor extras they don’t have a referral programthere Alden B referral links if you did click on that link and make a purchase a portionof what you pay goes to support this channel not a huge amount of money but if you didif you did want Elementor and you click on that link to go to my website where

I tellyou but of course I have that I will give to you for free on Elementor to get more outof Elementor if you were to purchase Elementor Pro through the link there so anyways allthat information is down there for you thanks for watching this video thanks for supportme and I’ll see you in the next one

Leave a Comment