In this Thrive Theme Builder Tutorial I will show you how to TTB and Thrive Architect work together to create a stunning, conversion-focused website.
If you haven’t read the post on the ShapeShift theme, please read it before you read this post.
(This post contains affiliate links. This means I get a commission if you make a purchase through my links. There is no additional cost to you, but it enables me to provide you information like this for free. Please read my disclosure for more info.)
Thrive Theme Builder And Thrive Architect Difference
TTB is responsible for templates of all the different website sections and how they show up, but it is not responsible for the dynamic content inside. Thrive Architect is responsible for the actual content of a given page.
The 6 Website Areas
In order to understand this better, let’s see what TTB is responsible for – the layout of the following areas:
To illustrate the difference, let’s go into one of our page templates.
We have content and we have a template.
Therefore we can choose whether we want to edit with Thrive Architect, which would allow us to edit the content or whether we want to edit it with Theme Builder.
Let’s say we don’t want the CTA in the bottom section. Because that is part of the page template, we can go with Thrive Theme Builder and simply hide this bottom section with a click.
After that the CTA is not there anymore. We can save this so now and this bottom section will not show on any of the default pages.
Now I want to show you what happens if you try to edit the actual content in TTB. You get this little note saying that you have to switch to Thrive Architect in order to change this content.
If we go into Architect, we can’t edit the theme anymore. If you try, you get a similar note that you need to use TTB in order to change this.
Editing In TTB
To navigate in TTB, you can either scroll and click on the actual element or select the desired section from the left sidebar, which is really, really easy.
The button you want to get really familiar with is Replace.
Click on this bottom section for example, and then you click on Replace.
This will give you a whole lot of different options for the different sections.
So let’s say you have a Call to Action sending people to a landing page, but maybe you actually want a lead generation form immediately underneath your blog posts.
You have different designs, photos, lead generation forms, and so you can just click on one and then it gets added to your site. And it immediately adapts the colors of your templates. Once you’re happy with your template, you can save it.
You can choose the different content that shows up in the TTB editing area.
If your website is empty, you can use demo content or if this is a website where you already have content, you can show the different blog posts that you have on your site.
Editing The Header
Now let’s edit our Header section.
This has our default WordPress menu system. We can click on it and change this primary menu in our website’s backend in Appearance >Menus.
Our free e-course used to be a custom link. But now we have a button, so we don’t need this inside our menu anymore. We also want to change this button text to “Free E-book”. All right, let’s reload to see the updated menu:
Editing Your Sidebar
Your sidebar is a part of your template and instead of editing the sidebar “removed” and in the backend, everything here is directly editable. So you don’t have to go to widget section. You can just actually change everything from here.
Now if you want to have, for example, a list of categories in there. You can go into Elements, add a Dynamic List, drag it in your sidebar, wherever you wanted.
You want a category list. This will show you the categories. And then from here you can change whatever you want in this category list.
And of course you can add a title on top of it. So let’s say you want just to be Categories and this is the way to get your Category list in your sidebar.
You can also just replace the full sidebar. Remember I said you can do this for sections, so maybe you want one of the pre-designed sidebars, such as there’s sidebar for personal brands, for example.
You can have an email signup form – you can simply click on it, add your email, sign up to it, so you won’t need widgets anymore that you had before, because you can just add anything here in the sidebar.
And of course if you don’t want a sidebar, if you change your mind, you can click on the Hide icon, and then all of a sudden your blog post becomes full width. If you wanted it back, you can hover over the content area and add the sidebar back in.
Now let’s have a look at the different pages on our website, such as Home Page, Blog Page, About, etc.
What is really easy with theme builder is that you can also change your templates right from the page.
So rather than having to go into Templates, find this specific template, you can actually just click on Edit Theme Template.
And on this template here, the text is part of the template, so we can edit it right here in TTB. E. g. we can call this Latest instead of Highlight.
And we could decide just for the about page to go into the Page > Visibility Settings and there we can choose what to hide or show.
The bottom section, if we choose Inherit, because we hid it on this template, it won’t show on any of the default pages.
But maybe we want to make an exception for the About Page. And in that case we can decide to show it.
You are familiar with the default WordPress widgets. And honestly you won’t need those at all, because you can add all of these elements from within Theme Builder and it will be much more editable, much more customizable.
So you really don’t want to stuck in these WordPress widgets, but you might have some other plugins that add widgets. For example, if you have a Thrive Leads widget, you may want to add ad it to your website.
In that case you will have to create a new widget area, which is super simple. Go into Appearances > Widgets, and from there add a new widgets area.
So let’s add this widget, which is our lead group.
And now if we go to our templates, to our Default Blog Post and add our widget area in the sidebar.
Go into Elements, let’s choose Widget Area, drag it in our sidebar, and then choose the Theme Builder, which is the area that we saved.
And now we can see that your Thrive Leads widget shows up and we even have our light box.
At this point your site should look good and be functional. But we can take it one step further, let’s make your site smart.
You might have noticed that there were several social icons in the templates, so you might have picked a header or a footer with social icons, or maybe in your sidebar. Let’s see how these are linked up in your WordPress dashboard.
Go to the Thrive Dashboard, scroll down and go to Smart Sites. From there you will see several options in company legal, social, and these are what we call global fields. All throughout the templates for the themes and theme builder, you will notice that these global fields are used.
The moment that you filled them out, it will automatically populate those fields with your information.
So it will stay empty as long as you don’t enter anything, but it will show the right phone number or the right address the moment you put them there. And the same is true for social.
Sign up for your Thrive Themes Membership and build a conversion-focused website – Thrive Theme Builder is included without additional charge!