Settings

At the showcase slider you can see multiple slides together. The active slide is in the middle, but you can switch to other slides by clicking on them or with a simple mouse drag. The non active slides are rotated by 45° and are scaled to 80% of the original size. With these settings your slider will be better looking and clearer, and you can focus on the active slide.

You can navigate horizontally, and there is the carousel option turned on. This means that the slides will cycle through continuously without stopping at the last slide, so after the last slide will come the first one. A simple dark grey background image is used which you can easily change to another image or you can pick a background color at Slider settings → General tab → Slider Design.

This showcase sample slider uses the boxed layout so the slider can be as big as the container it’s in. So you can use it easily in your theme, it will fill the area where you put its code.

Layers

Each slide has the same layout, and layers: an image layer on the top, 2 heading layers and an area layer. The Read more text makes an interaction with the visitor, you can put a link there and the visitor can navigate to another page or post. Also, you can see there is a line below the Read more text, which is a 2px height area layer. You can use it as a separator or a cool design element.

If you click on the active slide, a lightbox will appear with the background image. With a lightbox you can open images, videos or a page in iframe. You can use it without breaking your theme layout, because the lightbox appears above the current page, not within.

Animations

In the Showcase sample slider you can see a layer parallax effect which is based on the mouse cursor position. With this parallax effect your slider will be more powerful, and can make the illusion that the layers are live. If you hover on the slide you will see that the layers will move in a different direction.

Layout

Each slide uses the same layout, there is an image on the top right, and 2 rows below it. In the first row is the heading layer, and the other heading and the area layer are in the second row. At the top row the stretch option is enabled so fills the vertical area of the slide, and puts the image on the top and the other row on the bottom.

Responsive

If you check the slider on mobile, you will notice that the second row with the Read more text is missing because it is hidden on mobile which you can save space, and your slider won’t be too big. But if you want to enable these layers, then open the layer list, find the row, and enable it on mobile at the Style settings of the row.

Related Post: Add Lightbox Slider to your WordPress site

Related Post: How to Create Beautiful Responsive Image Slider?

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

The slider on this page is a full page video slider. It plays an MP4 video in the background, behind all the layers. These layers usually contain more important information than the background video. Because of this, it makes sense to put the video in the back. Since the video only serves design purposes, it’s not a big problem if some parts of the video aren’t visible. To ensure that your texts are legible, make sure to use a different font color than what the video’s main color is. To improve the legibility further, you can set an overlay for the video at the layer window.

The slider is suitable as a hero header. All major desktop browsers support MP4 videos, which we use for backgrounds. What’s even better, the modern mobile browsers can play these videos as well. There’s one thing you should be aware of, and it is the way mobile browsers handle videos. They allow only muted videos to play automatically.

Layers

There’s not much content on the slider, so the visitor can focus on the message. There are only 3 layers: a heading on the top, a text layer below that, and an image box which opens a lightbox video.

Animations

Smart Slider 3 Pro has a lightbox feature, which is used on this sample. The lightbox opens the same MP4 video which you can see in the background. Of course, you can put any other video to the lightbox, or an image, or even any URL. Using a lightbox you can allow visitors to enjoy the content without any distraction.

Layout

This slider is a full page slider, so its height and width fill the 100% of your browser on any device. If you want to use it as a homepage slider, and you have a navigation on the top, then you can decrease the height of the slider with the height of your navigation.

Responsive

When you check the slider on mobile, you can see the texts are smaller. This is because of the text scale option which you can set the font size device specifically. With this setting you can make the content legible, and good looking on each device.

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

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

The post Full Page Video Block appeared first on Smart Slider 3 — WordPress Plugin.

The Nala Fullpage uses the simple slider type. Simple sliders are the most common sliders you can find on websites. They display one slide at a time which allows visitors to view every part of the slider before moving forward. It uses the full page layout, which means the slider takes up the width and height of the browser’s viewport. As a result, the only thing visible on the screen is the slider.

Layers

