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 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.

Creating a full width header slider is a popular choice amongst website designers nowadays. These elements look great on any device, especially on the popular wide monitors. With Smart Slider you don’t necessarily have to create a sliding element to have a nice full width section on your site. You can actually create a block type project. Blocks are special sliders, which can display one single slide, which never moves.

The main element of the 404 image slider is the slide background image. When you add a new image slide to your slider, it focuses on the middle part of the image. At this template we changed the focus point to the top-middle part of the image, to ensure that the girl’s head stays in the slide area.

Layers

There’s a bunch of interesting layers on this slide. The most obvious one is the Animated heading layer, which is the big text with the white font. This layer is special, because it can rotate word(s) with special animations, saving space on your slide and making it more interesting to watch.

Above the Animated heading layer you can find a common heading. What makes this layer looks special is its large font size, which immediately raises the attention of the visitors. Another special thing with this layer is that it’s font color is semi transparent.

You can find two additional layers on the 404 Image block. One of them is the CTA button, which helps moving back to the home page. The other is the image layer, and there are two of them. They’re used to display the social icons at the bottom of the slide.

Animations

You can find a couple of layer animations on the 404 Image block. They introduce the layers to the slide with a subtle fading and moving effect. This simple animation really fills the block with life and makes it interesting to watch.

Layout

If you’re looking for layout inspiration for your next slider, you’re at the best place. The 404 Image slider some amazing layouting ideas you can try! First, the most obvious one which is the white text covering the yellowish one. This happens because of a negative top margin on the white text, that reduces the distance between the two layers. This small overlap makes the whole block look special!

The other cool idea is the negative left margin on the 404 text. It moves the text to the left, causing it to break the grid of the content. The result speaks for itself: the layer stands out!

To ensure that the social icons always stay at the bottom of the slide, while keeping the content at the middle, we turned on the Stretch option on the row. This setting makes the row fill the height of its parent, and in this case it also pushes the icons down.

Responsive

Smart Slider is a responsive slider solution and it offers many great tools to fine tune how the slider looks on mobile. There are three key responsive options we used at the 404 Image block. First, we removed or reduced the negative margins. As a result the 404 text is aligned with the other layers, and the white text doesn’t cover it too much. Also, the text was resized at both layers. The last responsive change we made was adding a bottom padding to the column where the layers are. This creates a nice white space between the button and social layers.

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

Related Post: Why Do You Need a Good WordPress 404 page?

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

Settings

This slider is a block type slider, so only has one slide without any controls, it can be a great header on your page. Creating a block with a video background is very easy in Smart Slider. You can put mp4 videos in the background, and if you mute the video and turn on the autoplay, it can be a good design tool to grab your visitors attention. If you want to make the texts readable use a background color as an overlay above the video.

Layers

The slider is created with default positioned layers which work like a page builder and really simple to edit. You can find an image and a heading on the top, and after an animated heading comes. Animated heading is a great way to call the visitors attention. Now 3 text changes after each other. Below the Animated heading you can see an important part of the slider, the button. With buttons you can reach the visitor to click and take an action.

The bottom part of the block is also special, there is a row with a white background and with a nice shadow. The row has 6 columns, and has image layers and counter layers on it.

Animations

The Animated heading layer can rotate different highlighted text with the chosen animation. With this animation you can grab your visitor’s attention, and show your most important message. When the slider loads you can see another animated layer – the counters. With these layers you can show numbers with a nice looking animation.

Layout

On this block you can find a shape divider effect at the bottom of the slider. You can see a simple white “rectangle” divider which gives the impression that the white bar with the Counter layers is above the block.

The block stays from 2 main rows: the first row contains the top part of the slider with the image, heading, animated heading and button. The second row is the white row on the bottom. The first row is stretched which makes it fill the available space, and pushes the second row to the bottom.

Responsive

When you check the slider in mobile, you can notice the content is smaller and the bottom images are hidden. You can use the Text scale to make your text smaller, and it is a device specific setting, so it doesn’t affect other devices. With hiding a layer you can save space. If a slider is too big on mobile, it doesn’t look good, and with hiding a layer you can reduce the height.

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

Related Post: 10 Beautiful Full Width Slider Examples

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

Settings

The Crypto block is a block type slider so it has only 1 slide without any controls. It can be a great hero header on your company or business website. I think you have noticed the white curve on the bottom. This is a shape divider which can be a great separator between the sections. You can customize it in the Animations tab of the Slider settings. Here you can change its type, color, width and height, you can animate it, and you can set it on each device.

Layers

You can see 5 different layer types in this block: there is an animated heading on the top, after a text and button layer comes. You can see an image layer in the right side, and an image box above it. Also you can see 5 different image layers as a decoration.

The animated heading cheers up the whole slide because it attracts the eye. You can customize its settings in the layer window, you can change the before, after and the animated texts, also you can change the type of the animation, and change its color.

Animations

Creating beautiful hero blocks with nice text effects has never been easier. The Animated heading layer has all the effects you need, such as the typewriter effect which you can see on the slider above. The most noticeable animation on the slider is the typewriter effect. But there’s also a particle effect in the background. In front of the monitor there’s an image box layer which has a layer animation on it, just like the small icons have.

Layout

What about the slider’s structure? Well, we used default positioning to build the basic structure: a row with two columns. The left column has the Animated heading, text and button layers. The right column only has the monitor image. We used absolute positioning to add the design elements: the five icons and the image box layer.

Responsive

If you check the block on smaller devices like on your phone, you can notice the decoration elements are hidden. The content is the most important part of the slide, and with hiding the absolute layers we can save space, and the content will be legible on these smaller devices.

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

Related Post: What is a Particle Effect and Why Should You Use It?

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