What You Might Have Missed in Thrive Architect

A little over a year and a half ago, we launched Thrive Architect, our visual page builder for WordPress.

Since then, our simple drag-and-drop visual editor has grown… and grown… and grown. In the last 12 months, we’ve released 18 new features, a slew of updates, speed improvements, and user experience upgrades.

It’s hard to keep up.

Are you utilising these changes?

In this post, we give you a rapid-fire round-up of all the new features and updates that you might have missed for Thrive Architect.

New Elements

If you’re not yet familiar, Elements are the building blocks in Thrive Architect that you can drag and drop anywhere on your pages.

When you build a new landing page or blog post in Thrive Architect, you will be working mostly with elements, and there are so many to choose from that we couldn’t even begin to mention them all here.

But we’ve added 2 super valuable new elements for you in the last year. Here they are:

Contact Form Element:

The new contact form element makes it so easy to let your website visitors get in touch. Drag and drop it onto any page, select from our pre-built contact form templates, and you’re ready to go!

Then, when any visitor fills out the form and clicks ‘submit’, you will automatically get an email in an inbox of your choosing, notifying you of the visitor’s questions.

This prevents you from having to list your email address publicly which could then become the target of spam.

Time to disable that frustrating Contact Form 7 plugin…

To learn more about the Contact Form Element, check out the original announcement post by clicking here.

Pricing Table:

When it’s time to buy, your soon-to-be-customer will want to know which package to choose. That’s where the new Pricing Table element comes in.

With a library of 22 pre-built templates, your pricing table is going to look professional and inviting. But better than that, you can highlight a preferred pricing tier, add different prices, and even customise the behaviour of your instance switch.

The instance switch sits above your pricing table and lets your visitors toggle between pricing sets — such as monthly or annual pricing — with a single click.

Like all of our elements, the pricing table is responsive and works on mobile or desktop, and you can customize all the text, colors and designs.

To read more about the pricing table feature, check out the announcement post here.

New Design Features

The charm of Thrive Architect is that you don’t need to hire anyone to create professional layouts on your site. It’s a website owner’s dream — everything visually editable without touching a line of code.

Like an artist with a brush, you get direct control of the final result without needing a team of developers or designers. And we’ve improved Thrive Architect’s design power with a slew of new features you should definitely know about.

Hover Animations:

Thrive Architect already has on-page animation features, which allow you to reveal elements with eye-catching animations.

But a few months ago, we doubled the library of CSS Hover Animations by adding background animations. This feature is tucked away a bit so it often goes unnoticed. You’ll need to select a content box, activate the hover state in the editor, then go under Animations and Actions.

Once you grasp what you can do with background animations, your pages will get a real design level-up.

Here’s an example in action:

On elements such as content boxes, you can set a ‘Hover State’. That means that on desktop view, when a visitor’s cursor passes over the content box, it will activate the second state. This makes it easy to add shadows, colors, highlights and more, on hover.

But with Hover Animations, you can choose how the element transitions into its hovered state. You can make it bounce, sweep left, rotate, flip, buzz, and more.

To learn more about Hover Animations, check out the original post here and then our announcement about the updated background hover animations here.

Fancy Dividers

Have you ever stumbled upon a beautiful and professional looking website, but haven’t quite been able to pinpoint what makes it so good?

The secret is often fancy dividers, and once you know what they are, you’ll begin to notice them in use everywhere.

A fancy divider is a graphical edge between two areas of content. Rather than just a straight line that delineates one section of a page from another, you can apply a fancy divider, immediately adding that flourish to a design.

In the last year, we introduced the fancy dividers feature, but we also went and updated the fancy dividers template library to give you even more options to spice up your pages.

To learn more about Fancy Dividers, you can see the original announcement here, and learn about the updated library of fancy dividers here.

Table Templates

You’d be forgiven for thinking that placing an Excel-style table onto a website should be easy. But when you begin to consider how a table should change when viewed on mobile screen sizes, it quickly gets complicated and easy to break.

We had to think hard about the solution, about how to create mobile-responsive tables on a webpage.

Finally we came up with the Table element. It’s editable, sortable, and has different mobile-responsive settings that you can toggle between.

But we wanted to provide even more design range, so we recently updated the Table element. Now, when you drag-and-drop the table element onto your page, you’ve got a wide selection of 22 pre-made table designs at your fingertips.

To learn more about Table Templates, check out the original post here.

Custom Fonts

Your website’s default fonts are set in your Theme settings. But on occasion, you’ll want to override them, such as for a landing page or a sales page.

