Settings

People typically use full width sliders because they look great on today’s large monitors.

The controls look very special on this slider. That’s because the arrows surround the bullets. When you enable a control, by default you can select from predefined places at its position setting. In the Pro version of Smart Slider, there’s an Advanced position setting, what you can use to place the controls basically anywhere within, or around the slider.

Layers

You can find the most popular layers on the Feature Card slider. There are two headings, a text, a button and an image layer, inside a two column row. Using the button layer, you can create a cool CTA for your slide.

If you check the layout, you’ll also see that it’s full of rounded corners. The image inside the image layer is a png, so here the rounded corners are coming from the image. However, in the row and button layer’s case, the rounded corners are coming from their settings. At the Style tab of the layer window, you can find a Border radius option, what you can use for creating rounded corners.

Animations

The most noticeable effect you’ll immediately see on this slider is the Shape divider. This feature creates the white shapes at the top and bottom of the slider. When you first load the slider, the shapes appear with a nice animation. The Shape divider is above the background of the slide, but below the layers. This helps creating the Feature Card slider’s unique look.

There’s another fun effect on the Feature Card slider. When you move the cursor above the slider, the image reacts to its movement, and turns towards the mouse. This effect is the 3D mouse parallax, what you can enable on any layer.

Layout

The base of the Feature Card slider is a row, that has two columns and a dark background color. When you add a row layer, it always contains two columns, and both columns are 50% wide. In this case, we changed the column width. The first column is 30% and the second column is 70% wide. This allows the image to display in a bigger size, but the 30% width is still enough for the text to show.

Responsive

Rows help creating mobile friendly layouts by breaking the columns into more lines. The Wrap After option of the row defines amount of columns that can fit into a line. By default every row has its Wrap After setting on 1 on mobile devices.

When a row breaks its columns, it always keeps the original column order. In other words, the column that’s the first from the left is going to be on the top. The column, which is the last from the left side will end up on the bottom. If you don’t like this behavior, you can change the column order device specifically at the row.

There are many other options that you can change for tablet and mobile devices, without affecting the desktop layout. For example, the padding, which was greatly reduced to make the slide look better on mobile. We also reduced the font sizes using the Text Scale option.

Related Documentation: How to place bullets below the slider, with the arrows around them?

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

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

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 Masterclass template uses the simple slider type. This slider displays one slide at a time and it’s the most common slider type you can see on the web. Displaying a single slide at a time helps the visitor focus on a single message only. Additionally, the template is full width, which means it fills the browser horizontally.

The Masterclass template uses arrows for navigation, but they only appear on desktop. For smaller screen navigation bullets are available instead. Bullets are useful for navigation as they allow the visitor to pick and choose the slide they want to see. Additionally, they also help indicate how many slides there are to see. However, arrows can only be used to navigate one slide at a time forward or backward.

Layers

You can find the most basic layers on this template. There are headings to display the main headlines: the occupation, name and signature line of each person. There’s a text layer that you can use for a longer description. Additionally, there’s a CTA button on each slide to call the visitors to action. Also, we used an image layer to display each person’s picture.

Animations

The only animation you can find on the Masterclass template is the Main Animation. The Main Animation can move both the backgrounds and layers when the slides change. We used a horizontal effect which looks perfect for a slider like this.

Layout

The Masterclass template uses lots of interesting layout solutions. Specifically, it uses lots of negative margins to break some layers out of the grid. For instance, the main picture and the two boxes have negative margins. The result is quite spectacular and interesting to view.

Responsive

Smart Slider is a responsive slider, which offers tons of responsive settings to fine tune your sliders for small screens. For example, you can reduce the size of the texts using the Font Resizer. Or you can hide layers you don’t want to show on small screens.

There are some responsive settings which the slider does for you automatically. For instance, if you use a row, it automatically wraps its columns into new lines on mobile. This way the content has more space to display.

Related Post: Are You Looking for a Free Slider Revolution Alternative?

Related Post: 10 Beautiful Full Width Slider Examples

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

The Mega Magazine template is a full page slider for your website. Full page sliders fill the browser viewport both vertically and horizontally. As a result, they’re perfect for various use-cases, including header sliders.

It’s also uses the Simple slider type, so it displays one slide at a time. This helps the visitor focus on the slide’s main message.

Navigating the slides in the Mega Magazine slider is easy. People can use the CTA button with the label “Next Category”. This button uses Link actions to start the slide switching. Touch swipe and drag navigation is also available.

Layers

You can find the most common layers in the Mega Magazine template. There are lots of headings, since there are many headlines, but there are couple of text layers, too.

Additionally, you can find a handful of image layers. Also, there are lots of rows and columns that create the cool layout. Also, main image on the left side is displayed by a column, because it’s the background of the column.

Animations

There are two kinds of animation on this slider. One is the Main Animation, which is the special effect that switches slides and moves the layers at the same time. The Mega Magazine slider uses the Vertical Main Animation.

Apart from the Main Animation, you can also find layer animations on this template. They help displaying the grid on the right side.

Layout

The Mega Magazine template contains many interesting layout solutions. For example, there’s a 2×2 grid on the right side of the slider. We created it using a single 4 columns row that wraps after the second one.

Another interesting element in the layout is the Absolute positioned layer at top left part of the slide, that displays the category of the current slide. Absolute positioned layers are just floating on the slide, so they can be placed anywhere. For example, at this template we placed it behind the 4 column row.

Responsive

Smart Slider is a responsive slider that offers many great tools to create perfect looking sliders for mobile. For example, you can adjust the font size for tablet and mobile devices without affecting the other devices. You can also hide any layer on any of the devices.

Hiding layers can be useful on smaller screens to ensure that the content can fit. It can be especially important thing to do when your slider is full page, as long content can end up cropped.

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

Related Post: 7 News Slider Designs to Inspire Your Next Web Design Project

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

The Sports Cars template is a simple slider, which displays one slide at a time. These sliders are super popular on websites, as they let the visitor focus on one message at a time. Additionally, the Sports Cars template is full page. A full page layout means that the slider takes up the available width and height of the browser.

There are three slides to see in the Sports Cars template. They’re immediately visible thanks to the thumbnail control at the top of the slider. The thumbnails are great for navigation, as they provide a preview of the slide’s content before switching to it. As a result, they can encourage visitors to change slides. Due to their size, thumbnails are not always good for smaller screens. For this reason we changed the thumbnails to bullets on tablet and mobile devices.

Behind the slide content there’s a slider background image, which has a radial gradient. Slider backgrounds are behind all other slides in your slider. So if you want to see them, it’s worth creating the slides without background, or with a semi-transparent color.

Layers

Most of the layers you can find on the Sports Cars template are basic layers. There are images, headings and texts which let you create your slide content easily. However, there are some super interesting counter layers on each slide. The counter layer is a special kind of layer where you can set a starting and a finishing value and it will count up or down from the start value.

The bottom contains a 6 column row, and the last one has a lightbox that opens a video.

Animations

You can find a couple of layer animations on each slide to make them more outstanding. In fact, you can add a layer animation to any layer on your slide. For example, in this template there’s a layer animation, an image and a row as well. If you add a layer animation to a container (like a row or a column) then everything inside the container will be animated.

Apart from the layer animations, the template also uses the layer parallax effect. The layer parallax effect is similar to the background parallax, but in this case it moves the layers based on the movement of the mouse. So, if you move your cursor above the slider from left to right, then the layers will try to move away from it.

Layout

The Sports Cars template uses some cool layout solutions. Specifically, the colored stripe behind the cars. How to create a layout like this? It’s actually simpler than you think. First, you need to add a row to your slide. By default rows come with two columns, so remove the unnecessary column. Then put the car image into the column.

Next, switch on the Absolute position switch and add an area layer into the column. Absolute positioned layers don’t take up space, just float on the slide so you can place them anywhere. Size this area layer in the following way: at its Style tab make it have 50% height and 500% width. A large width is needed to ensure that the stripe covers the slider on super large monitors. Change the Vertical align to top and set Top value to 0. That’s it, the shape will stay behind the car in every responsive scenario.

Responsive

