Block

The particle effect is a stunning new effect for Smart Slider 3.

The easiest way to describe it is saying that the effect shows a series of moving shapes and lines. These shapes are various, for instance, they can look like dots, triangles or polygons.

Particle Slider

The particles constantly move and interact with each other on the slider.
Video Block
Smart Slider 3 is a great tool to create nice video blocks with particles.
Particle Carousel
Carousel allows you to show more than one slide at a time.

Particle Slider

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

Description: Particle effect is a new stunning design effect. It features small, moving particles, and it's perfect to create a particle slider in Smart Slider 3.

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

Minimum version: 3.5.0.0

Tags:

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.

Full page layout
Full page layout

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.

Layer list
The absolutely positioned layers are marked with purple color in the layer list

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.

Text animation manager
Text animation manager

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:

Disabled stretch

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.

Enabled stretch

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.

Wrap after one column

Core Web Vitals

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

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.5 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.064
96

Mobile

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

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?


Similar Sliders -

Video Particle404 VideoWonderful HolidayNextchat