Master Your Landing Page Designs with These 7 Thrive Architect Hacks

Author 
Matt   58

Updated on June 26, 2020

It’s hard to describe how powerful the Thrive Architect content builder can be when it comes to creating landing pages for your online business.

Whether it’s a homepage, sales page, squeeze page, or ultimate guide, the design firepower Thrive Architect gives you is hard to beat.

But because there are soooo many features at your fingertips, it can be hard to appreciate all the lesser known tools that also offer some serious design bite.

That’s why, if you’re a Thrive Architect user who hasn’t had time to learn its full compliment of capabilities, we decided to put the following list of feature hacks together so you can quickly expand your Thrive editor repertoire.

Keep reading to learn 7 Thrive Architect feature hacks you can start using right now to meaningfully level up your landing page and blog post designs.

More...

Thrive Architect Hack #1: Vertical Position Centering

A very powerful feature contained in Thrive Architect is the Columns element.

With it, you can create a plethora of useful designs to showcase different kinds of content side-by-side.

But to really get the most out of your column designs, you need to know about a sub-feature within the Columns element called the "Vertical Position" toggle:

Vertical-Position-Toggle-Options

You can use the Vertical Position toggle to choose if your Columns elements Top Align, Middle Align or Bottom Align. 

This toggle allows you to quickly Top Align, Middle Align or Bottom Align the elements contained within your Columns to achieve the design look you want.

How To Use the Vertical Position Feature

To set the "Vertical Position" of your columns, highlight the Columns element you’re modifying, open the Main Options tab in the Thrive editor sidebar, and then click on the "Vertical Positioning" icon you’d like to set (Top, Middle or Bottom):

To set the Vertical Position setting of your Columns elements, highlight your element, click on the Main Options tab in the Thrive editor sidebar, then toggle the Top Align, Middle Align or Bottom Align option.

That's right, styling the vertical positioning of your Columns elements is now just one little toggle button away in Thrive Architect.

Thrive Architect Hack #2: Anchor Text, Image Links, and Content Box Links

Skillful internal and external linking is important for your website's long term success. An internal link takes a visitor elsewhere on your own website, while an external link takes visitors away to an entirely different website.

Thrive Architect helps you establish these types of links quickly and easily by creating:

  1. Anchor Text (highlighted, clickable text that opens a hyperlink),
  2. Image Links (clickable images that open hyperlinks), and
  3. Content Box Links (clickable content boxes that open hyperlinks).

Setting Up Anchor Text Links:

Setting up Anchor Text links with Thrive Architect is super easy.

Just highlight the text you want to convert into Anchor Text, click on the link icon that appears in the floating toolbar, and then insert the URL you want that hyperlink to open in the dropdown box that appears:

How-To-Insert-Anchor-Text-Links

To insert Anchor Text in Thrive Architect, 1) highlight the text you want to become a hyperlink, 2) click the link icon in the editor bar that appears, 3) insert your hyperlink URL, 4) choose your "Open in new tab" and/or "No follow" behaviors, and 5) click the "Insert" button. 

Setting Up Image Links:

You can also turn your images into clickable hyperlinks in Thrive Architect.

To do so, just highlight the image you want to modify, click the Animation & Action tab in the Thrive editor sidebar, click on the link icon, and then enter the URL address you want to send your visitors to in the "Insert / edit hyperlink" box provided:

Image Linking Instructions

To turn your images into clickable hyperlinks, 1) highlight the image you want to modify, 2) click the Animation & Action tab in the Thrive editor sidebar, 3) click on the link icon, and 4) enter the URL address you want to send your visitors to in the "Insert / edit hyperlink" box provided. Don't forget to hit the "Apply" button followed by the page "Save Work" button!

Setting Up Content Box Links:

The way to create a Content Box Link is almost exactly like the Image Link setup.

First highlight the Content Box element you want to modify, click the Animation & Action tab in the Thrive editor sidebar, click on the link icon, and then enter the URL address you want to send your visitors to in the "Insert / edit hyperlink" box provided:

Content Box Link Instructions