Smart Slider has several layers to create content. There are some layers that are more popular than others, because they help creating the most needed content for the slides. Some of these layers are heading, text, button and image. You can find each of these layers on the Nala Fullpage slider.

Animations

The Nala Fullpage is full of animations. Right when the slider loads you can see the layers moving in from the left and right side. These are layer animations which are nice tools to have as they can introduce the layer in a trendy way.

The other effect is visible when you change slides. It affects the background animations, making them move in a special way. The background animation we used here is the Morph – Wave animation. It morphs the current image into the next one with a wave-like effect.

Layout

Probably the most interesting layout solution in this slider is a custom button. We created it using a row layer that has the button’s background and border. It also has a nice hover effect. Additionally, the clicking on the row (or anything inside it) opens a video in a lightbox.

Responsive

Nowadays you need to create websites and sliders that look great on the smallest screens. Smart Slider provides you all the tools you need to create a responsive slider for your websie.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

The Iceland Adventure group stays from 9 sliders. You can use Smart Slider to create whole landing pages. This group is the perfect choice to create a landing page for your travel website. You can fully customize each slider, change the images, and texts, also you can add more sliders, or delete them if you want. If you publish the slider group, then the sliders will be under each other.

Layers

The Iceland Adventure group uses simple layers: headings, images, texts, and buttons. They are usually in rows and columns which you can put them next to each other. There are layers with link actions. For example, the first block of this group is a navigation, and each text layer has a link on it. Here we have used the scroll to action which you can scroll to specific sliders.

Animations

When you check the page you may notice each layer is coming in with a nice layer animation. You can customize these animations in the animation tab of the layer window, also you can use the timeline where all of the animation displays.

The second section of the page has a shape divider on the bottom which is a great separator between two sliders. Also, you can meet with a great effect on the Guide Book: with the layer parallax. When you scroll up or down, the image layers are moving in the background. You can set this vertical scrolling effect in the Animations tab of the slider settings. Also, you can add different parallax values to the layers in the Style tab of the layer window.

Layout

The Guide Book has the most special layout in this group. There is a row with 2 columns. The first column contains an image, and the second has 2 headings, a text and a CTA button. Below the content you can see 3 extra image layers which are in absolute position. With absolute position you can put your layers anywhere in the canvas, and it can be very useful at the decoration.

Responsive

The whole landing page is fully responsive. The rows wrap in a smaller view, and the texts are smaller. You can change the font size device specifically with the text scale option which you can set in the layer menu or in the Style tab of the layer window. With that you can set different font sizes for different devices.

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

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

The post Iceland Adventure Group appeared first on Smart Slider 3 — WordPress Plugin.

Showcase sliders shine if you want to create a slider that shows many slides at once. This slider type keeps the main video slide in the middle while it shows parts of the next and previous slides beside it. This shows visitors that there are more slides to see and encourages them to check them out. In the current slider’s case, the slides on the left and right are semi-transparent, and also smaller than the middle one. This helps the visitor clearly identify the content they should interact with.

The slider is full width, which means it will cover the browser width. This makes the Video Showcase slider a great header slider or a landing page slider. It’s also great for post sliders or showing images instead of videos.

Layers

Each slide has the same layers: an image, 2 headings and a button layer. This button uses link action to go to the next slide. Each video in this slider opens in a lightbox. This means that the actual video doesn’t load with the slider, only the placeholder images do. Lightboxes are great to show videos, because they allow the visitors to focus on the video with no distraction. The videos in this slider come from YouTube, but they can be simple MP4 videos or hosted by Vimeo.

Animations

If you switch a slide it moves horizontally. This is the main animation of the slider which you can set in the Animations tab of the Slider settings. Here you can set the showcase animations, too. The previous and next slides are a bit smaller and have an opacity, so you can focus on the active slide in the middle.

Layout

We created the slides with default position, which ensures the great responsive behavior for the layers. In this case, this means that the texts remain legible on all devices, including the smallest mobiles. Visitors can navigate between the slides using the bullet dots, dragging or swiping or using the “Next video” button.

