Yo Design Geeks! Check Out These New Thrive Architect Layout & Position Features

Matt   35

Noticed anything different about Thrive Architect lately?

That’s right, we recently updated its Layout & Position interface to give you more options and functionality when creating content for your Thrive Themes powered sites.

Want to get the full scoop on what’s changed and how it will help you to ship better content faster?

Watch the video above and read the post below to get a tutorial on all the latest Thrive Architect interface updates.


New Height & Width Setting Options in Layout & Position

Instead of having just a single slider option to set an element’s Maximum Width (which is what Thrive Architect had before), it now gives you the ability to set Fixed, Minimum and Maximum Widths and Heights.

The old Layout & Position interface.

The new Layout & Position interface.

What’s that mean?

Well, with the Fixed Width or Fixed Height settings, you can create shapes (like squares or circles) that maintain their size and shape no matter what screen size the element is displayed on. This means you can now avoid having a desktop view circle shape morph into an oval when shown on mobile sized screens.

Although you won’t end up using this feature every day, it opens up several new possibilities to create advanced shapes using Thrive Architect.

Check Out These Other Thrive Architect Feature Updates

In case you missed them, here's a few more Thrive Architect feature updates you may want to learn about to get the most from your Thrive Themes toolkit:

Alternatively, setting a Minimum and Maximum Width and Height for an element will force a shape not to shrink or blow up past your set values — even if there’s room to do so.

The new Width and Height settings also provide you with more units to choose from including:

  • Pixels (PX)
  • Percentages (%)
  • VW (a value of 1 VW is equal to 1% of the viewport width)
  • VH (a value of 1 VH is equal to 1% of the viewport height) 

Just click on the unit symbol to open up the dropdown menu of unit options available.

You can also set the value for your units by either clicking and typing numbers into the respective input area or by clicking and dragging your mouse up and down to increase or decrease the value respectively.

Uniform Content Box Design

In the past, it was a pain to achieve uniform looking content boxes when side-by-side in a column element — especially when the images and text elements contained in them weren’t exactly the same.

The old uneven content box problem...

Let’s say you were building a benefits and features section for a sales page...

If you had different amounts of text in each side-by-side feature/benefit box, then the bottoms of each box would produce a stair-step look to accommodate the text in each box and throw your nice uniform content box template design out the window.

But with the new Width and Height options, you can now set a Minimum Height setting for all your side-by-side content boxes to ensure they match the size of the tallest feature/benefit box:

Apply a minimum height to each of the content boxes in a column (based on the size of the tallest box) to make them appear even no matter what content they contain inside.

That’s a lot quicker — and easier — to setup than endlessly tweaking your text to achieve the specific design you were originally aiming for.

Create Fixed and Min & Max Shapes for Your Pages

Why is the ability to create such shapes so cool for web design?

Creating Fixed Shapes allows you to modify an element’s internal content without disturbing the shape itself. The shape will also maintain its properties no matter what screen size it’s displayed on.

A fixed shape (left image) vs. a min-max shape (right image). Notice how the fixed settings maintain the shape of the circle even when the image blows up past its edges. The min-max circle honors the max width setting but starts to extend its height (the minimum setting in this case) when the inner image grows past a certain point.

Alternatively, creating Min & Max Shapes allows the shape to distort itself depending on how its internal content is modified as well as what screen size it’s displayed on.

Depending on your particular design, these features allow you to quickly achieve what you need with very straightforward controls.

Now It’s Your Turn To Create Some Advanced Height & Width Designs

As you can tell from this post, these new Thrive Architect features are pretty geeky and probably won’t be tools you use in your usual day-to-day landing page work.

But for advanced designers — including our own Thrive Themes template design team — these features open up some cool design options that weren’t possible before. They also give you more options to tweak what your pages look like on the fly if you’re ever in a design pinch.

How do you like being able to control exactly what your element shapes look like in Thrive Architect using these new Layout & Position features? Let us know what you think of the new interface in the comments section below!

by Matt  January 3, 2019


Enjoyed this article ?

You might also like:

Leave a Comment

  • Nice to see you keep adding features to TA! As a non-designer who is designing landing pages, it is really useful to see what you can actually do with the plugin. Not being a web designer sometimes makes it hard to visualize certain aspects and know your way around, but these tutorial videos make it much easier.

    • Thank you, Michiel. I’m happy to hear that the tutorials are useful for you. It’s sometimes a difficult balance to strike between technical capability vs. usability of a feature.

  • LOVE these features! I have had the distorted shape problem on occasion! Problem solved! I am thrilled with the % feature for width as well – talk about making mobile-friendly easy! Thank you! Happy New Year to us all!

  • Hey Thrive Architect Team,

    This is super helpful as I’ve been wanting to solve those design issues of uneven widths and boxes that I’ve created.

    Thank for adding this feature to Thrive Architect.


  • FANTASTIC! I love this new feature.
    I actually get excited every time I see an email from ‘Thrive Themes’… and you never disappoint 🙂
    Awesome addition – Thank You

  • Super helpful new feature and tutorial how to use it. Your attention to detail and constant pursuit of excellence is why I love TT.
    Thx Shane and Team

  • Another great upgrade to Thrive Architect! 🙂

    I was struggling — and juggling 😉 LoL — with side-by-side text boxes, EXACTLY as you show in the first part of the video! Titles were not the same length and neither was the short descriptive copy in the boxes… so I was trying to edit the text to make the boxes all uniform! 😮

    (And it wasn’t working so my solution was to leave them with uneven bottom borders…)

    This will definitely solve that problem! YAY!

    Thanks again for making Thrive Membership the BEST value in the WP ecosystem! 🙂

  • I dig this! Would love to also get overflow options too (for when using absolute positioning and having things off the screen) and “fixed” too 😀

  • Yes, fiddling about adjusting text (and messing up the message) to ensure a uniform box height is not solved 🙂

  • Best invesment I made last year -membership with thrive themes. love what you do and appreciate it. Hope to see you coming up with membership plugin for the Apprentice.

  • Love the new functions…yeah! Y’all rock socks for sure. I do have a tangential question. I love the boxes you’re using for things like the “Check Out These Other Thrive Architect Feature Updates” box. I’m wanting to do something similar…suggestions? Post?

    Thanks bunches! Hugs&Blessings. MamaRed.

  • I am not a designer, still, I would like to make our staff & instructor images more ‘Instagram-like” in their look and consistency across our school’s pages. I’m looking forward to experimenting with this new feature. Thank you.

  • Great feature for uniform content box designs. We have been tweaking the text and spacing to try and achieve the same heights, this will make it so much easier.

    • Yes, this is exactly the kind of case we made this for. I had some frustrations like that before as well.

  • Thanks for providing more granularity in the sizing controls, Shane. Incidentally I thought that making an image extend beyond its containing circle is a very interesting effect.
    By the way, which screen editing software are you using?

    • Thanks for your comment!

      Screen editing? Do you mean screen recording? In that case, I’m using Camtasia. Loom is also great for screen recording.

  • Loving the geeky tweaks!!! I can really sense your enthusiasm for this Shane – love that you’re geeky too… hahaha 😉

    • Haha, you got me there! I’m happy that there are other geeks in the audience, to share my enthusiasm. 🙂

  • I’m still getting started – please please make it easier to change images and input the url link for the next page in the funnel. It is really difficult for a beginner to find these.

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