Slide 2
Projects
LATEST PROJECT
Luxury Cabin

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

Slide 2
Services
LATEST PROJECT
Our Services
Contracting

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

Designing

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

Constructing

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

Landscaping

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

Slide 3
Contact
FIND US
Contact Us
Address
Make A Visit

Street Name 22, Building 55
Brooklyn, NY USA

Email
Drop Us a Mail

info@møraxstudio.com
hello@møraxstudio.com

Phone
Give Us a Call

Office: +95707070
Architect: +95505050

Social
Follow us

Facebook Page
Twitter Page

Split Slider

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

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: 3.5.0.11

Tags:

Settings

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.

This slider example is a full page slider, so fills the available horizontal and vertical space of your browser. The slider doesn’t have controls, you can change slides with the links on the top menu, or with a mouse wheel.

Layers

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 easiest and fastest way of creating a split text effect is to use default positioning. 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.

This slider uses more kinds of layers: there are heading, text and button layers, there is an image layer in the middle of the slide. After each side switches there’s a second heading where you can see a big heading behind the layers. That’s actually a heading layer as well, added in Absolute position and moved behind all other layers.

Use the eye icon to hide the content in the slide editor
Use the eye icon to hide the content in the slide editor

Animations

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 layer animations you prefer, but a Top and a Bottom animation will look best.

Animations tab of the layer window
Animations tab of the layer window

Layout

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.

Static overlay

Responsive

Creating a responsive slider has never been easier thanks to Smart Slider 3’s default positioning. 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 absolute positioning. It lest you drag’n’drop your layers anywhere.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.8 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
99

Mobile

First Contentful Paint
1.1 s
Speed Index
2.3 s
Largest Contentful Paint
1.7 s
Time to Interactive
3 s
Total Blocking Time
60 ms
Cumulative Layout Shift
0

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 -

Full Page HotelPhoto App SliderFullpage Video BlockPortfolio