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.

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.

The Photo Compare slider is a traditional looking slider. This means it displays one slide at a time. As a result your visitors get only one message at a time which they can fully understand before moving on to the next slide. The layout of this slider is “boxed” which means it fits into the container you place it. This makes the Photo Compare slider perfect addition to your blog posts.

There are no common controls to switch slides in this slider. In other words, none of the standard controls are enabled for this slider. The two arrows you can see are custom arrows created from image layers.

Layers

Two of the most important layers on the slider are the image layers that display an arrow. They’re the elements your visitor can use to switch slides. Since it’s an image layer, you can freely replace the arrows to something that suits better to your website’s design. To create the slide switching we used the Link Actions on these layers.

The other most important layer is the Before After layer, as it’s the base of the slide. The Before After layer is a cool element to compare two photos. In this case, it compares the monochrome and colorized version of the picture.

Another notable layer is the heading layer, which displays the caption of the photo. It makes the name of the photographer bold and shows the photo description in normal weight.

Animations

The only animation on the Photo Compare slider is the Main Animation. The Main Animation is the basic slide animation, which moves all elements on the slider. It can move horizontally or vertically, or with a simple fading effect.

Layout

The base layout is pretty simple at this template. First there’s a Before After layer. Below there’s a two column row, where one column contains the caption and the other has the navigation.

In this second column there’s an interesting layout element. This element is the slide counter, which displays the “01|05” text on the first slide. To create something like that on your slider, first add a new row. Second, add another column to the previously added row. Now all you need to do is to add the layers that display your content to each row. Finally, disable the full width option of the row.

Responsive

A responsive WordPress slider like Smart Slider has many cool options to ensure your sliders look perfect on all screens. The most important option for this is the ability to adjust the font size for every device. As a result, you can achieve better looking designs while maintaining the legibility of your text.

If you checked the slider on your phone, you’ve probably noticed that the previous arrow moved around. On desktop the slide counter appears first, then the previous and next arrows. However, the order changes on phones. The previous arrow appears first, then the slide counter and finally the next arrow.

Related Post: Introducing Before After Layer

Related Post: How to Create a WordPress Gallery Slider for Your Website

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

The Renovation Showcase slider is a special looking slider, what we call Showcase type. The Showcase type slider displays more slides next to each other. It always shows an odd number of slides, keeping one slide in the middle. This slide is the so called “active” slide, which the viewer can focus on.

The layout of the slider is full width, which means it fills the browser horizontally. As a result, it’s easier for more slides to display, especially on today’s large monitors. The slides next to the active slide are faded out. To achieve such effect, first make sure you set a slider background color. Then head over to the Animations tab and change the Opacity of the before and after slides.

Layers

The most interesting layer on the Renovation slide is, without question, the Before After layer. This layer lets you compare two images in the same place. It’s perfect for showing the starting and ending stages of a renovation.

Another notable layers on this template include heading and simple image layers. These image layers display the colored logos.

Animations

There are no layer animations on this template. As a result all layers are immediately present when the slide gets visible. While the Showcase type has many special animations, we chose not to use them. So you can see a simple horizontal movement when you switch slides.

Layout

The layout of the Renovation slider is plain simple. There’s a before after layer at the top, and a three column row below. To ensure the last two columns stay this close to each other, we set a Max width at both of them.

Responsive

The basic responsive behavior of the Showcase slider type is that it always fully displays the active slide, which is in the middle. If there’s room to display more slides and equal amount of new slides are revealed next to the active slide.

On mobile the layout didn’t need much adjustment, as the font sizes were good. Also, the row automatically breaks its columns into new lines on small screens. But if you’d have to make changes, you can always use the Text Scale option to reduce the font size. Also, you can change the Wrap after on the row if you don’t want it to break the columns to new lines.

Related Post: Introducing Before After Layer

Related Post: What Do You Need to Know About Slider Types?

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

Slider Settings

The Product Compare slider looks like the element people think of when you mention the “sliders” to them. It displays a single slide at a time, which helps visitors focus on the message you want them to get. Additionally, it fills the screen horizontally, which is trendy and looks good on today’s large screens.

The slider has a total of three slides. For convenient navigation visitors can use the Text bullets at the bottom of the slider. This text bullet displays the title of the slide, which helps giving an idea to the visitor about the slide.

Apart from bullets it’s also possible to browse the slides by dragging the mouse or by swiping. This navigation is super convenient for touch screen users.

Layers

The most important layer on the Product Compare slider is the Before After layer. This layers helps you create cool looking before after sliders. Choose a before and an after image and type a caption for them. Write a short caption to describe the images for your visitors. Finally, choose the color and shape of the divider. The Before After slider is ready to amaze the visitors!

Other notable layers on the slide are the heading, text, image and button layers. The button layer on this template is the “Learn more” text, and it’s very minimalistic. There’s also an HTML layer below the other layers, which displays this cool blurred shape in the background. The easiest way to locate this layer is to use the Layer List.

Animations

There are many animations on this template. The layer animations are easiest to notice, as they appear on large elements. Additionally, there’s a layer animation on every layer. These basic layer animations make the layers move upwards to their place.

The other animation on the slider is slightly less noticeable. It’s the animation of the Shape Divider, which makes the two inclines appear from the bottom. The result is spectacular and your visitors will love it.

Layout

The base layout of the Product Compare slider is a row that has two columns. The first column has the textual layers, and the second contains the before after layer. By default when you add a row, it’s columns are 50% wide. In this case the first column is only 32%, which allows the before after layer to take up the remaining 68%.

Another cool layouting solution is the 2×2 box that shows the product’s features. The main element here is a two column row where each column contains another row with two columns. But the columns of this inner row appear vertically below each other. In other words, the “iPhone 13” and “iPhone SE” layers are in a different row. This kind of layout helps keeping the details of the product together in every responsive scenario.

Responsive

Smart Slider is a responsive slider for WordPress, and it offers tons of cool options to fine-tune how your sliders look on mobile. The option you’ll want to use the most is the ability to change the text size for different devices. As a matter of fact, it’s very rare to have a text that’s font size is perfect for desktop, tablet and mobile as well.

If you check the template on mobile, you’ll notice that the two columns appear in a separate line below each other. Although all rows break automatically this way, you can change their Wrap After option anytime if your layout needs the row to break differently.

Related Post: Introducing Before After Layer

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

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

The Gym slider uses a boxed layout, so the slider can be as big as the container it’s in. You can navigate in 4 ways in the slider: you can drag, use the arrow control in the left and right, use the bullets on the bottom, or you can click on the transition images on the right side of the slider. They have a link action which you can navigate to another slide.

Layers

Sometimes you don’t need complex animations on your images, you don’t even need the image to move, just to be replaced by another image when the mouse is over it. Transition layer is the perfect choice to achieve this. The usage is extremely simple: put the transition layer, select the two images you would like to use (the first one will be shown at first, when there is no user interaction on the image, the second one will be shown when the visitor’s mouse is over the first image), choose the animation that will be played when the images are changing and you are done.

You can select from three animation types that will be used at the Transition layer. One of them is the simple Fade which will fade out the first image, and fade in the second one. The other two animations work the same way: images flipped in 3D vertically or horizontally.

Animations

Image transition animations are used to catch the visitor’s attention and make them interested in your story. Usually they are complex, they move constantly, making the user focus on the events that are happening in front of their eyes.

Also the layers also have a layer animation, when you load the slider, you will notice the ongoing animations. You can use the timeline to set the animation duration and the delay, and it can help you to synchronize them.

Layout

The first slide has a special layout, it has a tile layout. It stays from more rows. The basic of the layout is a row with two columns. The left column contains the image and the textual content, and you can see more rows in the right side.

Responsive

The slider is fully responsive, and looks good on mobile and tablet. If you check it on mobile, you will notice that the whole right basic column is missing, because it is hidden on mobile. It can save space on your page, but the visitors can see there are more slides thanks to the bullets on the bottom.

Related Post: Create a Unique Layer Slider with Smart Slider 3

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

The Ken Burns slider is a full width slider, and fills the horizontal width of your screen. When you check the slider you can notice the slider autoplay. The slider switch their slides every 8 seconds. You can also notice the autoplay indicator on the bottom which shows when the next slide will come. It can be a great option to call the visitors attention. However, the visitors can stop the autoplay if they hover over the slider, so they can read the content if they want.

Layers

Each slide uses the same layers: heading, image and button, and they are in a row which is the same in each slide. This row is special because if you hover over it the background color changes. How to create a hover effect for your layers? All you need is to select the layer which you would like to add a hover effect to – in this example the Row has a hover effect. After that you should go to the Layer window, and set a hover background color to your layer.

Animations

The Ken Burns effect is a popular effect in web design. This effect with the slider autoplay makes the slider vivid, as you can see in this slider template. You can use this effect on any websites, it achieves a professional looking animation for the images which it is used on.

The Ken burns slider is a good example where you can check how the actions work. You can try it if you click on the button on the first slide. You will see that the slide will switch to the next one. To achieve this, you can use link actions.

Layout

There are 3 slides in the slider, and the layers are in a row, where there is a button on the bottom part. This button has -30px bottom margin, and with using this negative margin you can put the button over your row which makes a great layout.

If you check the slider example, you will see that you can navigate in the slider in 3 ways. Firstly, you can drag to the left or right, and the slider will change. Secondly, you can use the buttons with the actions. Finally, you will see the arrows in the left and the right side of the slider, which are special, because if you hover on them, you will see the slide title of the next or previous slides.

Responsive

The slider is fully responsive, and looks good on any devices. If you check the mobile view you can notice the arrows are hidden. With that the content has more space, and the visitor can read it. The autoplay indicator is still visible, with that you can call the visitors attention there are more slides on the slider.

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

Related Post: Create a Unique Layer Slider with Smart Slider 3

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

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

The Coffee landing page stays from only sliders and blocks. With Smart Slider you can create a whole page with sliders, and you can put them in a group. If you publish the group, the sliders will be under each other. Also, you can fully customize all of the sliders, you can change the images, texts, delete them, it’s up to you what you want.

