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 tutorial!
If you have any questions or requests for other previews and tutorials, let me know by leaving a comment.