Thrive Architect Tutorial – The Ultimate Page Builder

In this Thrive Architect tutorial I show you how to get from zero  to intermediate level in an hour with Thrive Themes’ page builder.

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

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.

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.

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.

You can add the different elements from 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.

How To Use Thrive Architect

Here is a video to familiarize you with the page builder.

For those that prefer to follow in writing instead of video, a summary is below.

The idea is simple: by building a layout from scratch, you will learn the most important things you need to know about how to use Thrive Architect.

Let’s take a look at our goal layout. This is what we are going to build, although we won’t create a pixel-perfect replica.

I recommend that you follow along as we build this (action learning).

We won’t cover every single detail on every single feature, but it’s the fastest way to get to an intermediate level of use and get to know the ins and outs of how to use Architect.

Building A Page From Scratch

Let’s create a new WordPress page and open that page in Thrive Architect. You’ll see a big button that says “Edit with Thrive Architect”.

In the Pages and the Posts list you will also see an “Edit with Thrive Architect” link and also a “Clone” link that you can use for replicating any existing page or blog post.

So let’s click on the button and you will see a blank WordPress page with your theme’s header and the page’s title. The frame around it is the Thrive Architect interface.

What we’ll do now, is we’ll load a landing page template. To do that, you click on the Change Template icon right here:

This brings up all of the templates you can choose from one of the over 300 landing page templates and start working with them (see the landing page gallery). You can use them in several different industries, here is a professional car service landing page:

You can read the landing page tutorial if you want to know more about how to use them.

It’s a shortcut, but to get to learn how to use Thrive Architect, let’s go with the blank page and let’s choose the blank styled page and choose this template.

This will basically ignore your WordPress theme and load just a landing page for you to work with. And that’s what we have right here.

So you see that we have some very basic elements here already to help you find your way around and all that. And from this we will start building our page.

Text Editing

Text editing is very simple. You click on text whenever you click into text, it’s directly editable. And this is pretty much like in any word processor, you can type, you can drag to select, you can use these inputs here or things like Ctr-I, Ctr-B for Bold and Italicize and all this kind of stuff that you are used to. I can select the text and write.

You can also use Ctr-A to select all of it and unbold it and okay, that’s our heading right there.

Another thing is whenever you click on something, we have a few options here:

We can delete, we can duplicate an item deleted here, we can drag an item, any item that is not text.

You can also style the text with the menu ribbon, insert links, shortcode, lists, etc.

In addition to that, we can also change the fonts globally:

A sheet opens where you can edit all the different styles.

Outside/In Editing Principle

At this point I want to introduce you to a very important principle for editing in a better way.

There are many ways in which to arrive at this goal layout, but there are some tricks to optimize and save time.

We already know that you can click on any element, like a text element and change the color and the alignment and so on.

But there is a principle that we call the Outside/In Editing Principle where we can always select a container and make changes there instead of making changes to individual items inside the container.

A container is the thing that wraps around other elements such as the Background Section. As you’ll see on the Background Section, there are topography settings and you can create a global rule for text inside this container. I can say, I want the text to be white and it will affect all the texts inside.

And also as a general rule, I want the text to be center aligned. And now, if I drop a new text element in there, if it’s inside this section, it will be white and center aligned. If I drop it outside of this section, then it is not white and not center aligned.

Creating The Background

So if we look at our target page, we’ll see that we need a background.

We have a large image background. Let’s pick this first background section that’s already here with the text in it.

Alternatively we can go to the plus icon on the right panel and drop elements.

From here you can always either click to add an element to the bottom of the page or you can drag and drop elements and then place the element where you need it.

Since we already have a background section as part of the page, that’s the one we’re going to work with.

You can select an element either by clicking on it directly or by clicking on the nested breadcrumb navigation – if you select something, you can always see the hierarchy of elements.

Whenever you select an element, you will see the options for that element on this left sidebar. So here we can do a whole lot of stuff. And what we’re interested in, first of all is the background style. Let’s go to “Background Style” and here we can set a background color. If you just want to set it to specific flat color for something, you can do that here and you can add layers. You can have multiple layers of backgrounds with transparency and things like that.

What we want is an image layer, so we click on “Choose Image” and that opens the WordPress Media Manager and we have this background image already uploaded here. Let’s choose “Full Size” and then insert that into the post.

With the square you can also choose which part of the image this should be anchored to. I’m going to leave that centered and then click on “Apply”.

Creating Contrast

Now as you can see, we cannot read the text and also on our goal page, the text is center aligned.

The best way to fix that is to go to the background section.

You can see that this heading is inside this background section in the breadcrumbs.

We can select that here and here we want to go back into background style and add another layer of color on top.

We make it dark blue and give it some transparency so that way we get a compromise between seeing the background image, make that a bit darker, between seeing the background image and also making the text more readable.

So note how, if we make it transparent, the text just doesn’t enough contrast, it conflicts with the background image. The more opaque we make it, the better the text pops out – so we need to find a good compromise between visibility and readability of the text.

Also, if you like this color and you want to use it later, you can click on the plus icon to save it as a favorite color or as a global synchronized color. Let’s click Apply and move on to the next thing.