Smart Slider is a responsive slider that offers a bunch of tools to ensure your slider looks great on small screens. For example, you can reduce the font size using the Font Resizer. Or you can hide layers you don’t need on small screens.

If you’re using columns then you can also change their order device specifically. As a result, you can move a column to a different place on mobile. We used this trick to create the pattern of the car details.

Related Documentation: Layer animation

Related Post: 12 Inspiring Examples of Stunning Modern Homepage Sliders

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

The Crossfit template is a full width slider. People love full width sliders, because they fill the available horizontal space. As a result, they can create gorgeous sections on their site.

The slider type is Carousel, which means more slides can appear next to each other. Carousels are great for creating a product or a post slider. But they’re also great for creating a slider about your team. There’s a slider background image set for the slider. This image creates the dark background behind the slides.

Although displaying three slides at a time suggests there are be more slides to see, there are controls to help the navigation. For example, there are nice green arrows on each side of the slider. They’re prompting you to view the next or previous slide. Additionally, there are bullets at the bottom of the slider. Bullets are useful elements to add to your slider, because they can help in many ways. First, they tell the visitor how many slides there are to see. Second, the bullets allow easy navigation to any slide.

Layers

The Crossfit template uses the most basic layers. First, there’s a heading layer that displays the person’s name. Second, there’s a text layer to display their occupation. Then the actual image of the person is an image layer.

There’s also a decorational image next to the heading and text layers, inside a two column row. Rows are the building blocks of Smart Slider and they help you place layers next to each other.

Animations

The Crossfit template uses layer animations and events to display the details of each person. How does this work? If you hover over the slide, the layers at the bottom show up. Of course, mobiles and touch screen devices don’t have hover state. So the layers show up when the visitor taps on the slide.

Layout

The layout of the slides is very simple but it looks amazing. There’s an image with a nice shape as the background of the slide. Then there’s the person’s image, which is an Absolute positioned image layer. Absolute positioning is great for decorative content to your slider. That’s because it allows placing the layers anywhere within the slide. This can happen because Absolute layers don’t actually take up space, they float above the slide.

The textual contents are in Default position. They also have a Max Width set to ensure that they always stay next to the image.

Responsive

Smart Slider is a responsive slider and offers a bunch of tools to fine tune your slider. However, at the Crossfit template we didn’t need to use most of the available tools. In fact, we only needed to reduce the font size on mobile using the Font Resizer.

Related Documentation: Layer animation

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

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

A team slider is a kind of slider that focuses on the members of your team. It gives a nice, personal touch to your company’s website, and helps building trust in your hesitant customers. This slider allows navigating slide by slide in three ways. You can drag or swipe towards the right or left side, to switch to the next or previous slide. You can also use the white arrow on the blue background at the middle bottom. The third, and the most eye-catching is the thumbnail navigation.

We placed the thumbnails to the right side of the slider, aligned to the bottom of it. The thumbnails allow the visitor to see all your team members at once. Clicking any thumbnail switches to the slide with the person’s slide.

Layers

You can see heading, text and image layers on each slide, which are placed in rows and columns, and have different styles.

Smart Slider 3 has a cool feature, that allows you to rotate any layer, including rows and columns. At this slider we rotated a heading layer, which we use to show how many team slides are available, and which one is currently visible.

Animations

Smart Slider 3 has many cool effects you can use to make your sliders more interesting. We added some of the best effects to the Team Slider demo, to help you create a modern and responsive slider fast.

The most spectacular effect of the slider is the Reveal Animation. Reveal Animation is a cool and modern effect to introduce or remove layers from your slider.

Layout

The layers are placed in different rows and columns. The basic of the slider is a row with 2 columns. The left column contains 2 other rows: one on the top and one on the bottom. The top row has another row with the 3 image layers on it. On the column in the right side is only one image layer which displays a team member.

Responsive

When you check the slider in smaller devices, you can notice there are layers which are hidden on tablet and mobile. The hide option can help to make your slider smaller on mobile and tablet.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

Today’s web designers enjoy creating full width layouts. These layouts are eye-catching, and loved by clients and visitors alike. Boxed layouts, where the content is not full width, but usually 1200px wide, are still quite popular. For these kinds of websites, it’s better to avoid using full width sliders, as they don’t fit the layout. However, boxed sliders are perfect for sites which use boxed layout. They fit the template and don’t mess up the design flow. The Boxed Product Slider is a great way to display your products when you don’t need a full width slider.

