Full page sliders are the best kind of sliders you can use as a hero header. The slider fills up the 100% width and height of your browser. Also, it is a great example for a stunning hero block. It’s minimal, has great effects and gives some information at the same time.

Layers

The slider contains a heading layer, a text layer, 3 image box layers and an image layer in absolute position. We usually build our sliders in default position. This way they have great responsive behavior, which doesn’t need a lot of changes. However, Smart Slider 3 has another positioning option, the absolute. In our demo sliders, absolute positioning is used only for design purposes. The laptop image on this slider is a simple design element, so it’s in absolute position.

To avoid the laptop image covering the more important layers, we put it below the Content layer. This means you’ll need to open the layer list to be able to select this layer. Once you select the layer, you can move it around or replace its image.

Animations

There are 2 types of animations which you can see at the first time when you check this slider: the moving particles in the background, and the text animation which animates the text by its chars. The particle effect can be customized in the Animations tab of the Slider settings. You can also customize the text animation, for that you need to open the slide, click on the Heading layer, and open the Text animation manager in the Layer window → Content tab.

Layout

Apart from the Particle effect, the most interesting part of this slider is its layout. At the bottom, there are three boxes, and there’s a heading and a text layer at the top-middle section. These two layers not only occupy the area, but they’re in its center.

We put the heading and text layers to a row, which has only one column. This puts the whole content area to the middle of the slide, as you can see it on this picture:

The trick to make the bottom row stick to the bottom of the slider is simple. You need to turn on the Stretch on the top row. This option makes the row, where it was turned on filling the available space. Since the top row gets bigger, it pushes the bottom row down to the bottom of the slider.

Responsive

The text layer and the image layer is hidden on mobile, because they don’t contain important information, and we should care that the content won’t be too much on mobile. Also, you can see that the bottom row wraps after 1 column, so the content of the image boxes are visible, and have enough space.

Related Post: What is a Particle Effect and Why Should You Use It?

Related Post: What is a Full Page Slider and How to Use it?

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

Settings

The Crypto block is a block type slider so it has only 1 slide without any controls. It can be a great hero header on your company or business website. I think you have noticed the white curve on the bottom. This is a shape divider which can be a great separator between the sections. You can customize it in the Animations tab of the Slider settings. Here you can change its type, color, width and height, you can animate it, and you can set it on each device.

Layers

You can see 5 different layer types in this block: there is an animated heading on the top, after a text and button layer comes. You can see an image layer in the right side, and an image box above it. Also you can see 5 different image layers as a decoration.

The animated heading cheers up the whole slide because it attracts the eye. You can customize its settings in the layer window, you can change the before, after and the animated texts, also you can change the type of the animation, and change its color.

Animations

Creating beautiful hero blocks with nice text effects has never been easier. The Animated heading layer has all the effects you need, such as the typewriter effect which you can see on the slider above. The most noticeable animation on the slider is the typewriter effect. But there’s also a particle effect in the background. In front of the monitor there’s an image box layer which has a layer animation on it, just like the small icons have.

Layout

What about the slider’s structure? Well, we used default positioning to build the basic structure: a row with two columns. The left column has the Animated heading, text and button layers. The right column only has the monitor image. We used absolute positioning to add the design elements: the five icons and the image box layer.

Responsive

If you check the block on smaller devices like on your phone, you can notice the decoration elements are hidden. The content is the most important part of the slide, and with hiding the absolute layers we can save space, and the content will be legible on these smaller devices.

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

Related Post: What is a Particle Effect and Why Should You Use It?

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

The 404 Video template is a full page block. Full page sliders fill the browser horizontally and vertically. As a result, they’re perfect for creating a 404 page, because they’ll cover the viewport. Blocks are special slider type in Smart Slider. They’re not actual sliders, since they can only display one slide. But they allow you to use Smart Slider’s amazing features on your site, without the need to create a slider.

The background of the block is a video. In the Pro version of Smart Slider you can use your MP4 videos as slide backgrounds. As a result the video can fully cover the slide in any responsive scenario. In order to achieve the best performance, you should also set a slide background image. The slider will use that as a fallback for devices where the video can’t play. Additionally, it helps with the performance.

Layers

There aren’t many layers on the 404 Video template. In fact, it only has the right amount of layers to create an interesting 404 error page. There’s a huge Counter layer, that counts from 0 to 404, which looks spectacular. There are two headings to explain what’s going on. Also, there is a CTA button to go back to the home page.

Animations

Every layers has its own animation on this template. The counter layer’s is the special counter animation, which counts from 0 to 404. The other layers have layer animations, which fade them into the slide.

Layout

The layout is very simple. The layers appear in the center of the slide, both vertically and horizontally. The layer above the button has 20px bottom margin to create some distance between itself and the button layer.

Responsive

Smart Slider is a responsive slider plugin, that gives you many tools to create a beautiful responsive slideshow. On the 404 video slider we only needed to use one tool: the font resizer. This allows adjusting the font size device specifically. As a result you can optimize the look of your slider for small screens.

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

Related Post: Why Do You Need a Good WordPress 404 page?

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

The Christmas Ornament Shop slider uses the Simple slider type and it’s also full width. So, it looks like any typical slider you can see on website. It displays one slide at a time which is good for two reasons. First, it gives you plenty of space to display content. Second, seeing one slide at a time helps the visitors focus on the message.

