4

Thrive Architect Tutorial: How to Get Started

In this Thrive Architect tutorial, I show you how to get started with Thrive Architect, Thrive Theme’s flagship product. Also, I show you what you can do with the tool, including detailed steps on how to do certain actions.

More...

In the Beginning ...

The first time I laid my hands-on WordPress (WP for friends) was in 2008. At first, WP was a stranger to me. But every time I used it, I became more comfortable with it.

Eventually, WP felt like an old friend I had known for decades. But one thing was bugging me: Some parts of it were lagging, especially the content editor.

Sure, it was there, but it was bit dated.  If you wanted to get more power to your editing, you had the kitchen sink:

The rest is history: I got the TCB and used it a lot. Sure, it had quirks here and there, but it was a big improvement over the old WordPress content editor.

Then, at some point, something interesting happened. I stumbled upon this one blog post, which reviewed a tool called Thrive Architect. After reading the endorsing review, I was hooked; I had to get this plug-in!

Looking for Thrive Architect Review?

I have also written a detailed Thrive Architect review on my blog: 

That post evaluates various aspects of Thrive Architect, and whether the tool is good for you or not.

Getting Started

After you have installed and activated Thrive Architect, you are ready to start your first project. So, whenever you create a new blog post or a page, you should see a green Edit with Thrive Architect button:

Thrive Architect tutorial: Add new post

Give your post/page a name and save it as draft first. This way, you don’t encounter the dreaded 404 error (file not found).

Did you save the page/post as a draft? Good, then choose the Edit with Thrive Architect button. You are greeted with this view:

The editing experience differs greatly from the standard content editor of WordPress. It looks different, and it can be intimidating at first. But believe me – you will get along just fine!

You have now gotten a glimpse of Thrive Architect goodness, but we’ll leave it for now. Before we go any deeper into creating content with Thrive Architect, I’ll give you a brief introduction of the elements you can use to spice up your posts and pages.

Thrive Architect - What's Inside?

I briefly mentioned that Thrive Architect includes plenty of visual components that help you to create nice looking pages and posts. These elements should satisfy even the most demanding site builder.

The elements are divided into two parts: Foundation and Building Blocks. So, let’s start our journey with Foundation first:

Foundation


  • Paragraph/Text: Add textual content to your page.
  • Heading: Stylize your heading with colors and various font sizes.
  • Image: Give your images some edge with simple effect tools.
  • Button: Create buttons of all shapes and sizes.
  • Columns: Organize your page into various columns.
  • Background Section: Set background images for your pages and posts.
  • Content Box: A container element that can include other elements, like paragraphs or columns.
  • Content Template: Create re-usable pieces of content to be used on your future blog posts or pages. This saves your time and makes your content look consistent on your site.

Building Blocks


  • Click to Tweet: Make pieces of content easily tweetable.
  • Content Reveal: Show pieces of content on your posts/pages after a period of time has passed.
  • Countdown: Countdown timer that shows a piece of content after a pre-defined time has passed.
  • Countdown Evergreen: Same as the Countdown, but you can start the countdown again once the pre-defined time has passed.
  • Credit Card: Display major credit card icons on your checkout pages.
  • Custom HTML: Write custom HTML to your pages.
  • Custom Menu: Add a custom menu to your site.
  • Disqus Comments: Enable Disqus commenting system, for example on your landing page.
  • Divider: A divider line to separate two pieces of content.
  • Facebook Comments: Enable Facebook comments on your pages.
  • Fill Counter: Like a Progress Bar, but with a different look. It also shows progress in percentages rather than in a bar format (like in Progress Bar).
  • Google Maps: Add Google Maps component to your post or pages.
  • Icon: Add icons to your content. You can find plenty of them out-of-the-box when you install Thrive Architect.
  • Lead Generation: Add an opt-in form to your site, so your visitors can join your email list or became registered users of your WordPress website.
  • Post Grid: Display your posts or pages inside a grid.
  • Progress Bar: Element showing progress on your page.
  • Social Share: Social sharing elements for sharing your content in social media.
  • Star Rating: Add star rating to your content (like on Amazon)
  • Styled List: Style your bullet-point lists with different icons, font sizes, and colors.
  • Table: Add a table for displaying tabular data on your pages.
  • Table of Contents: This control is handy for long-form pages (like this post you are reading!). It helps your user to navigate the content better and easier.
  • Tabs: Display content in tabbed format. Each tab can contain different content.
  • Testimonial: Add client testimonials to your site.
  • Toggle: Hide/show content by clicking on the content headline on your page/post.
  • Video: Include video content (for instance from YouTube, Vimeo or Wistia) on your pages/posts.
  • WordPress Content: A control for adding WordPress short codes into your content. 

