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.

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

Static slide is that slide, which is over your slider without switching away, while your regular slides can move behind them. So you shouldn’t think of them as slides, because the whole concept is different, it is rather a tool which gives you a powerful option with a user friendly interface. In the following video you can learn how to create a static slider.

This Static slider is a full page slider, it fills the 100% width and height of your browser. You can use it as a great homepage slider, and can fit in any theme, because you can fully customize it. On the bottom of the slider you can notice a white shape divider which you can customize or disable in the Animations tab of the Slider settings.

The slider stands out from 4 slides: a static slide, where the content is, and 3 other slides with background images which are autoplaying every 8000ms. You can stop the autoplaying with the autoplay control on the top, also you can see when the next slide will come.

Layers

With a static slide you can place layers, for example your logo or watermark over your normal slides. In this case the fully textual content is on the static slide. There are heading and text layers, 2 buttons and 3 transition layers. The transition layer stays from 2 images, and if you hover over it, the image changes to another. You can use these images to link to your social media platforms.

Animations

When you load the slider, all layers come in with an incoming layer animation after each other. The main heading uses a special animation which you can use only on headings: text animation. With the text animation you can animate your text by its characters or words. You can customize this kind of animation in the Text animation manager which you can reach from the content tab of the layer window.

Layout

The static slider stays from 3 rows. You can find the headings and another row with the two button layer in the first row. The third row is on the bottom with the 3 transition layers. The first main row fills up the available vertical space because the Stretch option is enabled. The second and third row are close to each other, because the full width option is disabled at their settings.

Responsive

The slider is fully responsive, and fills the full page on every device. The fonts are smaller on the smaller screens, the font sizes are resized with the Text scale option. If you switch to mobile view, you will see that the button layers and transition layers are next to each other in this view as well. By default a row wraps after 1 column, but at this slider the columns won’t wrap.

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

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

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

The Minimal Designer slider template uses the simple slider type. These slider types can be found on many websites, all thanks to their benefits of showing only one slide at a time. Therefore, visitors are not distracted by different content and can move forward at their own pace.

Besides being a simple slider type, it also uses a full-page layout, which means it takes up the entire width and height of your browser.

One compelling feature of the Minimal Designer slider lies in its setup. Using six slides, it includes a Static Overlay alongside five regular slides. The Static Overlay is a unique type of slide, that is continuously displayed on top of all regular slides. This template makes use of it to display a navigation bar above the content of each slide. It displays the logo in the center accompanied by two arrows on the far left and right.

Layers

You can find some of the basic layers on almost every slide, like the Text layer, Heading layer, Image layer, and Button layer. Although they are not the most unique layers, some of them stand out with their special settings. For example, both the Button layers and the Image layers have their own specific hover effects, making them more interactive.

In addition, on the second slide, you can find some special layers, like the Counter layer. This is the perfect element for your website to build trust in your visitors by showing them statistics about your company. Just simply set the layer to any number of your choosing.

On top of that, let’s not forget about the unique Static Overlay, that helps us navigate the slider without any hassle. The secret behind this easy navigation is adding a Link Action to the Image layers.

Another setting that makes the whole look more put together is adding the margin to the top of each slider’s content, so the nav bar always stays above the content without overlapping it.

Animations

The Main Animation is set to horizontal, which adds a sophisticated look to the slider.

All layers use basic incoming animations. The layers enter the slide from different directions, smoothly introducing them. These combined movements create a subtle yet elegant visual effect.

You can adjust the delay and duration of each animation on the visual timeline, which you can find at the bottom of your slide editor.

Layout

Each slide creates a captivating layout using Rows and Columns for their structure.

However, two layouts stand out from the rest. First, let’s look at the Services slide’s layout.

It uses two rows with two columns each. Apart from using the same layout inside these columns, you can notice that the columns with the white background take up a bigger portion of each row. Easily adjust it in the Row layer’s content settings. You just need to drag the column width in the below-shown intuitive panel.

Moreover, to fine-tune the space between each column set up the Gutter on their row containers.

Next, let’s take a look at the Projects slide’s layout.

With its captivating layout, this slide creates an intriguing solution. There are four columns, that contain both images and text in them. Setting the Wrap After setting to 1 on each row container, ensure that the column containing the content wraps after the column with the image backgrounds.

