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.

The Photo Story is a full width image slider, you can easily use it on your photography page. Each slide has a background image which can be your photo, and you can link a story and navigate to your blog.

The slider uses the full width layout so it fills the horizontal area of the browser. When you switch a slide the next image will fade in. This fade animation is coming from the Main animation. You can set or change it in the Slider settings → Animations tab.

The slider doesn’t use any controls. The arrow that you can see on it are image layers, and are linked with link actions which you can navigate to the next or previous slides.

Layers

The slider uses basic and simple layers: headings, and images. They are ordered in rows and columns. You can find all of the layers in the layer list. You can fully customize them. These layers were added manually into the slider. If you want more than 3 slides, then you can change the “03” to “04” which you can easily do in the layer window.

The layers have important roles in the slider. They aren’t just content, but you can also navigate with them. With the 2 rows where the previous and next titles are you can navigate with link actions.

Animations

The best feature of this slider is the text animation on the big heading at the bottom. When you switch slides, the text will move with a nice animation. You can customize this animation if you click on the layer → go to the layer window → Content tab. Here you can find a text animation section, where you can reach the animation manager. You can set the modes where the text can move, the duration or the transform.

Layout

At first sight you might think the slider uses a complicated layout. There are a lot of rows and columns in each other. The layer list can help you to find out the structure. Also, you can open or close a row or column group with the small arrows near their name which you can make the layer list simple.

Responsive

The slider is fully responsive. 2 columns are hidden on mobile devices, so you can see only the arrow images. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. Since this slider doesn’t contain too many layers, then it will be small. With using paddings, you can make the height taller which you can set at the Slide settings.

Related Post: How to Create a Cool Text Animation

Related Post: How to Create Beautiful Responsive Image Slider?

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

When you think of sliders, you think of a section, displaying a piece of content that another content replaces after a given time. That’s because people love displaying autoplaying slideshows on their site. It lets the visitors know the section is a slider, and there are more slides to see.

Of course, the autoplay isn’t the only way to tell users there’s more content waiting for them. You can add navigation options to the slider, such as bullets and arrows. Arrows help browsing slide by slide, while bullets provide quick navigation to any slide. Additionally, bullets indicate the number of slides in the slider.

This template uses the most common type a slider can have. In Smart Slider, we call it Simple type, because it simply displays one slide at a time. The Boxed layout which the slider uses ensures that it always fits into the container you place it.

Layers

Each slide in the Lightbox slider contains three layes. One heading, that displays the caption of the slide, and two buttons. The first button opens a lightbox gallery, while the second points to the next slide in the slider.

Adding a lightbox in Smart Slider is easy. Select the layer where you want to click on to start the lightbox. Go to its Content tab, find the Link and click on the + sign, this will open the popup where you can configure the link options. Go to the Lightbox tab, and select the images you want to show. You can also select MP4 videos, or paste the link of YouTube or Vimeo videos. Additionally, you can display a page in the lightbox by writing its URL there.

Animations

The most obvious animation on the Lightbox slider is the Text animation the heading layer. The Text animation is a special effect, which allows you to introduce your text in an exciting way. You can animate the layer by lines, words or characters. It’s worth noting that the Text animation is only available at the heading layer. There’s also a layer animation that displays the buttons.

The other cook animation the Lightbox slider has is the Ken Burns effect. The Ken Burns effect is a slow zooming and panning effect that enhances the background images. It looks best with the Fade Main Animation, and that’s what this slider has.

Layout

The layout of the slider is quite simple, as it only has three layers. But it two of those layers are next to each other, which can be an interesting layout to create. By default when you add a layer, it can go above, below or between the previously added layers. To be able to place layers next to each other, you can use the Row structure.

First, add a new Row. By default it has three columns, so if you want to put more layers next to each other, make sure you add more columns. Once you have enough column for all your content, simply drag’n’drop the layers to the columns.

Responsive

Smart Slider is a responsive slider, so any content you create will look amazing on any devie you check it on. Despite this great responsive behavior, you’ll find lots of options to fine-tune the result. For example, you can adjust the font size for mobile and tablet. It’s useful to ensure the perfect look for smaller screens.

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

Related Post: Add Lightbox Slider to your WordPress site

The post Minimal Slider with Lightbox appeared first on Smart Slider 3 — WordPress Plugin.

The Interior slider group stays from 3 sections: there is a slider on the top, then a carousel slider comes, and finally there is a block. You can use this group as a landing page. In Smart Slider you can fully customize the sliders and the layers, so you can add more sliders to this group if you want. And if you publish the group, then the sliders will be under each other, so you don’t need to publish them one by one.

Layers

This slider group uses basic layers: headings, texts, buttons and image layers. The slider block has images which are in absolute position. You can use this positioning mode if you want to put layers above or below others.

Animations

If you check the slider block you can notice the moving images when you scroll up or down. These layers have a layer parallax, so they are moving if you scroll.

The Interior group is a nice looking and eye-catching landing page, because when it loads, the layers are coming in with nice layer animations, also the texts are coming in with a text animation. With using these animations you can make your page more professional, also they call the visitors attention.

Layout

The second slider in this group is a carousel. The carousel slider type is a little bit similar to the showcase slider type. The main difference between the two is that the WordPress Carousel slider has a pane where multiple slides can sit, and Smart Slider calculates the number of the slides which fits, and you can display only whole slides.

Responsive

The Interior group is fully responsive. If you check the page on smaller devices, you can see the texts are smaller, and there are layers which are hidden. With hiding a layer you can save space on the slide, and the important content will have enough space, so the visitors can focus on them.

Related Post: All You Need To Know About Carousel Slider Type

Related Post: How to Create Beautiful WordPress Landing Pages That Convert

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

It isn’t very hard to create a slider like this video block, yet as you see, it really gives a boost to your website’s look with the video in the background and the moving layers on it.

This is a block type slider. The block type isn’t really a slider type, but it’s rather the option, which will help you create not sliders, but blocks. So our Smart Slider doesn’t really give you an option to only create sliders, but you can actually create the content of your website with it, too.

Layers

The block contains only 4 layers: 2 headings, a button and an image layer. The image layer is a gif, so it moves continuously. The heading layer is special because there is a text animation on it, so the text will display char by char.

Animations

That scrolling effect you see on the layers is a layer parallax effect. This by default reacts to the cursor of your mouse, so you should change that at it’s settings to vertical scrolling. You can change it in the Animations tab of the Slider settings. After that every layer with parallax depth will go lower or higher based on the scrolling of your website.

Layout

There is a background video on this block. You can set or change this video at the Slide settings. Here you can choose a background image, too, and where the background video can’t play, the image will load as a fallback.

Responsive

When you check the video block on smaller views, you can see the image layer is hidden. You can hide layers in the Style tab of the layer window. Also, here you can set the device specific settings, like the text scale which you can make the font size smaller on mobile or tablet.

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

Related Post: How to Create a Cool Text Animation

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