Settings
Full page sliders are the best kind of sliders you can use as a hero header. The slider fills up the 100% width and height of your browser. Also, it is a great example for a stunning hero block. It’s minimal, has great effects and gives some information at the same time.
Layers
The slider contains a heading layer, a text layer, 3 image box layers and an image layer in absolute position. We usually build our sliders in default position. This way they have great responsive behavior, which doesn’t need a lot of changes. However, Smart Slider 3 has another positioning option, the absolute. In our demo sliders, absolute positioning is used only for design purposes. The laptop image on this slider is a simple design element, so it’s in absolute position.
To avoid the laptop image covering the more important layers, we put it below the Content layer. This means you’ll need to open the layer list to be able to select this layer. Once you select the layer, you can move it around or replace its image.
Animations
There are 2 types of animations which you can see at the first time when you check this slider: the moving particles in the background, and the text animation which animates the text by its chars. The particle effect can be customized in the Animations tab of the Slider settings. You can also customize the text animation, for that you need to open the slide, click on the Heading layer, and open the Text animation manager in the Layer window → Content tab.
Layout
Apart from the Particle effect, the most interesting part of this slider is its layout. At the bottom, there are three boxes, and there’s a heading and a text layer at the top-middle section. These two layers not only occupy the area, but they’re in its center.
We put the heading and text layers to a row, which has only one column. This puts the whole content area to the middle of the slide, as you can see it on this picture:
The trick to make the bottom row stick to the bottom of the slider is simple. You need to turn on the Stretch on the top row. This option makes the row, where it was turned on filling the available space. Since the top row gets bigger, it pushes the bottom row down to the bottom of the slider.
Responsive
The text layer and the image layer is hidden on mobile, because they don’t contain important information, and we should care that the content won’t be too much on mobile. Also, you can see that the bottom row wraps after 1 column, so the content of the image boxes are visible, and have enough space.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
Related Post: What is a Particle Effect and Why Should You Use It?
Related Post: What is a Full Page Slider and How to Use it?