To turn your content boxes into clickable hyperlinks, 1) highlight the Content Box element you want to modify, 2) click the Animation & Action tab in the Thrive editor sidebar, 3) click on the link icon, and 4) enter the URL address you want to send your visitors to in the "Insert / edit hyperlink" box provided. Don't forget to hit the "Apply" button followed by the page "Save Work" button!

Pro Tip

In most cases, it's a good idea to check the “Open in new tab” option if you’re ever linking to an external webpage. This will help prevent sending visitors away from your site with no clear way to return during any particular browser session.

To learn more about linking in Thrive Architect, check out our Thrive Knowledge Base article on it here.

An even more specialized form of internal linking you can use is known as Anchor Linking not to be confused with the Anchor Text links discussed above.

Anchor Links — also known as Jump Links — allow you to link to specific elements contained within posts and pages you have on your website:

Anchor-Link-Jump-Example

With Anchor Links, you can create hyperlinks that open at specific anchor points on your website.

For example, if you want to send a visitor to a product pricing table half way down one of your sales pages, the Anchor Link gives you the power to do that.

How To Create Anchor Links (a.k.a. Jump Links)

  1. Select the element you want to make into a link
  2. If it's a text element, choose "jumplink" from the link symbol dropdown in the text editing top bar. If it's another element go into the main options and click on the anchor icon in the link options.
  3. Click on "Select Target" this will put an orange frame around the content.
  4. Click on any element on the page to make it the target of your jumplink.
  5. Click on "Add Jumplink" to confirm your choice.

With those simple steps completed, a visitor who clicks on such Anchor Links will then be sent to the specific anchor point you made the target.

If you need a little more guidance, watch the video below.

Thrive Architect Hack #4: Hover Effects

Hover effects are an amazing way to make your designs pop or indicate to desktop readers that an element is clickable (tablet and mobile devices don’t use cursors so the hover effect isn’t applicable to them).

For example, when a cursor moves over a button, it can darken, lighten or change color completely to indicate that the design element should be clicked:

Button Hover Effect

You can use the Hover Effect feature in Thrive Architect to indicate that elements (like CTA buttons) are clickable.

You can also apply hover effects to images, like making them change from grayscale to full color when a cursor glides across them:

Image Hover Effect Example

You can also use the Hover Effect feature in Thrive Architect to make elements like your images more interactive and stylish... like changing an image from grayscale to full color on hover.

And because you can make entire Content Box elements clickable (see Hack #2 above), you can even apply hover effects to content boxes to make sure your visitors know such content boxes deserve a click:

Content Box Hover Example

You can also use the Hover Effect feature in Thrive Architect to make entire Content Box elements indicate that they are clickable.

How To Apply Hover Effects to Your Elements

To deploy this feature, first highlight the element you want to apply a hover effect to. Then click the “State” dropdown menu at the top of the Thrive editor sidebar and select “Hover”.

The Thrive editor window will then switch to the "Hover State" editing mode allowing you to set hover behaviors for the element you selected:

Hover Effect Instructions

To apply Hover Effects to your Thrive Architect elements, 1) highlight the element you want to modify, 2) click on the "State" dropdown menu at the top of the Thrive editor sidebar, and 3) click the "Hover" state option. Once you're done with your edits, you can return to Thrive editor's "Normal" state window by following the same process.

Once you're done adding your desired hover effects, you can return to the "Normal State" editor mode by selecting it from the same dropdown menu located at the top of the editor sidebar.

Pro Tip

Thrive Architect allows you to add hover animations to the following elements:

  • Buttons
  • Content Boxes
  • Background Sections
  • Images
  • Columns
  • Icons
  • Testimonials
  • Call to Action Boxes
  • Guarantee Boxes
  • Styled Boxes
  • Click to Tweet Boxes
  • Star Ratings
  • Content Form Input Sub-elements

Thrive Architect Hack #5: Advanced Typography Spacing

The written word is powerful. That’s why we designed Thrive Architect to give you immense design freedom when it comes to customizing your text.

Although you already know how to modify your inline Text elements in Thrive Architect, you may not know about the “Advanced” dropdown menu (contained at the bottom of the Typography sidebar tab) available within the following elements:

  • Content Boxes
  • Background Sections
  • Columns
Advanced Typography Tab Dropdown Menu

