This Full-width slider is designed to look great on any screen size, making your website visually appealing across devices. It comes with handy controls to make browsing easier for your visitors. You can simply drag the slides left or right, which works especially well on smaller screens where swiping is common. Beneath the slider, you’ll see three dots that act as bullet points. These help users choose which slide they want to see and show how many slides are available.

The slider automatically changes slides every 8 seconds, adding a nice touch of movement. But if you want more time to read the text, just click on the slide to pause the autoplay feature.

Layers

Besides the columns and rows, this slider keeps things simple with just two layers on each slide: text and headings positioned at the top.

But here’s the interesting part, on the bottom half of each slide, there’s a column featuring unique background images. These images are custom-made with gradients, adding a stylish touch. Plus, the column itself has rounded corners, all thanks to its border-radius settings, giving the slider a clean look.

Animations

Each layer comes with a cool animation that kicks in as the slide loads, appearing one after the other. The text and heading layer smoothly enter from each side of the slider with basic incoming animations, while the column featuring the background image unveils itself with a captivating green reveal animation.

To see these animations, just check out the timeline. It gives you a visual look at all the animations happening on your layers. Plus, you can adjust how long they last and when they start. And if you want, you can even add new animations or copy them from one layer to another right there.

Layout

The slider uses a simple layout: there is one row with 2 columns and another with one column. The top two columns contain the textual layers, and the bottom column has the above-mentioned image background.

On mobile, the first row wraps after 1 column, so the textual elements are below each other.

Responsive

The slider works great on mobile devices, offering some important benefits for small-screen users. It’s entirely touch-friendly, so you can swipe through slides effortlessly. Plus, getting it to look good on small screens doesn’t take much effort. It adjusts automatically to fit any device.

To improve readability on mobile, you can adjust the text size using the Text scale option. You can also hide certain layers on mobile to keep the slider from getting too tall. You can still find these layers in the Layer List.

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

Settings

Traditional sliders, which display one slide at a time, are still very trending. For this reason, we chose the Simple slider type for our new slider template, the Real Estate. Nowadays it’s common to use a slider as a hero section of the page. Typically, these sliders take up the full width of the page, just like the Real Estate slider does.

So, this slider is perfect to use it as the hero header of your site. Because it displays only one slide on larger screens as well, it has plenty of space to create a gorgeous layout.

There are several ways for the visitors to browse this slider. The most obvious way is using the bullets at the bottom of the slider. Their unique, line-like layout makes the bullets look trendy and modern.

Apart from the bullets, visitors can browse with swiping or dragging. Additionally, the first slide has a custom navigation via the images. Clicking on each image will switch to one of the last three slides.

Layers

The first slide of the Real Estate slider provides a unique experience due to the Caption layers it has. The Caption layer is a special layer in Smart Slider 3 Pro. It helps you create a caption for your image on mouse enter easily. This caption layer is also used for navigation, which can be done easily using the Link Actions. Watch the video below to see how easy it is to set up a Link Action for a layer.

Apart from the Caption layer, each slide has a CTA button.

Animations

There are some interesting animations and effects in this slider. First, it has a Shape Divider, which creates the white-colored curve at the bottom of the slider.

Then, on each slide there are layer animations. The text use a basic animation, that moves them in from the left. But the images use the Reveal type animation. Reveal animations are special kind of layer animations. They don’t just animate the layer, but they place and move a single colored box in front of it. This make the effect look more special.

When you switch slides, you can stop a simple fading effect as the layers fade out. This is the Main Animation, which affects the layers, when they don’t have animations. Since the layers have incoming layer animations, they don’t fade in. Instead, they use their own special animation to appear on the slide. But none of the layers have outgoing animations, so they just fade out.

Layout

The layout of the Real Estate slider looks very special, but it’s actually quite simple. It’s based on a large row, which has two columns. The first column, where the texts are, is 1/4 wide. The larger column is 3/4 wide, and contains another row in each slide. However, on the first slide, the inner row has three columns, and each column is 1/3 wide. On the other slides, the inner row has two columns. One of them is wider, for the bigger image, and one smaller, for the 3 small images.

