Minimalist websites and sliders aren’t going to go out of date. Why not spice up your website with a minimalist testimonial slider? On the slider above, you’ll find a nicely placed slider background image. It’s easy to recognize the slider background image. This image stays static while the slides move in front of them. To increase the legibility of the slides, we’ve darkened the background image. This high contrast allows the white texts to be read on each slide.

Layers

The slides have an image layer, which displays the customer’s picture. The images were rounded beforehand. Below each image there’s a text layer. It contains the testimonial text, the customer’s opinion on the product. The text color is white and the size is big, as this is the most important part of the testimonial slider.

At the bottom of the slide there are two heading layers: the top has the customer name. The bottom one, with lighter font color, reads their occupation. This isn’t crucial info, but it might be a great addition. For instance, if you sell products for athletes, you want to show which professionals are using it. This encourages the visitor to buy.

Animations

After the slides have switched, the layers reveal themselves by fading in from the right. This gives a small motion to the slides which makes them more interesting for visitors. You can manage the layer animations in the timeline, here you can copy and paste the animations, change the duration, or set the delay. Also, if you click on the animations, the layer window will open where you can see the other layer animation settings.

Layout

The slider has a simple structure: the layers are under each other. The arrows are in the left and right sides, and the bullets are on the bottom which gives a frame to the slider.

Responsive

You can switch slides three ways: by arrows, bullets or dragging/swiping. This makes the slider mobile friendly. On mobile devices it’s more natural and convenient to swipe than to tap small elements. We’ve built each slide using default layers, which makes them behave better on small screens. For example, the texts are smaller on tablet and mobile. For that you can use the text scale option, which is device specific, so you can set different values on each device.

Related Post: Best Testimonial Slider Examples for WordPress

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

The post Simple Testimonial 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.

Sliders are the most widely used design elements on websites. They are usually the first parts of the page that the visitor sees when they arrive. People use sliders to showcase their most important content. Since sliders are so important parts of the site, they often have some kind of inner navigation. For example arrows or bullets but if there are many slides to see, arrows are a bit uncomfortable to use. Bullets are slightly better, but they’re hard to use on mobile devices. This is why slider developers came up with the idea to create a thumbnail slider.

Thumbnails are one of the best navigation elements in a slider that you can use, and in Smart Slider 3 you can easily create a slider with thumbnails. At the thumbnail control you can turn it on and simply customize it. You can even upload a picture, so you don’t need to use the same image as you have used in the background.

Layers

Each slide has the same structure and layers: there are 2 headings on the top, after an image comes, and then a text layer. The first heading is uppercased which you can set at the Style tab of the layer window under the More button.

Animations

Everyone loves animations on a website and on a gallery slider, they can make your page more powerful. Besides the main and background animations in the Pro version of Smart Slider 3 you can put animation on every layer. In this demo slider you can see the same animations coming one after another on every slide.

You can check every layer animation in a visual timeline, where you can set the delay, the duration and the sequence. If you click on the animation on the timeline, it will open the layer window animation tab where you can edit the selected animation. Pressing the space key will start the animations, so you can see a preview of the animations.

Layout

All of the layers are in a 1 row 1 column structure. The row has a white background, and the column has a 2px border which gives a frame to the content. The content layer has a maximum width so the white box will have the same width on bigger screens.

Responsive

All of the layers are visible in smaller screens, just in this case they are smaller. You can customize the font size with the Text scale option on smaller screens. Also, by default the thumbnails are hidden on mobile, but at this slider we have enabled them, so they are visible, and the visitors can navigate between slides.

Related Post: Create A Responsive Thumbnail Slider

Related Post: How to Create Beautiful Responsive Image Slider?

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

The post Thumbnail slider 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 base of the Infinite Logo Carousel is a carousel type slider. The Carousel slider type is a special type in Smart Slider 3, that can display more slides next to each other. In this case, you can see 4 slides beside each other. The amount of slides the slider can display depends on two factors: the current slider size and the set slide size. If you don’t want to display too many slides next to each other, you can use the Max pane width option.

The slider uses boxed layout, which means it will always have the same size as its container. For example, if you place the slider into a 800px wide container the slider will have this size as well. Additionally, it will only display two slides. The slider has a white background color. You can change that at General tab → under Slider Design.

Layers

Every slide contains a one column row, that contains the image layer with the logo. Each image layer has 100x102px size, which makes them fit perfectly into the slides. To help you prepare the perfectly sized image, you can find how big image is used at each image layer or background. Just check the top right corner of the image field.

Animations

The most obvious animation on the Infinite Logo Carousel slider is the Autoplay. This option makes the slides change automatically, without any user action. The autoplay is a great way to get your visitors to engage with your slider. But be careful! An autoplaying slider that switches too fast will have a negative impact. People don’t like being interrupted when they read or watch a video. So make sure you set the autoplay duration carefully.

