Slide 1

Jamal Campbell in Beauty

The Politics Behind the Black Beauty Industry
25 AUG 2018
Slide 2

Jason Voorhees in Interior

Minimalist Office Interiors Where There's Plenty of Space to Think
28 AUG 2018
Slide 3

Sarah Snyder in Tech

Top Five Helpful Tips When Applying for A Construction Permit
17 SEP 2018

Broken Grid Slider

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

Description: The broken grid slider is a new design trend which helps you create modern sliders, that don't really look like sliders.

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

Minimum version: 3.5.0.0

Tags:

Broken grid features

💡 Best features in this slider
  1. Shape divider
  2. Bullet control
  3. Image layer in absolute position
  4. Icon layers with link actions

Settings

The broken grid slider is a full width slider where the layout is special. Each slide has a different background color, but the bottom white shape isn’t changing. This shape is a cool effect of Smart Slider: the shape divider which creates the curved white area behind the image layer.

Shape divider
Slide background color on the top and shape divider on the bottom

Layers

The content is a small image layer, three headings and two icon layers. The default positioning helps create a nice, easy to follow structure with great responsive behavior. On the left side, you can see the Content layer that has 500px maximum width. This leaves enough space to see the image layer in the back. The icon layers help with the slide to slide navigation as there’s a slide switching action on them.

Animations

When you switch a slide, you can notice the reveal layer animations. The reveal animation is a modern effect which is perfect to reveal images and texts as well. It animates a simple colored box on your text or image which you can fully customize in the Animations tab of the layer window.

Reveal layer animation

Layout

A broken grid slider is a modern way to design your slider content. It gives the illusion that you’re not using a slider at all. I’m sure you’re familiar with “traditional” sliders. They have an image in the background and likely some text in front of this image. This couldn’t be further from broken grid layouts.

When we created this broken grid slider, we mixed Smart Slider 3’s two positioning, default and absolute. The block on the left side with the textual content is in default position. This ensures a good responsive behavior. And if you look at its structure, you can see that it’s based on a simple grid layout as well.

Broken grid slider template
Grid layout in default position (marked with blue color) and the image layer in absolute position (purple color)

The image is a simple illustration of the grid layout. You can see rows and columns and inside the columns there are layers for your content. As I mentioned before, the slider mixes default and absolute positioning. First, have a look at the single image in absolute position, that’s in the background. It’s a large image layer, positioned to the right middle of the slide, taking up almost the full width and height of it.

Responsive

The broken grid slider is fully responsive, and all of the layers are visible on smaller screens as well. The text scale option helps you make the text smaller on tablet and mobile. This is a responsive setting so you can use different values on different devices.

Text scale

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.7 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.018
98

Mobile

First Contentful Paint
1 s
Speed Index
2.1 s
Largest Contentful Paint
2.1 s
Time to Interactive
2.7 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0.039

Related Post: 12 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

Related Post: Add Beautiful Section for your Website with Shape Dividers


Similar Sliders -

Showcase SimpleYoga Hero BlockVideo ParticleCover Flow