Settings

With a Layer slider you can cheer up the visual appearance of your website. You can tell your story by using layers like a heading or text.

This slider stays from 4 slides, and every slide has a different background color which makes your website colorful. It is important to keep the harmony between the layers and the background, the layers should be legible and clearly visible like in this Layer slider.

A navigation is also important on a slider, in this sample you can see the number type of bullets where the visitors will see how many slides there are, and can switch them. What is more, you can see arrows too, but the carousel mode is turned off here, so you can’t switch from the first slide to the last one, you can navigate only in one way.

Layers

The goal of this sample is to catch the visitors’ attention and with the buttons and icons call to an action. In this sample slider the animated heading layer is the first what you will see, which keeps up interest on your website. The animated heading changes more words with a nice animation, and the visitors will focus on that. In this example, the typewriter effect is used, but you can choose from more animations at the layer window.

The last slide is special where the HTML layer is used, which contains a contact form, and gets the visitor to do something. I can suggest the HTML layer for developers who want more functionality in their slider. In the background video is played, and with a video slider and with the animations your slider will come alive and be powerful.

Animations

Everyone loves fancy transitions on their website and layer animation helps you create really amazing sliders. The layer movement catches the visitors’ eye like in this example and that makes the slider complete. Use the timeline where you can set the duration and the delay of the animation, and can see how they work together.

Layout

Go to the second slide, and you will see this slide has a special layout. There is a basic row with 2 columns, so you can see the content on the left side, and images on the right. There are 3 images, but if you check it you will notice that 2 images are under the third thanks for the absolute positioning.

Responsive

Smart Slider has more responsive settings which you can make a fully responsive slider. With the Text scale you can make the text lower on different devices, also you are able to hide layers. If you have too much content on your slide, it can make your whole slider bigger. So take care of the sizes, and hide layers if it is needed.

Related Post: Why do You Need a Video Slider on Your Website?

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

The post Layer Slider appeared first on Smart Slider 3 — WordPress Plugin.

Settings

Full page sliders are popular in web design, they fill the whole screen and catch the visitors’ attention. With Smart Slider 3 Pro you can easily create a full page slider and you can import this sample from the Template Library. After that you can customize it, change the background and the texts, insert another layer or delete a layer so actually you can change everything that you want.

At the bottom of the slider you can see a rectangle shape divider which makes the illusion that the white row at the bottom is outside of the slider. But it isn’t, the shape divider makes you feel that way which can be a useful option.

You can navigate to other slides with a mouse drag or with the actions on the previous and next layers. Besides that, there is the slider autoplay turned on which can be seen because of the autoplay indicator at the top right corner, so without doing anything, the slides will automatically switch, too.

Layers

This slider is a good example of how useful the default positioning and using a structure can be. You can see a lot of different layer types on this slider: heading layer, text layer, button layer – with a nice hover effect, image layer and a counter layer which shows the price with a nice counter animation.

Animations

As you can see the background is moving a bit, this zooming effect is the Ken Burns effect. This effect is simple, elegant and works on any kind of images, but you can customize its speed, strength and the animation as well.

The speciality of this slider is the hover effect with the evens. If you hover over the Next or the Previous layer, another image will appear.

Layout

This slider is a full page slider, so fills the available horizontal and vertical space of your browser. The slider has special structure: there are more rows and columns used, which are bundled. In Smart Slider you can put a row into a column, which you can create cool layouts like this. There are 2 main rows under each other.

The top row contains the textual elements and the 4 boxes, and the bottom row is an informative row with a white background and a nice shadow. The top row is stretched, so it fills the available space on the top, and because of that the bottom row will be on the bottom of the slider with the background of a shape divider.

Responsive

The full page hotel slider is fully responsive and looks good on any device. If you check your slider on mobile, you can notice that the texts are smaller, and the bottom white row is hidden. With hiding a layer we can make the slider smaller on mobile.

Related Post: Use the Popular Ken Burns Effect on your Slider

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

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

The post Full Page Hotel appeared first on Smart Slider 3 — WordPress Plugin.