Which Website Security Services are Must-Haves for Your Business?
Report
Security Metrics
Update
Fix vulnerabilities
Monitor
Systematic analyzing
Response
Reduce recovery time
Slider

Free Security Block

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.
💻 Slider Settings | 🎓 Layers | ⚡ Animations | 🏗️ Layout |📱 Responsive

Free: Give Smart Slider 3 a try for free. Download now!

Minimum version: 3.4.1.9

Tags:

Slider Settings

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)

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

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Wonderful Holiday – Animated image layers to make living slidersHow to create subscribe section with Smart Slider 3?Shape Divider BlockMagazine – Text and heading layer