Responsive

Showcase sliders have a special responsive behavior, which allows them to display more than one slide on each device. The problem is that on mobile the slides can shrink too much because of this. We set this slider up to ensure it has the best responsive behavior a showcase slider can have. Thanks to that, the slider looks gorgeous on mobile.

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

Related Post: Add Lightbox Slider to your WordPress site

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

If you have a company it is useful to have your own website on which you can give information to your visitors and your business can also be easily found. The bakery page example is a great demo that you can use on your one page website. This landing page consists of 5 sliders which you can fully customize to your needs.

The bakery slider group starts with a navigation on the top. Here you can see a logo image, the menu, and 2 small icons on each side. With the menu, you can navigate to other sliders using the ScrolltoAlias action. In the group, each slider has an alias, which can be useful at the navigation.

The next slider is a simple full width slider with 3 slides. The slider switches their slides automatically with the slider autoplay. Small but important settings are the arrows and the bullets. In this slider, the text type arrow and the number type bullet are used which give a special navigation effect for the slider.

Layers

The first slider is a good example of how you can use the default and absolute positioning together. The textual layers are in default position in a 1-row 2-cols structure, and the images are in absolute position.

The image layers are in absolute position where you can position your layers anywhere in the canvas, and you can put a layer above or below to others.

Animations

When you scroll on the page you will notice that almost each slider uses animation. My favourite is the Bakery slider on the top, where the first col has an incoming animation, and there is a CTA which calls the users’ attention. The second col has 2 heading layers and they have a text animation which gives a nice visual effect.

The image layers come in with a nice layer animation, too, so when the visitor sees the page first, they can read the text below them, then the images come in.

The about block is simple but spectacular because of the parallax effect. Thanks for the fixed slider background you can make a great visual effect on this slider block. You can set the background image to fixed at the Slider settings.

Layout

Each slider uses a different layout, but the most interesting is the Specials block. This block uses a grid layout, which consists of 2 rows. In the first row there are 3 columns and in the second row there are 2 cols.

The first row is special because in the second column another row with 2 cols is used. At this row we have used the wrap after value, so after 1 column the second begins in a new line.

The grid where the textual layers are has a column background color which can change on hover to the color of the slide background giving a special effect to the visitor.

Responsive

The Bakery page is fully responsive, and looks good on tablet and mobile devices. We have used the Text scale at each device which we made the text smaller, and there are sliders where layers are hidden in small devices.

Related Post: How to Create a Cool Text Animation

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

Related Post: 12 Stunning One Page Examples Which You Should Check

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

The Green Energy template is a slider group. What makes slider groups special is that they can contain any number of sliders and blocks. They’re like folders, that let you export and publish a group of sliders together. Additionally, they help organizing your sliders in your Dashboard.

In this template you can find 4 blocks and 1 slider. If you’re wondering what’s the difference between a slider and a block, here’s a simple explanation. Blocks are special kind of sliders, that can only display one slide. This lets you take advantage of Smart Slider’s cool features on your website, without having to create an actual slider.

All sliders and blocks are full width in the Green Energy template. Full width sliders are popular, because they fill the browser horizontally. There’s another thing worth mentioning about the first block. It has a slide background video. Background videos, just like background images, are design elements that let you fill the whole slide area with your content.

Layers

Usually there are many sliders and blocks in a slider group. As a result, there are many different layers inside them as well. Of course, this template is no different. However, you can find the most popular layers, the heading, text, image and button layers here.

Animations

There are many layer animations in this template. Almost all blocks have some kind of special effect on some of their layers. For example, the menu on the first block appears with an incoming layer animation. Similarly, the text blocks in the Services section use a layer animation to appear.

Apart from the layer animations, there’s a lightbox in the first block. It opens up a video from YouTube when you click on the play icon.

Layout

The Green Energy template has many interesting layout solutions. Let’s highlight the two most interesting and see how they were built!

