Settings

People typically use full width sliders because they look great on today’s large monitors.

The controls look very special on this slider. That’s because the arrows surround the bullets. When you enable a control, by default you can select from predefined places at its position setting. In the Pro version of Smart Slider, there’s an Advanced position setting, what you can use to place the controls basically anywhere within, or around the slider.

Layers

You can find the most popular layers on the Feature Card slider. There are two headings, a text, a button and an image layer, inside a two column row. Using the button layer, you can create a cool CTA for your slide.

If you check the layout, you’ll also see that it’s full of rounded corners. The image inside the image layer is a png, so here the rounded corners are coming from the image. However, in the row and button layer’s case, the rounded corners are coming from their settings. At the Style tab of the layer window, you can find a Border radius option, what you can use for creating rounded corners.

Animations

The most noticeable effect you’ll immediately see on this slider is the Shape divider. This feature creates the white shapes at the top and bottom of the slider. When you first load the slider, the shapes appear with a nice animation. The Shape divider is above the background of the slide, but below the layers. This helps creating the Feature Card slider’s unique look.

There’s another fun effect on the Feature Card slider. When you move the cursor above the slider, the image reacts to its movement, and turns towards the mouse. This effect is the 3D mouse parallax, what you can enable on any layer.

Layout

The base of the Feature Card slider is a row, that has two columns and a dark background color. When you add a row layer, it always contains two columns, and both columns are 50% wide. In this case, we changed the column width. The first column is 30% and the second column is 70% wide. This allows the image to display in a bigger size, but the 30% width is still enough for the text to show.

Responsive

Rows help creating mobile friendly layouts by breaking the columns into more lines. The Wrap After option of the row defines amount of columns that can fit into a line. By default every row has its Wrap After setting on 1 on mobile devices.

When a row breaks its columns, it always keeps the original column order. In other words, the column that’s the first from the left is going to be on the top. The column, which is the last from the left side will end up on the bottom. If you don’t like this behavior, you can change the column order device specifically at the row.

There are many other options that you can change for tablet and mobile devices, without affecting the desktop layout. For example, the padding, which was greatly reduced to make the slide look better on mobile. We also reduced the font sizes using the Text Scale option.

Related Documentation: How to place bullets below the slider, with the arrows around them?

Related Post: Add Beautiful Section for your Website with Shape Dividers

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

The Blur slider is a special looking simple type slider. A simple type slider means the common look of the slider, which displays one slide at a time. Additionally, it’s a full width slider, which makes the special blurring effect look so stunning.

What makes this slider look so special? It’s the fact that on each slide you see a blurred background image, then in a couple of seconds, the sharp version of the image appears in the middle. It’s like the image isn’t blurred, and more vivid in the middle.

Creating such effect is simple, but you’ll need two images to achieve it. First you need the blurred image, to use it as the background image of the slide. It’s big enough to fit into a full HD screen. You can blur the image with your image editor, and apply the dark overlay. Or, you could use the Blur and Overlay options available in Smart Slider. Then, you’ll need another image, which isn’t blurred or darkened. This image should be a crop from the middle of the large image.

Layers

There aren’t many layers in the Blur slider, but you can find the most essentials. There’s a heading layer, what you can use to create a nice headline. You can put longer, descriptive text into the text layer. Creating a call to action button is super important, as it helps a lot with conversion. We’ve prepared a button layer for you in the Blur slider template. Additionally, there’s an image layer where you can place the cropped image.

Animations

The Blur slider template is rich in animations. The first animation you’ll see when you open the slider is the layer animation. This animates in the layers. The layer animations on the layers have two different behavior. The image layer simply fades in, while the textual layers move in from the right.

The second animation you’ll notice is the 3D parallax effect on the image layer. As you move the mouse cursor above the image, it reacts to it with a cool movement. To enable this effect on a layer, first you need to turn on the 3D parallax at the Animations tab of your Slider settings. Then you’ll need to set the parallax at the layer where you want to use it. The last animation is the Horizontal Main Animation, which you’ll see during slide switching.

Layout

Although you can quickly import any slider template, you can quickly build a layout like the Blur slider’s. First, you need to set a maximum width to the Content layer, then align it to the right. This will put the content to the right side of the slide. Next, add an image layer in Absolute position, and move it below the Content layer.

Responsive

In Smart Slider, aligning happens from the parent element. So, if you want to move your layers up, look for the Vertical align option on their parent. Similarly, you can align the layers horizontally from the parent as well. Additionally, this Inner align option is device specific, as demonstrated on this template. On desktop the texts are left aligned, whereas on mobile they’re centered.

The other responsive adjustment you can find on the Blur slider template is related to the font sizes. Using the Font resizer you can set a smaller, or a bigger font size for your texts on mobile. This is helpful to create a better looking layout on mobile. Additionally, you can hide any layer on any device. On the Blur slider template, we hid the image layer on mobile.

Related Post: How to Create Beautiful Responsive Image Slider?

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

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