Layout

As mentioned above, each slide contains a row and a column inside. This column is the place where we set the gray background color. This color is a great way to create contrast with the white background of the slider. Additionally, it helps to make the slides stand out.

Responsive

The Carouse slider type’s basic responsive behavior is hiding the last slide if it can’t fit anymore. As a result, the smaller the screen where you check the slider, the less slides are visible. For example, on most mobile devices this slider will display one slide at a time. Because of this, the slides in a carousel slider always look great on mobile.

Related Post: How to Create a Stunning WordPress Logo Slider

Related Post: How to Create Beautiful Responsive Image Slider?

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

Simple but elegant design elements are the future of web design. This applies to sliders and galleries, too. This simple Image Slider is a great way to display an image slider on any website. It’s a boxed slider, which makes it perfect to publish inside posts or any non-full width sections. The slider’s structure is quite simple, as it has three slides only. The visitor can go through every slide using the arrows, bullets, swiping or dragging.

Layers

Each slide has a short caption that describes the image of the slide. The font color of the caption is white, and there’s an opaque dark background behind it. This ensures that the text remains legible regardless of the image behind it. The font family is Raleway, which is easy to read, especially in such a big size.

Animations

When you switch a slide with a mouse drag or with the arrows, the next slide fades in. This fading effect is the main animation which you can customize at the Animations tab of the Slider settings. It can be a horizontal, a vertical animation, or you also can disable it if you don’t need that animation.

Layout

At the bottom of the slider there’s a dark shadow. It’s created by the Shadow control feature. There are seven predefined shadows, and in the Pro version it’s possible to upload a custom image. Just like every control, shadows can be hidden on desktop, tablet or mobile devices. Shadows are great to make the slider pop off the page giving the impression that visitors can physically interact with the slider. Shadows also help to state hierarchy between the slider and the rest of the page. They make the slider appear above the rest of the page content.

Responsive

Thanks to default positioning, the caption remains legible on mobile. The caption is positioned to the the bottom-left corner of the slide on big screens. But on small mobile screens, the caption is moved to the center of the slide. This small change improves the look of the slider on small screens.

Related Post: How to Create Beautiful Responsive Image Slider?

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

Every WordPress website needs a good looking slider. Sliders come in sizes, the simple slider type being the most popular of them. The simple sliders show one slide at a time, which the visitor won’t find distracting. The Feature Slider is a gorgeous visual boost for any website. It’s especially great to enrich your posts with it.

Adding a slider to a blog post is a great way to give a powerful visual impact. This slider uses the boxed layout so it can fit on any WordPress post or page. Since Smart Slider allows you to add texts to the slides, you can use these simple sliders to deepen your message. Using a slider, you can highlight the most important points of your content. For instance, Feature slider is a great way to in an astonishing way.

Layers

Each slide has the same layers: there is an image layer on the top and then a heading and a text layer comes. These layers are in a row which has a white background color. You can customize each layer in the slider, you can change the text and you can change the style of the layers in the layer window.

Animations

Clicking on the arrows or bullets, the next slide will come in with a fading effect. This fade animation is the main animation of the slider which you can change at the Animations tab of the Slider settings.

When you hover over the slider, the arrows pop up on the two sides. This allows visiting the next or previous slides in the slider.

Layout

The slider has 3 slides, and each slide uses the same layout. There is a 1 row – 1 column structure where the layers are. The row has a maximum width, and the content layer is aligned to the left which you can achieve this layout.

Responsive

What’s makes Feature slider even more outstanding is that it’s mobile friendly. On touch screen devices, visitors can switch slides by dragging. Of course, there are other navigation options available. For instance, there are bullets at the bottom of the slider, which you can use to switch slides.

Another mobile friendly feature of this slider is the way it looks on mobile. The texts remain legible, which is excellent, as it means your readers won’t have problems interpreting your content. Thanks to default positioning, Smart Slider’s unique way of slide editing, achieving this awesome result isn’t hard at all.

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

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

The Minimal Logo Slider is a carousel. The carousel slider type is a special kind of slider, that can display more slides next to each other. On this slider you can see 4 slides together in each pane. The term “pane” refers to the group of slides that are visible together.

Being able to conveniently navigate on the slider is important. For this reason, the Minimal Logo Slider supports three kinds of navigation. First, there are arrows on the sides of the slider. These arrows change their white background color to blue on hover. To change the hover color, you need to follow three simple steps. First, click on Arrow – Style (1), then switch to Hover (2) and pick the background color (3).

On the bottom of the slider you can see small dots. They’re bullets, and the second way to navigate on the slide. Bullets can fill two purpose. First, they allow switching slides fast. Second, they indicate how many slides there are to see.

The last kind of navigation on the Minimal Logo Slider is the touch and drag actions. Creating a mobile friendly slider isn’t just about having responsive content. It’s also about creating an amazing user experience on mobile. Swiping actions are natural on touch screen devices, so they make it comfortable to browse the slider.

