.st0{fill:#FFFFFF;}

Thrive Themes Tutorial

Thrive Theme Builder Tutorial/Review

 March 3, 2020

By  Peter Nyiri

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

6 site areasTTB 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:

  • Header
  • Top
  • Content
  • Sidebar
  • Bottom
  • Footer

To illustrate the difference, let’s go into one of our page templates.

We have content and we have a template.

select TTB or architect

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.

edit with thrive theme builder

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.

switch to TA

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.

editing in TTB

The button you want to get really familiar with is Replace.

Click on this bottom section for example, and then you click on Replace.

replace bottom section

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.

Demo Content

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.

edit header

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:

Edit 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.

ttb elements

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.

add to sidebar

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.

Editing Pages

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.

edit page 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.

edit page template 2

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.

visibility settings

But maybe we want to make an exception for the About Page. And in that case we can decide to show it.

Widget Areas

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.

Widget area

So let’s add this widget, which is our lead group.

theme builder widget

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.

widget area front end

And now we can see that your Thrive Leads widget shows up and we even have our light box.

Smart Site

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.

smart site

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!

Peter Nyiri


Peter Nyiri

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>