Slide
ERROR 404
Looks like you got lost
The page you are looking for isn’t found :(

404 Illustration

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Displaying a creative WordPress 404 page with trendy illustrations for your visitors will help turning their unpleasant experience around.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Slider Settings

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.

Focus point on the Slide  Background
Focus point on the Slide Background

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.

Nested Layers in the Layer List
Nested Layers in the Layer List

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.

Timeline with layer animations
Timeline with layer animations

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.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on July 2, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.6 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
95

Mobile

First Contentful Paint
1.1 s
Speed Index
2.4 s
Largest Contentful Paint
2.7 s
Time to Interactive
2.2 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0

Related Post: 12 Beautiful Full Width Slider Examples

Related Post: Why do you need a good WordPress 404 page?


Similar Sliders -

404 Image404 Video404 Blurry