With the new Thrive Theme Builder from Thrive Themes, we can now have truly global headers and footers.
I have recorded this video showing you the fundamentals of creating a header with the site wizard. I then demonstrate how you can pick the same header in other templates and landing pages.
Picking the right header
If you are not sure what header to pick, here's a video that shows the templates available, and some of my views on header selection. This is the blog post that goes along this video.
Why the Thrive Theme Builder is the easiest way.
If you have a theme which is NOT the Thrive Theme Builder, things will be more challenging.
Here's a video showing the process of converting a landing page into regular page and configuring the header through the theme. The example is using the Rise theme from Thrive Themes.
As you will see, it's much easier now with the Thrive Theme Builder.
What to do when things are not perfect
Still having some consistency problems? This video shows the website of Uber with almost no consistency. Just to show that your visitors very often will not mind if your product is great.
Transcript
so one problem people have when they
start with thrive themes with thrive
architect is that the build the first
page from a template or from a landing
page in a landing page format and then
when it's time to link to a blog do you
realize that the header is different
than the header that they have on their
first pages same thing with the footer
here I have a footer like this and if I
click back to the blog you see that the
footer is different and the reason is
that in the landing page format thrive
has included a header and footer
reusable element but for block pages for
example the header in the footer is
coming from the theme and not from
thrive itself so in this case I'm using
a theme from thrive themes called the
rice theme but really it's not this
header it's coming from the theme and
not from the landing page configuration
so it's a bit technical but basically
when you create and I'll show you right
now if I edit this page so this page is
a landing page and the way to find out
if it's a landing page or a regular page
is that here at the top it says in the
breadcrumbs it says landing page so that
means this page was created as a as a
landing page so what am I gonna do is
copy those elements here into a regular
page and we're gonna configure the
header in the theme itself and not use
it there so use it from the landing page
and ER it can be confusing for some
people especially especially if you
don't know WordPress maybe if you're
starting it can be confusing I totally
understand but if you follow the steps
then hopefully it's gonna make sense in
this video so first thing I'm gonna do
so I'm editing the page I'm gonna just
save those sections into content
templates so we can just copy it in a
brand new page so just follow a
you can do it on your own side so I'll
just call it section one here keep it
simple and then I'm gonna click here so
in this case every section is built as a
background section if ever you've
created a so let me so let me do it and
then maybe I'll show you if you have a
problem if you don't see this background
section there
I'll show you most likely what's the
issue but so let's do section two
make sure you click there so I'll just
pause and do all of them one by one
okay so I've I've copied it and so I've
basically created a Content template for
for each background section and a
Content template really when you click
there it's a reusable element and then
we're gonna be able to insert it on a
different page so what I'm gonna do now
is find my home page so that page I
showed you was the home page so I'll
just find it and the way to do it is if
you look for front page and then that's
the that's the page in question so
there's a lot of drafts there's a lot of
other pages but basically find the page
you want to recreate and what we're
gonna do is just clone it and the reason
I'm cloning it is that all the SEO
parameters I've set in on that page will
be copied so I'm gonna just hold it
so I'll just put a regular format just
for now I'll go in and rename it after
so the reason I'm doing it is that I
want to make sure I I use the right one
so I'm gonna just save as draft for now
so it's saved so what I'm gonna do is
click this revert to theme template so I
made a copy but I'll click on this if it
doesn't work if you click on it and then
it doesn't trigger anything just reload
the page and just go and reload your
page in your browser and then you'll be
able to do this so what it says now it's
gonna delete the content which is fine
because that's a clone we made a copy of
it so I'll just click OK now it's gonna
come up like this and I'll just save
again and then I'm gonna launch drive
architect again
so now that you see that the header is
coming from the theme we're gonna modify
it after and then you see that there is
a copy of the content which is not
nicely formatted basically I'm gonna
just delete this and now we have a title
which we're gonna remove and we have the
header and the footer from the theme
itself so now what we're gonna do is go
and click the + click template + symbol
and you can click one time or you can
just drag it there and you're gonna just
scroll down and we're gonna just insert
each section one by one so you see that
the section is not full width the way to
fix this click on the background section
so click somewhere if you click the
video of course this the video only will
be selected so make sure you click so
the whole background section is selected
and I'm gonna click this stretch to fit
width so by doing this it's gonna take
the full width we're gonna just remove
that after but I've got the first one
and we'll do each of them so click you
can click on time do section 2 and then
again make sure you click there click
the stretch we're gonna do so I'm gonna
just pause and do each each of them or
one by one so this is the last one I'll
just again do like this and I'm gonna
just save it and the way to remove this
I'm gonna just click preview there's a
few ways you can but basically what I'm
gonna do is just click preview here and
I'm gonna do this edit page should not
with thrive architect we're gonna edit
the properties within WordPress so click
this edit page here and because I'm
using a theme from thrive I'll just
scroll down and this page my page title
I'll just say hide and that's it just
make sure you save and now if we just
reload the page here
don't just safe to make sure this will
disappear because that's coming from the
theme
so that's good there is a gap here so to
remove this gap just click on this
background section and we're gonna use a
negative margin on the top just like
this and very often it's minus 50
depending on the theme you might have to
adjust it but and then for the footer
again there is a gap we're gonna just
click on the last one and do a negative
margin so in this case is a bit more and
I'm gonna save this so now we have the
page the same page but the header is
coming from the theme to change this
header you will have to do it in the
theme itself so I'm using the rice team
so let's go in the dashboard dear and in
WordPress and we're gonna go in
appearance and click customize so now
actually we see so my homepage is still
a landing page now I'm gonna make just
the switch so we preview the real
homepage so let's do the switch off page
so I've got a few backups here so I've
got the live page which is this one so
front page and it's basically that's the
way I know it's live so what I'm gonna
do is just click quick edit I'll just
put it and so just renamed it so I know
what it is I'm gonna just set it to
draft and click update and so now it's
not published anymore it's in draft
format and the one which I've called a
regular format I'm gonna again you can
do a quick edit I'm gonna publish it and
I'm gonna click update and to make sure
it is the the right the home page in
this case if it's another page probably
you won't have to do that but basically
I'm gonna go to appearance and then
actually it's gonna go to settings and
then reading
and basically your homepage displays and
then you can pick the new page so that's
why I left it as a regular format so I
know which one to pick because I had a
few backups there so I'm gonna just
click that make sure it's there save it
and I'll just go and rename so if I go
back to page
so I'll just rename this and I'll just
basically remove this so if I go to my
home page now I have same page but now
with the header coming from the theme so
let's modify this so the way to do it is
again if I come back I'll just close it
just to show you show you again so go to
appearance and then click customize and
depending on your theme if you have a
different theme it might be different
maybe some some of the items will will
be different some might be the same but
basically if you go to a header then you
can pick the header type and you can do
custom color
and then you could I'm gonna leave it
white so I've got reason but you could
go and put a fix color like this so if
okay so to change the header basically
you can click here just make sure your
your at custom color and then you could
go and take a darker version for example
and then what you can do is go at the
top menu link and then you can choose
white there and make sure you so there's
a mouse over as well so I'm gonna change
the mouse or and you can just do it a
slight variation I'll just you see that
light gray here so when you mouse over
it change the color a bit and to change
the the logo that you will have to go in
the theme itself so again let's come
here
so you can always click preview on one
of your page I'll just go back to WP
admin just go to dashboard and to change
the logo it's thrive dashboard and
thrive dashboard theme options and then
that's the logo and you can just pick
and upload a new logo right in there and
then just save it and then everything
will be saved so so I'll judge I'll just
show you so if I put the real color here
and what I want in this case sometimes
you can have a the same exact color
there or you can just go and put it a
bit darker sometimes a contrast is good
like this and I'll just some case I'll
just keep it that way for now I'll just
publish it and I'm gonna change the logo
here to not have this white so what I'm
gonna do is just go here pick that one
like save all changes
[Music]
you know we have the right logo and then
if we now so this is the menu from the
theme to change the menu items
themselves the way to do it is go to
appearance menus and this is so this is
the primary primary menu right here and
basically what I can do is search for so
if you want the blog you can actually
search for it click Add to menu and then
you can just move it to the position you
want so you can have multiple pages like
this and just click Save and if I come
back here then the blog is there and
I'll just refresh I've got some caching
and if i refresh and I see that deep the
menu is consistent on all the pages
again so I will have to change my home
here so let's come back there so you
might when you swap pages you might need
to relink recreate some of the menu item
so now we have the right link and then
if so just make sure your refresh clear
your cache if you haven't done so week
home click blog and we have the same
header on both pages if you want to
change the font size or the fun family
so the fun itself at the top there there
is a code that you'll see in the blog
posts attached in this video and you can
basically paste the different section of
this CSS code modified the font size and
your maybe your font because at the
moment with the rice team it's not
possible to do it within the settings of
the theme so we have to use a bit of
code so that's it that's how you keep
your header consistent from with your
blog pages with all of your pages by
using regular pages instead of
landing pages
Thanks Denis. As a non-techie, relatively new Thrive Themes member, with two recently installed Squared themes and a desire to implement customised headers site-wide (something I understand I can’t yet do), I appreciated finding your links to alternative resources I could consider. For now, I need to rethink the timing of my strategy and maybe just wait for the new Theme Editor!
There are always multiple ways of doing things. Depending on the level of customization, You can customize the header with CSS, and change fonts and colors for example. If you don’t know CSS, you can hire someone. For me it takes usually less than an 30 min customizing a header from the themes from Thrive. For a lot of websites, a simple header is better for conversion. If you want to share more details, i might be able to guide you in a better direction.
My headers are showing up different on my homepage, default blog and archives page. Is there a way to go in and set a rule for default global header?
Hi Joe,
What do you mean by “different”, is it just not displaying exactly the same?
Or it’s a different header altogether?
Denis