Thrive Architect Preview: How to Create Vertical Split Layouts

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 preview of what's to come!

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


Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Rob says:

    Cant wait for this! How about video backgrounds that are the full width or height?

  • John E says:

    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…

  • Kevin Barham says:

    Absolutely brilliant – Can’t wait!! When do we get access, Shane?

  • Shaiq Uddin says:

    Nice layout. Would surely give Thrive Architect a try.

  • Tola says:

    This is totally cool
    The ease of doing it looks so seamless
    You guys are making me wish August 29 is tomorrow

  • Leo Emery says:

    Each sneak peek just gets me more excited for your new thrive architect. Aug 29th the new Christmas morning – lol

  • Amazing! Can’t wait to get my hands on the new plugin. Stop teasing already ;)

    • Shane Melaugh says:

      The wait is almost over, Alex! But I’m glad to know you’re as excited about this as we are. :)

  • Barbara says:

    Shane. This is brilliant and so easy and quick to apply. I can’t wait to start using this feature on my website.

  • Viktor says:

    love it, love it, love it. Can not wait.

  • Chett Coombs says:

    I left the TCB because I needed to make a pricing page with a toggled effect, similar to your own pricing page here: I reached out to support and was told that it’s not possible with TCB and they you guys custom built it and would not be adding it to the TCB. I feel like most subscription based companies need something like this. Will the new builder have that functionality?

    • Shane Melaugh says:

      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).

  • Toby says:

    That’s incredible. Really excited about the launch this month.

  • Ryan says:

    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!

    • Shane Melaugh says:

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

  • Kronda says:

    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!

  • Ayomide A says:

    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!

    • Shane Melaugh says:

      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.

  • Tina Cook says:

    Amazing, can’t wait for Architect’s release. Looks magical!

  • Sean says:

    Great work! Excited about the August 29 release!!

  • Patrick says:

    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.

    • Shane Melaugh says:

      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.

  • Donald says:

    Looking GREAT!! cant wait for the release!

  • stephane says:

    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. 

  • Claudemir says:

    Awesome, I’m glad I will be able to use those features.

  • Joe C says:

    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! :-)

    • Shane Melaugh says:

      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.

  • denis d says:

    Looks great Shane. Can’t wait for it to be done. Thank you, buddy!

  • Al Simon says:

    Looks great Shane. Could you please add live links to those images to be able to see the examples in context.
    I found this Best Practices for Split Screen Design article useful so thought I’d share if that’s okay…

  • Chris says:

    Can you drag to resize the columns, or are we restricted to the predefined column layouts (50/50, 4 column etc.)?

  • 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! ;)

    • Shane Melaugh says:

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

  • Mark says:

    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!

  • Kenbo says:

    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!”

  • Sarge says:

    Looks great

  • Well Done Shane. Always surprising us with new and innovative ideas. I am really looking forward to giving this a run.

  • Miles Austin says:

    The anticipation is killing me! Full width sections and full width videos- better than Christmas time for adults .

  • Chris H says:

    Look forward to getting my hands on this.

  • Lee Whistler says:

    Are any images loaded in Architect? I am lacking in much knowledge of graphics.

  • Elley C says:

    I cannot wait for the release of Thrive Architect! Busting to get started!

    • Shane Melaugh says:

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

  • Angelito says:

    Can you drag the background image around inside the column to show just a specific part of the image?

  • Christian H says:

    The smart features keep coming. Way to build the anticipation!

  • Mike says:

    You guys are seriously the best!! I will always be a customer, nothing is even close to you!!!

  • kose says:

    Can we also make a parallax effect on images?

  • Greg says:

    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

  • Mayo says:

    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?

    • Shane Melaugh says:

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

  • Renate Lyse says:

    Is it possible to have a fixed background on scroll – with vertical split layout moving infront of the background?

    • Shane Melaugh says:

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

  • Irena S says:

    Another fantastic update. I love it! :)

  • Betsy Modgli says:

    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?

  • Nick says:

    Will the price of Thrive Architect remain the same as TCB ?

  • Craig B says:

    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!

    • Shane Melaugh says:

      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. :)

  • Treasure says:

    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.

    • Shane Melaugh says:

      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.

  • Anthony B says:

    Oh, please just release it already….

  • Curtis says:

    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?

    • Shane Melaugh says:

      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.

  • Mark S says:

    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.

    • Shane Melaugh says:

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

  • Ludolf says:

    Great, that´s what I need!

  • Cathy S says:

    So very wowed! Can’t wait, Shane!

  • Jordan says:

    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.

    • Shane Melaugh says:

      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.

  • Suzanne says:


    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? :-)


    • Shane Melaugh says:

      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.

  • John says:

    ONE MORE WEEK!!!!!

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

    • Shane Melaugh says:

      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.

  • Bart R. W says:

    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.

  • Nick R says:

    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

  • Steve H says:

    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.

    • Shane Melaugh says:

      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.

  • Kuteo says:

    How to insert an image with left align of a paragraph?
    It is placed in new column automatically.

  • Jamie F says:

    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.

  • Carlos says:

    Hi Shane,

    Very thorough explanation and answers the concern, thank you.

    How about when changing themes? Would the layout be affected also?

  • Kuteo says:

    Thank you, Shane Melaugh,
    Could you please show me which tutorial video to make a text wrap around the image?

  • Albert Tan says:

    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!

  • Keith says:

    Have a bug. On adding a Revolution Slider in the WordPress Content element I get an error message come up and the form won’t display in the front end. Screenshot video of problem here:

  • Laila says:

    How can I upgrade to Thrive Architect?

    • Shane Melaugh says:

      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.

  • CJ says:

    You move so fast! I have to watch the videos four, five damn times to do what you do. Love it!

    • Shane Melaugh says:

      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.

  • Scott W says:

    Looks great, stuggling to get the columns to appear on my architect.

  • >

    Join Thrive University (it's FREE!)