Thrive Architect Tutorial – The Ultimate Page Builder

By Peter Nyiri | Thrive Themes Tutorial

Nov 27
thrive architect tutorial

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

Architect is a popular page builder plugin for WordPress. It’s also one of the newest plugins. Despite, it hasn’t been built from scratch but is, in fact, an update to the popular Thrive Content Builder plugin.

Due to this, you’ll get access to a solid set of tried and tested features, all wrapped up in a modern user interface with some unique capabilities.

How To Use Thrive Architect

First off, here is a video to familiarize you with the page builder.

The Best Theme To Use With Architect

Regardless of which WordPress theme you want to use or are already using, TA should integrate seamlessly into your website. It works with pretty much any theme.

However if you buy the full membership, you get 10 Themes that you can use on all of your (up to 25) sites. Check out the theme demos.

User Interface

The user interface is easy to use. It is ideal for creating a custom homepage for your website, upgrading your blog posts with interesting designs, or adding high-converting sales and landing pages to your site. The content editor is a flexible upgrade to the WordPress user interface.

Thrive Architect content editor 2020

You can add the different elements on the right sidebar. Elements can be dragged and dropped onto the page. If you want to resize any elements, including the row and column layouts, you can simply click and drag the boundaries as required. Perhaps one of the best features of the Thrive Architect interface – and one not found in every page builder plugin – is the inline text editing.

Once on the page, you can select them with the mouse and change its features on the left side. They can also be picked up with your mouse and put in a new position in your layout.

Landing Pages

There are over 260 landing page templates you can choose from (see the landing page gallery). You can use them in several different industries, here is a professional car service landing page:

car service landing page

I also have a landing page tutorial.

Thrive Architect And Woocommerce

Thrive products fully integrate with WooCommerce.

FunnelXpert store for online courses was built with WooCommerce and Architect. I have also built several other stores this way, in different niches such as web shop, dating courses, etc.

How To Edit Page Sections

Let’s see how the most basic page elements work:

  • Text
  • Image
  • Button
  • Columns
  • Background Section
  • Content box

Let’s take this amazing example course sales page template as an example.

The filler text is not just the usual lorem ipsum but is provided to give you a hint as to the type of copy you should add.

editing example

Once you click on an element, its content box gets selected with a blue border (e. g. the text element on the above shot).

You have the option to save, copy and delete each element. When you save a specific element, you have the option to load it at a later time from another page and re-use it.

From there, on the top of the screen you can click the belonging page elements, such as the content box, the column, the page background, etc.

Editing The Page Background

In order to edit the page background, click the “Background Section” tab on the breadcrumb. Then select “Background Style” on the left panel.

editing background image

You can either switch to a new image from the WP Media Library, or you can delete the image altogether by clicking the trash bin button and add a layer of solid color, gradient, pattern or effect instead.

Cool trick:

Many times if you put a text on a photo that has lighter and darker parts, your text won’t be readable. Therefore you can create the effect seen on the above screenshot by

  1. adding your desired image
  2. adding a color layer above the image and setting the opacity to 50-70 percent
  3. placing the textbox on top.

Editing A Button

Let’s see how we can edit a button.

The blue breadcrumb selection on the top shows that we are editing the button, and that there is only a background behind that button on the landing page.

Thrive Architect Tutorial - The Ultimate Page Builder 1

On the Main Options panel, you can change the alignment (left, right, center), the button width and the color.

There is a full color picker where you can click on the color you want or enter it in hex notation.

button color

You can also set the opacity to less than 100 to get a transparency effect.

There is an option to save your custom colors.

If you click on the text of the button, the top of the screen will switch to “Inline Text” and the left panel will show the text properties.

You can edit the text itself, the color with the help of the color picker, the font size, line height and letter spacing as you wish.

button text edit

In the Borders & Corners menu you can make the button rounded and put a border with different style or color:

button borders and cornerIn the Animation & Action menu you can designate what happens when the button is clicked.

button animation and actionsOn the Responsive tab you can set if the element is visible on desktop, tablet and mobile.

Since a mobile screen is small, you may not want an image shown as part of a form.

Page Settings

On the right panel you can

  • add more elements
  • change the page template
  • add custom CSS,
  • add page events, etc

page settings

You can add an event to get activated on a timer or on exit intent…

page event manager

… for example a lightbox:

page event lightbox

Thrive Architect Contact Forms

I used to use JetPack’s free contact form, however I found it ugly.

Then I realized that you can build awesome contact forms with Architect. Take a look at FunnelXpert’s contact form. It has multiple templates you can use.

thrive themes contect form template

Since the element has an easy connection to Recaptcha, I enabled it on the contact form and since then I have had zero spam submissions.

Each time someone submits a message, you can get an email.

Unfortunately it doesn’t have a function to save the message on your WordPress dashboard.

Pricing Tables

The plugin also includes pricing tables.

Each Pricing Table template matches a certain pre-built landing page. This means that, for each sales page template there is now a specific Pricing Table template that shares its exact design language: Same font, same color scheme.

Other Elements

  • WordPress Content
  • Video
  • Guarantee Box
  • Call To Action
  • Post List
  • Styled Box
  • Search
  • Countdown Timer
  • Custom HTML
  • Custom Menu
  • Google Map
  • Lead Generation Element
  • Social Share
  • Star Rating
  • Styled List
  • Table of Content
  • Tabs
  • Testimonial
  • Quiz (From Thrive Quiz Builder)
Follow

About the Author

I'm building my 5-figure blog and sales funnel and help other bloggers do the same. You are welcome to join and learn from my experience and mistakes! Are you ready for this?

>
%d bloggers like this: