How To Make A Conversion Focused Blog Page

Updated: May 24, 2018
Filed Under:

 
elementor_logo
Cost

Free to $199

Your blog page is one of the most valuable locations on your website, but for most blogs, its a missed opportunity.

Why?

If you use it to just list blog posts you, there are a few things you can do differently to make it focused on conversions.

Elementor


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 blog
posts appear I will show you how to get more

out of that particular page it’s ideal for
Elementor users but if you’re using another

page builder I believe that they have ways
of improving that as well and so that’s really

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 a 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 have a website

already loaded up on it so the first thing
that you can do is just use what your theme

actually 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 really
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 various of blog posts
and actually 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 own 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 actually 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 to select basically 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 it doesn’t

look anything like it did before and that’s
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

to 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 Elementor
and 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 let’s 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’s
actually 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

literally look however I wanted to look so
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 actually gonna be very easy if you have
Elementor 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
Pro elements there’s this posts option right

here I can just drag and drop that right there
and you can see here they are and there’s

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 empty 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 add 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 80
to the bottom and that’s actually looking

pretty good so we we now created it with Elementor
but there’s a lot more that we could do here

we could put a really nice headline here so
I 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 give them an opportunity 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’s 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 so
all we really want for whatever is great for

this is I’m just getting use the email address
or right here I can get rid of 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 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 were to put the button in that
other 25% of the column with the 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 actually I should’ve
left that saying email and just disabled the

label you like to leave my little mistakes
in here so you can see the 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 now 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 actually 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

actually 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
so 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
I 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 go
to button and for the background color let’s

make it something a bit brighter no let’s
choose a color something okay that’s right

that’s 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 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’s
add 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 it looks
a little bit nicer obviously I’m not going

through every little fine detail to make this
look beautiful but you can get the point out

actually tighten that up a little bit more
now like 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
I 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 a little bits are here and here it is

it’s actually found under theme element elements
and then search form I can go ahead and drop

that in there and we have this same kind of
search for more we can do something very similar

we can tighten it up we can style it we you
can you have full control over this search

form she can see I did the whole pill thing
again and I did the same pill thing with the

search button and I made it so there is no
spacing between the button and the field and

you can also put whatever you want to be the
placeholder text so for me there I what I

put in there is giving people ideas of what
they could search in there and so that’s how

I ended up with mine so let me actually get
rid of this right here so this is the first

thing that you can do to really spruce up
your blog index page and you can style this

and tweak it to your hearts content you could
put calls action here you can obviously put

an email sign-up form or any search form or
of wide variety of things that you do here

for your local business you could have some
kind of an advertisement in their call today

and will give you XYZ for free there so many
things you could do with this space rights

here okay so this is one of the things were
able to do just with Elementor Pro okay now

the next thing I wanted to do is show you
how with this Elementor add-on called Elementor

extras they also have a post grid element
that adds some additional features that I

think are actually kind of neat so let me
show you those right now so one of my need

to do is go here and save this and then I’m
in a get out of it but I’m in have to come

right back in some a good exit dashboard I’m
in a go right here to plug-ins and it’s right

here Elementor extras I’m an activated hoops
looks like a need updated as well I want to

go back into pages and for a blog I’m in a
go and jump right back into Elementor an hour

can have some additional modules that are
only found with Elementor extras and the ones

I’m specifically looking for is the post extras
all right so let’s go ahead and do that RK

where we okay here we go okay so what I would
do is I’m gonna delete the Elementor grid

and then I’m going to scroll down to the Elementor
extras it’s good to be down here somewhere

underneath WordPress’s there it is okay so
it’s right here or post extras now does a

lot of the same things that the Elementor
Pro posts module does but it also expands

a bit on those features and it add some things
that really might interest you and in fact

I do use this on certain parts of my website
so you can have a carousel if you want to

go classic right here not to get into all
the intricacies but what I wanted to show

use the one thing that I really like and it’s
called filters some return filters on and

then I’m to go right here to filters and I’m
going to choose categories and did you see

what it did it added a list of the categories
right here at the top and when I click on

its I’ll get out of this and show you would
live when I click on it it filters that list

of posts it to just show the posts that are
in that particular category some to go ahead

and click on updates enema click on preview
changes it’s opening up here in the new tab

and here are my blog posts right so when I
click on say cocktails I think they might

all be cocktails okay there’s moods you can
see now she’s showing me the food and then

here is another option right there Nisha showing
me that so this filter feature is really really

nice I do use that on my website now obviously
you’re going to want to manipulate some of

the styling gel full style and control over
all of this and how it looks you can do some

really neat things with it let’s just take
a quick look at their website to see what

options this you can make your posts easily
look like this or this is a carousel if you

wanted a post carousel here’s how they styled
that filters so you can go like this and it’s