For navigation people can swipe through the slides with their cursor or hand. If they’re on desktop or tablet, they can use the arrows located on the sides of the slider. If the visitor is using their phone, they can use the bullets located at the bottom of the slider as another navigation option.

Layers

The Christmas Ornament Shop slider uses the most basic layers. There are heading, text, button and image layers. There’s one special layer on each slide, creating the ribbon decoration. That’s an Image area layer. What differentiates it from the simple image layer is that an image area layer can cover a given area with the selected picture and can crop parts of the image if needed.

Animations

There are some spectacular animations on the Christmas Ornament Shop slider. Let’s start with the most obvious one: it’s the Particle effect. Despite having many cool effects to choose from, we decided to go with a custom particle effect. As a result, we were able to simulate a snowing effect for the slider.

The other effects on the slider are more subtle animations. You can see an incoming animation on all layers to make their entrance more interesting. There’s also special background animation, Slices – Single. This animation makes the current slide move out followed by a solid color which then reveals the next slide below.

Layout

The layout of the Christmas Ornament Shop slider is mostly super simple. The slides are based on a two column row structure. However, there’s an interesting layout solution you can spot, which is the decoration ribbon. It’s an Absolute positioned layer located in the right column. We aligned it to the middle of the column and gave it a custom size to ensure that it fills the whole slider.

Responsive

Smart Slider is a responsive slider and it provides several tools to create an awesome looking slider for small screens. One of the most popular responsive tools is the Font Resizer which allows adjusting the size of the text on the currently edited device, without affecting the other devices.

The other cool feature is the ability to hide layers that are not needed for a particular device. For example, at the Christmas Ornament Shop slider we hid the ribbon layer on mobile.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

The post Christmas Ornament Shop appeared first on Smart Slider 3 — WordPress Plugin.

People still use boxed designs, even if full width sliders are much more popular. The best thing about boxed sliders is that they fit nicely into any page or post content. They look like they truly belong there and don’t break the layout either. This Boxed Particle Slider is a great example for a stunning modern boxed slider.

Layers

You can see a one row two columns structure on the static slide. There is an image, a heading, a text, and a button layer on the left side, and an audio player with a cover image on the right side. Creating this layout is incredibly easy. You just need to add a simple image layer, then put an audio layer below it.

The image layer has a handy shortcut on the sidebar. This shortcut makes it easy to add the most popular layers, like the image, heading or button, fast. The audio layer doesn’t have a shortcut, so you’ll need to open the add panel to add it. After adding the layers, the audio and the image layers need a maximum width. This ensures that the image and audio layer have the same size.

Animations

Each slide background image has a Ken Burns effect on it. This effect gives a movement to the images, and combining this with the slider autoplay makes the slider special. Also you can see small particles, which cheers up the slider. You can customize this in the animations tab of the slider settings.

Layout

Static overlays are special slides. They are above all the other slides in the slider. When the normal slides change, the static overlay remains in the same place. This makes them perfect for cases where the content doesn’t need to switch with the slides.

Creating a Static Overlay is incredibly easy. First you should add your new slides to your slider. Then, when you create a new slide, you’ll see a new option appearing at the end of the Add Slide options.

Editing a Static overlay is the same as editing any other slide. The only difference is that you’ll see the next slide’s background behind it. Static Overlays can’t have a background on their own, as that would cover the slides below them.

Responsive

The boxed particle slider is fully responsive, it looks good on tablet and mobile as well. In mobile you can see the row wraps after 1 column. By default, the left column will be on the top, and the right on the bottom. But you can change this order if you drag the green column boxes in the layer window.

Related Post: What is a Particle Effect and Why Should You Use It?

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

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

The carousel slider type is great for showing posts or products on your site. But don’t let this discourage you from using them. While they look great as dynamic sliders, that’s just the top of the iceberg. Carousel sliders are versatile and you can use them for many purposes. In the case of the Particle Carousel the purpose is to promote services.

At carousels you can add the slider size and slide sizes. The amount of slides this slider type displays depends on the set slider size, slide size, minimum slide distance and maximum pane width.

Layers

Each slide has the same layers: there is an image layer on the top, then 2 text layers and a button come. The layers are under each other, where you can see some margin, so the content won’t be too crowded. If you hover over the CTA button, you can see another color on hover. You can set the hover color of the text and background in the Style tab of the Layer window.

Animations

Carousel slider type switches a pane by default. What is a pane? The pane is the container of group slides, which show up together. For instance, if you have 6 slides in your slider and 3 slides display, then one pane contains 3 slides. For many cases, switching a whole pane is not good. This is why we created an option to switch single slides only.

Switching the carousel slider slide by slide can prevent orphan slides at the end of the slider. People usually use 5-6 slides in their slider, and commonly display 3 to 4 slides at once. This can result in leaving the last pane with only one or two slides, which doesn’t always look pretty. You can enable the single switch option in the Animations tab of the Slider settings.

The specialty of this carousel are the particles in the background. You can customize the particle effect in the particle manager, where you can change its effect, the number of the particles, and how it will behave on hover or click.

Layout

If you take a deeper look at this slider, you’ll see a blue background image behind the slides, but above the particles. This background is the slider background. You can set a single color or an image as the background of your Carousel slider in the General tab of the Slider settings.

Responsive

This carousel is fully responsive. If you check it on mobile, you can see only 1 slide. In this case the mobile user can read all of the important information. And thanks to the bullets control, they can see there are more slides available.

Related Post: What is a Particle Effect and Why Should You Use It?

Related Post: All You Need To Know About Carousel Slider Type

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