Responsive

Smart Slider 3 is a responsive slider, and it has a unique way to position layers. These are the Default positioned layers, and you should use them to create your slide content. First, you can work quickly and precisely with them. Second, they’re easy to use. Third, they help creating responsive sliders with minimal effort.

When you add a Default positioned layer, it keeps the text size on smaller screens. This ensures that your content remains legible even on the smallest mobile device. Default positioned layers can increase the height of the slider, if they need more space. As a result, your slider stays enjoyable for mobile users. But you haven’t had to make any changes for mobile yet, because the system takes care of these for you.

Of course, there are responsive options you can use to adjust your slider for small screens if needed. For example, you can change the font sizes to make the content fit better into mobile size. When you add rows to your slides, then their columns break into new lines on mobile due to the Wrap after option. To create the layout of the inner row, the Wrap after option had to be adjusted there.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

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.

Settings

Using a colorful but simple fullwidth slider makes any website look modern and trendy. This slider stays from 6 slides, 5 simple and 1 static slide. The static slide is over the other slides, and there are the colored images which are moving if you hover over them.

Layers

The content of the fullwidth slider follows a minimalistic approach. For instance, the first slide has just three layers: a highlighted heading, a text and a button layer. This button layer serves as an easy to notice CTA. Clicking on it makes a few more layers show up, which serve as in-slider navigation.

Apart from using the Next service button on each slide, you can navigate via the arrows, which you can find at the bottom right corner of the fullwidth slider. To make the slider touch friendly, you can switch slides by swiping on mobile devices and dragging on desktop browsers.

Animations

The fullwidth slider example uses small, moving elements to create this colorful effect. These small icons rotate by themselves, but hovering on the slide activates yet another movement. This movement is happening because of the layer parallax effect, giving a really nice touch to this slider.

Layout

The first slide has the most interesting layout, there is a 1 row 2 columns structure. In the left column are the headings and the button layer. On the right side of the slide you can see 2 rows under each other which are only visible if you click on the CTA on the left.

Responsive

When you check the slider on smaller devices like on your mobile, you will notice that the columns wrap under each other, and there are layers which aren’t visible. These layers are hidden on mobile, so your slider won’t be too tall.

Related Post: Everything You Need to Know about the Parallax Effect

Related Post: 10 Beautiful Full Width Slider Examples

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

Settings

Unlike normal sliders, WordPress carousels show multiple slides at the same time. This is a really good way to showcase the latest or hot products, blog posts, images or videos. You can set the whole slider and the slides widths and select the number of items to move. Creating and managing a responsive carousel has never been easier.

At carousel sliders you can set the slider size and the size of the slides separately. The slides which display next to each other are in one pane. You can set a maximum width for the pane which you can limit the maximum amount of slides that can be displayed next to each other. In this slider 3 slides appear in one pane.

Layers

The most attractive layer is the Transition layer in this slider. If you hover over the image, you can check another image with a fading effect. With this you can display 2 images in the same place.

In some slides you can notice a new or sale badge in the top right corner. These layers are in absolute position, and always are in that corner. You can anytime replace the text, or delete it.

Animations

The carousel uses a horizontal main animation, if you click on the arrows, bullets or drag with your mouse, the whole pane will move horizontally. If you want to switch only one slide, not the whole pane, then you can enable the single switch option at the Slider settings → Animations tab.

Layout

If you open the layer list, you are able to check all of the layers on your slide. As you can see on the image below, there is a transition layer on the top of the slide, and a row below that image. This row stands out from 2 columns where heading layers are.

Responsive

If you check the carousel on smaller screens, you will notice that the carousel slider works that way, that it can only show as many slides as many can fit into the available space. So on mobile devices you can see only one slide, and should drag if you want to see the others. The arrows are hidden on mobile, because with that you can save space on the edges, but the bullets helps the visitor to see there are more slides in the slider.

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

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!

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