filtering it see how nice that looks so these
are more options that you have available if

you are using the Elementor extras are right
so now let me do one more thing I’m to show

you one more option that is out there and
available to you for creating a beautiful

blog index page some to go back, click on
exit the dashboard and it’s another option

to enable someone to go to plug-ins now this
is actually a plug in that I did a full review

on several months ago and it’s called JetBlog
for Elementor summit click on activates and

I’m going to actually deactivate the Elementor
extras it might make our page look funny for

a moment and then a minute jump right back
into Elementor on that blog post by clicking

on edit with Elementor and so we might not
have that block yeah just like I figured because

we disabled it it just made it entirely disappear
let me show you what JetBlog does a for a

quick moment here is a website that they have
that shows you some of the options and essentially

what this is going allow you to do and it’s
the simplest way to get to this point this

plug-in allows you to create these beautiful
variety of newspaper style layouts but using

Elementor and your blog post content so I’ll
have links to all this stuff in the video

description box just you know so you can have
lists of posts like this you can have this

what’s commonly referred to as a tile grid
like this you can see looks really nice with

the right images only challenge with something
like this is it does different things with

the images that you use in your blog post
it starts displaying them in different shapes

and so some of your featured images might
not look right you always want to think before

about what a blog post featured images to
look like in these various layouts before

you choose one all right so let’s see what
we can do here so I’m in a scroll down we’ve

got our Pro elements are theme elements and
it should be right underneath widgets and

here they are so it’s adding these six different
elements that you can add so let’s first choose

maybe the smart post title some to go through
each one of these but you can quickly see

how just dropping that in it looks really
nice obviously we have some styling issues

that we would need to fix to change the font
color and maybe reduce the amount of text

could you get full control and there’s also
this gap between the images you can have full

control over that but I do have to say just
a moment ago I said you gotta be conscious

of your images and all the images that are
on this demo blog look fantastic using this

add-on to have these various grid layout options
of just wanted to images side-by-side it could

look like that it can look like this if you
like that layout there’s all of these various

layout options right here that you can turn
on with one click and then you have pretty

much full styling control so you’ve got your
height option right here so I can make it

taller to fit more stuff in there if that’s
what I wanted you have full control over these

various data points so if you don’t want the
metadata you can turn that off you can just

start turning different things off you can
even feed in custom fields that’s actually

very interesting so for style you can see
by default by default they really should changes

the not have it be this color it should probably
have something a little different by default

so if I wanted to change the text I believe
that would be underneath content and then

for the title we probably need to just go
straight whites you can see I’ve already changed

that and you have full control over it even
though it might not be looking the best the

way I just threw it in their really quick
so we also have other options so these are

smart post titles and then you can do lists
and that the best thing when you have full

control when you’re building your blog and
explain just way and you have full control

over you can do a variety of different things
so I can say have a new section right here

and it can be a two column section and I can
use this smart post list right here and I

can have it be a format like that and I can
also use the same module right here and I

can just have different settings for different
categories different styling different layout

I can do whatever I want with it and to create
a really dynamic looking blog index page like

you see being done here with your tiles and
everything and so it also include some other

things like a video playlist which is actually
really cool to only they had a like about

is it yet because YouTube you have to have
this YouTube API and that so if you want more

info on this plug-in will deftly want to check
out my video where I went through it in a

lot more detail so anyways this is some ways
that you can do more with your blog index

page and it really boils down to just not
having WordPress’s manage and control it but

instead building it out with your page builder
it’s really simple to do and then leveraging

all of these elements that are available to
you for from Elementor or maybe from one of

the various add-on packages you can do some
really neat things some really creative things

and really make the best to use out of this
highly visited page on your website so anyways

if you enjoyed or found any value out of this
video if you could consider giving it a thumbs

up as if you want more videos like this you
could subscribe to the channel and turn on

notifications if you want to know when these
are uploaded I do have links to everything

in the video description boxes are probably
all going to be referral links except Elementor

extras they don’t have a referral program
there Alden B referral links if you did click

on that link and make a purchase a portion
of what you pay goes to support this channel

not a huge amount of money but if you did
if you did want Elementor and you click on

that link to go to my website where I tell
you but of course I have that I will give

to you for free on Elementor to get more out
of Elementor if you were to purchase Elementor

Pro through the link there so anyways all
that information is down there for you thanks

for watching this video thanks for support
me and I’ll see you in the next one

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.
liveagent-review

LiveAgent Lifetime - $59

Bring all your customer support channels under one roof with LiveAgent

linkcheeta-review

LINKCheetah Lifetime - $49

Monitor all of your backlinks from one dashboard with LINKCheetah

website-hosting-discount

InMotion Hosting

50% Discount Offer

free-course-offer

Free Course Offer

WordPress Starter Course

>