Thrive Architect already comes with a library of built-in fonts and access to all Google Fonts too… but this year, we added an integration with custom fonts.

We’ve integrated Thrive Architect with the free and popular ‘Custom Fonts’ plugin. Simply add the plugin to your website, upload any fonts of your choosing, and you’ll find them as an option inside of Architect.

Now, you can get as creative as you want by adding any custom fonts to your posts and pages, no matter how wacky or wild.

For a tutorial of how to add your own custom fonts, watch this video here.

Global Features

Don’t glaze over this section.

It’s easy to dismiss the new global features as a minor change, but once you really understand them, you’ll see that this is a big deal.

The new set of global features built into Thrive Architect is a game-changer. You can now link design elements website-wide, and change all of them at once with a single click. Here’s how each new global element works:

Global Colors:

When you are building a page in Thrive Architect and you apply a color to an element, you now have an option to set that color as a global color. Once it’s set, it will be signified by a small triangle in the corner, and you can give that color it’s own unique name.

Whenever you apply colors elsewhere, you’ll have the option to select your global color, linking them together. Then, from any instance of that color, you can replace it and the changes will be reflected website-wide.

Global Gradients:

In the same vein as global colors, you can now link your gradients. In your designs, gradients are an excellent way to improve visual appeal, and you have more control over them than you may think.

Rather than just being able to set two colors, you can choose the opacities of those colors, the specific angle at which the gradient shifts, and the rate at which the gradient blends. We recommend a subtle blend between two similar colors or shades.

Once again, you can change your global gradients site-wide affecting all elements that are linked to that gradient.

Global Buttons:

Website-wide, you’ll be using lots of buttons. Perhaps they’re on opt-in forms, sales pages, squeeze pages or homepages, but it’s likely you have a preferred button style that becomes your ‘go-to’.

What makes global buttons so useful is that they will share the same style, whilst still having unique elements.

For example, each instance of a button can have different button text, different alignment (left, right, center) and link to a different website URL... but they will still share the same design features such as color, font, padding, shadow and border.

Global Styles:

Have you ever found yourself building out a page in Architect and repeating certain content boxes or background sections? It’s likely that you’re just using the duplicate option, right?

But what if you want to change those content boxes, or edit the alignment or color of text contained in those specific background sections? That’s where Global Styles come in.

Now you can assign a style to background sections and content boxes too. Using the outside-in principle, you can create design settings (such as fonts, sizes, colors, etc.) that will apply to all the elements contained inside that box, and it will be reflected on any repeat instances.

The content itself can be different, meaning that you can have different paragraphs, headings, images, icons, buttons, links and more… but the general appearance of your content will match. 

Symbols

The term ‘symbol’ in web design does not mean what you think it does. Every time we talk about Symbols, we have to explain why it’s a confusing name.

In web design, a Symbol is known as a repeated content element. Unlike all the global features above, Symbols are different for one reason: it isn’t just the style that changes, it’s also the content.

The best explanation of Symbols was with Shane’s podcast subscriber example. You can create a symbol from a content box filled with ‘subscribe to our podcast’ links, and reuse that same symbol on any page of your site. If at any point you want to change the links in every single instance, you just have to change it centrally.

To save any element as a symbol, just hover over the parent element that contains everything you want saved and click the save icon. Choose ‘Symbol’ from the following option.

To reproduce the symbols across you site, drop the ‘Templates & Symbols’ element onto any page and select your saved Symbol.

Scroll Behavior

This one last feature doesn’t quite fit into any of the above categories, but it’s amazing. There is a new setting we introduced that you’ll find inside of the Thrive Architect editor, called Scroll Behavior.

When you select a compatible element, you can set the scroll behavior to ‘sticky’. This means that as a visitor scrolls down the page, that element will stay visible by sticking to the top.

You can also control the distance it remains pushed from the top, as well as any point on your page you would like it to become ‘unstuck’ and simply slide out of the user's viewport once they cross that point.

To see some use cases of this amazing new feature, check out this post here.

Upgrading Architect

A lot of thought goes into each new feature we add to Thrive Architect. Our goal is to keep it fast, intuitive and powerful and we are committed to growing it as an extraordinary tool.

But the changes don’t end there. We have some exciting new updates for Architect planned for 2019, so stay tuned to see what more feature power we can pack into this tool!

Hopefully this feature round-up has helped you to discover some new features that you haven’t tried to use yet. Are there any that stand out?

Let us know in the comments below!