The "Advanced" Typography dropdown menu is located at the bottom of the tab for Content Boxes, Background Sections and Columns elements.

How To Use the Advanced Typography Feature

When you click this “Advanced” dropdown menu, you can modify the Paragraph, H1, H2 and H3 spacing settings within the element you’re modifying:

Advanced Typography Instructions

To access your Advanced Typography settings, 1) click on the Content Box, Background Section or Columns element you want to modify, 2) click on the Typography tab in the Thrive editor sidebar, and 3) click on the "Advanced" dropdown menu located at the bottom of the Typography tab.

Although your general text spacing is set by your WordPress theme or Landing Page as a whole, this feature allows you to override it and get different text spacing for specific elements, great for when you need to get a specific design look just right.

And with the line spacing options we now also made this option visible on the individual text element.

So you can very easily change the spacing for all the elements within a container (background section, content box or column) or you can click on the individual text element and use the Line Spacing option from the Main Options to set the line spacing of that element. 

Use Line Spacing on individual text elements.

Thrive Architect Hack #6: Animation & Action Settings

Some of the most interactive features you’ll find in Thrive Architect are found within the Animation & Action tab of the Thrive editor sidebar:

Animation & Action Tab

The Animation & Action Thrive editor sidebar tab gives you access to 3 action features: CSS Animations, Popups and Hyperlinks.

The options available to you in this tab can vary depending on the type of element you’re working on, but here are the 3 features you'll usually see available on most elements:

CSS Animations

A majority of the elements you’ll find in Thrive Architect (including Text elements) give you the ability to choose CSS Animations on your posts and pages:

CSS Animations are triggered when the content they are associated with scrolls into the viewport.

To do this, highlight the element you want to modify (say a Text, Image or Content Box element), click on the Animations & Actions tab, click on the CSS Animations icon (a circle that looks like it’s “in motion”), select the type of animation you want (e.g. Slide [in, from the] Top, Fade In, etc.), and click apply.

CSS Animation Feature Setup

The CSS Animations feature can be accessed by clicking on the "moving" circle icon in the Animation & Action Thrive editor sidebar tab.

If you tick the “Loop animation” check box, the animation will repeat every time your visitors scroll past that position on the page. If not, the animation will only trigger when first viewed and then stay locked on the page.

Pro Tip

Overdoing your animations is not recommended. Several elements flying across your page too frequently risks looking tacky to most visitors.

Popups

Many Thrive Architect elements also allow you to set popup lightboxes to trigger on either “Click” or “Comes into viewport” (i.e. the visitor scrolls past the element).

Thrive Architect Lightbox Popup Example GIF

The Animation & Action tab in the Thrive editor sidebar gives you the ability to setup popup lightboxes like the click triggered Thrive Architect Lightbox opt-in form you see here.

The Animation & Action tab Popup feature gives you 4 options including:

  1. Thrive Lightbox (a Thrive Architect feature)
  2. Thrive Leads “ThriveBox” (a Thrive Leads feature)
  3. Image
  4. Video
Popup Feature Setup

The Popup Feature gives you the option to open these four types of lightboxes either with a "Click" or "Comes into viewport" trigger.

To deploy one of the popup options, just highlight the Thrive editor element you’d like to modify, open the Animation & Action tab in the editor sidebar, and click the popup icon.

Then select either the “Click” or “Comes into viewport” option from the trigger dropdown menu, followed by selecting one of the 4 popup options discussed above.

If you want to open either a Thrive Lightbox or Thrive Leads ThriveBox through this popup feature, you’ll have to create one of these opt-in form types first.

Pro Tip

If you need help creating a Thrive Lightbox or Thrive Leads ThriveBox for your landing pages or blog posts, check out these articles to learn how to set one up for yourself:

Deploying popup lightboxes like these are a great way to not only make your landing pages more interactive, but create opt-in form conversion opportunities throughout your blog posts and landing pages.

Create Hyperlink

The “Create hyperlink” option allows you to turn virtually any element in Thrive Architect into a clickable hyperlink — not just buttons and text

Create Hyperlink Feature Setup

By clicking the link icon found in the Animation & Action Thrive editor sidebar, you can transform almost any element in Thrive Architect into a hyperlink.

To set this up, simply highlight the element you’d like to become a hyperlink, open the Animation & Action tab in the Thrive editor sidebar, input the URL you want to link to, and then select your desired “Open in a new tab” and “No follow” linking behaviors via the associated check boxes.

Thrive Architect Hack #7: Desktop, Tablet and Mobile Responsiveness

Did you know that you Thrive Architect gives you the power to display your design elements on certain screen sizes (e.g. Desktop), but then hide them on others (e.g. Tablet and Mobile)?

We call this feature “Responsiveness Editing” and can be super useful when designing landing pages where a particular design works great on desktop or tablet, but can’t be modified to look good on tablet or mobile. It's an important ​web design issue that has to be dealt with in order to keep a website appealing to all visitors.

When design situations like this occur, you can just hide elements on screen sizes where they’re “not working” — and even add new elements to show in the hidden element's place. Those new elements can be setup to show only on the screen sizes where they’re needed:

Screen Size Responsiveness Setup

The image here does not work well on the mobile version of the page. To hide the image on mobile, 1) click on the image element, 2) open the Responsiveness tab in the Thrive editor sidebar, and 3) toggle off the "Visible on" Mobile icon to hide it.

Hidden Image on Mobile View

With the Image element's Responsiveness set to show on Desktop and Tablet only, the previous image does not appear in the Mobile view.

How To Use the Hide/Display Element Responsiveness Feature

To use this feature, you highlight the element you want to edit, open the Responsiveness tab in the Thrive editor sidebar, and then toggle which screen sizes (Desktop, Tablet or Mobile) that you want it to be displayed on.

Pro Tip

Thrive Architect requires you to always have an element visible on at least one of the Desktop, Tablet and Mobile screen size options.

Of course, Thrive Architect also has a multiple screen size editor options you can toggle between at the bottom of the editor window (to switch between editing your page’s Desktop, Tablet or Mobile versions):

You can toggle your Thrive editor between Desktop, Tablet and Mobile via these icons at the bottom of the Thrive editor window.

So if you happen to be editing one of these screen size versions where an element is hidden, you can toggle the “Show all hidden elements” option in the Responsiveness tab of the Thrive editor sidebar to make your hidden elements appear for editing purposes.

Share Your Own Thrive Architect Hacks!

Now that you've seen some of our favorite, but perhaps lesser known Thrive Architect hacks, do you have some favorite features of your own?

What special Thrive Architect features have changed the way you build your landing pages? Maybe one of the hacks you read in this article triggered a thought you can share with other users.

Share your favorite Thrive Architect hacks with us in the comments below!

by Matt  April 24, 2020