As you can see, there are plenty of elements to choose from. I’m not going walk you through every one. However, I will demonstrate some elements and how to use them.

Example #1: Content Template

For creating content for my websites, I’m all about consistency and speed. For this reason, the Content Template is awesome.

This element helps you to create reusable content components, which you can then use in your future pages or posts. For instance, you could have a content block that contains a header, some paragraphs, and credit card icons (wow, that’s exciting 😉). You can then save this element, to reuse it in the future.

To create your Content Template with the elements I mentioned, follow these steps:

1. Create a new page in WordPress (Pages > Add New). Then, drag Content Box to the page. Drag other elements (Paragraph/Text, Heading and Credit Card) inside it:

Thrive Architect tutorial: Content Template elements

2. Click the outermost border of Content Box to make it active.

3. Go to the bottom of the Thrive Architect and choose Styles and Templates then click the Save Template button.

4. Give your template a name. You can also set a category. Click Save again.

5. Your content template has been saved.

Next time you want to use your template it, do this:

1. Open Thrive Architect and create a new page or post.

2. Drag Content Template element into the page and pick the saved template you wish to use.

Thrive Architect Tutorial: Drag an element to canvas

3. Voila! The created content is now on your page.

Some Words on Saving Page Templates

Content Template is not a page/post template! Content Template helps you to create reusable content components on a page/post level, whereas a page/post template is a whole page or post saved - with all its elements – into a template.

A page/post template speeds up your future page/post composition, since the basic structure of the content is available, and you don’t have to create it from scratch every time.

 To create your page/post template, follow these steps:


1. Create a new page (Pages > Add New).

2. Start editing the page with Thrive Architect.

3. Add elements into your page as you wish.

4. Choose the gear icon at the top-left corner.

5. Choose Template Setup tab.

6. Choose Save Content as Template

7. Give your template a name and click Save Template button:

When you want to use the template, follow these steps:

1. Open Thrive Architect and create a new page or post.

2. Drag the Content Template element into the page/post and pick the saved template you wish to use.

3. The page/post template is now on your page/post.

Confusing Content Template

The Content Template element was overwhelming to understand at first.


If you want to create a blog post template, you must create it through Page editing mode (see the steps before this box).


The more logical way would have been to create a blog post with a desired structure, save it – in blog post editing mode. This would have made things easier for the end user.


I let the Thrive Themes support know about this workflow, and they said they will put this request into their feature request queue:

Thrive Architect tutorial: Response from customer support

I also found a workaround to this issue: by using Content Box element, which included the structure I wanted, and then saving this into a template. However, with this approach, I occasionally run into two problems:


First, when I dragged a paragraph from Thrive Architect toolbar inside the Content Box, it didn’t seem to activate:

However, when the Content Box activated, it still didn’t do it correctly. It looked like the blue indicator was under the Content Box, even though I specifically dragged the paragraph inside.


Yet, when I dropped the paragraph inside a Content Box, it was placed correctly.

Example #2: Tabs

Tabs is one way to organize content in Thrive Architect. It’s especially useful if you have a lot of content that should be on the page, without having to show it all at once.

Here, Tabs element is your answer, since you can have different pieces of content inside each of your tabs.

To create Tabs, follow these steps:

1. Drag and drop the Tabs element onto your page. The Tabs element has three tabs by default.


2. Add content to each of your tabs. You can access the content by clicking the tab header:

3. Click on the Tabs element by accessing its features (only part of the features is shown here):

For instance, you can add more tabs, delete tabs, or change the colors of the tabs.


4. Click Save at the bottom to save your masterpiece.

Example #3: Content Reveal

Content Reveal element brings timed content to your pages/posts. It gives you the option to set content to become visible after some time has passed.

To implement Content Reveal element, follow these steps:

1. Drag Content Reveal element into your page:

Thrive Architect tutorial: Content Reveal element

2. Drag other elements inside your Content Reveal element:


3. Set the timing by setting the Reveal Content After option:


4. Test the page to see how it works!

With these three elements, I just scratched the surface of what you can do with Thrive Architect. At the time of writing, it contains 34 elements to choose from. 

More about Working with Elements and Content

To be honest, the abundance of elements in Thrive Architect felt overwhelming at first. It took me couple of times to get used to the UI. But don’t worry. I feel much better now 😊

Here is the deal: While all the elements share the same common settings, they have their own specific settings, too.