You can find the first interesting layout on the Invest block. It’s the green box that’s aligned to the bottom of the block. The base of the slider is a two column row, and this box (which is actually another row) is placed in the right column. The vertical align on the Column is set to bottom, and the row has a maximum width. This prevents it from filling the column horizontally.

The other interesting layout that worth mentioning is the bottom slider. It’s navigation and textual content is on a Static Overlay. However, the images are on regular slides. Both the Static Overlay and the other slides have a three column row as their base. However, on the Static Overlay the first column, which has the content, is wider than the other two columns. This creates the kind of overlapping effect.

Responsive

Smart Slider offers many tools to create perfect looking sliders for mobile devices. Some tools, such as wrapping a row’s columns into new lines take effect automatically, although you can change it back if you need the columns to be next to one another. This behavior was quite useful in the Services block, which allowed the two columns to display below each other in the main layout. Also, the inner row, which contains the image and texts also wraps to more lines automatically.

But there are other options which you can adjust manually, such as the font size or the alignment. For example, on the first block the layers are aligned to the left on desktop, but they’re aligned to center on mobile.

Related Documentation: Slider Group

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

The post Green Energy 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.

The Orion Block template is a special kind of slider. In fact, it’s not actually a slider, but a block. Blocks are special because they can only display one slide. For this reason they’re perfect for hero headers.

Layers

The template uses some of the most common layers, such as heading, text and button. However, it also has a special layer, the Animated Heading. This layer can replace word(s) within your text, making the experience more interesting.

Animations

The most obvious animation on the template is the Layer animation which introduces the layers. In Smart Slider you can find 3 kinds of layer animations: incoming, loop and outgoing. In this template we only used the incoming layer animation.

Apart from layer animations, the template also has a layer parallax effect. The layer parallax reacts to the mouse movement, moving the layers away fro mthe mouse. Additionally, it’s a 3D effect which is a lot more interesting.

Layout

The layout is rather simple, but it has some interesting aspects. For example, the Content layer has a Max width and its aligned to the left side of the slider. This way the right side stays empty, allowing the image captivate the visitor.

Responsive

Smart Slider is a responsive slider and offers many tools to optimize the mobile result. At this template our favorite tool was the Font resizer which helped us optimize the text size for mobile.

Related Documentation: Where to find the Slide Library?

Related Post: Smart Slider 3 – Slide Library

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

Settings

Courses slider is a gorgeous full width slider what you can use on your website. It features a nice image in front of single colored background. This gives a modern look to the whole slider. Additionally, this dark background the Shape Divider at the bottom truly stand out.

The arrows on the Courses slider stay inside the slide content. How to create arrows like that? Using the Advanced Position at the arrow control. With the Advanced Position feature you can use Control variables for positioning. This way you have a lot more options to place your arrows, bullets and thumbnails on your slider.

Layers

You can find some special looking layers on this Courses slider. Let’s start with the button layer, that has an icon in front of the textual content. At the button layer you’re able to select an icon the layer shows, which can help you make better CTA.

At the bottom of the slide you can find two image box layers. These layers are special, because they let you hold an image or icon, a heading and a description in a single layer. This opens up many designing possibilities.

To get this left-aligned layout, we put 540px max width on the row. As a result, the layers are taking up approximately half the slide, which gives a nice layout.

Animation

The most special part of the Courses slider is its animation. What makes the animation look so cool is that the Main animation got combined with two layer animations. So, what does exactly happen when the slides switch?

The Main animation moves the downscaled Content layer to the middle. Then the Content layer starts to scale up, and during this time, the layers in the row move in from the right.

Apart from these cool effects, the slider has a lightbox feature which you can launch from a CTA button. It prompts the visitor to learn more about your course by watching a video.

Layout

The layout of the Courses slider is based on the Content layer. This Content layer has the image of the slide. The reason this creates a special look, because the Content layer can only as big as the slide canvas is. In other words, it does not always cover the whole slide.