The Cosmetics slider is a modern looking full page slider, which is perfect to display your products. Full page sliders fill the screen both horizontally and vertically. They’re super popular nowadays, because they look stunning on the large monitors that people use.

There’s a white border around the slider, which gives a nice frame to the slider. You can adjust the border at the General tab, under Slider Design.

Layers

You can find the same layers on each slide of the Cosmetics slider. There are two heading layers, one for the main headline and another for the price. There’s a text layer to display the description of the product. Also, you can find a nice CTA button the visitors can use to buy the product.

Every slide has four image box layers. These are special kind of layers, which can display an image or icon, a heading and a description. We used this layer to display the list with the check marks.

Animations

There are interesting animations on the Cosmetics slider. The first animation you’ll see is the layer animation, that introduces the row to the slide. It’s a simple left move animation, but it looks a lot more special because of the masking. The masking is a special kind of animation that makes the layer animation play inside the layer’s boundaries. In other words, the layer animation is only visible when it’s inside the current layer’s area.

The other animation is the Background animation what you’ll see when you switch slides. It’s a parallax-like effect, because it moves the two slide background images at the same time, just with a different speed. As a result, when you switch to the next slide, the next slide moves in fast and covers the current slide.

Layout

The content is placed to the bottom left corner of the slide, which makes the layout trendy. Creating such layout is very simple. First, you need to set a maximum width to the Content layer. Second, align it to the left. Finally, change the vertical align to bottom so the content will appear in the bottom of the slide.

The other cool layouting the Cosmetics slider is the usage of the row and columns which contain the layers. The white and cream colored boxes are columns of the same row. By default the columns of the row are next to each other, but using the Wrap after option on the row it’s possible to display them below each other.

Responsive

Smart Slider 3 is a responsive slider, and offers many tools to fine-tune the look of your slides on mobile. The two most useful tools are the font resizer, and the ability to hide layers on different devices. Additionally, the padding and margin values what you can use to create distance between the layers can be changed on tablet and mobile devices.

At the Cosmetics slider we hid the image box layers on mobile to reduce the height of the slide. Also, we reduced the font sizes to allow the texts to better fit into the slide. By default the Wrap after of the rows is set to 0 on mobile, which causes the columns to break into new lines. We changed it to 1 at this slider to put the CTA button and the price into the same line.

Related Video: Layer Animations & Timeline

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

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

The Virtual Conference is a simple type slider. That’s the most common slider type you can find on the web. Simple sliders display one slide at a time, which helps visitors focus on the content of the slide. The Virtual Conference template is also a full width slider. Full width sliders fill the entire browser horizontally. This makes them popular on modern websites, as they look great on a large monitor.

For navigation this template offers two options. First, the most obvious one, the text blocks at the bottom. They were created by the Thumbnail control, but they don’t display any image. This makes the Thumbnail control versatile, because you can choose not to have an image but text only. As a result you can create special navigation for your visitors to enjoy.

The other way to switch slides it via dragging or swiping. In fact, a swiping navigation is on of the most comfortable actions for touch screen devices. It’s especially liked by mobile users because it feels natural.

Layers

Each slide of the Virtual Conference slider has three layers: image and headings. The image layer displays a custom icon. It also has a semi-transparent background color, a padding and a border radius.

The heading layers display the textual content of the slide. Additionally, on the first slide there’s a special layer: the Animated heading. The Animated heading layer can display content with cool effects. For example, it can use the typewriter, which makes the slider look more interesting.

Animations

Smart Slider has many cool animations to choose from. They help to make your slider slider look more interesting and stand out from the crowd. At the Virtual Conference template we choose to add a modern background animation. Background animations play when the slides are changing. So they won’t distract the visitor from enjoying the content. We choose one of the new Morph animations, Wave.

Layout

The base layout of each slide is aligning the content to the bottom of the slide. In Smart Slider layers are positioned from their parent element. So to align layers to the bottom you need to edit their parent, which is usually the Content layer. At the Content layer you should choose Bottom at the Vertical align option.

Responsive

Smart Slider is a responsive slider and it offers many tools to fine-tune the look on small screens. One of the most common things you need to do to make the slider look good on mobile is reducing the text sizes. Otherwise the content would be uncomfortably large, and make the slider way too tall as well.

Related Post: Create A Responsive Thumbnail Slider

Related Post: 10 Beautiful Full Width Slider Examples

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

The Nala Fullpage uses the simple slider type. Simple sliders are the most common sliders you can find on websites. They display one slide at a time which allows visitors to view every part of the slider before moving forward. It uses the full page layout, which means the slider takes up the width and height of the browser’s viewport. As a result, the only thing visible on the screen is the slider.

Layers

Smart Slider has several layers to create content. There are some layers that are more popular than others, because they help creating the most needed content for the slides. Some of these layers are heading, text, button and image. You can find each of these layers on the Nala Fullpage slider.

Animations

The Nala Fullpage is full of animations. Right when the slider loads you can see the layers moving in from the left and right side. These are layer animations which are nice tools to have as they can introduce the layer in a trendy way.

The other effect is visible when you change slides. It affects the background animations, making them move in a special way. The background animation we used here is the Morph – Wave animation. It morphs the current image into the next one with a wave-like effect.

Layout

Probably the most interesting layout solution in this slider is a custom button. We created it using a row layer that has the button’s background and border. It also has a nice hover effect. Additionally, the clicking on the row (or anything inside it) opens a video in a lightbox.

Responsive

Nowadays you need to create websites and sliders that look great on the smallest screens. Smart Slider provides you all the tools you need to create a responsive slider for your websie.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

The Movie Slider is a simple type slider that uses the full page layout. Simple sliders are traditional sliders, which display one slide at a time. This helps the visitors focus on the slide, as they’re not distracted by the content of other slides. Also, simple sliders give you plenty of horizontal space to display content on big screens.

There’s a Static Overlay on this slider, where you can find the Next and Prev buttons. Static Overlays are special kind of slides, which don’t slide, but appear on top of all other slides in the slider. So make sure you don’t use more than one Static Overlay in your slider, as both will appear together.

 
For navigation, visitors can use the Prev and Next buttons on the Static overlay. For touch screen users, the left and right swiping is supported as well.

Layers

There are many different layers on the Movie Slider. You can find the common layers, such as heading, text and image on each slide. The heading layer contains the title of the movie the slider displays, while text layers are used for the rest of the texts.

The most special layer on the slides is the Circle Counter layer. It’s a kind of counter, that both counts up using a numeric value, and fills a circle shape. The circle counter layer is an interesting layer you can enrich your slides with.

Animations

The most obvious animations on the slider are the layer animations. Layer animations are special effects you can use to introduce layers to the slide, making it more interesting to view. Also, you can use them to make layers disappear from the slide. There’s a layer animation on most layers, which make the slides more interesting.

There’s a background animation on the slide background images. It’s a parallax-looking slide switching effect, which slowly moves the upcoming image on top of the previous one. It’s a simple effect, but cheers up the slider.

Additionally, there’s a lightbox on the image layers of each slide. The big image layer displays a YouTube video in the lightbox, while the small images display an image gallery. Smart Slider Pro’s lightbox supports a wide variety of visuals you’d want to display. For example, you can display videos, images or even websites. Additionally, you can mix the displayed visuals as you like. For example, you can create a lightbox, where you display a video and two images after each other.

Layout

There are interesting layouting solutions in the slider. For example, there’s a four column row under the movie title displaying the white and orange texts. The full width option is disabled at this row, which makes the columns break into new lines automatically when needed.

Responsive

Smart Slider 3 offers many responsive options to optimize your sliders for small screens. You can change many options device specifically, for example, the font size or the distance between the layers.

If you check the Movie slider on mobile, you’ll notice the large image layer, the counter and some other layers are missing. These layers were hidden on purpose. When optimizing for mobile, you should always aim to create sliders which are around 550px tall. As a result they’ll fit nicely into the various sized mobile screens.

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

Related Post: 9 Point Ultimate Checklist to Create your Next Slider

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

Settings

The most common sliders you can see on websites display a single slide at a time. The Organic Food slider is similar to these popular sliders. In Smart Slider, we call these traditional sliders Simple type sliders. They display a single slide, which can fill its container, the full width of the page, or the full width and height of it. This Organic Food template takes up the full width of the page. Full width sliders give plenty of space to display content. As a result, they help showcasing gorgeous images.

The slider doesn’t have arrows for navigation, but it has thumbnail images. They’re located at the bottom of the slider. What makes them looks special is that they look like half of them is on the slider, and half of them below. This happens, because of the size and position of the thumbnails.

Layers

The most special layer on this slider is a Highlighted heading layer. This layer draws a special shape around the highlighted text, which helps drawing attention to it.

The white layer on the left is a row, which has 500px maximum width. This limits the space the row can take up, which allows seeing bigger part of the slide background image.

Animations

There are three cool animations on the slider. First, the most noticeable animation is the Ken Burns effect. The Ken Burns effect is a zooming and panning effect, which came to the web from video editing. In this slider, the effect slowly scales down the images. In fact, web designers love using the Ken Burns effect because it’s subtle yet elegant. So, it helps making the images stand out.

The second animation is a Main animation. The Main animation is the effect, that can affect both layers and slide backgrounds. At this slider the Main animation is a simple fading animation. It fades out the background images, and also the layers. Since the layers have an incoming animation, the Main animation doesn’t fade them in. Instead, the layer’s incoming animation makes the layers appear on the slide.

The last effect on the Organic Food slider is the most fun one. It’s the layer parallax effect, which makes them react to the mouse movement. As a result, when the cursor moves to one direction, the layers move to the opposite direction.

Layout

The Organic Food slider uses both Default positioned and Absolute positioned layers. Default positioned layers are great to build content. They let you create a good looking, responsive slider super fast. In fact, Default positioned layers generally need little to no responsive adjustments. They’re marked with a blue color on the canvas.

Absolute positioned layers, on the other hand, are great for creating decorative elements. Although their responsive behavior isn’t as great as Default layers’, you can place them anywhere on your slider. On the canvas they’re marked with a purple color.

Responsive

Like any slider you’ll create with Smart Slider 3, the Organic Food slider is responsive, too. This means that the slider is enjoyable even on the smallest screens. To help with this, we hid the Absolute positioned layers on mobile devices. As a result, they won’t cover the content.

The text sizes have been reduced, too, to make the highlighted heading fit better to the mobile screen. We also adjusted the padding on the Content layer, to make the slides look less crowded.

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

Related Post: Everything You Need to Know about the Parallax Effect

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