Layers

The Coffee block uses basic layers like images, headings, and buttons, and has special layers like the caption layer and the image box layer. The second slider has 3 caption layers. If you hover over the images, a short description will display over the image. You can change the description in the Content tab of the layer window. Also you can change the animation type here, now the Full type is used, but you can set it to fade or simple, also you can set the direction and scale.

Animations

When you check the page, you can notice the reveal animation. This kind of animation animates a single colored box in front of the layers.

The Beans slider is special in this landing page. When you scroll up or down, the bean images will move. This kind of effect is the layer parallax. You can set the direction of the movement in the Animations tab of the Slider settings. Also, you can add different values to the layers in the Style tab of the layer window.

Layout

You can meet with different slider types in this group. The landing page starts with a video slider, has simple blocks and sliders, and 2 carousel type slider. With carousel sliders you can display more slides at the same time. There are 2 ways which you can switch these carousels: you can move the whole pane, or you can switch the slides one by one if you enable the Single switch option at the Animations tab of the Slider settings.

Responsive

The Coffee one page example is fully responsive. There are layers which are hidden on smaller views, so the visitors can focus on the content. Also, the texts are smaller. To set the font size device specific, you can use the text scale option. The rows in the sliders usually wrap after 1 or 2 columns in smaller views. The first slider has a navigation, this navigation wraps after 2 columns.

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

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

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

On the Steak Bistro landing page you can find 4 Blocks and 1 Slider. As you can see with Smart Slider you can build a gorgeous one page site. Use the navigation on the first block or scroll down because every section contains something special. And yes, the whole page is made with Smart Slider!

The group contains a carousel slider. Carousel slider type is a little bit similar to the showcase slider type. The main difference between the two, is that the carousel slider type has a pane where multiple slides can sit. Smart Slider calculates the number of the slides which fits from the slider and slide sizes. When you click on the arrows or bullets, the slider switches to the next pane. If you want to switch only one slide instead, enable the Single switch option in the Animations tab of the Slider settings.

Layers

The slider and blocks contain different kinds of basic layers: headings, texts, images and buttons. They are in most cases in rows and columns which you can make a great layout. Lots of layer have a link on it like on the first block. By default you can just copy-paste links from one place to another. In Smart Slider, you can use the old technique, but we made an interactive way to work with links. If you click on the green button with the plus icon, a lightbox will open. Here you can choose from 3 options: link to a post or page, put a lightbox, or you can use a link action like scrolling to a specific slide.

Animations

You can encounter different animations in this slider group. Layer animations animates the layers, they can fade in with a nice effect. To harmonize the layer animations you can use the timeline.

Also, you can see another special effect on this slider block: the layer parallax. The first block has an image layer and a heading which has a layer parallax. If you hover over them, the layers are moving. You can set or change the parallax values in the Style tab of the layer window.

Layout

The special block has a slider background image which is fixed. When you scroll up and down the image holds its position and you can only see a slice from the actual background image. You can find this setting in the General tab of the Slider settings.

Responsive

The Steak Bistro is fully responsive. The font sizes are smaller on tablet and mobile views, and the rows in most cases wrap after one column. You can use the text scale to set the font size device specifically. With this setting you can add different sizes to different views.

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

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

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

Fancy sliders and colorful images might not suit all websites. The Testimonial Showcase slider is a great choice to show customer feedback when you need something simple. The color palette contains mostly light colors, like the gray slider background color.

The button and bullets have the same color, which encourages visitors to take action. They’re both green, which stands out and makes them noticeable.

Layers

Each slide contains 2 heading layers, a text layer, a button layer and an image layer. The image layer is a colored element in the slider, so the visitor can focus on the star rating at the top right corner. This rating shows how satisfied the customer is with the product or service in a visual way. This visual display highlights the rating and helps to build trust.

This slider does not have customer avatar, but it has a nice title instead. This title summarizes the testimonial text and highlights what they like the most. Right next to the customer’s name there’s a date, which shows how up to date their testimony is. This helps showing how trustworthy the product or service is. For instance, if there’s lots of recent good reviews that means the quality is still high.

Animations

The slides switch with a nice animation, which fits the slider perfectly. You can switch a slide with clicking on the previous or the next slides, you can drag with your mouse, or use the bullets on the bottom. At every slide switching you can see that the slides are coming with a horizontal animation.

Layout

What’s the best part of this slider? It displays three slides at a time. The active slide is in the middle. On its right and left side there’s the next and previous slides respectively. This makes it clear for visitors that there are more testimonials to read.

Responsive

The mobile behavior of this slider is special. Instead of displaying the whole testimonial text, it shows the title, name, rating and a button. The button has the Read More text on it, which encourages the visitors to go and read the full testimonial. This practice helps to keep the slider height small. Not having to scroll through a long slider improves the user experience. The fraction of the next and previous slides show still, but the bullets are hidden. The mobile visitors can switch slides by swiping left or right.

Related Post: Best Testimonial Slider Examples for WordPress

Related Post: Create a Unique Layer Slider with Smart Slider 3

Related Post: 10 Beautiful Full Width Slider Examples

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