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.

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.

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.

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.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

The post Broken Grid Slider appeared first on Smart Slider 3 — WordPress Plugin.

The wedding page group stays from 6 sliders. The first is an autoplaying slider with a static overlay and navigation. The second and third sliders are blocks, so have only one slide in the slider.

The 4. slider is a showcase type slider. Showcase sliders need a certain amount of slides to create a full carousel. Since this slider has only 3 slides, the last slide can’t appear on the left side of the first one. This creates an interesting effect, which is great for story telling. And the last 2 sliders are also blocks, and have a special layout.

Layers

The wedding slider group stays from basic layers like headings, texts, buttons and images. Since these sliders are together, they should have used the same styling and matching colors to keep the harmony. There are more layers with a link which you can navigate to the next slides thanks for the link actions.

Animations

When you load the wedding page, you can notice a lot of animations on it like layer animations, or the Ken Burns effect. The Ken Burns is a panning and zooming effect, and it is simple, elegant and works on any kind of images.

Layout

The Wedding Gallery slider’s layout looks beautiful and unique. What makes it special is the row with the small images, which break out of their grid and cover a part of the big image on the left. Creating this layout is quite simple.

Create a row with two columns.

1. Put an image layer on each column and select the image you want to display.
2. Remove the paddings from the columns and row. (Press and hold the Shift key to adjust the paddings on the opposite sides, too.)
3. Select the row and add a top margin on it. This slider has 20px top margin.
4. Give a negative left margin to the row. This slider has -80px left margin.

Responsive

The slider group is fully responsive, and looks good on any device. Showcase sliders have special responsive behavior. You can set a size for the slider itself, and one for the slides inside. Thanks to this, you can control the amount of slides that will show up in your slider. For instance, if you set your slider size to be 1500px wide, you can make 3 500px wide slides appear with 0px slide distance. Being able to specify different slider and slide sizes creates many possibilities for your slider.

In this example, we took advantage of another great feature, the Maximum slider height. This setting prevents the slider from getting taller than the set size. We set it to 700px, the same as the height of the slider, which means as the slider gets wider, more slides will be visible. This setup is close to the best way to set up a showcase type slider.

Related Post: How to Create Beautiful WordPress Landing Pages That Convert

Related Post: Why do You Need a Video Slider on Your Website?

Related Post: Use the Popular Ken Burns Effect on your Slider

The post Wedding appeared first on Smart Slider 3 — WordPress Plugin.