Full page sliders are the best kind of sliders you can use as a hero header. The slider above is a great example for a stunning hero block. It’s minimal, has great effects and give some information at the same time. 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.
How to make the top section of the slider?
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 to row gets bigger, it pushes the bottom row down to the bottom of the slider. Check the video to see how it’s done:
How to replace the laptop image?
We usually build our sliders in Content mode. This way they have great responsive behavior, which doesn’t need a lot of changes. However, Smart Slider 3 has another editing mode, Canvas. In our demo sliders, Canvas mode is used only for design purposes. The laptop image on this slider is a simple design element, so it’s in Canvas mode.
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 selected the layer, you can move it around or replace its image.
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?
