How to Build a Conversion Focused Website From Scratch In 55 Minutes | Thrive Theme Builder Tutorial
In this review, we'll walk through how to build a conversion-focused WordPress website starting from zero, and before I go into WordPress and start building pages and stuff. Let me just quickly
define what I mean by conversion focus. This is the differentiating factor here. This is what makes this tutorial different. You see most websites and most website building tutorials most
themes and WordPress plugins.
Soon we are basically concerned with making a website that looks nice but a website that looks nice that's really secondary.
Of course, we want our website to look nice but the real job of our website is to convert visitors. So the website serves some kind of a business goal may be. You want to build a mailing list of subscribers.It may be you want to get customers for your product members for your membership site coaching clients whatever it is the website has some kind
of a goal, some kind of a conversion goal.
That a good website does a good job of moving people towards that conversion goal and most websites quite frankly. Do
a terrible job of doing this so in this tutorial we're not just talking about. How to make a website period and we're not talking about how to make a website that looks nice.
We're talking about primarily how to make a website actually serves your
business.We will pass four different conversion checkpoints these are like the main checkpoints We will pass and sometimes revisit as we go through the site those four points are first of
all clarity readability and structure. So your website has to be clear and easy to
understand people have to be able to easily read the text on your website and understand.What can they get where can they navigate to to get what they're looking for and so on that is clarity
readability and structure and right
there that's where most websites already fail so we'll make sure that we have that the second point is speed optimization
nobody likes using a slow website so
we'll take a look at how to make our
website as fast as possible the third
point is calls to action we want to have
explicit calls to action throughout our
pages throughout our content to
basically tell people hey sign up to my
newsletter or hey
check this thing out you know call me to
shed you a coaching call or something
like we want to call people to take a
conversion focused action and finally we
have what we call conversion pages where
the entire page has the purpose of
driving people towards a conversion goal
such as a sales page to sell your
product and we will hit on all of these
points in rapid succession in this
tutorial now let's get started with that
I am in my wordpress dashboard and as
you can see this is basically empty is
nothing going on here yet and we will
start with some very basics one thing in
the basic settings that I would
recommend you check is go into
permalinks that's settings permalinks I
recommend using the post name permalink
so that is when your URLs will simply be
your website comport slash post name
instead of having dates and categories
and so on and there as well or IDs or
something like that those are basically
the neatest nicest looking URLs that is
one factor that can make your website a
little more user friendly in general
good news is in WordPress basically all
the basic settings are good and you
don't have to worry about tweaking
things very much next let's look at
plugins so if we go to plugins right
here you can see I've already installed
the Thrive product manager which we'll
get back to later but there's nothing
else and we can go on add a new and here
we can add some plugins now here are
some recommendations first of all don't
install too many plugins right that's
one of the mistakes that a lot of
WordPress users make is they fall in
love with you oh I can add this thing I
can add that thing and so on in the end
you've got 50 plugins and your site is
super slow and breaks all the time
that's not a good idea so try to keep
your plug-in list lean but here are just
a couple of simple recommendations if
you're going to have blog posts with
comments active I recommend this plug-in
right here
the Akismet anti-spam plugin so you can
install that directly from here and then
also activate it from here another
plugin i recommend is an SEO plugin of
some sort and the recommendations there
are either
Yoast SEO or SEO press so if we go here
and we type Yoast for example this will
show us the search results and this is
the one plug-in I recommend
and the other one is SEO press and both
of these are very very similar but you
should have one of these two plugins
which will take care of your site's SEO
settings and give you a better chance of
ranking in search results and then one
of the things we're going to do is we're
going to build the basic structure of
our website right away so before we
start fiddling with themes and pages and
so on we will build the basic structure
of the website and here's something that
can help you do that
first if you type in faker press you see
that there is a plug-in called faker
press and you can use this plug-in to
generate some dummy posts so if you have
a completely new installation with no
content yet it can be difficult to work
with your theme design with your website
design because there's no example
content you can look at the get an idea
of what does a blog post look like this
here is the solution on a brand new
website install faker press and generate
10 to 12 blog posts they'll just have
like dummy content and some random
featured image and you can use that to
make it easier to design your website
before you have any content another
thing I recommend is if you type in
privacy policy you'll see that there are
various plugins that can help you
generate legal pages such as privacy
policy disclaimer page Terms of Service
and so on and one that I can recommend
here is this one here although I'm sure
I haven't tested all of them right
probably many of them are good but this
is one that you can use to generate your
basic pages that you have to have on
your website such as privacy policy
disclaimer and so on so that is another
step install one of these plugins
generate the basic legal pages that you
need on your website and then let's go
into pages so for this I'm going to go
to pages and add new and here we can add
pages I'm going to create a page called
about and we're just going to give that
the title about and then I'm going to go
ahead and publish this page this empty
page right away so I just want to have
that page because I know that eventually
I'm gonna make it about our page I'm
gonna fill this with content but I want
to have it already and I'm gonna
continue adding some pages like that I
can make this bit easier for myself by
unchecking the full
screen mode here so I get my menu back
here that makes the whole thing a bit
user friendly so I'm gonna click on add
new again and I'm going to create
another page that I will call lead gen
page and in this case what I'm going to
do is we just save the draft here and go
to document permalink I'll call this
something else I'll call this free guide
so as you can see here this changes what
the actual URL of this page will be and
I don't want that to say lead gen page
so free guide is better again I'll go
ahead and publish that so I want to have
a page where I simply send people to my
mailing list give them a people give
them a reason to sign up to my mailing
list then once more let's hack hit add
new again
and I'm gonna call this the sales page
and same idea I'm gonna save the draft
that gives me a permalink setting here
and I want to give this a nicer URL as
well now the demo site I'm gonna build
here is gonna be a photography themed
website so on a photography themed
website maybe I'm selling something like
a photography course or something like
Lightroom presets filters things like
that so I'll just call this Lightroom
presets and again publish this page now
once we've done all that if I go to all
pages right here you can see we have
about disclaimer Lee Chan previously
polished sales page and the sample page
is the one that was already there in the
new WordPress installation this is a
very basic structure of the website the
other thing that I have here that you
can create using faker press is a bunch
of posts so as you can see I've made
some photography themed posts here to
match the the demo of the site this is
what I start with this gives me kind of
the skeleton of the site that we're
gonna start to build now the next step
is I'm going to be using thrive theme
builder and thrive architect as the
plugins for building the theme and for
creating conversion focused pages and to
do this let's go into plugins and I'm
gonna activate my thrive product manager
plug-in so at this step you would want
to log into your thrive themes account
download the thrive product manager and
install it and then activate it as I
just did when you
click on drive product manager once
you've activated it you will be asked to
connect it to your thrive themes account
and that will then automatically give
you access to all of the thrive themes
products you can access and like I said
what we want is thrive architects I'll
check this and the shape shift theme
which is the first thrive theme builder
theme so I'll install this and simply
wait for this process to finish and then
I get this success message right here
and I click on the blue button go to
theme builder dashboard this takes me to
the beginning of the thrive theme
builder setup process and we'll walk
through this together and another now
you can see here in the sidebar we have
thrive dashboard that is added once you
install a thrive themes product so
that's how you can get back here it's
thrive dashboard thrive theme builder
now this here's the good news this is a
setup wizard that walks you through step
by step everything you need to build
your website so really you can just run
through this wizard and without even me
explaining anything about it you'll end
up with a pretty good website but as we
go through this I will add some notes
with the idea of conversion focus in
mind so let's get started so I click on
get started and it asks me to upload a
logo for my demo site I've already
uploaded one here you can simply upload
any kind of logo image file and that
will be used in the header and
everywhere else on your site where the
logo make sense so I'll click on choose
and continue the next question is what
is your main brand color now don't worry
about this if you don't already have a
specific brand color you want to use you
can use anything you can keep this blue
and decide later you can always change
this later and you can also kind of just
wing it so I'll just go with you know
some kind of an orange tone because
again doesn't matter that much I can
always change that later so I'll just go
with this choosing continue and you see
right away why it asked me about the
brand color first because as we go into
the setup wizard you can see that for
example this button is already using
this orange brown color that
selected so as we build outside we
already see our own colors applied now
what you can do here is basically we're
gonna start choosing components of the
sides step by step and there's two
things you can do you can either use
your keyboard keys left and right to
scroll through different examples or you
can click here to load different header
examples in this case or you can click
on this item here to open a whole menu
of or a gallery that you can choose from
and as you can see there's all kinds of
different headers here that we can
choose from I'm gonna go with one that's
pretty simple we'll click on that it
gives me an idea of what it actually
looks like that looks good I'll click on
choose and continue that moves us down
to the footer where the same rules apply
I can scroll through different examples
or footers and see them loaded in like
this or I can click here to see a
gallery now for my footer I want
something really simple to begin with I
don't have that many pages or anything
you know at some later point if I have a
website with loads of pages maybe I want
to have one like this with lots of links
and things but right now I want
something very simple for example this
here so let's insert that choose and
continue and now we get to the home page
and this is one of our first really
important conversion checkpoints so by
default in WordPress your home page will
simply show a list of blog posts with
the latest one at the top and then going
down in chronological order and you can
still have that you can choose this
option here to get that but from a
conversion standpoint that is not a good
idea because really you should think of
your home page is an important landing
page on your website and if you think
about what does the home page need to do
it should communicate what your website
is about and who it's for and what to do
next and if you simply show your latest
blog posts it's very hit and miss kind
of depends on what the last thing you
published is someone could land on your
home page and see something they're
really interested in and then there's a
chance that they become you know they
read your post they learn more about you
they become a future customer but
there's also a chance that the latest
few posts just don't appeal to them that
much
and then you've lost them forever that's
really not a good kind of roulette to
play on your home page so instead we
should have a specific landing page as
our home page that's independent of the
blog page and that's what we're gonna do
so in thrive the milder we can generate
a home page and it gives us the same
approach right here so I can scroll
through different home page layouts and
here this this is really handy because I
can actually see directly what this home
page layout looks like with demo content
right there so we can scroll through
these different options and see what we
have and as you can see this is the kind
of home page you're talking about at a
home page where you can clearly
communicate with text and imagery and
these elements like this grid here you
can communicate what your website is
about who it's for and give people a
clear thing to do next and also we can
click here to see a whole gallery here
of available pre-made layouts and again
you can edit all of this later so I'm
gonna go with this personal branding
home page to start with and here again
you can see that it's using my brand
color right it's using this orange that
I chose for the icons for the text
highlights and everything like that so
that's really cool all right
let's stick with this for the moment and
click on choose and continue next up the
single blog post so here when you write
a blog post you publish a blog post the
question is what does that look like
when someone lands on that individual
blog post and same idea right you get it
by now
we can choose from different pre-made
layouts and I'm going to choose one of
these more or less at random because
we're gonna get back to this let me just
choose this one maybe and that looks
good enough let's choose and continue
then we come to the blog post list so
this is what does the page look like
that lists all of your blog posts and
again we can choose from different
layouts right here now in terms of
conversion focus and in terms of clarity
and making your website easy to navigate
here's a simple rule you can follow we
have some layouts with with kind of a
great layout that tend to show a lot of
posts on very little space so here as
you can
see if I scroll down a bit basically
seeing nine posts all at once and this
can be great if for a website where I
publish frequently this kind of layout
can make sense if I only publish like
once or twice a week then most of the
times if someone comes to this page
they're seeing the same thing again so
having a layout like this is probably
less ideal so for a slower publishing
schedule or also if you think about if
you if you write loads of little news
articles then a great layout is a good
idea if you write epic posts every once
in a while then a layout like this might
make more sense which kind of gives
every single post a bit more weight I'm
gonna go with this click on choose and
continue and then we finally have the
page layout so that is what does a page
not a blog post look like and once again
same idea we click here and we choose a
layout that we like I'm gonna keep this
very simple I just have a page with
content and we'll get back to that later
all right
choose and continue and then finally we
have the question of menus so if we have
existing menus already on our site we
can choose which one is the header menu
which one's the footer menu but in this
case we don't have menus yet so I'm
gonna continue without choosing a menu
and that concludes our run-through the
initial setup wizard so right now if we
actually just go and look at the website
as you can see this is already coming
together we have a home page where we
can start editing the content we have a
blog page and we have basically all our
basic templates set up so that's a
pretty good start now let's continue
down the side here so we've completed
the basic setup wizard we also have a
branding tab right here we can change a
few things we have already set a color
but you can always come back here and
change that color and that will just
kind of change the color accent across
your whole website we have a logo option
and here as you can see we can actually
see this in our footer here this logo
here doesn't look quite right because
it's on a dark background and while this
one looks fine because it's our light
background and we actually have a
function for this so we have a dark
version and a light version of the logo
so
click on this here and I can choose a
light version of the logo that's made to
look good on dark backgrounds and then
that will be automatically used in
places like this so that's one of the
things we can do in branding plus you
can upload a favicon and the favicon is
the little icon that you see next to the
browser tab in a browser so you can
upload an image it should be a small
square image and the most important
thing is it has to be scalable so you
can upload an image that's let's say 200
by 200 pixels but it should have ideally
a transparent background you could use a
PNG for this and you have to make sure
that it looks good at a very small size
because again just look at how small the
icon next to a browser tab is that's at
that size and she still needs to be
recognizable so you can't have a text
logo or something like that basically
won't be readable at that size but here
is where you can upload that next we
have typography and this is one of the
ways in which you can change the overall
look and feel of your website let me
just quickly show you how this works so
we have this set here we can expand this
this gives us an idea of what the
typography looks like across our whole
website and I can go ahead and edit this
and editing typography works in groups
so I can click on any individual
typography element and create a rule
that basically says the h1 heading looks
like this on my website or the paragraph
text the default paragraph text looks
like this on my website but I can also
edit this in groups so if I click here
for example you can see that there's a
breadcrumb navigation that says heading
one is part of all headings this group
here and that is part of all elements
all right
so let's do all headings and here I can
change what I want this to be so I can
choose let's say open sounds and I can
choose what the regular font weight is
and what the bold font weight is so
maybe I want the bowl to be a bit bolder
and then apply that and as you can see
this has changed all of my headings all
at once so I don't have to click through
each one if I want to update this font
in general and this is how we control
the fonts on our way
sighs I'm just gonna go ahead and save
this change I just made and then head
back here so this is how you can change
the typography across your entire
website next we have templates and we
will get back to this in a bit this is
where you can control and edit all of
the templates we've already chosen and
created so far and next let's go into
site speed as I said the speed of your
site is a pretty significant factor for
conversions because if your site is slow
people generally won't stick around now
speed optimization on website is
massively complicated and technical and
we have made this as easy as possible
for you so we have these three steps
available let's just start with the
first one
unification and caching we have two
caching plugins that we recommend and
directly integrate with with recommended
configurations this is going to do a lot
of the technical heavy lifting to make
your site faster so the way this works
is we can choose one for example WP
fastest cache install this activate it
and then once its installed and
activated it says configure for optimal
caching with thrive simply click on this
click on yes and this will Auto
configure the plug-in to work as
perfectly as possible with thrive theme
builder that's it your whole caching and
this right here usually takes easily
half an hour or longer but it's done
your caching setup done next up we have
image optimization so images on your
website generally would slow down a page
much more than other elements because
you know a bunch of text is very small
in terms of file size but an image can
easily be half a megabyte or and
megabyte or even more so how do we fix
that again we have two recommended
solutions one is optimal which is an
advanced image optimization plugin for
WordPress which we recommend it has a
free plan but for a certain amount of
visitors or a certain amount of usage
you will have to pay and it's worth
paying for this it's a really good
solution if you want to keep your budget
lower and not pay for a solution we have
Smosh as the alternative this is a free
plugin that you can use completely for
free
so that's the alternative but I
recommend that you activate one of these
two I'm gonna go ahead with optimal
again basically the same thing we made
it as easy as possible I'm gonna install
this this will send you to the optimal
page where you can either register if
you don't have an account yet or if you
already have an account you enter your
key we can register directly inside the
interface here we'll get an email with
an API key which we enter here and then
we click on connect and then once we've
done that we see a status update here it
starts optimizing the images on the
website and before you start fiddling
with the settings here let's go straight
back to thrive dashboard and thrive
theme builder so once we've made this
connection let's go back here and go
back into side speed and image
optimization so this is where we started
and here once again once the plug-in is
actually installed and activated you can
see that there's a button that says
configure for optimal use I click that
click yes and we're done ok so again
we've done all the work for you here
that's possible to do to get image
optimization set up as perfectly as
possible and finally we have accelerated
mobile pages as I'm recording this this
is in beta this is a way for you to have
a special amp version of things like
blog posts which are basically more
speed optimized buzz but have fewer
features it's kind of a restricted but
even faster way to build pages and we
have amp features you can click on this
link to learn more about it and decide
whether you want to activate this on
your site or not ok there's one more
kind of basic structural step that we
need to do before we go into further
details let's talk about menus we can go
to appearance and menus right here
because in the wizard as you remember we
skipped that step and what WordPress
does is it generates a menu
automatically which just has all your
pages and that's not great obviously so
we're going to edit this I'm going to
call this main menu and we'll change the
label of the generated homepage that's
the home page is thrive theme builder
generator for us we'll change that to
then blog is good about is good
disclaimer doesn't belong here let's
remove that lead gen page here let's
also remove that previously policy let's
move that sample page we don't want to
remove that sales page yes why not but
let's change this to you know a call to
action get my thing by now app whatever
so I'm gonna call this again Lightroom
presets if we assume that's my product
let's just call it that and then I'll
click on create menu so now I've got a
menu called
main menu with these four menu items
let's create a second menu create a new
menu menu name footer menu and here I'll
click on create here we want basically
disclaimer privacy policy and that's it
these two pages we want in here we can
rearrange them like this let's save that
and there we go okay so now we have
these menus generated and with this we
have all the basics on our website so we
have taken care of readability clarity
and structure with the menus as well and
readability and clarity by the way a lot
of that is already baked into everything
that you find and thrive theme builder
so everything we do especially when it
comes to typography and readability
everything is already optimized to be as
clear and readable as possible and then
the other aspect of clarity is gonna be
your messaging the actual words you use
on the pages now let's move into the
next level of conversion optimization
which is about calls to action and lead
generation and things like that now to
do that let's go into the Thrive
dashboard and set some things up here
here one of the most important things
you can set up is you can go to API
connections and you can connect your
website to different email marketing
services and other marketing services so
for example if I go into add new
connection you can search for things by
name or you can scroll through all the
services we integrate with and as you
can see there's a lot of them so if I
type in MailChimp I can choose MailChimp
and I can add my API key here
and connect to the service and this is
all I need to do to now start connecting
my opt-in forms on my website to my
mailing lists in MailChimp and the same
goes for many other apps so if you use a
webinar app like webinarjam
and you want to use forms on your site
to sign people up to your webinar events
you can do that and as you can see here
we have we integrate with all kinds of
marketing solutions so that's a thing to
do right away whatever marketing tools
you use integrate with them on this page
then let's go back to these five
dashboard and another useful thing to do
is to go into analytics and scripts we
want to manage our scripts right here so
here we can add things like tracking
scripts analytics scripts and so on for
example Google Analytics tells us that
we should add the script they give us a
tracking script and they say that we
should add this script to the before the
head before the end of the head section
as you can see as soon as I pasted this
script in here
it recognizes this is Google Analytics
it knows where to put it and I can say I
want to insert this in thrive themes and
in landing pages and I click on continue
and that adds my script here and
similarly you can add any script you
want so that can be tracking scripts
like hot jar it can be Facebook pixels
anything like that that you need you can
add them here if a script isn't
automatically recognized you can just
use manual settings and one of the great
advantages of using this is that at any
point you can also just turn them on and
off so if you have a certain script that
you maybe want to use to do heat maps
you can turn it on for a while but you
don't have to add up running all the
time so you can just come in here and
sleep it off and the great thing about
that is that you don't have to then you
know delete the script and the next time
you want to create a heat map you have
to come back and you have to find the
script again and paste it again and so
on you just sleep a switch on and off
and then one final thing in the Thrive
dashboard is let's go to a smart site
where here we can have some central
settings that can be useful all across
the website for example for your company
you can you can set your company name
address and so on you can automatically
fill those in in certain places if you
need to
you can link to your privacy and other
legal pages and you can set your social
links so for example just to show how
this works
I can go YouTube that would be the link
text and then the link to the channel
save that and now the the great
advantage of this is that whenever I
want to link to my YouTube channel or my
social account or whatever it is I can
use the dynamic link feature to do that
and in the future if at any point that
link changes if I change the URL of my
YouTube channel or something like that
instead of having to go down hunt down
every single link on my website I just
come here change it here and we're done
so that is the purpose of the global
fields settings here in the smart site
settings now with that that is basically
as you can see there's more that we can
do here that there's more powerful
features to choose from here but those
are the basics with that let's go back
into thrive theme builder and start
making some more detailed edits to our
website so so far we have all the basics
now let's look at how you can tweak more
it is in a more granular way so this is
everything that we've already set up in
the wizard as we went through and let's
go and look at how to edit templates so
here we can see these labels says this
is the homepage the default post video
post audio post we have an error 404
page default page and then archives so
let's go into the default post let's
click on this I'll just click on edit
and this will open up in the thrive team
builder editor here's what the default
blog post looks like right now and this
is a drag-and-drop editor where you can
basically change and edit anything you
want and we've tried to make this as
intuitive as possible so the rule that
we use for editing is what we call click
to edit so if you see this image here
when you want to change something about
you can click on it and then you'll see
a range of options for this so I can
change the size of this and I can do all
kinds of things I can change where it
links to I can also just delete it if I
don't want it that's the basic idea I
just click on
something and I see the options I have
and you always have extensive options
for whatever you want to change about
anything you see so let's say these
sharing buttons here maybe I don't like
these we just get rid of them and I can
also add new elements so you can add
anything to the page that you want
including dynamic elements for example
what we have up here is the post title
this will be filled out with whatever
the current posts title is and if I
don't want it up here I can get rid of
it here and if I want it somewhere else
I can grab the post title element and I
can bring that in wherever I want
now it was definitely better before so
I'll put it back up here and what we can
also see is this will dynamically change
so I can choose my content here I can
say I want the I want some other post
content to preview my layout and this
will switch to a different post and show
me what this looks like
this also means we can change things
like the sidebar we can also change the
proportions between the sidebar and the
post content by just clicking and
dragging
and here's another element of calls to
action so in the sidebar here we have an
example call to action where we can just
change the text and we can change where
this button links to and this is one of
the ways in which instead of just having
people consume our content we can think
about well how do we want to let people
know about offers that we have about our
mailing list about coaching calls
whatever it is and the sidebar of a blog
post will be one of those places where
you can decide here I'm gonna make sure
that everyone who reads one of my blog
posts will see a call to action that
leads them towards my conversion goal
now an important thing to understand
here is that what we see here in this
box here this is the post content and
this is dynamic so this will be for the
specific post I'm looking at this is the
text that will or the text and content
and the images and so on that will
appear here what's important to realize
is that everything I did here on the
template level this is the post template
this will appear on all my blog posts so
for example if I say you know what I
don't want this call to action here in
the sidebar I can delete it but I
haven't just deleted it on this
Eric post with this title I have deleted
it on all posts so if I change to a
different post here you can see that it
loads different content it loads a
different title different featured image
and so on but the call to action thing
is still missing so that's something to
be aware of and as we do the editing
here we are changing a template that
effects many pages we also have some
global elements such as the header and
the footer and we can also edit these
and get them to look different across
our whole website so if I click on edit
section right here the changes I make to
the header now are going to affect
everywhere where they had with where
this header is showing which is
currently if we were on my website now
what I want to do is the menu here I
want to change this menu so if I click
into a menu item again we have the
breadcrumbs that help us navigate
through elements we can see that this
menu item is part of the custom menu
element that we have here and I want to
change the menu source because right now
this isn't the real menu so since we
have now created a menu in the last step
I can change this to my main menu and
now it goes home blog about and
Lightroom presets now this is great
I can I can change the templates as well
so I can change the the entire template
of this menu here and we have various
templates to choose from and of course
you can also always click on something
so let's say I want to click on this
here and I can go to something like
borders and corners maybe I want this to
have rounded corners so I can click and
drag here to change the bottom corners
the rounding so I can make it a pill
shape button or a square button I could
change whatever I want here but the
important thing is what I would
recommend you do is that in your menu
keep it simple we want we don't wanna
have an overloaded menu with tons of
things we want to make it easy for
people to make a choice and so few menu
items is one way to do that and also
highlighting a menu item is again a
conversion focused thing to do so
instead of just saying hey here are four
equal options I say this one is
important
check out my product right I want to
drive people towards my conversion goal
so with that update done I'm gonna click
on
and that will update the header with the
new menu across my whole website and we
can do the same with the footer so let's
just edit the section again and when you
have this orange frame here that tells
you that you're editing something that
will have an effect on more than in more
than one place or you're editing like a
global element and right now I can't
edit anything outside of it right I'm
basically in footer editing mode that's
it so we're going to custom menu again
main options menu source footer menu now
we change that save that there we go
let's look at another important
conversion element that will be on our
website which is what we call the bottom
section and right here you can always
see this overview over kind of the basic
structure of a page right we have a
header we have a top section we have the
content and sidebar we have the bottom
section and we can also edit right from
here so if I click on the sidebar I can
untuk all the visibility and I can have
a full width blog post but again this
effects all blog posts that use this
template so always be careful about
changes like that that you make and the
same is for the bottom section so I can
say hey I don't need the bottom section
let's just get rid of it no problem but
we can also bring it back so here you
can see this eye here can click on that
and that brings the bottom section back
and I can choose different templates
here so if I click on replace here this
brings me a gallery of bottom sections I
can choose from and as you can see we
have bottom sections for different
purposes for example we have ones that
link to other posts where the main goal
is ok you've read this article go read
another one we have ones that are with a
contact form where we want people to
contact us we have ones that have an
opt-in form and ones that advertise and
offer so we can use all kinds of
different calls to action and all kinds
of different ways of trying to drive
people towards a conversion goal here
I'm going to choose a very simple opt-in
form here and because I want to
demonstrate how to actually get people
on your mailing list so let's say
someone comes with this blog post they
read all the way down
here we write something that convinces
them to get on our mailing list you know
maybe we say get my free report whatever
by signing up and then we have the lead
generation element and here's how we
connect this to our mailing list when I
click on the lead generation element you
can see that there's the option here add
connection and from here I can choose
what I've integrated with in this case
MailChimp so I choose MailChimp and then
it gives me a couple of options that are
taken from my MailChimp account so I can
choose which mailing list to add someone
to and I can also add things like groups
and choose whether it's single or double
up then I can add tags so it's not tag
one like this and apply basically choose
what exactly happens when someone signs
up on this form I can also change the
form fields and add form fields I can
add hidden fields and we have other
tutorials that show you all the advanced
lead generation features for now one
more thing that's important is we can
choose to either send people to a URL so
when they've signed up we sent them to
another page that says thank you here's
your report or we can choose to show a
success notification so I can just keep
people on the same page and I can say
you've been successfully signed up check
your inbox
okay and I can preview that here this is
what it looks like
when someone signs up there we go again
here we're taking something that can
often be quite complicated and we're
making it as easy as possible right
we're taking the idea of how do I get an
opt-in form onto my website that looks
good that matches the design of my
website and that you know tags people
correctly and so on all this can usually
be so complicated and we've made it as
easy as possible for you to get this
important conversion element onto your
website so let's leave it at that for
now I'll save my work here this is my
default post and then of course we can
do the exact same thing for all the
other layouts the other thing I want to
show here is the list templates so you
basically have two of these templates
one is the blog page and another is any
category page at hag page anything like
that even a search results page will
have a certain look where it lists
multiple posts so that is the blog page
and default archive is category search
results and so on here's an important
thing to note how to edit so if we go
into our archive page for example here's
what that looks like and as you can see
we have a search bar at the top and we
have a list of posts here and like with
everything you can always edit something
by clicking on it so you want to edit
the search bar you want to hit it what
it looks like what it searches how big
it is and so on you can do all of that
here and with the post list so at least
a post that is actually a super powerful
element that we have and thrive theme
builder and thrive architect and you can
change a lot about what exactly this
looks like first of all we can go in
here and we can go to the template and
again we have a gallery of a huge number
of templates here to choose from the
right way we can make all kinds of
changes and we can do something like
this that's let's change its choosing on
here this is like a simple post layout
so we can take this and even here I can
go into edit design and I can make
further changes so if I want to bring
back the featured image I can bring that
in here
I could say okay let's add a featured
image here and that will dynamically add
the featured image to each one I can
choose this text here I'll go to text in
the breadcrumbs I can make this larger I
can go to layout position and change the
alignment of everything so everything
you see again everything you see is
fully editable and you can make this
page look any way you want so another
thing you can do one more thing I want
to show that we haven't really looked at
is you can also use dynamic images as
backgrounds so if this is too big for me
I can go in here and I can go to I'm
going to search for content box let me
insert a content box here and I can give
this a certain height
and in background style for the box I
can go to image and I can say I want
this to be the featured image of the
post alright and I can even choose the
alignment of this so maybe I want to see
like the top left or the middle or the
bottom of that image to change that and
apply this and now I have a way to show
my featured image but I can choose how
tall this is so I can make it use up
less space so as you can see it's quite
difficult for me to actually even give
you a good overview of all the things
you can do here because there's so much
to cover and I don't want this video to
go on for hours and hours but I think
you get the idea by going into our
templates here and by clicking on edit
and by just basically clicking around
and looking at the options you can see
how you can usually find new templates
to choose and you can basically edit
every single detail of every template in
every page on your website with
drag-and-drop simplicity so with that
let's go to the final component of a
conversion optimized website which is to
have specific conversion pages we're
actually going to start with the home
page the home page like I mentioned
before let's click on edit here like I
mentioned before the home page think of
your home page is an important
conversion page on your website now when
I'm editing a page like this and this is
important to realize now I'm editing the
content of this page so the home page is
a landing page and we can also see up
here this is the Thrive architect simple
drive architect is there to edit the
content of a page and thrive theme
builder is there to edit everything
around the content okay so everything
we've looked at before a header or
footer side bar bottom section top
section all this stuff this is what's
around the content of a page or post but
now on the home page we're editing the
actual content of this individual unique
page that is thrive architect and that
gives us similar options to edit
anything we see but here I'm only
editing this one individual page what's
already happened here is that we have
the header with the changes we made the
footer with the changes mean
we made which is not surprising right
because as we were editing this we knew
this is going to affect the entire site
so this is a home page layout that we
can use to to make a really nice kind of
neat short and conversion focused home
page obviously I changed this in this
case it doesn't even need to be like a
personal branding thing so I can choose
an image like this here and put that in
and I can maybe change the size
disappear I can also go into portals and
corners
maybe round this off a bit and then I
would here want to write about okay
what's my website about so I could say
something like learn how to create
kick-ass pictures using cheap camera
gear and then maybe I wanna give this
bit more space for the text here but as
you can see it's all just like drag and
drop I also want to go into my columns
here and maybe central-line this and
then let's see there's basically too
much space here somewhere this here's
too much let's get rid of that and let's
go into this page section let's add a
bit of a bottom padding here there we go
so that could be my basic setup here we
have an email opt-in form that's a good
idea to have let's connect this to our
MailChimp again and again I'm not going
to go through this again you already
know how this works so I connect this
form it's another form here I'd also
connect this to my MailChimp here we
have another author image I could
replace that with an image with me like
this one another powerful thing we can
do here is we can actually extend this
page with what we call page blocks so in
between the sections of the page you can
see this plus icon appearing and it says
plus page block when I click on this it
gives me a whole gallery of elements
that I can choose to insert for sales
pages landing pages of home pages
so on and it's also easy to navigate
through these so as you can see maybe I
have a product highlight section where I
want to get people to buy my ebook so
how about this one I insert this and it
gives me this pre-designed section plus
it uses my brand colors automatically
and then the rest of this job is really
just I go in and I click and I change
the text right I change the text to
match my brand and my product here we
have a post based we've already seen
that I can choose if I want to show
different posts here I can go into
filter posts I can say you know what
instead of showing just the latest posts
I want to create a rule and I want to
create a rule that says I want to only
show posts that are in a specific
category such as photography tutorials
saving clothes and then it will show the
latest posts from this category and it
does that automatically so I have
dynamically updated post lists on my
homepage and again with the so you know
maybe I don't like this section here so
I can get rid of it and I can click on
the plus here and I can simply insert a
different section that I think is more
fitting for my business so again
whatever that is you can very rapidly
customize exactly what you want to see
on your homepage using these features
for now let's leave it at that and save
our work here the important thing on the
homepage is again communicate clearly
what your website is about so we're
using text and a picture to say here's
what this is about and call people to
action and give people an easy way to
navigate to the important parts of your
website so this here is a bit of a mess
here but the idea behave check out these
posts these are the important posts and
check out my ebook right this kind of
thing makes for a conversion focused
homepage next let's build a sales page
so we already have the page right if we
go into our pages here we have currently
a empty sales page if I go here and I
click on edit with thrive architect it
will load up thrive architect
can start building this page now I've
got good news and bad news bad news is
if you want to sell your product you
need a great sales page and it's really
difficult to make a good sales page the
good news is we've also solved this
problem for you one of the ways in which
you can do this is if you load up this
page here and you click on this cloud
icon you can choose a template and I'm
using the shape shift C theme and as
you'll see I can get a couple of
pre-made pages here and I can also use a
blank page and I can even use all of
these other pages so all of these other
page templates so I can either create a
sales page that uses the exact same
design language and style and so on from
the rest of my website or I can even say
me I want to have a different kind of
template for my sales page and we have
all kinds of templates to choose from
and we have all the features you've
already seen on these templates as well
so if I click on this one here for
example we have a sales page example
here so let's choose that and right here
first of all I can go into this tab here
and let's change the accent color to our
theme color it so right away the entire
sales page is updated to match our theme
color and this sales page here there's
two things first of all this is a
tutorial on sales page so the sales page
itself will explain what you should
write where and how you should use these
different sections kind of the do's and
don'ts of you know how to write
testimonials how to structure your sales
page where to put what so it's almost
like a fill in the blank go through this
to create an awesome sales page and it
also has the page blocks feature so if
you go through this and you think okay
this is good but I want a different way
to show my product you click on plus and
you'll have all these different page
blocks to choose from which also follow
the same idea that if I insert anything
here this automatically takes on the
font and brand color settings and so on
for the rest of the page and so very
rapidly you can mix and
such an effective sales page and of
course you can simply follow the
template and it will tell you put this
here right fill in testimonial here do
an about the author section here and so
on this is all this is not arbitrary
this is based on our experience of how
to make a high converting sales page so
this is the easiest way to get a high
converting sales page for your product
and then one more page that is a
must-have on any conversion focused
website is a lead generation page so
again we have an empty page here and the
lead generation page is simply a page
that is there to advertise your
newsletter or to advertise a free
product that people get in return for
signing up to your newsletter and again
you can use all these features that we
looked at to very quickly make an
effective lead generation page so if we
use our theme templates here I can
choose a blank page I can also choose a
premade already conversion optimized
lead generation page template of course
or I could use this blank page which
actually in this case shows the header
and footer I don't want to show the
header because this is a fully
conversion optimized page I don't want
navigation on here just have the message
that tells people get on my mailing list
so we would have probably some kind of a
hero area that explains here's why you
need to get on my mailing list so
perhaps this one here this looks nice
and simple here I can change this image
to something that represents my free
guide or something like that and then we
already have this background section
that has like an arrow pointing down so
maybe we can add a second section here
with a lead generation element that
looks maybe something like this and
that's clicking this that I think the
background should just be white and then
since the arrow kind of this this subtle
background our seems to point the wrong
way now and what we can do here is we
can go to this section and we have
what's called decorations and we can
choose the different decoration so we
can choose what that what that bottom
looks like and as you can see we have
many shapes choose from and we could go
with this one
here and we can also change the height
of this so now this kind of more
naturally points towards our email form
and again I'd connect this with
MailChimp and then we're good to go
we save this we have got a functional
and nice-looking lead generation page on
our website alright so that's it as
quick as possible tour to help you get
from zero to a functioning conversion
optimized website as you can see these
tools for our theme builder and thrive
architect are massively powerful and
it's quite difficult for me to give a
tutorial where I'm even just scratching
the surface of what you can do without
it going on for too long but here's the
thing don't be intimidated by all the
things that can be done with these tools
as you can see we've made this as easy
as possible to get started and I highly
encourage that you start simple I don't
worry too much about all the little
details starting out walk through the
wizard and you'll be amazed at how great
your website already looks just by the
end of that and then one by one you can
start building out these pages you can
make your home page you can make your
lead generation page or sales page or
about page and so on and take it step by
step and as your website grows and as
your business grows you will encounter
new needs you will see like oh can I
also do this can I also do that and more
often than not you'll find that the
answer is yes indeed you can do this
with rival architect with thrive theme
builder or with one of the other plugins
in the thrive themes suite so don't be
afraid of of overwhelm you don't have to
do everything all at once get started
we've made this as easy as possible and
enjoy the process of building out your
website and making it better and better
over time thank you for watching this
tutorial I hope you've enjoyed it and I
hope you'll build something truly
awesome with our tools
No comments