The Lawyer Slider is a full width video slider, and can fit to any page. You can use it as a hero header, so this slider can be the first that your visitors can see on your page.

The first thing you might have noticed that there is a video in the background. The video is used as the slider background, so it’s always visible below the slides. You can change it in the Slider settings → General tab → Slider design.

The slider contains 5 slides, one of them is a Static overlay, where the navigation is. You can use it to switch to the other slides. None of the slides have background, just layers which create the content. As a result, the slider background video is visible at each slide.

Layers

If you go through the slides, you can meet with different layers: headings, images, and buttons. The last slide offers special layers: animated counters. They give a nice visual experience, and attract the attention of your visitors. Also, with counter layers you can present numeric information in a more interesting way.

In Smart Slider 3 you can use links and actions on your layers. For example, a button layer can have a link to go to another page of your website. Or you can use link actions, like on the Static Overlay, to navigate to the other slides of the slider. This kind of navigation makes your site more interactive.

Animations

Each layer has a great incoming animation. When the slide loads, the layers are coming in one by one. You can check these animations in the timeline. The timeline is a visual way to check your layer animations. Additionally, it lets you view and change the duration and delay of the animations. Furthermore, you can add new animations, or copy them from layer to layer here.

Layout

Each slide has a different layout. There are the layers under each other in the first slide. On the second slide the layers are in a 1 row – 6 columns structure. The row wraps after 3 columns on desktop and tablet, and after 2 columns in mobile. On the third slide you can also see a row just in case with 3 columns.

But the last slide has a special layout: there is a row with 2 columns, and another row in the second column. The left column has a white background but the right one is transparent. So the content can be separated from each other. All layers can be found in the layer list, where you can change their order. Additionally, you can select a layer which you want to customize.

Responsive

The Lawyer Slider is fully responsive, so it looks good on each devices. To make the texts more legible on mobile, we used the Text scale option. Also, there are layers which aren’t visible on mobile devices, to avoid making the slider too tall. Of course, you can find these layers in the Layer List.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

Settings

The biggest challenge for any web designer is to craft a creative website for their clients. They use various techniques to amaze everyone who visits the website. One of today’s coolest trends uses illustrations. An illustration can make any website leave a memorable experience for the visitor. The most common approach to present such graphics is a header illustration. A header illustration helps grab the visitors’ attention as fast as possible.

When you create a slider and publish it, it will start on the first slide by default. But Smart Slider gives you more control over this, as it lets you change the first slide. This way you can decide which slide you want to start your slideshow on. When we created the Header Illustration slider, we made it start on the second slide, which is in the middle. You can change the first slide if you click on the 3 dots on the top right and click on the “Set as first” option. The star icon marks the starting slide in the slider.

Layers

The first slide of the illustration header has two large CTA-s, which you can use for navigation. These CTA-s are rows with 2 columns. Also, there’s a layer event connected to each row. When you hover on them a layer animation launches on the right side. This subtle effect gives a nice touch to the header slider.

When you click on the first row it takes you to the last slide of this slider. You can find a bunch of new illustrations and blobs here, and the parallax effect is present as well. What’s pretty cool on this slide is the counters. With the counter layer, you can count from a given number to another. This lets you create, for instance, animated statistics for your illustration slider.

Animations

The cool illustrations are the best parts of this slider. They occupy more than half of the slider, so it’s hard to miss them. The solid illustrations raise the visitors’ attention and give a neat look to the slider. At the right side of the slider, you can see colorful shapes in the background. These are the blobs, which have the mouse parallax effect, and this gives a fun touch to the slider. The shape divider at the bottom is the coolest floor you’ve ever seen in any header.

Layout

In Smart Slider there are two position modes, the default and absolute positioning. With absolute positioning you are able to put down your layers anywhere, but everything just floats, so the layers aren’t affecting each other or the slide. In default positioning layers are taking up space, where other layers can’t go, so layers won’t crawl under each other, also they are making the slide as big as it needs to be, to leave space for all the layers, margins and paddings.

You can find both positioning in this slider. The absolute layers are decorations and are below the defaultly positioned layers. They look good, and have a layer parallax effect on it.