For instance, adding a Paragraph/Text element to the page gives you not only the paragraph-related options, but plenty of other options, too. Let’s take a quick look at what they are:

  • Typography: Settings related to typography.
  • Layout & Position: Control the margins and other layout-related settings.
  • Background Style: Set background images or styles for your elements.
  • Borders & Corners: Tweak the borders and corners of your page components.
  • Animation & Action: Add animation and add other effects to your content, based on user interaction.
  • Responsive: Show or hide a specific element on different platforms. For instance, you could hide an element on Tablet and Mobile but not on Desktop.
  • Shadow: Add shadow effects to your elements.
  • Styles and Templates: Set custom CSS properties to your elements. You can also save a custom-created element as a template.

Whoa … there is a lot you can control on a page/post level with this tool. But believe me when I say this: It’s easy to grasp, once you have created couple of pages or posts.

Additional Settings

Thrive Architect displays additional settings under the Gear icon on top-left.

This includes options like:

  • Setup Page Events

This is where you make something happen on a page, based on your visitor’s actions. For instance, you could fire a pop-up window after a certain amount of time has passed. You can setup Exit Intent or Timer events.

In the first option, you could display a pop-up asking visitor’s email address when he/she is about to close his/her browser. In the second option, you could make a pop-up appear after a pre-defined time has passed.

Two events are great starting points, but hopefully, more page events are added.

  • Edit HTML

I fell in love with HTML 22 years ago. It’s no wonder that seeing the Edit HTML option warms my middle-aged heart. This option gives me the code-level control of the page or post.

So yes, you can edit the page/post, save the changes, and your modifications are in place when you view the page/post again.

  • Custom CSS

As with HTML, you can edit the CSS code directly and save the changes. Just know what you are doing, since CSS code can get tricky.

  • Turn Off Save Reminders

This option disables the save reminders you see every now and then. Their purpose is to remind you to save your content, so you won’t lose your changes.

  • Switch Editor Side
This setting gives you the option to move the editor to the right side of the screen. Left is default.

Even if this wasn’t enough, there are even more options to choose from. You can access these settings at the bottom of the page by choosing More Options:

By clicking the three dots at the bottom, you get access to the following settings:

More Options

  • Preview: Preview the changes you have done so far.
  • Revision Manager: Restore your page to a previous version.
  • Undo: Undo the last action you have made.
  • Redo: Redo the last action (after you have done the Undo first).
  • Exit Thrive Architect: Close Thrive Architect.

The settings under More Options were self-explanatory and worked as expected. The only exception is Exit Thrive Architect command, which didn’t take you to the regular WordPress page/post edit mode as it did with Thrive Content Builder.

This is a small, yet annoying, functionality that Thrive Themes changes soon.

Responsive View

This option helps you to see how your content shows in various devices. And yes, I’m happy to say that pages/posts built with Thrive Architect look good in desktop and mobile devices.

Desktop (100% width)


Tablet (768px width)

Mobile (360px width)

Page Setup

This area changes based on whether you have a post or a page in question. With post option, you get these options:

When a page is selected, in addition to Content Template, you also get these:

  • Choose a Landing Page Template: Clicking this option gives you access to both pre-built landing page templates and to your custom-built landing pages.
  • Import Landing Page: Import a landing page to Thrive Architect.

Landing Pages

One of Thrive Architect’s strengths lies in landing page management. Since integrating an email list to your website is such an important matter, it’s great that Thrive Themes has built the functionality into the product.

There are plenty of landing pages to choose from – 197 at the time of writing – and Thrive Themes is adding new ones occasionally. These landing pages are organized into sets (landing pages of same sort and styling, for instance Confirmation page, Video landing page, Webinar registration page, …).

There are pros and cons to landing pages that Thrive Architect provides. The downside is that some designs look a bit old. I wouldn’t use them all as is, without making my own customizations to them.

On the other hand, getting a landing page straight out of the box is actually a great time saver. Especially if you can implement a landing page with no or little customization, these landing page sets become handy.

There are two ways to work with landing pages:

  • By creating a new one from scratch.
  • By using a pre-defined landing page template.

Let’s take a quick look at how to work with blank landing pages:


You can also use the pre-defined landing pages, provided by Thrive Themes. Also, you'll see, how to take advantage of your modified landing page in your future projects.

Compatibility with Other Page Builders (and with Thrive Content Builder, Too)

One particular issue left me cold with Thrive Architect’s predecessor, Thrive Content Builder (TCB). I noticed the pages built with WordPress’s editor weren’t directly editable with Thrive Content Builder.

This led to the situation that, if I wanted to manage these pages through TCB, I had to re-create them.

Fortunately, old content should look almost as usual, according to Thrive Themes. The pages are also *almost* editable through Thrive Architect. But keep these things in your mind:

First, certain elements, namely text, images, and columns, should work as is. They also should be editable right after upgrading to Thrive Architect.

