Lesson 3 - Create Your New Site on Staging

Video/Text

Video/Text

How to Switch Your Site to Thrive Theme Builder

 Previous Lesson
Mark lesson complete
Next Lesson

Now it's time to setup your new theme with Thrive Theme Builder on your staging website and have some fun.


Things to Prepare to Create Your New Site

  • Your logo preferably in PNG with a transparent background
  • Pictures you want to use on your site
  • Your site branding colors (#hex codes)
  • Favicon (optional)
  • Fonts and font size (if you want specific ones)


Step 1: Go Through the Setup Wizard

Video timestamp: 3.12 min

The setup wizard allows you to pick the different layout templates for your new website.


  • Set your logo
  • Choose a header
  • Choose a footer
  • Decide on your homepage: new design, existing page or blog list
  • Pick the single blog post layout
  • Pick your blog list layout
  • Choose your default page layout
  • Set your menu


Step 2: Customize Your Brand Colors

Video timestamp: 10.10 min

In the branding tab, customize your colors, add a dark or light logo and upload your Favicon


Step 3: Customize Your Fonts

Video timestamp: 12.31 min

In the typography tab, customize your fonts for desktop, tablet and mobile.

If you're wondering how to add a custom font (rather than a Google font) check out this tutorial. Adding custom fonts to Thrive Architect works in the exact same way as in Thrive Theme Builder.


Step 4: Tweak Your Templates

(you'll wanna watch this one to really learn how to use Thrive Theme Builder!)

Video timestamp: 14.32 min

Adjust your single post template, default page template, blog list and add the right elements to your sidebar.


Step 5: Set up Aditional Templates for Video Posts

Video timestamp: 29.48 min

Remember how we made an inventory of the different post formats on your site and the different page templates (in lesson 2 with the WP all Export plugin). 
Now is the time to verify these and make sure everything looks good.
If necessary, you can create new templates and switch the pages over to the new templates.


Step 6: Recreate "Focus Areas"

Video timestamp: 31.03 min

You'll see... SO MUCH BETTER NOW 🙂


Step 7: Add Your Tracking Code in the Thrive Dashboard

Video timestamp: 31.32 min

Thrive Dashboard >> Analytics & Scripts >> add code


Step 8: Create and Add Widget Areas 

Video timestamp: 31.40 min

If you need a "real" widget area to add plugin specific content (such as Thrive Leads opt-in widget), now is the time.


Step 9: Make Your Site SMART with Global Fields

Video timestamp: 33.47 min

In the templates, you'll find the element "Business Social Buttons" (eg. in headers and footers) in order to easily link these elements, you can use the Global Fields functionality. 


This is also ideal for adding your phone number, address etc. to your site.


More details about Global Fields can be found here.


Step 10: Create a New Template With Updated Layout for Standard Blog Posts

Video timestamp: 36.05 min

This will allow to have a new design for your new posts and an updated design for older blog posts.



Now, when everything looks exactly the way you want it, it's time to merge your staging site with your live site.


Ask Your Questions!

We're more than happy to answer your questions in the comments, but if you run into any technical issues, opening a support ticket is the fastest way to get help. Our technical team is ready to look at your site and fix your problems. 

Open a Support Ticket


Previous Lesson
Mark lesson complete
Next Lesson

  • How will your plug-in clever widgets work with thrive theme builder since we can edit our sidebar directly on the page? Is clever widgets now obsolete?

    Reply

    • Hi Melodye,
      You can actually still use Clever Widgets with Thrive Theme Builder.
      1. Create a new widget area
      2. Add your content to the widget area
      3. Drop that widget area in the template where you want the content to show (eg. Single Blog Post)

      Now there are times when using Clever Widgets can still be handy. Eg. If you want to show a different call to action in the sidebar depending on the category of a blog post.
      And there will be times when creating an entirely new template in TTB might be the way to go. Eg. When you want to show different content on the category list posts.

      Reply

      • Thanks, Hanne, I have a need for Clever Widgets now on my Woocommerce site.

  • This looks really cool – novice question: if you set up a post template with a lead generation form at the bottom and then you hide the form at the TTB level, does the code for that hidden form still get sent to a visitor when the site serves them a completed page built on that template? (I’m wondering if it’s better to remove things like that entirely or if hiding them doesn’t matter.)

    Reply

    • Hi Tran,

      Can you please open a support ticket about this? Our technical team will be able to help you out!

      Reply

  • Wow, that is amazing! Thanks for such a thorough training video, Hanne (and of course, Thrive Theme Builder looks like it’s delivering even more than the goodness we all expected from you guys!)

    Reply

  • Hi Hanne.

    Is it still advisable to create a ‘child theme’?

    If so, what is the best process to create a child theme of the new ‘Shapeshift’ theme?

    Reply

    • Hi Jonah,
      No you can’t actually build a “child” theme and you won’t need it because the theme builder and the actual theme are independent. So the Thrive Theme Builder (that you can see installed in appearances >> Themes) will get updated. But this won’t affect the theme you’re customizing.

      Reply

  • I really love this amazing step by step training from Thrive. I would like to rebuild my site, I am in shared hosting. what type of plugin can help me do it? How can I choose a template that can fit my service page because I offer Facebook ads for local businesses?

    Reply

    • Your best pick would be the membership. That will give you access to all of our tools, Thrive Theme Builder (exclusively available for members), Thrive Architect, Thrive Leads,…
      Then I would suggest using the “service focused” homepage for your site.

      Reply

    • Hi Ann, I don’t have enough information to help you out here 🙂 If this persists (and you selected the right blog post etc.) then please open a support ticket so that our team can have a look!

      Reply

  • Getting this kind of Practical Tour from an expert in the product is invaluable. You just saved me HOURS. I have a comprehensive site running Genesis/Dynamik theme, and what used to require weird customization rules can now be done SO much easier. Thank you. I’ll be setting up the staging area this weekend to explore.

    I’ve been waiting for this!! Thank you all!

    Reply

  • Dear Hanne, I now have the problem, that I have installed the TTB a few minutes ago but wanted to start with editing later. Now my pages look totally different and I need to fix it. Do you have a quick advise for me? Thanks Maike

    Reply

    • Hi Maike,

      You can simply revert back to your theme appearances >> themes >> Select the one you had before.

      Reply

      • Dear Hanne, thanks a lot for the quick response. I fixed it. Thanks although for the great introduction videos. BR Maike

  • hej Hanne, you have created a great practical implementation guide, wonderful, great job. after a few hours of playing around I have an idea how the TBB ticks, you and your team did a fantastic job.

    Reply

  • Awesome training and WOW, really, really impressed with what Theme Builder can do. However, after playing around with editing some things, I started getting a “403 Forbidden” error and things aren’t saving anymore… Do you have an idea what this might be? (I already disabled Wordfence on my staging site)

    Reply

    • Usually this happens when you got logged out. Usually simply logging in solved the issue. In case you keep hitting that error, please open a ticket with our support agents, they will be able to assist you.

      Reply

  • Hey Hanne, been playing with it for two days now and loving it. Thanks for your tutorial.

    I am trying to figure out how to set-up a second menu the way Shane did on his activegrowth site. Do I need to add this to each template or is there some way to edit the general header area for more than one menu?

    Thanks,
    Ann.

    Reply

    • Hi Anna,

      Yes, Shane added an extra menu in the header area (in a background section for the color difference). You can do this by going to any template, and then clicking on the header area and “edit” this will edit the header everywhere on the site.

      Reply

  • I have a big problem. I was working on a new website yesterday and after spending hours to set up my services page, I clicked on the contact page, I noticed that my contact page has all the content I set up on my services page.

    So, I deleted everything on the contact page so I can set up the page, but after setting up the contact page, I went back to my services page only to realize that the content on my services page was replaced with the content on my contact page.
    This is so frustrating. I wasted 24 hours of work for nothing.
    Please fix this

    Reply

    • Hi Kate, sorry to hear about your frustration…
      Seems to me like you put the content in the template instead of actually editing the content of the page…
      So you put things like text elements etc. in Thrive Theme Builder, this became then the page template used on all your pages rather than putting the content in the page in either the WordPress editor or Thrive Architect.
      Unfortunately this is not something we can “fix” this is the difference between editing a theme template or creating a WordPress page.

      Reply

  • Hello,
    Is possible use thrive architect “custom menu” in theme builder? or must use the wordpress menu?

    Reply

    • Custom menu is totally fine! It will give you more flexibility. But remember that it means you’ll have to manually add pages when you create them and want to have them show in your menu.

      Reply

  • I am unable to edit the templates. I keep getting the message “template not saved” whenever I try to edit the templates.

    The only thing I was able to edit was the default blog page. All others, I’m getting the error.

    Any idea why? Thanks!

    Reply

    • Hi John,

      No sorry haven’t seen this error before… Please contact our support team, they will be happy to help you out!

      Reply

  • Hi Hanne,

    I can’t seem to find where you mentioned the best staging plugins when you’re on shared hosting. Could you suggest one or 2 please?

    Thanks for your hard work and VERY useful tutorial(s)!

    Reply

  • Hi Hanne,

    Great tutorial! Thank you for that. I have built my website as landing ages from scratch in Thrive Architect. Is it possible to reuse some of the elements I created in the past and import them as symbols to Theme Builder to make them part of a template? For example a blog post list?

    Reply

    • Yes that’s possible. The blog post list though is a different element from the blog list that’s used on the default blog page. The default blog page uses the blog list which pulls it’s data from WordPress where as the blog post list is meant to be used on landing pages or your homepage etc.
      So if you want to use it to show “related posts” or posts on your homepage you’ll be good, but you won’t be able to use it on the default blog page.

      Reply

  • Loving the Theme Builder and having great success with it. Could you please let me know how to add the ‘previous / next’ post links to the bottom of a single post. Thank you

    Reply

  • Hi Hanne I set up the staging site but when I went to install Thrive Theme Builder and Shapeshift it tells me some of the products can’t be installed and to try again. But each time I try, the same thing happens

    Reply

    • Hi Jensher,

      Sorry to hear, please reach out on our support forum, they will be able to help you out!

      Reply

  • My site is already built with Rise Theme. All I would like to do is change the blog page because I dont like the large image size for each blog in the list. So if I install TTB, can I only eddit the Blog list template so only that page changes on my site. I would like to keep my Home page as is. Or will everything change on my site because of the set up wizard we have to do in the beginning? That would mean I would have to redesign my home page.

    Reply

    • Hi Lisa,

      Yes everything would change. You would however be able to mimic the layout of the pages as you have now but you might not be able to get the exact homepage if you used one of the generated homepages that came with the Rise theme (because this uses shortcodes and shortcodes won’t render anymore).
      Any page you created with Thrive Architect will stay the same.

      In this course, you see a full overview of what is theme related and what isn’t (so what would change and what wouldn’t)

      Reply

  • Hi

    We don’t use post, we use pages on our website… Just wondering, in terms of the top section, we often use different headlines to the page title (that we put in for SEO), is there a way to have different headings on our pages?

    Also, is there a way to change so that the feature image isn’t used, but we can use other images as the hero image (but is still different on each page)

    Thanks

    Reply

    • Hi Shelley,

      If in the template you use the “post title” element, it will automatically pull the title of the page ==> it will be different for every page.
      Then on the page you can of course add any content you want.
      If you want a different image on each page that is NOT a featured image, I would suggest not adding an image to the template and then add the image individually in the content of the page for every page.

      Reply

  • Hi, Hanne really enjoying the course.

    The visibility settings you show seem to have changed, when I click visibility there’s no option to add sections

    Reply

  • Hi Hanne,
    How would I go about adding Custom HTML widget to sidebar.
    Do i just add a new widget area and use the WP custom HTML widget?
    Thanks

    Reply

    • Because we have the custom HTML element, you can simply drop that element in the sidebar in the theme template where you want it to show. Eg. If you want this in the sidebar on your blog posts, you can go into the default blog template and drop a custom HTML template to in there.
      If you want to use the same sidebar also on pages etc. then you can create the sidebar and save it as a sidebar template and load that sidebar template in your other theme templates (eg. on your default pages template) This will link the sidebars, making a change to one will then change on every instance.
      Hope that helps.

      Reply

  • How do I change my menu items in my header? I can find a button to do that or a video showing that. Thanks

    Reply

  • Hi Hanne,
    Does Thrive Theme Builder + Shapeshift have to be installed on the staging website or on the original site before creating the staging website? If it is installed on the staging website, won’t there be a license problem (single license) when transferring to the live website?

    Reply

    • I’m using Sitegrounds staging site (as thats who I’m hosted with). I installed TTB on the staging site. Went through the Wizard and made changes to the Templates. Siteground advised me to not make any changes or add blog posts to the original site as when I make the switch to live, it will overwrite and delete all the changes. So best to make all changes you want and any plugin updates in the staging site. Then when you switch to live, it will be exactly as what you have on the staging site. No issues with licence.

      Reply

    • Hi Laure,

      Yes you would install it on staging (not on your live site yet)
      Then you do everything you want on staging in before migrating to live, we suggest you deactivate the staging license from your TTW “My Account” before shutting down the staging website and then activating it again on your live site.

      Reply

  • Although my site PHP ZipArchive is enabled, I can’t get the Shapeshift to download to my staging site. Any ideas?

    Reply

  • When you said in the video that our pages wont change, I thought it literally meant that the design will stay the same (except for the homepage of course). I finished creating the Homepage template. but now that I go to the other pages, I see it takes on the format of the Page template. I have many pages on my site but they are designed differently. But all are messed up as its trying to show in the Page template. So does that mean I now have to create a template for each type of page or manually go through each page and change it accordingly (back to the original design – removing the template elements)?

    Reply

    • Hi Lisa,

      I said LANDINGPAGES wouldn’t change and the content on the pages wouldn’t change. But yes if you have different templates for different types of pages you would need to recreate those templates.

      Reply

      • Sorry Hanne for the misunderstanding on my part. Still getting my head around TTB.
        So I have my Default Page template. Then I create a Default Page 2 template. But how do I change certain individual pages to Page 2 template? When in Edit mode, I click on the Change Template symbol, I’m only given 4 set choices. No option to go into and select my newly created template. This is where I’m getting confused about creating more than one Page template.
        I think the only way around this, is to make changes in TA to every individual page.

      • Hi Lisa,

        Let’s imagine your standard pages have a top section with a colored background and the title and no sidebar and your other template, let’s call it “clean” template has no colored background but just the title, breadcrumbs and no sidebar.

        When you’ve created both of these templates in TTB, you can then select the pages that will use that template.

        The default one will be used automatically for all pages you don’t change manually and for every new page created.

        The “clean” template can be selected in 2 ways:

        In the WP backend editor sidebar under Thrive Theme Builder templates before you edit the page https://share.getcloudapp.com/jkuZEkPG or when you are editing the page when you select the page breadcrumb and then pick the right template. https://share.getcloudapp.com/P8ub8qm6

        More info here: https://thrivethemes.com/tkb_item/how-to-apply-a-specific-page-template-to-a-page/

        Hope this helps 🙂

        Please also note that you can easily hide elements (such as the top, the bottom or the sidebar) from pages without having to create new templates!

        (you’ll find the hiding or showing options right under the page templates options)

      • Thanks Hanne. Its all making sense now.
        On my way to changing the templates on my pages.
        Nearly ready to switch to Live.

  • Any suggestions on how to handle this when copying from staging back to production isn’t feasible? For example, on a busy WooCommerce site that is regularly getting new orders. Is there any way to export all TTB settings from staging and import them into production?

    Reply

  • Hello,

    I have FUSION page builder and just want to remove this from my website as most of my pages are build with TA. Can this be done easily and do you cover this later in the course? I just dont want my website having two page builders. Can you help?

    Reply

    • Hi Alex,

      I’m not too familiar with Fusion Builder… It will depend on how many pages you actually built with that builder to estimate how difficult it will be to switch…

      I would suggest to get your site on a staging environment and then de-activate the fusion builder and go over your site to see what changed. This will give you an indication of what you will have to rebuild…

      Now if you only used the builder on theme page or for theme pages then the content of your site will be fine and you can rebuild the theme pages with Thrive Theme Builder.

      Reply

  • Hanne,

    I am evaluating migrating our existing site that is mainly built in Thrive Architect to Thrive Theme Builder primarily in order to remove dependency to a third-party theme and also have a lot more control and ease in customizing the appearance of our site. Currently, we are using WordPress headers with customized CSS. Am I correct that we can preserve those? Is my logic of removing dependency with third party theme a strong enough rationale to consider the migration?

    Reply

    • Hi Michael,

      No you would not be able to keep the headers. Headers are part of the theme so you would rebuild your headers in Thrive Theme Builder (which is most likely really easy to do unless you have something crazy going on)
      I think more flexibility and less dependency are a great reason to switch, but of course I haven’t seen your site.

      Reply

  • Hi Hanne,
    your tutorial made it really easy to switch to TTB, thanks for that. I have migrated my site successfully with one topic open:
    I am using side bar widgets on blog posts. I would like to use the widget title as headline in sidebar as I show different content on different blog posts. I have not found a way to change typography of widget tile when shown on sidebar. Actually it does not fit to the design.
    Regards,
    Gerwald

    Reply

    • Hi Gerwald, happy this helped.
      Where do those sidebar widgets come from? Are those from another plugin?
      I think those should inherit the fonts from the theme but you might want to ask our support to have a look because they will be able to look at your site etc. and advise you better.

      Reply

  • Hello Hanne, great course thanks, but it seems like there’s not easy way to use Thrive Leads with TTB? One of the best feature of Thrive Leads is the “smartlinks” + the ability to show a different content if the visitor is already a subscriber. It helps my conversion immensely when sending a newsletter!
    Is it on the road map to have a full integration between TTB “leads generation” and Thrive Leads?
    Basically, I’d like to be able to use the leads generation templates inside Theme Builder, but with the same functionality than Thrive Leads (including “already subscribed status” and smartlinks).
    Did I miss something and it’s already possible to do that without using either TL shortcodes or TL groups?
    Thanks!

    Reply

    • Yes exactly. You can use the leadgroups to show for example an opt-in form underneath your blog posts. Then with the smartlinks it wouldn’t show anymore (or you can show the already subscribed state)

      Reply

      • Ok thanks but I think you misunderstood, it doesn’t tell me if that’s possible to do that with the leads generation templates from Theme Builder Ommi? The leads generation template looks so much better in Theme Builder than the templates in Thrive Leads, and it’s easier to change the color and so on, is there a way to have all Thrive Leads functionality (including stats and statuts), but within Theme Builder templates? It looks like it’s not possible? I can’t find the statuts feature on the lead generation templates inside TBT (allowing to display something different when someone has already subscribed)? Thanks

      • No it’s not. It’s one of the big differences between Thrive Leads the plugin and the lead generation forms included in TTB. You can however save a design you like as a template (content template) and then drag it onto a blank Thrive Leads form.

    • Depending on the tool you use… If you’re using your hosting staging solution there should be an easy button to push it to live (remember that this will then overwrite your existing website).

      Reply

  • My old POSTS format was “standard.” I didn’t even know there were options for chnaging this. I used “posts” to upload my podcast episodes/audio files (using Blubrry PowerPress Plugin), and would then type some text and sometimes add a featured photo. One or two (out of 140+ posts) were text only and a photo. I don’t want to be encumbered with the need to add photos to future posts (and don’t want them showing from past posts). I was hoping for a banner photo (maybe showing podcast art) and then list of posts with brief description. Currently single post set to “boxed post with sidebar” and blog list to “list layout text only” – looks pretty awful. Any suggestions?

    Reply

  • I’m currently using the Minus theme, which I’m told is out of date.

    I watched all of the videos in this course, and I’m not sure of one thing. If I want to use Theme Builder, do I start with one of the current Thrive Themes (Ommi, Shapeshift, Kwik, Bookwise) before doing any of the customization in Thrive Theme Builder?

    And if I change to a different Thrive Theme in future (because you keep adding new ones), do I have to do all of the customization again?

    Reply

    • Yes you’d start with the companion theme that matches closes to the look you’re going for.
      And if you want to switch later, you’d have to set up some new customization options again.

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