Responsive

When you check the slider on mobile, you can notice the image layers in the background are hidden. With hiding a layer you can save space on smaller views, and the focus can be on the content of the slider.

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

Related Post: Everything You Need to Know about the Parallax Effect

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

Settings

With a Layer slider you can cheer up the visual appearance of your website. You can tell your story by using layers like a heading or text.

This slider stays from 4 slides, and every slide has a different background color which makes your website colorful. It is important to keep the harmony between the layers and the background, the layers should be legible and clearly visible like in this Layer slider.

A navigation is also important on a slider, in this sample you can see the number type of bullets where the visitors will see how many slides there are, and can switch them. What is more, you can see arrows too, but the carousel mode is turned off here, so you can’t switch from the first slide to the last one, you can navigate only in one way.

Layers

The goal of this sample is to catch the visitors’ attention and with the buttons and icons call to an action. In this sample slider the animated heading layer is the first what you will see, which keeps up interest on your website. The animated heading changes more words with a nice animation, and the visitors will focus on that. In this example, the typewriter effect is used, but you can choose from more animations at the layer window.

The last slide is special where the HTML layer is used, which contains a contact form, and gets the visitor to do something. I can suggest the HTML layer for developers who want more functionality in their slider. In the background video is played, and with a video slider and with the animations your slider will come alive and be powerful.

Animations

Everyone loves fancy transitions on their website and layer animation helps you create really amazing sliders. The layer movement catches the visitors’ eye like in this example and that makes the slider complete. Use the timeline where you can set the duration and the delay of the animation, and can see how they work together.

Layout

Go to the second slide, and you will see this slide has a special layout. There is a basic row with 2 columns, so you can see the content on the left side, and images on the right. There are 3 images, but if you check it you will notice that 2 images are under the third thanks for the absolute positioning.

Responsive

Smart Slider has more responsive settings which you can make a fully responsive slider. With the Text scale you can make the text lower on different devices, also you are able to hide layers. If you have too much content on your slide, it can make your whole slider bigger. So take care of the sizes, and hide layers if it is needed.

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

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

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

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.

Slider Settings

The Interior Showcase template displays more slides next to each other. The showcase slider type which is the base of the slider can display an odd number of slides together. But it always keeps the active slide in the middle. This helps the visitor focus on the primary slide and also see that there are other slides which they can check.

The extra slides displaying next to the middle one can be used for navigation. Clicking on any of these slides makes the clicked slide appear in the middle. Apart from these slides, each individual slide contains navigational arrows to switch forward or backward. Additionally, you can switch slides by dragging or swiping.

There’s also a bullet navigation at the bottom of the slider. Bullets are great way to indicate how many slides there are to see and you can also use them for navigation. The bullets show the slide that has the number 1 on it in the middle. This happens because the starting slide is actually the one in the middle of the slider that was set to be the first slide.

Layers

The Interior Showcase slider uses simple layers to display the content. It has a heading, a text, two image and a button layer. The image layers create the forward and backward navigation using Link actions. While the other layers provide the textual content of the slide.

Animations

Although Smart Slider has many great animations, such as layer animations or parallax effect, we choose to keep this template simple. For this reason, the only special effect it has is the Shape Divider at the bottom of the slider.

Layout

The Interior Showcase slider uses a simple layout, but it still looks special. It’s content it placed at the top and bottom of the slide. How to achieve such look? Well, you need a row where the Stretch option is enabled. The Stretch makes the row fill up the whole slide vertically, so it can push the content above it to the top of the slide. Then inside the row’s column the content is Vertically aligned to the bottom.

Responsive

Smart Slider is a responsive slider that offers many great features to make your slides look perfect on small screens. For example, you can adjust font sizes to make the texts easier to read on small screens. Additionally, you can hide layers that are less important to save space on your slider. At the Interior Showcase template we hid the button and the text layer on mobile.

Related Documentation: Link actions

Related Post: 10 Beautiful Full Width Slider Examples

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