The slider autoplay feature is turned on the slider, which means the slides switch automatically. This helps the users see more slides without having to take action. The remaining time on the slide is displayed by the autoplay indicator shown at the top right corner. At the bottom of the slider there are bullets, which visitors can use for navigation. The bullets are usually dot shaped, but on this Boxed Product Slider, they’re small lines.

Layers

Each slide contains an image on the left side, a heading which displays the product title, a text layer with a small description of the product, the price and a “Buy now” CTA button next to the price. The button has a vivid purple color, and it’s hard to miss on the white background. Thanks to this, visitors won’t have to wonder what they need to do to put the product in their cart. Some slides also have a “New arrival” badge. This is a psychological tactic to encourage people to be the first to get the product.

Animations

When you switch a slide with the arrows or with a mouse drag, you can notice a horizontal animation. This is the main animation of the slider which you can set to vertical or fade at the settings of the slider.

Layout

Each product has its own slide which means there’s enough space to introduce them. On the left side, you can find the product image. This helps the visitor picture the product they’re going to learn about later. On the right side, they can find the most important details of the product. This information includes the name, description, price and a “Buy now” button.

Responsive

The boxed product slider is fully responsive. The slider looks different on desktop and mobile, but has the same content on it. The mobile view wraps the content below the image, so the content has enough space, and the textual content is clearly visible. This is because of the wrap after setting on the main row, which wraps the row after 1 column.

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

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

Carousels are the most popular ways to display a product slider on a website. A carousel allows the visitor to see more slides next to one another, saving vertical space on the slider. The slider’s dominant color is grass green. Both the arrows next to the slider and the buttons use this color. Some slides have a tag or a new badge, which is also green. The slides have rounded corners creating an interesting effect.

The slider has a boxed layout, so the slider can be as big as the container it’s in. Now you can see 2 slides next to each other, but if you use it on a bigger container, you can see more if you have enough space. Also you can make the slider to be full width if you set the layout of the slider at the Size tab of the Slider settings to full width.

Layers

These sliders are also about being minimalists. They won’t have long descriptions and unnecessary details, just show what the users need to see the most. This information includes an image layer which is a product image which is clear enough to show the item. There are 2 heading layers: the name and the category of the product. These are also very important to appear on a product carousel. Finally, there is a CTA button with the price on the bottom of the slides, which you can buy the product if you put a link on it.

Animations

When the visitor switches slides, only one slide moves out of the visible area. When they switch forward, it’s the first slide that disappears and when they switch backwards, it’s the last slide. WordPress Carousel slides can also switch a pane so the whole visible area moves. Switching a pane is another great way to create a product slider.

Layout

The slider uses the boxed layout, so it fills the width of its container. You can switch slides with the arrow in the left and right sides, or with dragging. There are more slides visible at the same time, and you can switch only one slide at the same time.

Responsive

You can see only one slide on mobile devices, and you can switch to the next slide by dragging. The arrows are hidden on mobile, because of that the content have enough space, and the visitor can check the details of your products.

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

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

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

This demo is a block type slider, so it has only one slide without any controls. It can be a great hero header on your site. You can fully customize the slider, change the images or texts, or add more.

Layers

The block doesn’t contain too many layers. There are 2 image layers on the top left and right corners. The other layers are in the middle: an image, and 4 headings.

Animations

There are several features, which can make a layer more interactive, like the layer parallax effect. These layers have a layer parallax effect, which reacts with the mouse. If you hover over the block and move your mouse, you can see the movement.

Another cool effect is on the slider: the particle effect. This snowing effect is special because we used custom particles here.

Layout

We have used 2 positioning options at this slider: default and absolute. The default position is great to create the content, and the absolute position is great to decorate the slider.

Responsive

This slider example is fully responsive. The texts are smaller in tablet and mobile thanks to the text scale option. The image layer is also smaller on mobile, because it has a maximum width, so it won’t take up too much space.

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

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

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