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.
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.
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:
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:
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:
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.
3. Voila! The created content is now on your page.
Some Words on Saving Page Templates
A 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:
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:
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.
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
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:
- 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.
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)
This area changes based on whether you have a post or a page in question. With post option, you get these options:
- Save as Content Template: We covered this in Example #1: Content Template section.
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.
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.
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.