On top of that the Gutter keeps the spaces equal between each of the columns.

Responsive

Smart Slider is a fully responsive slider plugin offering useful tools to its users to optimize their designs for different screen sizes.

For example, the Font Resizer lets you adjust your layers device specifically, which makes it easier to offer your visitors a pleasant experience while they are viewing your site.

Additionally, some responsive settings activate automatically, like in this slider template’s case you can notice that a row’s columns automatically break into new lines on smaller screens, giving them enough space to shine.

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

Slider Settings

The Car Rental template is a simple type slider, which is the most common type of slider you can see on the web. Additionally, it uses the full width layout and that’s another very common usage of sliders. People love elements that fill the whole browser width horizontally, and content, especially images look great in full width on large monitors.

As the Car Rental template is a slider, it has many navigation options to allow visitors to see the other slides. The most obvious way of navigation is the orange CTA button that prompts the visitors to see the next car.

The other type of navigation is the bullets on the bottom of the slider. In fact, the bullets server two purposes on sliders. First, they are great way to navigate to a specific slide. Second, they show how many slides there are for visitors to see. That’s because there’s a bullet created for every slide, so if you have 3 slides in the slider, there will be 3 bullets. Apart from these navigation options, the slider also supports touch screens. As a result, touch screen users can swipe on the slider to switch slides.

Layers

The Car Rental template uses the most common layers to display its content. There are heading, text image and button layers on each slide.

Animations

There are a few interesting animations on the Car Rental template. First, there’s the Shape Divider at the bottom of the slider. We choose an interesting shape called “Curve 3”.

Apart from the Shape Divider, there are layer animations on the slides. The layer animations move in both the colorful shapes behind the main content, and also the content block on the right side.

Layout

The Car Rental template’s layout is quite interesting. Viewing the template it’s hard not to notice that the left side of the content stays still, while the right side moves. We achieved this behavior by placing the left side content on a Static Overlay. The Static Overlay is a special kind of slide that is above all other slides in the slider, and doesn’t move away. So, it’s perfect to create “fixed” content above your slides.

The right side contents are regular slides. Their content has a maximum width and it’s also aligned to the right, to ensure that they stay out of the way of the Static Overlay’s content.

The Static Overlay’s content is based on a two column row. The actual content layers are in the left column, which means they always take up maximum 50% of the slider’s width.

Responsive

Smart Slider is a responsive slider and offers you all the flexibility you need to create awesome sliders for mobile. At the Car Rental template we made some special measures to ensure the slider’s good look on small screens.

On the Static Overlay, we set a large padding to the second, empty column. This ensures that the the content slides have enough space to display without the Static Overlay covering them. Since the Static Overlay’s padding enlarges the whole slider, all that was left to do in the other slides is to change the Vertical Align to bottom. As a result, their content displays at the bottom of the slide, below, but not under the Static Overlay’s content.

Related Documentation: What is the Static Overlay?

Related Post: 10 Beautiful Full Width Slider Examples

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

The Movie Slider is a simple type slider that uses the full page layout. Simple sliders are traditional sliders, which display one slide at a time. This helps the visitors focus on the slide, as they’re not distracted by the content of other slides. Also, simple sliders give you plenty of horizontal space to display content on big screens.

There’s a Static Overlay on this slider, where you can find the Next and Prev buttons. Static Overlays are special kind of slides, which don’t slide, but appear on top of all other slides in the slider. So make sure you don’t use more than one Static Overlay in your slider, as both will appear together.

 
For navigation, visitors can use the Prev and Next buttons on the Static overlay. For touch screen users, the left and right swiping is supported as well.

Layers

There are many different layers on the Movie Slider. You can find the common layers, such as heading, text and image on each slide. The heading layer contains the title of the movie the slider displays, while text layers are used for the rest of the texts.

The most special layer on the slides is the Circle Counter layer. It’s a kind of counter, that both counts up using a numeric value, and fills a circle shape. The circle counter layer is an interesting layer you can enrich your slides with.

Animations

The most obvious animations on the slider are the layer animations. Layer animations are special effects you can use to introduce layers to the slide, making it more interesting to view. Also, you can use them to make layers disappear from the slide. There’s a layer animation on most layers, which make the slides more interesting.

There’s a background animation on the slide background images. It’s a parallax-looking slide switching effect, which slowly moves the upcoming image on top of the previous one. It’s a simple effect, but cheers up the slider.

Additionally, there’s a lightbox on the image layers of each slide. The big image layer displays a YouTube video in the lightbox, while the small images display an image gallery. Smart Slider Pro’s lightbox supports a wide variety of visuals you’d want to display. For example, you can display videos, images or even websites. Additionally, you can mix the displayed visuals as you like. For example, you can create a lightbox, where you display a video and two images after each other.

Layout

There are interesting layouting solutions in the slider. For example, there’s a four column row under the movie title displaying the white and orange texts. The full width option is disabled at this row, which makes the columns break into new lines automatically when needed.

Responsive

Smart Slider 3 offers many responsive options to optimize your sliders for small screens. You can change many options device specifically, for example, the font size or the distance between the layers.

If you check the Movie slider on mobile, you’ll notice the large image layer, the counter and some other layers are missing. These layers were hidden on purpose. When optimizing for mobile, you should always aim to create sliders which are around 550px tall. As a result they’ll fit nicely into the various sized mobile screens.

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

Related Post: 9 Point Ultimate Checklist to Create your Next Slider

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

Basically a split slider is a slider which left and right side moves to the opposite direction. For instance, the left side moves downwards and the right side reveals itself from below. Of course, the two sides meet at the middle of the slider. The split slider effect is gorgeous and it’s not hard at all to set it up. But if you prefer our example you can always import it to your site and tweak it to your heart’s content. You can add more layers, change the colors and pictures or remove anything you don’t like.

This slider example is a full page slider, so fills the available horizontal and vertical space of your browser. The slider doesn’t have controls, you can change slides with the links on the top menu, or with a mouse wheel.

Layers

Smart Slider 3 has all the tools which you can use to create any modern WordPress slider. You can use layers to add your content which help you tell your story. The easiest and fastest way of creating a split text effect is to use default positioning. You should add a row with two columns and add your content to each column. You can add text layers, images and buttons to both sides of the split slider.

This slider uses more kinds of layers: there are heading, text and button layers, there is an image layer in the middle of the slide. After each side switches there’s a second heading where you can see a big heading behind the layers. That’s actually a heading layer as well, added in Absolute position and moved behind all other layers.

Animations

Once your content is ready it’s time to create the actual effect. For that you should select one of your columns, go to the Animation tab and pick the Top animation. Then select the other column and pick the Bottom animation. You can actually select any other layer animations you prefer, but a Top and a Bottom animation will look best.

Layout

The split slider has a simple navigation menu at the top of it. This navigation menu allows the visitor to switch between the slides. Smart Slider 3 makes it super easy to create a menu like that without having to code. At each layer’s link you can select a special link called Go to slide where you can type which slide you would like to go to. The slider will handle the rest. Creating this menu on a static overlay will ensure that the same menu is visible over all other slides. So you don’t have to add it to each slide one by one.

Responsive

Creating a responsive slider has never been easier thanks to Smart Slider 3’s default positioning. It allows you to create your sliders as if you would be working with a page builder. The responsive result is amazing and it doesn’t take ages to achieve it. If you prefer the causal slide building experience, use absolute positioning. It lest you drag’n’drop your layers anywhere.

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

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

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

Settings

This colorful Smart Bank slider template can be a great testimonial slider with great CTA buttons. You can display the best reviews about your product or company, and can call your visitors to an interaction to check your pricing, or navigate to a try site, or another page.

The main image of the slider is a slider background image which can be found at the Slider settings → General → Slider Design. This image will always be in the background even when you switch the slides.

The slider is autoplaying every 5000ms, but you can switch slides with dragging your mouse or using the bullet control on the bottom. The active slide is marked with an orange bullet, which you can change at the Controls tab → Bullet → Dot Style. Here a popup will open, and you can select the Active state at the top right corner where the orange color can be changed.

Layers

When you check this slider, the first thing you will notice the gradient heading and the gradient bullet. These colorful layers cheer up the slider, and also look good. How to change the colors? There isn’t a basic setting for that, we have used custom CSS to make this gradient effect.

