You’re probably familiar with regular ol’ sliders that move from side to side. But what about vertical sliders? They’re sliders that slider from top to bottom, right?
Well, sort of. Vertical sliders, also known as vertical transitions, have become a popular design trend in recent years as designed look for new ways to display content. From fullwidth and fullscreen vertical page slides to split-screen shifts complete with microinteractions, vertical sliders can add visual oomph to an otherwise boring, static website.
In this post, I’ll introduce you to vertical sliders and show you some pretty cool examples that you can create with the free Smart Slider 3 plugin — all without touching jQuery or JavaScript.
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
So what exactly is a vertical slider? And how do they move?
It can be difficult at first to understand wrap your head around what a vertical slider is with just words, it’s something you have to see, and we’ll go through some examples below.
1. Simple Vertical Slider Transitions
Fixed to bottom
Parallax to bottom
Curtain to top
Horizontal spin to bottom
Spinning cuboid to bottom
You might be thinking they’re a type of carousel with images that are displayed from top to bottom and, yes, that’s one type of vertical slideshow.
With Smart Slider 3, for example, you can choose a variety of different vertical transitions, including:
When you take that simple idea and then take it to the next level, you get an impressive fullsize page image slider that changes slides as you scroll down the page. It’s a visually stunning way to display sections of your page in an engaging way that will keep your visitors on the page, helping to reduce your bounce rate.
What’s more, with Smart Slider 3 you can add multiple layers to your slides, including text, headers, buttons and navigation indicators (those three dots to the right of the slider above).
If you regularly publish content and you’re looking for a new way to design your blog, why not use a vertical slideshow? With a WordPress plugin that enables you to dynamically generate content, such as Smart Slider 3, you can pull fresh directly content from sources like your WordPress blog, YouTube, and more.
That means you can great your dynamic slider once and it will always automatically display your latest posts. No more manually updating slides!
One of the more impressive types of vertical slider is the split-screen transition. As the user scrolls down the page, each side of the screen moves in independent sections in opposite directions, sliding to revealing new content.
Using this kind of split-vertical web design is simple to implement with Smart Slider 3, and could give your website the visual boost it needs to engage visitors.
Looking for a unique way to design the landing page for your new app? Using fullscreen vertical page transitions, you can keep the focus on your most important content and stop visitors from mindlessly scrolling down the page.
When visitors can only scroll one section at a time, it enables you to highlight certain content and guide visitors to click on call-to-action buttons. Plus, it looks damn cool, right?
Vertical sliders can be as simple or as complex in design as you want them to be. With Smart Slider 3, you can add as many layers and elements as you want to your individual slides, which can help you create engaging sliders that look less like sliders and more like dynamic pages.
Take the Conference Group slider above, for example. It features a header and text, together with buttons, thumbnail navigations, background images with a subtle Ken Burns effect, along with sections for conference information as a further CTA for booking your seat.
Get on board! Join our 142,416 subscribers!
Get our latest news, tutorials, guides, tips & deals delivered to your inbox.
No spam. No charge. Just curated emails.
Wrapping Up
And there you have it, a quick guide to vertical sliders. Whether you’re thinking about adding vertical transitions to your WordPress website or landing page, a vertical slider can add an interactive element to your site that is more engaging and eye-catching than a simple static site.
Ready to start playing with vertical sliders? With Smart Slider 3, you can create all of the examples in this post. If you have any questions about how to create vertical sliding transitions, leave a comment below!
Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.
