Slide 1
YOGA CENTER
Yoga Center is the perfect way to
increase flexibility.
rejuvenate your mind.
de-stress and work out.
0
TRAINERS
0
MONTHLY CLASSES
0
HAPPY CLIENTS

Yoga Hero Block

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

Description: Yoga Hero Block features an Animated Heading and a Counter layer what helps your visitors to focus on your slider block.

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

Minimum version: 3.5.0.0

Tags:

Best features of Yoga block

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.

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

Animated heading layer

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.

Shape divider below the row

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.

Core Web Vitals

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

99

Desktop

First Contentful Paint
0.7 s
Speed Index
0.7 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.7 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.031
100

Mobile

First Contentful Paint
0.9 s
Speed Index
0.9 s
Largest Contentful Paint
1.6 s
Time to Interactive
0.9 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.034

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

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

404 ImageCrypto BlockLayer Slider