Security is a Block type slider. What makes blocks special is that they display a single slide, with no option to switch to any other slide. As a result, they load fast. Additionally, blocks let you take advantage of Smart Slider 3’s power without having to create an actual slider.
🎓 Pro Version Available
💡 Did you know this template has a alternative made with the Pro version of Smart Slider 3? What more do you get with the Pro template?
Security block uses the popular full width layout. However, it’s the gray background color that actually fills the full width of the browser. The blue content area is in the middle of the slider, taking up a maximum 1200px wide area. This happens because of the Limit Slide Width option, that fixes the width of the slide canvas, and prevents the slider from being too tall.
The layers are quite simple on the Security block. What makes them look outstanding is the color choices: the deep blue harmonizes well with the pinkish color. The heading layer uses large font size and an easy to read font family. Additionally, it has high contrast with its background.
There’s a border radius on the blue row, and on each white column at the bottom. As a result, they both have rounded corners.
As a block can only display one slide, there are no slide switching animations. There are no layer animations in the Free version of Smart Slider, but this block doesn’t really need them. Security block is eye-catching in its own unique design and modern look.
If you hover on any of the four white columns you can see an animation-like effect. The box shadow on the columns is increased on hover, which makes them look as if they were animated.
The layout of the Security block is rather simple. There are two rows: one with blue background, and anther one below. The bottom row doesn’t have background color, but its columns do. The reason the second row is on top of the first is because it has 40px negative top margin. The distance on the sides happens because of the left and right paddings of the row.
Smart Slider 3 is a responsive slider, which does most of the job for you when you create a slider. Additionally, there are many responsive tools you can take advantage of to fine-tune the result on mobile and tablet view.
If you check the template on mobile, you’ll notice two mobile specific changes. First, the layout: the content inside the blue row is no longer left, but center aligned. Second, the font sizes are much smaller. As a result, the block looks a lot better on small screens.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!