Layers

You can find three layers on the Minimal Logo Slider. There’s a one column row, and inside the image layer with the logo. The logos on this slider are 121x34px. Since you’ll probably want to replace them with your own, you’ll be happy to find their size at the image layer. Look for the size option at the top right corner of the image URL at the Layer Window.

Animations

There’s a cool effect you can see on the slider if you hover on any of the slides. The slide gets a nice shadow, showing that your mouse is above it. This effect isn’t actually an animation. In fact, it’s a simple box shadow that we set at the column on hover.

Layout

The layout of this slider is very simple. There’s a row, with a single column, and an image layer inside this column. When you add a new row, by default it will have two columns. To have a one column row, you’ll need to remove one of the columns. You can do that for example, from the Layer window. Simply right click on the unnecessary column and select Delete.

Responsive

Carousel sliders have great responsive behavior. The smaller the slider the less slide they show. As a result, they display one slide on mobile. Additionally, the images in the slides will look great, because they’re Default positioned.

Default positioning is a special layer editing, what you won’t find in any other slider software. It’s a relative positioning, similar to the way page builders work. As a result, you can build your slides fast using Default positioned layers. More importantly, these layers will need very little responsive adjustments.

Related Post: How to Create a Stunning WordPress Logo Slider

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

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

This slider is a simple image slider where the image changes automatically. There are large thumbnail images you can use for navigation. This allows you to preview all images in the slider and pick those the visitor is most interested in. The currently viewed slide’s thumbnail is clear and looks like the slide background picture but the other slide thumbnails are darkened which gives a modern look to the slider. Besides the thumbnails, visitors can navigate by swiping from slide to slide.

The slider has a slider autoplay setting. The visitor can start and stop it with the solid autoplay icon at the top right corner. Allowing the user to start the autoplay gives them control over it which is favorable by them. So how can you set up an autoplay like this? Go to Slider settings → Autoplay and configure the autoplay the way you want to. Set the autoplay duration and any other setting to your liking. Configure its look to match your slider, position it where you prefer to have it and you’re done. The visitor can now start and stop the autoplay when they choose to do so. They’ll love having so much control over your slider while viewing your beautiful pictures!

Layers

Creating an image gallery slider does not always mean you want to use words. It’s perfectly possible to create a beautiful image slider without a single line of text. This Autoplaying thumbnail slider is a great example for this. It’s a very minimal slider, with zero layer, but it looks elegant and professional.

Animations

When you switch a slide, you can notice the background animation. You can change this animation at the Slider settings → Animations tab. Now 2 types are selected, but you can change it if you want.

Layout

The slider is minimal, below the background images you can see the thumbnails, and on the top right you can notice the autoplay button which you can start or stop the autoplaying.

Responsive

The thumbnail bar can be scrolled through by swiping or dragging which is very convenient for both big and small screen users.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Create A Responsive Thumbnail Slider

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

Lightboxes are some of the most elegant ways to display large images for visitors. Using lightboxes to enlarge images allow saving space on the website. You can display a smaller image for the visitor by default. Then, if they launch the lightbox, you can show a big, high quality image. This saves you loading time as well, because the smaller images will load a lot faster.

The lightbox is created using the “Backgrounds in lightbox” feature. This feature automatically creates a lightbox from the background image of each slide. If you care about the loading time of your site, you won’t use large images there. Which means the lightbox might lose its purpose. Luckily, Smart Slider got a nice feature for you to help you create better lightboxes. After enabling “Backgrounds in lightbox”, visit each slide and locate the Custom lightbox image feature. You’ll find it at Slide settings → Content tab. What does this feature do? It lets you pick a custom lightbox image, even for tablet and mobile devices. This way you can ensure your visitors will see the best possible lightbox image.

Layers

The content of the slides is just a simple background image. Therefore, the Lightbox with caption slider does not contain any layers.

Animations

If you switch a slide, you can notice a fading animation. This is the main animation of the slider which you can change and customize at the Animations tab of the slider settings.

Layout

In this slider example, every slide has a simple background image. They all have captions as well with a short description. This text is displayed by the text bar control, which shows the slide title and description. The text bar is highly customizable, which means you can change several aspects. For instance, you can change the background color of the bar or remove it, if you don’t need it. Although, we advise using a background color to increase the contrast and make the text more legible. Speaking of texts, you can change their color, font family and size. Of course, you can decide if you want to show the slide title, description or both.

Responsive

The slider looks good on smaller devices as well. The texts are smaller, and the arrows are visible. But if you have more text on your text bar, maybe your slider won’t look good. In this case you can hide your text bar on mobile, and the visitor can focus on your images.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Add Lightbox Slider to your WordPress site

The post Lightbox with Caption Slider appeared first on Smart Slider 3 — WordPress Plugin.