Jamal Campbell in Beauty

The Politics Behind the Black Beauty Industry
25 AUG 2018

Jason Voorhees in Interior

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

Sarah Snyder in Tech

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

Broken Grid Slider

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:


Web design trends evolve fast. Designers and developers make lots of effort to make visitors spend more time on the website. 2018 brought us many great web design trends. The most notable ones are the big, bold fonts, scroll triggered animations, but the list could go on. One of our favorite design trend is the Broken Grid Layout. This new trend happens to look perfect inside sliders as well. And you can create such slider easily with Smart Slider 3.

Broken grid layout

Before we dig into the broken grid slider settings, let’s take some time to explain what a broken grid layout is. But first, let’s see what is a grids. Grid is an invisible foundation that helps you design something that feels organized. It needs to be clean and easy for users to follow. For instance, if you look at your local newspaper or BBC‘s site, you can see a great example of the grid layout. The text is lined up in columns, helping users to follow the left to right and top to bottom reading approach.

Grids seem useful enough for your visitors, right? And, most importantly, they have crucial role in your site’s structure. This helps you create a nice looking website. Now that I’ve said this, are you wondering why would anyone think about breaking the grids at all? For design reasons, of course. When done carefully, broken grids can enhance the message of your site.

Creating a broken grid layout in Smart Slider 3

A broken grid slider is 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 editing mode, Content and Canvas. The block on the left side with the textual content is in Content mode. This ensures a good responsive behavior. And if you look at its structure, you can see that its based on a simple grid layout as well.

broken grid slider template
Grid layout in Content mode (marked with blue color) and the image layer in Canvas mode (purple color)

The image is a simple illustration of the grid layout in Content mode. You can see rows and columns and inside the columns there are layers for your content. In this case, the content is a small image layer, three headings and two icon layers. Content mode helps creating a nice, easy to follow structure with great responsive behavior.

And what about the large image in the back? It’s an image layer added in Canvas mode. It has the layer parallax effect, which makes this slider really eye catching.

Broken grid slider layers: an in-depth overview

As I mentioned before, the slider mixes Content and Canvas editing modes. In this section, I’ll dig deeper into the setup of the slider. So, first, have a look at the single Canvas mode layer, 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.

On the left side, you can see the Content layer that has 500px maximum width. This leaves enough space to see the Canvas image layer in the back. The Content layer has a couple of heading layers, a small image and two icon layers. The icon layers help with the slide to slide navigation as there’s a slide switching action on them.

The image layer has the layer parallax effect which adds a nice touch to the slider. There’s also a shape divider at the back of the slider, creating the curved white area behind the image layer.


There are many reasons to use a broken grid slider on your site. These layouts are trendy, modern, elegant and make your visitors want to spend more time on your site. The creation process is incredibly easy. A broken grid slider can fulfill many purposes. You can use them for showcasing your latest post. A testimonial slider could be another interesting use case for such slider.

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 -

Header IllustrationLayer SliderPortfolio CategoriesBakery Page