Guarantee Boxes, CTA Elements and Pricing Tables in Thrive Architect

Hanne   151

Thrive Architect, our new visual editor that replaces Thrive Content Builder allows you to create just about any layout you can think off. 

That's why in the first release, we did not include compound elements like pricing tables, CTA and guarantee boxes. These elements are basically just a group of other elements such as columns, boxes, text, images and lists. 

But we do understand that it is easier to simply select a template rather than building one from scratch. That's why we're planning on bringing back these elements ASAP.

UPDATE: The elements are now available! Check out the post here

Pricing Tables - New Element Now Available

We're proud to present you the new pricing table element. About a 100x more powerful than any pricing table element out there πŸ™‚ Check it out!

And because we know yesterday is better than tomorrow, we recreated all the existing elements ourselves so that you can simple save them as a content template and use them anywhere on your site in seconds.

Let me show you how.


1. Load an "Element Template" Landing Page

In order to give you access to all the designs today, we saved them as a landing page.

Go to "change Template" on the right sidebar of the new editor.

From here expand the set "Element Template" and choose the landing page with the elements you're looking for (Guarantee boxes, pricing tables or CTA).

2. Pick the Element You Like

You will most likely recognize the old designs from Thrive Content Builder, but we also added some new updated designs for you.

Scroll through the page and decide which one you would like to save as a content template first.

3. Save it as a Content Template

Now that you made your choice, click somewhere inside the element. 

Go to the breadcrumbs and select the element right AFTER "Thrive Landing Page" this is most likely a content box or columns.

Click on the element right after "Thrive Landing Page"

Next, you have to save this element as a content template so that you'll be able to import it on any page or any post you want.

To save the element, click on the save icon in the top left corner of the element (right next to the name).

Click on the save icon in the upper left corner

You will now have the choice to save this element as a template or as a symbol (a synchronized template).

4. Use on Any Page or Post

Now, your template is available in the "Templates & Symbols" element.

use templates on your landing page

Simply drag the element on the page and search for your saved template on the "Templates" tab to add the CTA, guarantee box or pricing table to any post or page!

This is an Intermediate Solution (That Works Perfectly)

Like I said in the video, we did not make these landing pages because we're not bringing back the elements (we are!) but rather to allow you to get them back TODAY rather than tomorrow.

UPDATE: The elements are now available! Check out the post here

I hope this helps and if you have any comments or questions, please leave them below.

And if there is a layout you don't know how to create in Thrive Architect, please let me know and we'll see if we can make a video tutorial about it.

by Hanne  August 30, 2017


Enjoyed this article ?

You might also like:

Leave a Comment

  • Is there a plan to add the elements to Architect? I liked being able to add one and then try different styles on the fly to see what worked.

    • Hi Tobias,
      It takes up to 8h for the new template to be visible, maybe you were too quick? Also try a hard refresh (CRTL+F5)

  • Thank you for doing this! Much appreciated. My question is, what will happen once these elements are reintroduced into Thrive Architect? How will the Architect versions be different and better? If we use these now, will we be able to edit them later?

    • Hi Rebecca,
      The biggest advantage of having the elements as real elements in Thrive Architect is that you’ll be able to add them quickly and try new designs. We will have the “old designs” in there (so that people who used them from TCB can keep using them) but the biggest advantage is that we will be able to offer new and improved designs.
      And yes if you use these you will still be able to edit them later!

  • Hi is there an easy way in The new builder to have ‘anchors’ on a page so say you click a button at the top it takes you to a place in the middle of the page? I never figured it out in the content builder

    • Yes Joanna,
      It’s actually done from within the same menu (Styles and Templates). You click on the element you want to link to (Eg your pricing table) and in the style menu you add a name in the ID field Eg.”pricing”
      Now any time you want to link to this part of the page (the pricing table) you can simply put hashtag+name in the link field so here this would be #pricing as the link URL (no http etc needed)
      Hope this helps.

      • Hi Hanne,

        Would you consider doing a tutorial on this? I’m visual, and I’m having a hard time understanding the instructions. A video that I could follow along with step by step would make it easier for me to understand. Thank you for considering this!

    • Hi Arturo,
      I’m guessing you’re talking about a lead genertion page with a button that opens a lightbox?
      In this case, the email marketing service is configured on the lightbox.
      If you’re only using Thrive Architect you can find the lightboxes in the sidemenu of your WordPress dashboard called “Thrive Lightboxes” or if you’re using Thrive Leads to set up your lightbox, you can go into the Thrive Leads menu and custom it there.

  • Great this is basically what i did just this morning with your review page elements on a template.

    Clever how you combined the tiny content box, a background, and high radius to make a circle!

    more of these please

    • I see you’ve paid close attention Anthony πŸ˜€ Great to hear you use this trick with parts of our landing pages!

  • Oh btw. the link to learn more about responsive, inside architect is sending to thrive homepage and not the actual instructions…

  • I want to save a blog post I’ve created with Thrive Architect as a template. How do I go about it? And, how do I load it on a new/blank post so that I don’t have to re-create everything from scratch?

    • Hi Emmanuel,
      If you want a full blog post, the best way would be to put everything inside a content box. This will allow you to save the full content box with your whole blog post in it. Then you can load it on another post following the exact steps in this article.
      If you’re using a Thrive Themes theme, the simples option is to just clone the blog post (create a copy of the post rather than starting a new post and uploading the template.) but this is not necessarily available in other themes.

  • Thanks Hanne. When will you be adding in the check boxes that allow you to control what displays with a YouTube video e.g. full screen, control bar, logo etc.
    At the moment I can’t stop the suggested videos from showing when my video has ended, which is horrible on a sales page.

    • Hi Simon,
      When you add a video, you have a menu called “advanced” everything you’re asking for is right there πŸ™‚

      • Thanks Hanne,
        Seems so obvious now you’ve pointed it out:-)

        A bad case of can’t see the wood for the trees….

  • Thanks for this info, Hanne. A feature request would be the option to have smaller icons in Architect’s sidebar so that you don’t have to scroll so far to see all the elements further below. Thanks for all the great work the Thrive team keeps pumping out. Much appreciated.

  • It didn’t work for me. I did a simple buy it now CTA. When I add it in it only had the buy it now button and the two curved arrows. No content or format. Odd.

    • Hi Frank,

      You probably saved one of the inner elements rather than the outer element. Make sure to use the breadcrumbs to select the first element after “Thrive Landing page”.

  • Thank you for sharing this tutorial, I was confused and thought you guys had removed pricing and CTA tables from Architect plugin. But I think page setting templates only show in pages, not in posts. So, I have saved few pricing tables to use them in posts whenever need.

    • Hi Muhammad,

      We decided to not have these elements in the first release but they will be coming back and you will be able to use them in pages and posts.

  • Thank you! I love the way you listen to your customers. This is a slick work-around & I’m thrilled you’ve introduced it. And thanks always for the clear and focused tutorials. They’ve been hugely helpful to me.

  • I need a content area that is shown when the mouse is scrolled down to this area. Is this something that already works? If not I’d like to have this implemented as a feature.

    • Hi Andy,
      Yes this is something that’s already available.

      When you click on the element you want to animate, go to the animations and actions menu, here you can select the CSS animations (first icon) this will allow you to have elements appear.

  • May not be related to this topic, but is there any way to get back the option to use ‘self-hosted’ videos?

    I have seen a few people in the forum asking for this option to be added back, but no comments from admin.

    All my videos are hosted on Amazon S3 and I really need for this feature to be available

    Thank You

  • Hi Hanne,

    Thank you for this great video. One area that has also changed is creating animated events between states, i.e. I would like for my form to zoom in after clicking a button. I don’t see any options in Architect to make that happen for the forms. Can you advise?

    Thanks again!

    • Hi Arvin,
      “Between states” are you referring to Thrive Leads here?

      I’m not sure what you mean but animations on opt-in forms are currently not available.

      • Let me clarify. In Thrive Leads, there were 2-step opt-ins. Step 1 was a button, Step 2 was a form would transition in. It doesn’t look like there is a way to control the type of transition for step 2 anymore. There use to be 2-step templates. Does this make sense?

      • Hi Arvin,
        I think I see what you mean.
        There are still multi-step templates, but they are not in a different tab anymore. They are now simply added at the bottom of the templates.
        And if you manually want to switch states (you added a button on a form and want to link that to another state) you have to use the “Anminamtions and Actions” menu.
        You can see how it’s working here in the video “How Thrive Architect improves Thrive Leads
        Hope this is what you’re looking for.

  • Hi Hanne,

    I would really appreciate if you can bring back the Content Box Templates from TCB. I did develop a template for content with a header. But, somehow it doesn’t look as good as it was in TCB.

    Also, the 3D button template (Border 2 in Architect) has a bug. It only changes the color of the front portion. There’s no option to change the color of the portion that adds the 3D effect.

    Add to it, if we switch button templates, the button loses all the CSS changes. This wasn’t the case in TCB.

    Another important point is, we had built in color-schemes for all the elements in TCB which seems to be missing in Architect. You have to change the background color, text color, border color before the element looks good.

    Would be glad if you can address all these issues.

    • Hi Aquif,

      Ok I see you mean the content boxes with the headers, I see what I can do for those.

      About the 3D button, the 3D effect is done with a bottom border, so if you go into the “borders and corners” menu and click on the bottom border, you’ll be able to change the color.

      About the switch of button template I know what you mean and internally we’re discussing about this. We didn’t find the best solution yet.

      And for the color schemes most people found those very limiting in TCB… But we are working on a better solution (for now you can customize the element once and save it as a template to reuse over and over πŸ™‚ )

      • Hi Hanne,

        Thanks for the reply. I don’t know why, but I wasn’t getting the option to edit the border color before. Did you fix that in the new update?

        As for the color schemes, as far as I remember, in TCB you had an option to select a color scheme as well as an option to change individual elements. At least that was the case with Button and content boxes.

        Any ways things seem to be getting better now. Just hope that in a month’s time Architect is free from any major bugs.

        P.S: I’d really appreciate if you can include the “Comments Subscribe” option on this blog. I am sure that will hardly take few minutes but will encourage interaction.

  • Hi Hanne, Thanks for this video! This is exactly what I was looking for!

    Also, I’d like to know if it will be possible to make a web site like this one ( See on loading page the animation (GENIUS), on mouse hover the animation on their portfolio and on mouse hover the buttons (text on the buttons are animated). If you could make a tutorial about how to animate elements on our web site, I would really appreciate that! Thanks a lot!

    • Hi Julye,
      This website is pretty bad from a conversion point of view πŸ˜‰ but I see what you mean with the animations.
      I’ll put it on the list of tutorials to make.

      • Thanks a lot! I successfully created my pricing tables and I discovered the “animation” button!!! I went wild with it!!! But what I am also looking for a function that would mix up the letters on my buttons on mouse hover… Is that possible? Also, I’m looking forward to attending a webinar as you did a couple of months ago to discover all the tricks to become a ThriveThemes Ninja with Thrive Architect! Is that on your list? Thanks again!

      • Hi Julye thanks for the suggestion about the webinar.
        For the letters, no that is not an option.

    • Hello Peter,

      Ctrl + Z will undo. And you can click on the “more” icon in the lower left (3 dots) to get a menu that includes undo, redo and the revision manager.

  • Why the heck do I want to go through and build them myself when I didn’t need to take the extra time to do so in the old TCB? I appreciate the video, but while TCB made things quicker and easier, this is wasting a ridiculous amount of time trying to get things that worked great before just to be functional again.

    • Hi Tim,

      I’m sorry about your frustration. This video shows you how to NOT build it yourself and simply use one of our templates.

      • Thanks for the reply, but that’s not really true. A one-step process is now a 3-step process, and a clunky one at that. That’s moving backwards not forwards.

      • Mate, you could be using those templates on your site already in the time it took you to complain about it here…

  • I upgraded to the new Architect and then the text of my Guarantee box disappeared and I don’t remember everything that I wrote in it. Is there a way to get it back or reverse things?

    • Hi Simone,
      Sorry to hear. Can you please ask our support forum to have a look?
      My first suggestion would be to inspect the page (click right and inspect on Chrome) and hover over the element.
      Maybe the text changed color or so?

  • I was wondering whether you are considering adding a special “content container” to Architect to be a “Split Tester”. Basically, it would have multiple “modes”. In each mode you can draw what you want.

    The “properties” of the “Split Tester Container” would include:
    1) How many modes. A simple “split test” would have two modes.
    2) The criteria for entering each mode. To being with, it can be a percentage.
    3) the current “mode being shown/edited”. One switches between Modes to edit/show different versions of what is being split tested.

    There could also be a “parent” mode.. Whatever is in the parent mode is shown in all the modes of the split test, unless modified in a particular “child mode”. Similar to what you already have with large, tablet, or phone modes.

    In a sense you have much of this already, both in Architect (in showing the various display sizes), and in your headline tools.. This would be better than the headline tool, since one would be able to split-test anything. Such as changing colors, changing images, or anything.

    There would also of course be the other features that your headline tools has, such as “reporting”, and at some point “deciding” based on real-world statistics.

    The only downside is that it would change your pricing model. Right now, anyone who has Architect gets all its features. Since this is a higher end feature that would supplant products you already have, then this would be an “add-on” to architect for anybody who wants to split test.

    In Architect, it would show up as one more item that can be dragged into the drawing/editing canvas. A special type of Content Container. There would also be the reporting features elsewhere in Thrive Themes.

    You could of course integrate all this into the regular Content Container, since you could make a default content container have only one mode, which is exactly what a content container is today.

    The pricing problem is because it would be your first separately purchasable add-on to the editor, and would have the editor as a pre-req.

    Overall, I think that this would be a great add-on.. Probably relatively easy to do (given you already have the experience with most of the parts) and would add great power to Architect for building and testing and optimizing landing pages.

    One last feature would have to do with having multiple “split-testing-content-containers” on the same page and wanting them to sync up with each other. In other words, if “split-testing-content-container #1” had a mode “style-1”, and a second mode “style-2” and there was a second “split-testing-content-container #2” on the same page that also has a mode “style-1” and “style-2”, then the user may want to sync them. I don’t know if people want that.. but there will probably be all kinds of complexity to work out for that.. Especially interaction with templates. I probably would not put such a feature in the first version, until customers asked for it, and there was time to study this “syncing” across multiple split-content-containers.
    Seems simple…

    In fact, it seems so simple, I assume you have thought of this already.

    What do you think?

    .. Michael

    • Hi Michael,

      Thanks a lot for your detailed suggestion.
      Currently we’re working on split testing for landing pages (full pages). This is the first step.
      Then, we will see what our customer needs and demands πŸ™‚ having these type of split testing blocks might or might not be the best solution because as you point out this can quickly become pretty complicated.
      Another thing to keep in mind is that if you have multiple blocks and all of them have split tests, it will take a hell of a lot of traffic to get a statistically valid results, which might not be the case for most of our users. So clearly a more “advanced user” feature πŸ™‚

  • One other “simple” thing to do (to address some of the requests I’m reading here” is to add associating “style sheets” to content containers.

    The style sheet would not be part of the container itself. It would be somewhere else. . But the content-container could import 1 (or more) style sheets. Colors and fonts could then use the extra level of indirection. . I.e. instead of specifying a color using rgb; one could specify it by name “stylesheet.color-1”. Then to switch styles, you just switch the style sheet associated with the container. THis should help people create a “style” (or set of styles) that they can apply in different ways. Just like so many things in computers, an extra level of indirection can work wonders. I find style sheets in word processors to be so useful.. The same could be done here.

    The style sheets would be named sets of attributes. For example, a style-sheet could define color-1, color-2, font-1, font-2, etc. There could be multiple style sheets, to make it easy to switch between style sheets at any content container (or entire page) level. Usual rules of “inheritance/override” would apply.

    Thoughts ??
    .. Michael

  • Another suggestion. It would be great to have a “Shop” element similar to Divi, which allows for greater customization of the boxes when using Thrive with Woocommerce.

    • Hi David,
      This is not something we’re currently working on. Maybe if we get enough demand πŸ™‚