free layer slider
I Am Megan.
Ui&UX designer.
Hobby runner.

I craft simple & clean design solutions for web & mobile. Want to see more? Take a look at my work.

instagram icon
twitter icon
dribbble icon
layer animation
Introducing my music app

Find new & trending music on your mobile. Hear the world’s music now. Rock on!

instagram icon
twitter icon
Adventure Web Project

You can add geotagged photosand notes to help guide others through your journey.


Hey! Got a project in your mind? Want to work with me? Feel free to shoot me an email or catch me on one of the social links below.

previous arrow
next arrow

Layer Slider

Description: If you need to show your work, list your projects and convince clients to hire your services, then this slider can help you a lot. It's important to make your online portfolio as impressive as possible, so we added beautiful background images, fonts and slow elegant animations.

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

Minimum version: 3.3.8


Image sliders are incredibly popular. You can see some kind of slider in almost every modern website because people love them for a good reason. With a nice layer slider, you can increase the visual appearance of the website. You might have heard the expression: a picture is worth a thousand words. However this is true, sometimes a picture isn’t enough to tell the whole story, you need text for that. You need to forge words to guide the visitor but nowadays, you can’t put these words on the picture with Photoshop or other image editors. That would give so many possibilities to achieve an undesirable result. Still, you want and need to tell a story and this is where layer slider comes in.

You might wonder what the main difference between a layer slider and the common image slider is. Well, the answer is both simple and complex. No single image tells the story as an image and some words do. Words make the image unique and being unique is a valid goal when you create your website. In fact, a visitor only remembers the special website encounters. Hence you want your website to be this special encounter.

Tell your story using layers in Smart Slider 3

You are the one who can tell your story the best. And if you want to tell it right, you express yourself with words. You can add these words to the slider using layers. What are the layers? To make it simple, layers are plain containers storing your content. Each layer has its own type of content you can display using it. This content makes all the difference when it comes to making the slider special. You can add caption, call to action button, or even longer text to your slider.

It’s possible to customize each layer you add to your WordPress layer slider. If you add textual layer, you can change the font family, color and size. It might be important to direct the visitor to a new page, so it’s possible to add a link to the layer. Furthermore, text layers can have background color and padding. If you add an image layer, change its alt text or even its title. You may create a lightbox from this image layer. Or use it as a link. Additionally, you can add custom CSS class and write custom CSS codes to any layer. This is especially useful if you are a developer or if you want a really unique look.

The most favored layers to make the slider special

Some people don’t need much more extra content but a nice caption. The easiest way to have a unique caption on your slide is to use the heading layer. You can customize this layer to match the other text on your site. The second most popular layer is the button layer. You may use it to make call to action buttons. People often use the image layer as well. It’s a common usage to upload a social icon and link this image to the social channel.

There are many more layers for you to use in Smart Slider 3. You can add a video as layer. Or your layer slider can have video background. You may create a contact form. Your possibilities to create your own content are endless.

A carefully chosen layer animation helps to tell your story

Everyone loves fancy transitions on their website. They help catch (and keep) the visitor’s attention for as long as possible. When you first create your sliders and add your content, everything stands still. Every layer is at the position where you placed it. And there isn’t any problem with layers that stand still. But you have lots of options to make them move. A nice little movement, such as layer animation, is one of the best tools for this. The layer animation makes your WordPress layer slider special. And visitors love seeing something special.

Layer animation helps you create really amazing sliders. The layer movement catches the visitor’s eye. For example, when an image floats from the right. Then a text fades in, which visitors also love. A pulsing call to action button is a great way to increase the click rate. Just don’t let the animation go too far. When each layer moves at the same time in a different way, it might backfire. Lots of things to focus on might confuse the visitor. And instead of staying and finding out your story, they leave. When it comes to animations, the less can be more.

Incoming animation is a fancy way to show a layer

The most popular layer animation is the incoming animation. It introduces the layer, so the visitor can see it when they need to. (As you can adjust the time when the layer animation occurs.) For example, three different layers can show up in sequence. Small animations like this make your layer slider unique. Incoming animations usually start right after the background animations have finished. Or even later if that is more desirable.

Layer slider - Incoming animation in Smart Slider 3
Layer Slider – incoming animation

Outgoing animation when the layer filled its purpose

They’re very much like the incoming animations. Usually outgoing animations play right after the incoming animation has finished. But they can play right before the slide switching or an event can trigger them. You can use the outgoing animations to hide a layer on the current slide. For example, the slide starts with a large logo of your company. It stays for a few second, and outgoing animation hides it then another layer shows up. For instance, this new layer contains your company details.

Continuous movement screams for attention

The loop animation is spectacular even if it’s not as popular as the incoming animation. The effect runs between the incoming and outgoing animation. For example, the layer fades in then starts pulsing. The pulsing continues until the outgoing animation happens. (For instance, when the slide changes.) The loop animation, just like the others offers many possibilities.

Managing the layer animation on the easy to use timeline

It’s hard to keep track of the layer animations when you can’t see them properly. Smart Slider 3 has a built-in timeline. It’s visual and easy to use. You can see the three layer animations with different colors. You can adjust the duration and delay of the animation. Clicking on the animation opens up its editor to quickly adjust it if needed.

The timeline has another great feature. It lets you copy and paste animations between different layers. For example, if you created a complex animation, you can quickly have it on different layers. So you don’t need to create the animations all over again. You can save time and effort at the same time.

Layer slider - manage your layer animations in an easy to use timeline
An easy to use timeline to manage layer animations.

Smart Slider 3 – a free layer slider

Not all layer sliders are free. As a matter of fact, lots of sliders don’t even make it possible to create layers, or not in their free version. Smart Slider 3 is the outstanding example. It’s not just a layer slider but it’s free to download as well although the layer animations are not part of the free package. If you plan to animate the layers, you should look into the pro version instead. You can even try it on our site before you buy it. Smart Slider 3 is available for WordPress and Joomla as well.

Designing a layer slider in Photoshop

If you are a designer or have used a powerful image editor, you know a thing or two about layers. When you design a website, you probably create it in Photoshop first. And there you have different layers for your content. Probably many layers, each containing a piece of the website. Before you would start creating the layer slider in Smart Slider 3, you can design it in Photoshop. Photoshop makes it easy to export all your layers as images. Just go to the File menu, and see the other options at Export then select Layers to files. Then you can drag the images to Smart Slider to upload them quickly.

Related pages

Similar Sliders -

Museum website landing pageCoffee website landing pageHow to create block with video background for WordPressCreate section with blocks and sliders