Second, elements (Styled Elements) like Buttons or Content Boxes need to be migrated to work properly with Thrive Architect. According to Thrive Themes, you should see a migrate button on the sidebar of Thrive Architect to do the migration.

Finally, it’s the Compound Elements that need the most attention in the migration process. These include elements like Pricing Tables or Guarantee Boxes.

The text inside those elements is editable, but you can’t access style properties of those elements. Fortunately, Thrive Themes has promised to bring these elements back into their glory at some point.

You can read more detailed information regarding moving from Thrive Content Builder to Thrive Architect from this article.

The dreaded content lock-in

Let’s imagine a scenario: You are building your website with a WordPress page builder tool. After some time has passed, you learn that a much better tool is now available on the market.


You decide to act fast and deactivate your tool, install/activate your new tool, and you are ready to go. At least that’s what you think …

 

You soon realize that, while your old tool acted nicely, the pages you created with it look gibberish after you de-activated it. Those pages are full of short codes that your old tool left behind, and you have a problem in your hands.


You could either fix your old pages one by one, move back to your old tool, or have two site builder tools on your system (which never sounds like a good solution ).


Fortunately, Thrive Architect works better than the old tool in our example. If you abandon Thrive Architect, your pages won’t be full of WordPress short codes. Not all the content stays as shiny as with Thrive Architect, yet the content is at least readable.

Editing Content with WordPress Content Editor

What happens with pages you have created in WordPress’s default editor and when you open those pages in Thrive Architect? Well, here is the result:

Thrive Architect adds the original content to a single WordPress Content container box. Old content is editable with default WordPress content editor, while you can add new content with Thrive Architect at the bottom of WordPress Content container.

Opening Pages Created with Other Site Builder Tools

I wanted to test how Thrive Architect handles pages, which are built with other page builders, like Elementor and Beaver Builder. Here are the results.

Elementor

This is how it looked when I opened the content in Thrive Architect. It puts most of the content inside a WordPress Content container, which is not editable.

I also added content at the bottom of the WordPress content (Text by Thrive Architect). The columns and the buttons weren’t available for editing.

Beaver Builder Lite

After opening a page in Thrive Architect, the results were almost like with Elementor: The created content was put inside WordPress Content box, and I added new elements after this content block.


Opening and Editing Content with Thrive Content Builder

As Thrive Themes also mentions, pages created with Thrive Content Builder are mostly editable with Thrive Architect. Sometimes, however, you may need to migrate your elements.

Thrive Architect Tutorial: Conclusion and What's Next

In this post, I introduced Thrive Architect to you and its possibilities. It’s is a big product for sure, and it takes a little bit of time to get used to the tool.

However, this is not the only Thrive Architect tutorial you are going to find. In the future, I'm about to record new Thrive Architect videos to my YouTube channel. So stay tuned!

In fact, I want to hear it from you: What Thrive Architect tutorials you'd like to see next?

Just leave a comment on the comment area. I'm more than happy to know.

Timo
 

I'm into building websites and writing detailed reviews about site builders. When I'm not at my computer, you can find me spending time with my family or training for marathons or for triathlons.

Click Here to Leave a Comment Below 4 comments
Christie - September 19, 2018

Hi, Timo

How do I delete a tab if I created too many tabs? Or in my case; the default seems to be three tabs, but I only need two?

Reply
    Timo - September 25, 2018

    Hi Christie!

    You should see the trash can icon popping up, when you hover your mouse over the tab you would like to delete.

    The trick here is not to select the tab area, because otherwise you won’t see the trash can icon.

    So, just click somewhere outside the tab element, and then you should be able to see the trash can when you hover your mouse over a particular tab.

    Cheers,
    Timo

    Cheers,
    Timo

    Reply
Claire - November 7, 2018

1. On thrive architect how do you get blog posts to show up on a separate Blog page? Normally in wordpress you go to Settings, Reading and then simply write ‘Blog’ in the box for posts, but this doesn’t work with Thrive Architect.

Thanks

Reply
    Timo - November 15, 2018

    Hi Claire!

    I think you are doing it right.

    So what I’d like to know next:

    1) What have you selected on the Posts page dropdown in Settings > Reading?
    2) You have created that actual new page on your WordPress (that was selected on step 1)?
    3) What happens with Thrive Architect? In other words, when you have saved the settings (steps 1 & 2), how does Thrive Architect behave?

    This is also how Thrive Knowledgebase is advicing us: https://thrivethemes.com/tkb_item/set-separate-homepage-blog-page/

    I guess, if with these steps your setup doesn’t work, then you should contact the Thrive support for more information.

    Cheers,
    Timo

    Reply

Leave a Reply: