Master Your Landing Page Designs with These 7 Thrive Architect Hacks
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.
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:
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):
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:
- Anchor Text (highlighted, clickable text that opens a hyperlink),
- Image Links (clickable images that open hyperlinks), and
- 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:
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:
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:
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.
Thrive Architect Hack #3: Anchor Linking (a.k.a. Jump Linking)
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:
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)
To set up an Anchor Link in Thrive Architect, you need to work backwards. Start by highlighting the element you want your visitor to arrive at. This element can be located anywhere on a page, even at the very end.
Once you've selected the destination element, toggle the HTML Attributes tab in the Thrive editor sidebar, and then enter any word you'd like in the “ID” box (e.g. “pricing"):
Once you save that modification, you now need to go back to the original hyperlink or button that your visitors will be clicking.
With that button or hyperlink selected, set up your Anchor Link by adding your destination URL followed by "/#ID-Name", matching the ID you chose in the last step. (e.g. https://your-hyperlink-url.com/#pricing).
With those simple steps completed, a visitor who clicks on such Anchor Links will then be sent to the specific anchor point you set up in the first step.
If your Jump Link destination is on the same page, you only need to input the "#ID-Name" in the hyperlink address box (e.g. "#pricing"). This is actually preferable to keep your Jump Link from breaking if you happen to change that page's URL slug:
It's only when your jump link sends visitors to a new page that you need to use the full URL followed by the "/#ID-name" (e.g. "https://pawcity.com/#pricing"):
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:
You can also apply hover effects to images, like making them change from grayscale to full color when a cursor glides across them:
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:
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:
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.
Thrive Architect allows you to add hover animations to the following elements:
- Content Boxes
- Background Sections
- 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
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:
Although your general text spacing is set by your 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.
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:
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:
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:
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.
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.
Overdoing your animations is not recommended. Several elements flying across your page too frequently risks looking tacky to most visitors.
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).
The Animation & Action tab Popup feature gives you 4 options including:
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.
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.
The “Create hyperlink” option allows you to turn virtually any element in Thrive Architect into a clickable hyperlink — not just buttons and text.
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.
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:
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.
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):
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!