Creating Columns

We need a three-column layout inside this background section, and these are created using content boxes.

Content boxes are super versatile. You can do all kinds of layout things with content boxes.

There are two different ways in which you can create a column layout.

The first option is going to the Add Element (+) icon – you can either find an element in this list that you want to add or you can search.

We’ll drop a column container on the Background Section and we can choose a layout. This can always be changed later.

Let’s choose a half and half layout. So that’s one way to create columns. And the second way you’ll see in a moment.

Next, let’s add a content box inside one of these columns. (In thrive architect you can nest as much as you want. You can put columns inside columns and boxes inside boxes.) I’ve put a box inside a column and I’m going to style this box.

Let’s look at our goal page. What we have here is kind of a transparent white box with a thin border and some rounded corners. Let’s make this happen. So let’s make the background style white (#ffffff) and transparent (Opacity: 40).

And then we have Borders & Corners and here we want a white border.

To change the thickness, we can enter a value in the top box, but also click and drag. We’ll leave it at one pixel.

Then in the bottom box, we can add corners – individual corners or all at once. We can also click and drag or just enter a value, let’s say 12 pixels. That’s more or less what we wanted.

Now inside we have a bunch of elements.

We have an icon with a background, then a title, some text and the button.

So let’s get started with the icon. Let’s search an for icon and drop that in here.

We have a long list of icons to choose from. This is the premium font awesome icon set that you have full access to when you use Thrive Architect. So I’ll just pick one app random and insert that here.

And then we have icon options right here. Let’s make this white, let’s make it a bit smaller, maybe 50 pixels instead of 60 and then I want to give it a background and maybe you can see this is like a subtle gradient on this background (another type of background you can add to things).

So I can select a stop on the gradient and give it a color. And then I can also choose the angle of this gradient. And let me choose a different color to make this more obvious, right?

But as you can see, this doesn’t look very nice because the background is exactly the same size as the icon.

So let’s learn about one more thing we have in layout and position. We have margins and padding. Now margins is the space outside around an object and padding is the space inside an object. So if I increase the top margin, I can do that by clicking on this control and dragging to increase or decrease the value.

And as you can see, this pushes the icon, as a whole, down away from the top border of the box. So I’m adding space outside the icon at the top. Let’s put that back to 20 if I do the same on the padding on the inside, then as you will see, it adds background. So it adds space inside the container of the icon. And that’s how I get more of the background to show up. So what I want to do, let me set this back to zero. What I want to do here is I want to have space all around this icon, link these four sides together by clicking here. And then I’ll enter maybe 10 pixels, maybe even more. Let’s do 16. Okay. And that gives us a nice spacing around the icon.

Next I will go to borders and corners and I will just enter a large value because any large enough value on a rounded corner on a square will turn into a circle.

So that’s how we get this circle effect.

Then we have a heading. So let’s drop in a heading. This would be a Heading 2 and it’s, you know, feature box title. And then we have some text. So I’ll grab a paragraph and drop it in below this heading. And let me just go and copy this filler text right here and paste it in here.

Now what you can see here is that we’ve got a bit of a problem – the text is running really close to the edges of this box and this is a margin and padding issue again.

So let’s go and add some padding.

I choose the container, the box and same thing as before. I go to Layout and Position on then I’ll add, let’s say 20 maybe even 30 pixels of inside padding.

Then we have a button, so let’s get the button element and drop that in here.

Now for a button you can choose among different templates and it will also show you templates that you have saved. Let’s choose one of these templates. Maybe we have this one here with a bit of a border and we can choose a size, we can make it a bit bigger and we can choose a master color.

Now if you see it, the button here has several colors, right? It has the main color, it has the border color at the bottom and it has a hover color. We can edit all of these separately so we can go into the background style and change this. We can find the bottom border and change that.

So we can go and edit each of these colors separately and then we can go into the Hover state. Okay, so we can switch between normal state and Hover state and again, edit anything we want. So you can make some really funky and advanced button styles, but if you don’t want to spend that much time on it, or you can do is just change the master color.

So if we choose this, and let’s say I want this to be orange, you’ll see that it automatically changes all of the colors and the hover effect accordingly. So with just one color change, I can get the result I want. That’s the easiest way to do it.

Now if I save this button here, I can click on the save icon and save this as a template. My new button.

With that our first column is complete, now we need to create all three of them. But before we do that, let’s make sure it also looks good on smaller screens.

The pages created by Architect are already mobile responsive, but we want to inspect all screen sizes.

At the bottom of the screen we can switch to tablet and smartphone:

These screen sizes work outside/in – the changes you make on larger screen sizes will apply to the smaller ones, but can be overridden on the smaller screen size. E. g. you may want to decrease the padding on smaller screens.

Now that we have done that, we can duplicate the entire box and drag it over into  the empty column.

Then we can duplicate it again and drag it to the right size. This will automatically add another column, making the 3-column layout that we were looking to build.

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.

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.

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.

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.

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.

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

In the Animation & Action menu you can designate what happens when the button is clicked.

On 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

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

… for example a 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.

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)