Thrive Architect Preview: How to Create Vertical Split Layouts

Shane Melaugh   138

Today, you'll discover just how easy it will be to create stylish "vertical split" and full width layouts using the Thrive Architect plugin.


Vertical Split - Good Design or Fad?

If you've been following our work, you know that we're not ones to jump on fleeting design trends. For example none of our products include a slideshow feature, because no matter how popular those are, they are terrible for conversion rates.​

Vertical split layouts like these have become very popular in trendy webdesigns as well:​

(in case you're wondering: yes, all of these can be reproduced in Thrive Architect)

The question is: is this layout just a fancy design fad that people are copying because it's popular?

The answer, as far as I can tell, is "no". I can't find any evidence or data to suggest vertical split layouts generally lead to poor performance or that they make for a poor user experience.

And the layout has at least one major advantage, from a conversion perspective: it allows you to show off an attractive, large image, while still prominently displaying a headline and copy at the top of the page.​ Because of this, I favor the vertical split layout over the "hero image" layout, in which the image often dominates to the detriment of copy.

The Crux: Small Screens

If there's one issue with this layout, it's mobile responsiveness. We've made editing for mobile devices a cornerstone feature in Thrive Architect and you can see it in action in this video.​

When using a layout like this, you will always need to create an alternative layout for small (smartphone) screens and often also for medium (tablet) screens.

Using columns like I demonstrated in the video, will mean that your two screen halves automatically stack on top of each other on small screens. You'll still have to make some adjustments for it to look perfect, but Thrive Architect will do most of the work for you.​

Here's an example of what you can make a split screen layout look like, on different screen sizes. This isn't the only option, just the one I opted for, in this case:

Bonus: Full Width Sections

Because we were asked about it a lot, I also showed the "full width" feature for background sections. With Thrive Architect, you'll be able to make sections span the entire screen width, no matter which theme you are using. You can even make the content inside those sections span the full width of the screen as well.

I hope you enjoyed this quick tutorial!

If you have any questions or requests for other previews and tutorials, let me know by leaving a comment.​


by Shane Melaugh  August 18, 2017


Enjoyed this article ?

You might also like:

Leave a Comment

  • Fantastic! I can’t wait for Aug 29. In fact, I’ve been checking my member area to see if there is perhaps an early release for members 🙂

    Only 11 days to go…

    • We may add a feature like this in the future, yes. It’s definitely not at the top of the list of features we want to deliver (which includes A/B testing for landing pages, among other things).

  • Hey Shane,

    Wow! I’ve been doing this with custom coding and a little bit of HTML/CSS and now it’s this easy for Thrive Architect?

    I’m so excited to get hands on this. And loving those vertical design examples as well. 🙂

    Keep them coming!

    • It’s going to be great, Ryan! Definitely a lot less need (if any) for custom HTML/CSS with this one.

  • I just finished a building a Recommended Products resource page very similar to the one on the Active Growth site and it is PAINFUL using TCB right now knowing this is coming. Time needs to move faster!

  • Every time I see these videos, what blows me away the most is the intuitiveness of Thrive Architect. Even without the new features, that alone is worth the price of admission. You guys simply overdelivered on this one — thank you!

    • Thank you for your comment, Ayomide! We’ve poured an enormous amount of work into making Thrive Architect as “ergonomic” as possible. After a short period of getting used to it, it’s really amazing. I’m glad to know that you’re already seeing this in our videos.

  • Great addition. I do have one desire. I wish it was easier to make my home page layout that I just made for a client. There are a couple of things that I’m cleaning up, so please understand ‘I know they’re there’.

    The main pain is putting images to the left of text and having the text not separate all the way across the page.
    The other is making wrap around text that wraps around the images.

    If you cold make this type of a home page layout easier I would appreciate it.

    • Hi Patrick,

      I generally recommend using column layouts for image + text combinations, as it tends to work better for different responsive sizes. However, in Thrive Architect, you can also make elements “float” as shown in this preview video. With this feature, you can make text wrap around images.

  • Great way to approach slowly the learning of what we are going to use. Having an overview of what we could to get before “How to“ tutorials is much more valuable to learn. Thanx Shane. 

  • The capabilities of Architect look great (assuming the conversions of existing TCB to new builder go as well as hoping ;>), but am NOT a fan of having to maintain multiple layouts for multiple devices. So while split screen looks nice on a laptop, would not recommend a layout that requires pre-load code to ‘detect’ the screen type. Know from experience, detections tend to fail, especially when users are running different browsers on larger devices. I have the large format ipad Pro, and half the sites using detection never get it right. As a developer/software engineer, there is no code that gets them all right all the time. Too many different browsers on too many different platforms and too many different OS types and versions running both! 🙂

    • Hello Joe,

      We have a video coming out about the transition from TCB to Architect. I think you’ll be pleasantly surprised.

      As for devices: we don’t run a client side script to detect devices or anything like that. The distinction is made purely based on the width of the viewport. This doesn’t slow down page loads and it’s pretty fail safe. It also means that, for example, if someone is viewing your page on a desktop device, but in a small browser window, the responsiveness will still work. It doesn’t matter what device someone’s on, only how much space there is in the viewport that your page is actually being loaded in. 🙂

      Also, the three device sizes we use a based on “desktop”, “tablet” and “phone” and that’s a useful way to think about device sizes. But the reality is that every conceivable screen dimension exists and sites have to look good on (almost) all of them. We’ve built our responsive features to ensure this.

  • Great sruff! Please continue to share it. I’m crossing the days on my calendar to get to the 29th.

    Thank you Shane, and thanks to the whole team. Great minds = Great products.

  • Shane,

    Absolutely love how easy it is to do the split layout. I’m so excited to get my hands on Thrive Architect! I’m holding off on starting a couple of new websites until you guys finish—no pressure! 😉

    • We’re working full speed to get this thin ready for release. I think it will be worth the wait, once you have it.

  • Very cool – and best of all is the way we can customize tablet and mobile views – right in the fecking editor!!! Yes yes yes yes!

  • This “waiting” is on par with “waiting” for the next season of Game of Thrones….”Soon our watch will end”…and not winter, but, “Spring is coming!”

    • We can’t wait to get it ready for release, either. We’re working full speed ahead to make this possible!

  • Will you be adding the ability to put 360 degree spherical images that a person can intract with as header images on pages and posts

  • Just curious what happens to text when the content in a split screen gets resized for a larger screen size – does the text increase by percentage or point size or not at all?

    • Text doesn’t resize automatically, but you can set it to scale to different sizes, using the responsive editing feature.

    • Yes, you can apply a fixed background image inside one of the split sections or as a background behind the entire split layout.

  • I love it! I tried to do this with Thrive Builder but could never get it to look exactly right on mobile or certain size screens. This should solve all of this, right?

  • Shane – it’s just awesome what you all are doing – it makes me realize that you are probably the best software company on the planet! Can’t wait for the arrival. Also wondering if you could give a quick demo on how header adjustment are going to work in Architect – assuming that all of what we are seeing is going to be able to be applied to headers and footers if we wish!

    • Thank you very much for your praise, Craig!

      You can construct a page header any way you want, using Thrive Architect on a landing page. You can’t do anything with your theme’s header yet, though.

      We know how important headers are to our customers, so we have a big “header update” on the roadmap, for Thrive Architect. 🙂

  • Hello! Question: How do I remove the caps from my H1 header (even the H2, H3, and H4? I want the H1 for SEO purposes, but its really distracting in all caps. Is this possible to do with a click of a button? Will it be an option with the new update? I have the latest version of Thrive Themes Content Builder. Thank you.

    • You can choose this in the font settings in Thrive Architect, yes. It can happen that a theme has a setting that overrides the one from Thrive Architect, but in that case, you can let us know and we’ll see what we can do.

  • Is it possible to change the inline content that will display to users based on their viewing device? In particular, I would like some way to show data in html tables to desktop viewers but compress those tables into a styled list for mobile viewers, since tables display poorly on mobile. Is there any way to do this with Thrive Architect?

    • You can do that with the show/hide feature, yes. You can show or hide any amount of content from the different device sizes, so you can control exactly what is shown on what device size.

  • On mobile responsiveness. Rather than stacking columns, is it possible for Thrive Architect to create/support an alternative mobile repsonsive layout? ..say one image with text over?

    …if not this would be a powerful addition.

    • You can switch the stacking order and you can hide all the column content on mobile and show something else instead, yes.

  • Seems this feature has been available in Beaver Builder for quite some time. Beaver Builder’s support has been growing. And now with the Beaver Thrmer plugin, you can edit WP header and footer for archive pages too. Then there is the growing suppprt for Beaver Builder and other well known products like Woo Commerce, Tribe Events Calendar and Genesis to name a few.

    My question to you is, why would I switch? What can Archtect offer that is not already available in the most popular WP page builder on the planet?

    I should also add that I am an agency subscriber to Thrive products, yet I still have always preferred Beaver Builder over TCB.

    • Hi Jordan,

      That depends a lot on how much your time is worth to you. The differences between BB and Thrive Architect are too many to name, but one that stands out to me is the speed with which you can build things. Thrive Architect is so much faster, I think you’d have to be some kind of a masochist to switch from Thrive Architect to BB. It also creates bloatier code and there’s a ton of stuff I couldn’t do in BB in my latest test. Beaver Builder was a major reason why I had to change the page layout for my comparison test between the builders, because there are so many elements it doesn’t have, that other builders have.

      Also, it’s definitely not the most popular builder for WordPress. Not that it really matters, but while I don’t mind mentions of our competitors on the site, we definitely can’t stand for false advertising like that. Depending on how you count, either Visual Composer or Divi are the most popular. Each is a bit of a trainwreck in its own way, so I wouldn’t go with popularity in choosing plugins.

      I think the most important difference between Thrive Architect and other visual editors is in our focus: we build for business websites and focused on conversions. That’s the central reason we do anything. A split screen layout like this is a nice bonus that you can also do with Thrive Architect, but the main advantages are that you can rapidly build out highly conversion focused pages and it comes with (almost) all the conversion elements you could think of, including lead generation forms that connect to all the leading email marketing services.

  • Shane,

    Thrive Architect looks so cool!!! I am waiting until it is released before building another site! 🙂

    This is completely unrelated to Thrive Architect, but I keep forgetting to ask…
    Is your mic attached to your laptop? It looks like it is in the videos. And if it is, did it come with whatever is needed to attach it? 🙂


    • For these screencast type videos, I connect the mic to the computer via USB cable, yes. And I’m pretty sure the cable came with the mic.

  • ONE MORE WEEK!!!!!

    Question: how platform-aware is Architect? Will it be basically perfect whether mobile, dt, or tablet?

    • Hi John,

      The responsiveness rules are based on the width of the device or window that the page is being viewed in. It’s very reliable, without needing to “know” whether someone’s on a phone or some other device.

  • Oh Jeez, I’ve been trying to do this since I bought Thrive Themes! So it looks as if I won’t have to struggle any more. Thank you for this great design addition. I noticed that you have added a ‘layout & position’ thumbnail; truly excellent—no more guessing. Also noticed you are using term ‘typography’ and I’m hoping this allows for kerning adjustments along with other type refinements. Lastly I’m hoping the Architect will give the opportunity to save a palette of custom colors. I’m excited about this addition.

  • If I purchase Thrive Builder now can I upgrade to Architect on the 29th at no additional cost? I need to get a site up and running before the August 29th launch date

  • Hi Shane. I’ve wanted to ask this question since the 1st preview video of Thrive Architect. One of my pet peeves is trying to fully duplicate a page layout and then updating the content for the new page. I can export the page as a landing page but when I subsequently import it for a new page, it imports a new set of images. Do this a few times for different page layouts on a site and you have a mess of duplicate images in your media library. Will there be any features for image management or page duplication which will address this problem? I know I can use templates for individual sections but that can get labour intensive on a complex page.

    • Hi Steve,

      When you export a landing page, it includes all images since the export/import feature is made for applying templates across to different sites. For use on the same site, it’s better to use the “save template” feature. This will save the template locally and won’t duplicate images when you load the saved template later.

  • Hey Shane,

    Is the new theme you’re dropping going to be better than Focus for Amazon affiliate sites?

    Not sure whether to wait or not.

  • Why everybody here is waiting for the release? I thought it was released yesterday 22.8.2017. I am using it now and starting to like the new features. Well done Shane and gang!

    • Hello Laila,

      If you have the previous version already installed, you can go to “Plugins” in your wp-admin dashboard, find “Thrive Visual Editor” and click on “update”. This will upgrade the plugin to Thrive Architect.

      If you don’t have it installed yet, you can log in to your member dashboard here and follow this tutorial.

    • Thanks for your comment, CJ. I hope it’s not too fast to follow. I’m always a bit torn between going as fast as possible to show off the speed of Thrive Architect and going slow to explain things more clearly.

  • its nice to have like this website who in turn to be more practical to study your design. i am family man who wants to learn basic in building website. more power Mr. Shane Melaugh.

  • Thanks for this Guide Shane, I learn a lot of info from you here and in active growth too, I hope I can get a legendary mentor like you someday. Osama, Egypt.

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