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.

The 404 Video template is a full page block. Full page sliders fill the browser horizontally and vertically. As a result, they’re perfect for creating a 404 page, because they’ll cover the viewport. Blocks are special slider type in Smart Slider. They’re not actual sliders, since they can only display one slide. But they allow you to use Smart Slider’s amazing features on your site, without the need to create a slider.

The background of the block is a video. In the Pro version of Smart Slider you can use your MP4 videos as slide backgrounds. As a result the video can fully cover the slide in any responsive scenario. In order to achieve the best performance, you should also set a slide background image. The slider will use that as a fallback for devices where the video can’t play. Additionally, it helps with the performance.

Layers

There aren’t many layers on the 404 Video template. In fact, it only has the right amount of layers to create an interesting 404 error page. There’s a huge Counter layer, that counts from 0 to 404, which looks spectacular. There are two headings to explain what’s going on. Also, there is a CTA button to go back to the home page.

Animations

Every layers has its own animation on this template. The counter layer’s is the special counter animation, which counts from 0 to 404. The other layers have layer animations, which fade them into the slide.

Layout

The layout is very simple. The layers appear in the center of the slide, both vertically and horizontally. The layer above the button has 20px bottom margin to create some distance between itself and the button layer.

Responsive

Smart Slider is a responsive slider plugin, that gives you many tools to create a beautiful responsive slideshow. On the 404 video slider we only needed to use one tool: the font resizer. This allows adjusting the font size device specifically. As a result you can optimize the look of your slider for small screens.

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 Video appeared first on Smart Slider 3 — WordPress Plugin.

Slider Settings

The 404 Blurry template is a full width block what you can use to display a user friendly 404 error page. Blocks are special slider types in Smart Slider, what you can use to take advantage of Smart Slider’s awesome features, without having to create an actual slider. So, Blocks are not sliders, but sections, and they can only display one slide. As a result, they load fast which makes them perfect for creatign a hero header.

In the background of the slide you can find a blurred image, which displays circular shapes. Although this image is actually blurred with an image editor, Smart Slider has a blur option. So, if your image isn’t already blurry and you don’t want to edit it with your favorite image editor, you can just use our tool to make the images blurry.

Layers

The 404 Blurry block features the most commonly used layers. These layers are: image, heading and button. The two heading layers display the main headline and subheading which tells the visitor why do they see this page. The button is to create a nice CTA to go back to the home page.

The most fun elements on the slider are the image layers. They display illustrations, which are trendy elements to use on a website nowadays.

Animations

The 404 Blurry block is full of animations. Every image layer you can see has their own layer animations. For example, the cat image has a loop animation that rotates it away from the slider and back again. The planet images appear with a cool rotating and scaling effect.

Apart from the layer animations the layers also have layer parallax effect. This makes them react to the mouse movement, which is fun to play with. As you move the mouse cursor above the block, the layers move to the opposite direction.

Layout

Smart Slider has two ways to position the layers. One is Default positioning, which you should always use to create the content of your slide. Default positioned layers have superb responsive behavior, and load fast on your site. The other is Absolute positioning, which is perfect to create decorative elements. You can drag’n’drop Absolute positioned layers anywhere on the slide, so it offers a free positioning. But it’s much harder to make them responsive than Default positioned layers.

At this slider you can find 3 Default positioned layers: the two headings and the button layer. The other layers are purely decorational, so they’re in Absolute position. The Absolute positioned layers are under the Content layer, which makes them appear below the main content.

Responsive

Smart Slider’s Default positioning allows you to create great looking sliders fast, and takes care of the responsive behavior. Of course, you have lots of tools if you’d like to fine tune the result. One of the most popular tools is the Font resizer, that makes the fonts smaller for mobile devices. This way they fit better into the slider, and make it look more professional.

Default positioned layers can increase the height of the slider if they need more space. We took advantage of this at the 404 Blurry slider, and set top and bottom paddigns to the slide. This makes the slide appear taller, and have more white space, which looks great.

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

Related Post: 10 Beautiful Full Width Slider Examples

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

The 404 Illustration slider isn’t actually a slider. It’s a block, which is a special project type in Smart Slider. Blocks display one slide only, which makes them load fast. Additionally, they let you use all tools and features Smart Slider has, without having to create a slider.

The background of the slide is a simple image. However, the focus of the image isn’t at the middle of the picture but at its bottom. This way the road shape stays below the two people, no matter which device the block appears on.

Layers

You can find a bunch of layers on the 404 Illustration template. There are lots of image layers, a couple of headings and a CTA button. The most important layers, which create the content of the block are all in Default position. But you can find many decorational elements which are Absolute positioned. Not only that, but they’re also nested, which means they’re in a Default positioned layer. This helps better positioning the layer.

Animations

Every layer in this block has its own layer animation. This brings the block to life and makes it more interesting and cheerful for the visitors to see. In fact, there are various effects that move in the layers to the slide. For example, the people appear with a flipping animation. The texts fade in and move down.

There’s also a parallax effect on a few layers. When you move your mouse over the block, the clouds, the birds and the speech bubbles react to the mouse movement and move to the opposite direction.

Layout

There are many interesting layout solutions in te 404 Illustration block. For example, the way the two person’s image were put next to each other. Creating such layout is actually simple in Smart Slider. Just add a row and place one image layers into each column. Finally, pick the image you want displayed.

Responsive

Smart Slider is a responsive WordPress slider. It gives you plenty of tools to fine tune how you want your sliders to look on small screens. For example, at this block we used the Font resized to optimize the text sizes on mobile. Additionally, we resized the Absolute positioned layers so they’d fit better into the slide.

Related Post: 10 Beautiful Full Width Slider Examples

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

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