Black Friday Sale! We are excited to offer a discount of 30% on every Smart Slider plans. Get yours until 29th November!

Buy Now
blockbackground
Design your entire website visually!
Your
Slide
Way

Next generation visual editor to create responsive animated sliders and blocks.

Orion Block

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

Description: The Orion Block template helps you create a nice hero header with a cool animation and the layer parallax effect.

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

Minimum version: 3.5.1.11

Tags:

Slider Settings

The Orion Block template is a special kind of slider. In fact, it’s not actually a slider, but a block. Blocks are special because they can only display one slide. For this reason they’re perfect for hero headers.

Layers

The template uses some of the most common layers, such as heading, text and button. However, it also has a special layer, the Animated Heading. This layer can replace word(s) within your text, making the experience more interesting.

Layers in the Orion Block template
Layers in the Orion Block template

Animations

The most obvious animation on the template is the Layer animation which introduces the layers. In Smart Slider you can find 3 kinds of layer animations: incoming, loop and outgoing. In this template we only used the incoming layer animation.

Layer animations in the Timeline
Layer animations in the Timeline

Apart from layer animations, the template also has a layer parallax effect. The layer parallax reacts to the mouse movement, moving the layers away fro mthe mouse. Additionally, it’s a 3D effect which is a lot more interesting.

Layout

The layout is rather simple, but it has some interesting aspects. For example, the Content layer has a Max width and its aligned to the left side of the slider. This way the right side stays empty, allowing the image captivate the visitor.

Content layer settings in the Orion Block template
Content layer settings in the Orion Block template

Responsive

Smart Slider is a responsive slider and offers many tools to optimize the mobile result. At this template our favorite tool was the Font resizer which helped us optimize the text size for mobile.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on October 26, 2022. For the latest result analyze now!

99

Desktop

First Contentful Paint
0.8 s
Speed Index
0.8 s
Largest Contentful Paint
0.8 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.001
96

Mobile

First Contentful Paint
1 s
Speed Index
1.4 s
Largest Contentful Paint
2.8 s
Time to Interactive
1.1 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.002

Related Documentation: Where to find the Slide Library?

Related Post: Smart Slider 3 – Slide Library