You can find this custom CSS at the heading layer if you click on it, and go to the Style tab of the Layer window. Here you can press on the More button to see the advanced settings, like custom CSS. The starting color is #F71285, and the ending is #FFA000. If you want to change them, just override the hexa color codes. Also you can change the angle if you want, now it is 90 deg.

The button also uses custom CSS for their background. You can change or customize it at the Layer window → Style tab → Background → More → CSS.

Animations

When you check the slider, you can notice there are small particles in the background. This is a cool design effect which helps your site stand out of the crowd. You can customize it at the Particle editor which can be reached from the Slider settings → Animations tab. Here you can change for example the number of the particles, the speed, and the interactions.

Layout

The base of this slide template is the slide background image and the static overlay where the static content is. The content on the static slide won’t change when you switch to another slide. The changeable slides are reviews, each review is a different slide but with the same layout. If you want to display more, you can easily duplicate a slide, then change the content.

Responsive

This slider is also fully responsive as the other templates. The main responsive settings at this slide is the wrap after and the font scale. By default the buttons are under each other in mobile, because it’s row wraps after 1 column. But at this layout it will wrap after 2 columns. Also the texts are smaller thanks to the Text scale option which is device specific, so doesn’t change the sizes on other devices.

Related Documentation: Slider background

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

Related Post: Best Testimonial Slider Examples for WordPress

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

The Static Text Slider introduces a new approach for creating beautiful sliders. It places the textual content on a static overlay and displays nice images behind the text.

In the background of the slider you can see several beautiful images. These are simple image slides with no other content but their background image. Then the slider autoplay changes these slides automatically. There’s also a lightbox where you can display nice videos or other images.

Layers

Using the Highlighted Heading layer you can create a headline that catches the user’s attention. Once they focus on the slider you can help them do important actions: read your posts, book hotels and view more. On the bottom of the static slide, you can find 4 image boxes. With image boxes you can display images with text. The last image box has a lightbox on it, which you can open an image, video or an iframe.

Animations

When you check the slider, the first you will notice the content comes in from the bottom. This is a layer animation that you can fully customize in the layer window. Then the animation of the highlighted heading will start, which calls the visitors attention. You can use the timeline to see the animations visually, and here you can set the duration and delays as well.

Layout

The slider has a simple layout: there are images in the background, where the slider autoplay is enabled, and there is a static overlay over these images. This can make a great visual effect, and the visitors can focus on the content of the static slide.

Responsive

The static text slider is fully responsive. In mobile the row wraps after 1 column, so the content has enough space. You can set the wrap after value at the settings of the row.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

People still use boxed designs, even if full width sliders are much more popular. The best thing about boxed sliders is that they fit nicely into any page or post content. They look like they truly belong there and don’t break the layout either. This Boxed Particle Slider is a great example for a stunning modern boxed slider.

Layers

You can see a one row two columns structure on the static slide. There is an image, a heading, a text, and a button layer on the left side, and an audio player with a cover image on the right side. Creating this layout is incredibly easy. You just need to add a simple image layer, then put an audio layer below it.

The image layer has a handy shortcut on the sidebar. This shortcut makes it easy to add the most popular layers, like the image, heading or button, fast. The audio layer doesn’t have a shortcut, so you’ll need to open the add panel to add it. After adding the layers, the audio and the image layers need a maximum width. This ensures that the image and audio layer have the same size.

Animations

Each slide background image has a Ken Burns effect on it. This effect gives a movement to the images, and combining this with the slider autoplay makes the slider special. Also you can see small particles, which cheers up the slider. You can customize this in the animations tab of the slider settings.

Layout

Static overlays are special slides. They are above all the other slides in the slider. When the normal slides change, the static overlay remains in the same place. This makes them perfect for cases where the content doesn’t need to switch with the slides.

Creating a Static Overlay is incredibly easy. First you should add your new slides to your slider. Then, when you create a new slide, you’ll see a new option appearing at the end of the Add Slide options.

Editing a Static overlay is the same as editing any other slide. The only difference is that you’ll see the next slide’s background behind it. Static Overlays can’t have a background on their own, as that would cover the slides below them.

Responsive

The boxed particle slider is fully responsive, it looks good on tablet and mobile as well. In mobile you can see the row wraps after 1 column. By default, the left column will be on the top, and the right on the bottom. But you can change this order if you drag the green column boxes in the layer window.

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

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

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