Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now
Which Website Security Services are Must-Haves for Your Business?
Security Metrics
Fix vulnerabilities
Systematic analyzing
Reduce recovery time

Free Security Block

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

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!

Minimum version:



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?

  • Highlighted heading layer
  • Layer animation
  • Layer events

Check it out now!

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)
Limit Slide Width off (left) and on (right)


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)
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.


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.

Default font size on mobile (left) and adjusted size (right)

Related Post: 10 Beautiful Full Width Slider Examples

Similar Sliders
404 ImageVideo BlockFree Traveler BlockTraveler Block