58

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Nice set of little-known features. Regarding the anchor linking (Hack #3), it seems that the default is to position the selected link at the top of the page after the jump. However, if you have a header with your logo and menus, the link will fall behind the header.

    In other words, it always jumps showing the link at the top of the page, regardless the size of your header. This should be fixed, or let the user define the position of the link, for example 100 px top margin, or something similar.

    • Hi Javier,

      I’m not so clear what the use case issue is that you’re describing here. Can you take a screencast or make a little video of what you’re conveying to show us?

      • We are also having this issue. The jumplink is being hidden behind our header menu.

  • Here’s a suggestion for the responsiveness show/hide icons – use a tick or a cross on top of the icon. That way it will be easier to understand. Love all Thrive Architect options, but this one particular set of icons I’ve always had difficulty with in terms of which state of the icon is on or off. Does that make sense? I bet you’ve already had countless discussions on this, but sometimes a users point of view can get clarity – at least that’s my hope.

    • Yes Quentin, it’s great to have your “in-the-field” user perspective on this feature. I will pass your suggestion along to the development team to consider for some future update!

  • Excellent tutorial. I knew some of them, others are new to me. Having them all in one place is super helpful! Keep up the great work!

  • You can also set a Page event, It’s very useful, u can set a lightbox to pop on exit intent or within a time period on the page. Great product!

  • That was awesome, especially the Advanced typography piece. I was struggling with adjusting H1 and H2 settings. Now I know where to look. Thanks!

  • Great article, Matt! I especially like the advanced hover effects like using greyscale/color. Nice “extras” to add to polish a page.

    My favorite Thrive Architect hack is more CSS than Architect, but Architect makes it SO EASY!

    When deciding on font/style preferences for a page, I always apply the font size, color and weight to a Background Section and build my page from multiple background sections — I never build directly on the page ‘canvas’.

    This makes it especially simple if I want to build a landing page but I don’t want it to inherit the default settings from the theme.

    Quick question:
    If a site uses Thrive Leads, is there a reason to use ThriveBoxes?
    I’ve often felt like they are ‘duplicate functionality’ and I’m not really sure when to use one or the other.

    • Thanks for your comments Simon! I like the Background Section workflow you described to systematically build pages with font/style preferences that are different from your theme defaults.

      As for your question about Thrive Architect Lightboxes vs Thrive Leads ThriveBoxes, here’s how I suggest thinking about them:

      The Architect Lightboxes are for people who don’t have Thrive Leads so they have some minimum lead generation capacity on their site. If you have Thrive Leads, use the ThriveBox so you can maximize all the powerful features Thrive Leads gives you.

  • I did a video about 12 things that only Thrive Architect can do a while ago… There are some tricks there as well…

  • Love the detail and ‘pics-with-steps’ format used in this post. As usual a super post Matt. Thanks a mil and keep up the outstanding work!

  • This is all great info thanks! However, in regard to the Responsive Editing, this is a bit clunky and time consuming. If elements don’t work on mobile for instance, we then have to hide it for mobile and create a new element that works well. I think a better solution would be similar to the Elementor Plugin which allows you to create things once, and then edit for screen size. Maybe a feature update for the future 🙂 Cheers!
    Jordan

    • Thanks for your comment Jordan. I’m not the biggest Elementor user so I can’t comment on the Responsiveness Editing differences between Elementor and Thrive Architect yet, but sounds to me like the Elementor way would limit the design freedom available to you. Not every design that works for desktop is going to scale 1-to-1 to tablet and mobile so our Responsiveness Editing allows for more freedom to customize those different screen size versions of your pages.

  • Hey guys,

    it’d be neat to have a scroll effect when using anchors! I have a few anchor links on my page and when the user clicks, he immediately jumps to that part of the page. Sometimes the user gets confused, not even knowing they are still on the same page. If there was a scroll feature where you actively ‘fast-scroll’ to the specific element, that’d be nice. We have been doing this by adding custom CSS so far, but it’d be nice to have in the GUI

  • Thank you, thank you! There’s so much in TA it’s hard to know it all. Had no idea about #1 and appreciate the hint.

  • Hey Matt,
    Great article…as usual! All the hacks are incredibly useful to know!

    I don’t have a hack of my own, but was so glad to see how you did the content box links!

    I’ve imitated something similar on my website (like what you did with the medical doctor site in your recent article on segmentation), and i wasn’t sure how to make the whole “card” (ie, content box”) clickable! Very timely information! 😀

    Adding the “hover effect” only increases the visual cues that it’s a clickable element, so that’s “icing on the cake” IMO!

    The “responsive editing” capability is an incredible feature, even though I still haven’t mastered just how to put things in the right “order” (think ‘columns’) on mobile! 😉 Still experimenting! 😉

    • Thanks for all your comments Karen… glad to hear the hacks were timely for you! Sounds like your site is going to get some quick design wins this week.

      Yes, the Responsiveness Editing does take some practice to master, but once your workflow is set, getting your tablet and mobile pages looking fly usually goes pretty quick.

  • It would be nice if Thrive Themes had their own checkout/cart page that doesn’t cost an arm and a leg

  • Great article! Thank you.

    How long has paragraph spacing been around? I’ve been needing that one. LOL!

    The last bit of information I need about Architect has to do with “Layout and Position.”

    Since I know nothing about coding, perhaps I should stay away…

    But I don’t know what “inline” and “block” mean.

    And “float”… “Z-index”… “relative” vs “absolute” position…

    I mess around from time to time, but usually I see no changes so I meekly and cautiously change them back to default, fearing that I may be breaking something.

    Could you do another article, or suggest a resource for heavy Thrive Architect users like me with no coding knowledge?

    • Hey Michael,

      Cheers for the feedback. Great idea to create a resource post about this… we’ll definitely be doing that soon for you!

      Until then, here’s your cheat sheet for positioning your elements in Thrive Architect:

      Block: the default way stuff is positioned on a page. Each element is a rectangular block, usually runs the full available width unless otherwise defined. Add 2 things next to each other in the HTML code and they’ll appear on 2 separate rows, because each block occupies an entire row.

      Float: makes blocks “float” next to each other on the same row, if there’s enough space for both. Only works with left or right alignment. For example, if you right-align an element with a width of 300px and set it to float, it will slip next to elements above it, as long as there’s at least 300px of unoccupied space in that row.

      Inline: functions similarly to float, but also works to place elements inline with text. So, you can have a line of text which has a non-text element in it (kind of like this ⏹) and then more text. The “inline” element appears as if it’s part of the text.

      Z-index: the ordering of elements on the z-axis. That is the axis that goes from the screen towards your face. If 2 elements overlap (e.g. 2 boxes, with a negative bottom margin on the first one), the one further down on the page will be shown on top, by default. To override this order, you can set the position to “relative” and set a higher # z-index on the element you want to be shown on top.

      Relative position: you can move an element relative to its “real” position on the page, which everything else on the page ignores that move. If you have a block and you move it upwards by applying a negative top margin, everything below the block moves upwards as well. If you move it up using relative positioning, everything else on the page acts as if the block is still in its original position.

      Absolute position: you place an element by positioning it at a defined distance from one of the corners of its parent element. For example, you place it at the top right corner of its parent container and then move it by however many pixels you want in any direction from there. The key thing about absolute positioning is that the element “disappears” from the page, as far as all other elements are concerned. With relative position, all other elements on the page act as if the relative blocks didn’t move. With absolute positioning, all the other elements on the page act as if the absolutely positioned block doesn’t exist.

      • Wow! this is great, Matt! And so thorough! 😀

        I second the request for a resource post! CSS is soooo confusing! (…with visual examples, please — if that’s not too much to ask!)

        I followed everything you wrote above until you got to the “positioning” part…especially “absolute positioning!” 😮 ‘…the element disappears from the page…’ relative to the other objects ??? Yikes!

      • I’ll definitely keep this as a reference. This is great information.

        The concepts are still out of reach for me a little, but your description will be a great starting point for me to learn these.

  • thank you, Matt, really great hacks here, didn’t know about hack #3 jump linking. Great for quick navigation on the same page.

  • Hi Matt,
    Anchor links are great … but …
    a) Scrolling: like it has been said earlier in These comments, that would be mega helpful for s.o. navigating the site (though it has to be context-driven: if s.o. Comes from the Outside of the page it should NOT scroll.
    b) and worse: the anchor is at the BOTTOM of an element … who is to understand this? Is there Andy way we can
    1. Make it so it scrolls the elements TOP (so much easier to understand when building and especially EDITING Websites).
    2. Have an off-set for anchoring. I.e don’t start RIGHT below the menu, but – say – 10px less.
    How does this Sound?
    Best, Tim

  • Nice article Matt. I have been using Thrive Architect for years and almost using the features shared here. But, I haven’t pad much attention towards hover effects. Especially the rich-in media hover effects for images, icons or any element. Let me attempt that too. Thanks for digging the features of Thrive Architect deeper.

  • Hi Matt

    I had known about the jump link feature (thanks to a video by Shaun I think), but only when done on the same page.

    After reading this post I can now do this across pages. Much appreciated.

    Regards
    A Thrive Architect Fan indeed ☺

  • Holy Shit !!! I’m using Architect for months and I justed discover “Vertical Position Centering” option with this article…

    As a professional graphic designer I just want to say one thing : THIS IS THE BEST TOOL EVER !!

    Why this option is not in “Layout & Position” section” ? It’s not very logical, I never thought to look for this option in the “Main options” section…

    Nevermind, thanks a LOT !

  • Is there a way to create an anchor that points to a specific place such as text, image, content box on a different page or post on your site?

  • It was a very use full information on the Animation & Action tab Popup feature and also the Anchor Linking was very use full in pointing a specific place and with Vertical Position Centering gives many designs for various contents .

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >