Description: Do you need a cool block for your site, which is perfect as a header, or a post content? The Security block is perfect for you! Additionally, it has some built-in navigation options.
Free: Give Smart Slider 3 a try for free.
Download now!
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.
Limit Slide Width off (left) and on (right)
Layers
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.
Heading with high contrast (left) and heading that has matching colors with the rest of the content (right)
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.
Animations
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.
Layout
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.
Responsive
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.
Default font size on mobile (left) and adjusted size (right)
