Luxury Cabin

Lorem ipsum dolor sit amet, consectetu adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque.

Our Services

Lorem ipsum dolor sit amet, consectetu adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque.


Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.


Maecenas tempus, tellus eget condiment rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.


Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat .

Contact Us
Make A Visit

Street Name 22, Building 55
Brooklyn, NY USA

Drop Us a Mail

[email protected]ø
[email protected]ø

Give Us a Call

Office: +95707070
Architect: +95505050

Follow us

Facebook Page
Twitter Page


Split Slider

Description: The split slider effect is a modern way to present your slider content. It looks good on any kind of website or slider.

Premium: Gain access to all slider templates with a single purchase.

Minimum version:


Creating a modern and trendy site is quite challenging especially if you’re not a designer yourself. It’s just not easy to keep up with the latest design trends. There’s so many things that became popular very fast making it hard to choose the best new effect for your site. And when you finally do so, it’s possible that by the time you figure out how add it to your site, its not trendy anymore. Luckily we love to check what’s new in the designing world. And we love creating helpful sliders which you can use build a stunning website even more! Our latest favorite trend is the split slider effect, which looks amazing on any website. And Smart Slider can create a split slider in no time.

What is a split slider?

Basically a split slider is a slider which left and right side moves to the opposite direction. For instance, the left side moves downwards and the right side reveals itself from below. Of course, the two sides meet at the middle of the slider. The split slider effect is gorgeous and it’s not hard at all to set it up. But if you prefer our example you can always import it to your site and tweak it to your heart’s content. You can add more layers, change the colors and pictures or remove anything you don’t like.

How to create a split slider in Smart Slider 3?

Smart Slider 3 has all the tools which you can use to create any modern WordPress slider. You can use layers to add your content which help you tell your story. The most popular layers are images, texts and buttons, but you can add videos and mp3 audio as well. Besides the layers there are many effects you can choose from to enhance the user experience. For instance, you can use the parallax, Ken Burns or particle effect. The shape dividers are also great design elements you can take advantage of.

Creating a responsive slider has never been easier thanks to Smart Slider 3’s Content editing mode. It allows you to create your sliders as if you would be working with a page builder. The responsive result is amazing and it doesn’t take ages to achieve it. If you prefer the causal slide building experience, use Canvas mode. It lest you drag’n’drop your layers anywhere.

Slider menu creation using static slide

The split slider has a simple navigation menu at the top of it. This navigation menu allows the visitor to switch between the slides. Smart Slider 3 makes it super easy to create a menu like that without having to code. At each layer’s link you can select a special link called Go to slide where you can type which slide you would like to go to. The slider will handle the rest. Creating this menu on a static overlay will ensure that the same menu is visible over all other slides. So you don’t have to add it to each slide one by one.

Creating the amazing split slider effect

The easiest and fastest way of creating a split text effect is to use Content mode. You should add a row with two columns and add your content to each column. You can add text layers, images and buttons to both sides of the split slider. Once your content is ready it’s time to create the actual effect. For that you should select one of your columns, go to the Animation tab and pick the Top animation. Then select the other column and pick the Bottom animation. You can actually select any other animations you prefer, but a Top and a Bottom animation will look best.

Now the split text effect is ready to shine on your site. If you’ve examined out slider well, you’ve probably noticed something we haven’t discussed. After each slide switches there’s a second where you can see the slide title word behind the layers. That’s actually a layer as well, added in Canvas mode and moved behind all other layers. Oh, and there’s a Slide changing parallax as well.

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

Similar Sliders -

Top 5 ProductsAgencyProduct showcase landing page – Mobile appBackground animation for slides