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

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

Layers

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

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

Animations

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

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

Layout

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

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

Responsive

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

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

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

Settings

The broken grid slider is a full width slider where the layout is special. Each slide has a different background color, but the bottom white shape isn’t changing. This shape is a cool effect of Smart Slider: the shape divider which creates the curved white area behind the image layer.

Layers

The content is a small image layer, three headings and two icon layers. The default positioning helps create a nice, easy to follow structure with great responsive behavior. On the left side, you can see the Content layer that has 500px maximum width. This leaves enough space to see the image layer in the back. The icon layers help with the slide to slide navigation as there’s a slide switching action on them.

Animations

When you switch a slide, you can notice the reveal layer animations. The reveal animation is a modern effect which is perfect to reveal images and texts as well. It animates a simple colored box on your text or image which you can fully customize in the Animations tab of the layer window.

Layout

A broken grid slider is a modern way to design your slider content. It gives the illusion that you’re not using a slider at all. I’m sure you’re familiar with “traditional” sliders. They have an image in the background and likely some text in front of this image. This couldn’t be further from broken grid layouts.

When we created this broken grid slider, we mixed Smart Slider 3’s two positioning, default and absolute. The block on the left side with the textual content is in default position. This ensures a good responsive behavior. And if you look at its structure, you can see that it’s based on a simple grid layout as well.

The image is a simple illustration of the grid layout. You can see rows and columns and inside the columns there are layers for your content. As I mentioned before, the slider mixes default and absolute positioning. First, have a look at the single image in absolute position, that’s in the background. It’s a large image layer, positioned to the right middle of the slide, taking up almost the full width and height of it.

Responsive

The broken grid slider is fully responsive, and all of the layers are visible on smaller screens as well. The text scale option helps you make the text smaller on tablet and mobile. This is a responsive setting so you can use different values on different devices.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

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

The Greek Restaurant template is a group that contains 6 projects. More precisely, you can find 5 Block type and 1 Simple slider type in this group. Blocks are special kind of projects that can display one slide only. So, they’re perfect for creating hero headers.

The first block in the Greek Restaurant template uses a full page layout. Full page sliders fill the screen vertically and horizontally as well. As a result, they’re a great choice for displaying content above the fold. The other sliders and blocks are full width, so they only fill the screen horizontally.

Layers

You can find two heading layers on all sliders. One displays the main headline and the other the secondary one. Most sliders also display an image using the image layer. Additionally, there’s a CTA button on two sliders. One is on the first slider, which actually uses a column layer to hold the link. The second CTA button is on the About us slider, and this one uses the button layer.

Animations

As most sliders in the Greek Restaurant template are blocks, they don’t have fancy slide changing animations. However, since they have a couple of layers, they have nice looking layer animations. For example, on the first slider, you can see the Reveal animation. What makes the Reveal animation special is that it introduces the layer by moving a colored shape on top of it. As a result, the Reveal animation looks modern and suits any kind of website.

The other animation you can spot on many sliders is the layer parallax. When you scroll on the page, some layers move at a different speed, which creates a spectacular effect. You can find this effect on the image of the first and 5th slider and the second slider’s cards.

Layout

Probably the most interesting layout in the Greek Restaurant template is the Dinner menu slider. This slider is actually made by two different sliders. One block that contains the main and secondary headline, and a slider that has the text bullets and the different slides. The same background color is set at both sliders, which makes it look like they’re one slider, but in fact, they’re not.

Responsive

Smart Slider is a responsive slider plugin so it lets you create sliders that look great on any screen. Moreover, it offers many responsive features to fine-tune the result on small screens. One of the most useful tools for optimizing for mobile is the font resizer. It lets you reduce (or increase) the font size for small screens, which is super handy.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

The Black Friday Slider’s Full Page layout is a perfect example of how you can easily catch your website visitors’ attention. There’s no wonder why it’s a popular design choice, as these sliders fill the full width and height of the browser. As a result, they provide a large enough space for a good first impression.

Visitors can choose between two different options to browse the slider. They can navigate it by clicking on the arrows, shown on both sides of the slider. If you choose this option you’ll notice a nice hover effect. This makes the process of switching between the slides even more user-friendly.

On the other hand, some people prefer to move between slides by simply dragging them horizontally. The good thing is that this template works well for those users too.

You can easily adjust these settings to your unique preferences under the Size and Controls settings.

Layers

The Black Friday Slider mostly uses simple, basic layers. There are Heading, Text, and Image layers.

However, there are two special ones as well on each slide, creating the sale tapes at the bottom. They use an Image Area layer. What differentiates it from the simple Image layer is that an Image Area layer can cover a given area with the selected picture and can crop parts of the image if needed.

You may have also noticed that some layers are more interactive than others, which is a result of a simple layer parallax added to them. You can adjust these settings at the Animations tab, then don’t forget to apply the Parallax value at the layer’s style tab.

Furthermore, you can notice that some Heading layers have a word inside them that’s customized differently than the rest. This outstanding effect is the result of the custom CSS they have. To achieve this look, add your special design to the Developer settings CSS section, then insert their classes on the containers in the style settings.

Animations

There are some outstanding animations on the Black Friday Slider. You can see an incoming animation on most layers, which makes their entrance more eye-catching.

However, now let’s focus on those that don’t stop moving after all the layers are introduced. Both the Image Area layers and the sale percentage layer, which deliver the main message of the slider, use a loop animation to continuously remind the user of the special offer.

There’s another outstanding layer animation, the Reveal animation. It’s a perfect way to make your content stand out. In this template’s case, it’s strategically used to create FOMO in the user, by slowly revealing the limited-time offer.

On top of that, you may have noticed the unique design element at the top and bottom of the slider. Smart Slider allows you to divide your page with fully responsive Shape dividers giving a modern edge to your website. There’s a paper-like shape at the top and bottom of the slider, which connects it with the white sections around it.

Layout

Each of this template’s slides uses the same, simple layout. There’s a row containing two columns on each side of it. While the left column contains the text, the right one showcases the unique Image layers.

By default, Smart Slider places the images below the text on mobile view in this layout. However, you have the option to change the order of the columns, so you can easily adjust the arrangement if you’d prefer to show the images first.

Moreover, there’s also an interesting layout that you can find on the slider. The sale tapes are absolute layers. They are slightly rotated to create this realistic look of crossing over each other.

What’s more, is that they are aligned to the bottom and have their own custom size, which ensures that they fill the whole slider.

Responsive

Smart Slider offers many great tools to optimize your slider for smaller screen sizes. One of the most commonly used features is the Font Resizer, which helps you to easily adjust your layers uniquely for each device’s screen.

Another great option is the Hide on feature, which you can use on any layer of your choice. In some cases, like when you are using absolute layers, it can be especially useful to hide them in mobile view.

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

Top 5 Products slider is a modern slider for your website to highlight your products or services. It uses just the right amount of effects to make it interesting for the visitor.

There are more ways which you can navigate between the slides. You can click on the arrow image on the bottom which goes to the next slide with a link action. You can drag and you can use the number type bullets on the bottom right corner. These bullets are fully customized for this layout, but you can also customize it at the style and font settings by clicking on the green buttons at the Slider settings → Controls.

Layers

There are more kinds of layers visible on this slider: there is a button on the top, then heading and text layers come, and under that you can see 2 button layers. Probably the most noticeable part of the Top 5 Products slider is the gray CTA at the bottom. This large CTA stands out of the other content of the slide. Additionally, it also gives an idea about the upcoming slide content. People are more likely to click on a button, when they are fairly certain what to expect afterwards. So this CTA helps to increase your click through rate.

Animations

Top 5 Products slider uses a couple of trendy effects which are available in Smart Slider 3. A really cool effect is the “slice” background animation. This effect looks like the reveal layer animations, but it affects the slide background images instead of the layers.

Layout

The Top 5 Products slider showcases many amazing features of Smart Slider 3 Pro. The slides themselves were built using default positioning, Smart Slider 3’s unique way of editing. In default position you can build your content using structures, such as rows and columns. The building is fast and easy, and the responsive result is amazing.

Using a full page slider is a popular design choice amongst website designers. A full page slider fills the whole browser viewport both vertically and horizontally, and the result is amazing. Full page sliders are really versatile. You can actually use them to fulfill any purpose, such being a hero header, or part of a landing page. The Top 5 Products slider you can see above is just as versatile as any other full page slider.

Responsive

The slider has lots of content on the desktop, but if you display all of these on smaller views, then the slider will be too tall, and crowded. To avoid this you can hide layers which content isn’t too important, like the content of the next slide, instead of that the arrow is bigger, and more touchable.

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

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

The post Top 5 Products appeared first on Smart Slider 3 — WordPress Plugin.

The Flower Shop is a full page slider, so it fills the 100% width and height of your browser. The slider stays from 3 slides, and it autoplays every 12 seconds. You can see the slider autoplay indicator in the top right but you can switch slides by dragging or with the thumbnails on the right as well.

Layers

The slider has simple layers. There are 2 heading layers on the top, then a text layer comes, and finally 2 button layers. On the right side of the slider you can see more image layers which are on the top of each other. And in the top right there is a button layer which has rounded corners and displays the price. The image layers are in absolute position, which can be useful at decorating the slider.

Animations

The textual layers are coming in with a nice looking reveal animation. This kind of animation looks good, and cheers up your website. The images also have layer animations which are coming after each other. You can harmonize these animations together in the timeline.

Layout

The slider has a simple layout: there is a row with 2 columns. The left column contains the textual layers, the right the images and the button. You can see the autoplay indicator on the top right, and the thumbnails on the right side of the slider. With the thumbnails you can switch slides. They are rounded, and have an opacity if they aren’t active.

Responsive

If you check the slider on mobile you can notice the images in absolute position are hidden. They are used only with design purpose, and with hiding them you can save space on the slider in smaller views. Also, you can see the texts are smaller. You can set the text sizes with the text scale, which is a device specific setting.

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 Flower Shop appeared first on Smart Slider 3 — WordPress Plugin.

The Christmas Postcards template uses a Showcase slider type, which you may have seen on other websites. With this type, you have the convenience of displaying multiple sliders at once.

The one in the middle takes the spotlight, and the ones on the sides kinda hover around it, making it easier to switch between them. The middle one stands out even more because the ones before and after are a bit transparent, thanks to the settings in the Animations tab.

Have you noticed the slides on each side tilt in different directions? This can also be adjusted in the Animations settings with the Rotate section.

This slider has a full-width layout, taking up the entire width of the browser window. No distractions, just the slider.

Navigating through it is a breeze. On smaller screens, you just need to swipe horizontally. On the other hand, on larger screens, you can use the bullet points to pick the slide you want. It can be super handy to see how many slides are actually available.

There’s also a ‘Next Letter’ button on each slide. Click on it, and that’s it! You’re onto the next slide.

Layers

Guess what’s great about Smart Slider 3? It’s got these amazing layers that take your slides to a whole new level. Add Headings, throw in some text, create buttons, and don’t forget the images.

However, the real deal is definitely the Absolute layers in this slider. Drag and drop them wherever you want, just like we did with those Image layers on the right side.

They are strategically placed, each image layer adding to the festive landscape. And here’s the secret ingredient: Z index. It ensures that these layers overlap in the best ways, creating layouts that are just downright mesmerizing.

There’s more magic with the layer parallax setting. It’s a simple trick but so effective. Check it out on this template, hover over the images on the right side, and see the layer parallax in action. It’s like the images come alive, adding an extra flair to the Christmas vibe.

Animations

There are several features in this slider that make its layers more interactive. One of these is the above-mentioned layer parallax effect.

Another specialty of this slider is the Particle effect you can spot in the background. These are small moving particles behind the slides, that interact with each other and the mouse as they are moving. The snowing effect on this template is the result of custom particles we’ve created. You can also customize the particle effect in the particle manager, by changing its effect, the number of particles, and its behavior when you hover or click on it.

In addition, you can spot incoming animations on most layers, which can be very useful to make their entrance more eye-catching. One of the more outstanding ones is the Reveal animation. It’s a perfect way to slowly reveal your message while engaging the visitors.

Layout

All of the Christmas Postcards slides create a captivating layout using Rows and Columns for their structure. They have their image and absolute layers on the right side while the main content stays on the left one.

This layout offers you the perfect opportunity to place your images below the text on smaller screens, like mobile view, without any hard work.

However, if you’d like them to appear in a different order, you can easily adjust them to show the images first in the column’s settings.

Responsive

In Smart Slider, you really don’t have to do much to make your sliders look amazing on smaller screen sizes.

Many settings activate automatically to make your work easier, but if you’d like to make some additional changes, then there are some great responsive functions that you can set manually.

For example, you can increase or rather, decrease the font size to fit smaller screens with the Font Resizer. In addition, you can also simply hide layers that you deem as non-necessary on mobile view.

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

The Office Exercises slider template uses a simple slider type. You have probably seen this type of slider on many websites. The cool thing about these sliders is that they show one slide at a time, so visitors can easily check out every part of it before moving forward.

Moreover, this template has a full-page layout. This means that it takes up the entire width and height of your browser’s viewport. Therefore, when you open this slider, all that’s visible on your screen is the full-page slider. So there are no distractions.

You have three ways to browse the slides. On a smaller screen, the easiest option can be dragging the slides horizontally to switch between them. However, there’s more, on smaller screens you also have the option to use the bullet points and select the slider that you would like to view. They are especially useful when you want to see how many slides are available.

In addition, if you are on a desktop, you have a third option. You’ll see arrows on either side of the slide, so you can click on those to move between the slides. It’s entirely up to you.

Layers

Smart Slider 3 has some awesome layers that you can add to your slides to make them look even better. You can add headings and text to your slides, as well as buttons and images.

In the Office Exercise slider, you can play around with many different layers, but the Image Area layer stands out the most, which is used as an absolute layer. It’s perfect for adding a bit of design to your slides, and it’s super easy to manage too. All you have to do is click the layers icon at the top and you’ll be taken to the layers list. You can check, copy, paste, delete, hide, duplicate, or reorder the layers here.

Animations

The Office Exercises slider is full of animations. You can notice an animation effect on the slider’s background when you switch slides. For the Background Animation, we used the Slices-Simple animation, which makes the background move in a special way.

In addition, each time the slider loads, you can see the layers move in from different directions, or be revealed in different ways. These are the layer animations that you assign to each layer, to introduce them in a fancy way.

To easily manage the layers’ delay and duration use the visual timeline at the bottom of your slide editor.

Layout

Most of the slides are using a 1 row and 2 or 3 columns structure. Each layout makes use of Smart Slider 3’s useful features. Like the columns and row settings, where you can adjust each layout to your own preferences.

The Numbers slide shows a layout where all of the columns have the same space between them. This is the result of the Gutter setting, which was used on their row container. Another very useful setting is the Wrap After feature, which is very useful if you want to adjust your layouts to different screen sizes.

Responsive

Smart Slider’s responsive settings are designed to make your life easier. It has a “Hide On” option which helps you out by hiding layers on smaller screens. Furthermore, the Font Resizer is another great feature that Smart Slider 3 offers. With it, you can easily optimize your text for every device, so your slider looks great no matter what screen size your visitors are on.

The best thing about its responsive settings is that it will make your visitors’ experiences as smooth and pleasant as possible, whether they are on a small or large screen.

The post Office Exercises 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.

Nowadays it is a common usage to create a nice-looking, clean and modern landing page where the users get useful information about your website. Have you thought that the whole page above has been made by using sliders and slider blocks? This landing page is built up from 6 sliders. If you have Smart Slider Pro, you can import the whole landing page easily from the Template Library.

The sliders and blocks are in a slider group, which can help to put your sliders in one place. Also, you have an option to publish the whole group, and then all of the sliders inside the group will be on the published page under each other.

Layers

The first slider begins with a Heading layer with a reveal animation and after that 3 boxes come in from the bottom. This usage can be unusual because no heading image is used at the top of the page. However, because of that the user can focus on the most important part of the page. The light colors determine the whole landing page, which makes the page clean and modern, and there aren’t crowded or annoying parts.

You can encounter more kinds of layers in this slider group: with headings, animated headings, images, text layers, buttons and with counter layers. You can customize all of the layers in the sliders, also you can style them in the Style tab of the layer window.

Animations

The first slider starts with animations. It looks beautiful, it is fast and the reveal animation makes a stunning effect on the whole page. The main slider is the most important part of the slider group which can call the visitors’ attention. The animated heading with the reveal animation attracts the eye. The incoming cols have a nice hover effect, which can make the visitor click on them. So it can be a good use-case to put a link on the Col, and the visitor can navigate to another page. Also, each layer comes in with a nice layer animation, which you can see in the timeline.

Layout

I would like to highlight the layout of the second slider. Here you can see an image below the box, you can have this overlap with absolute positioning. Absolute positioning lets you drag your layers anywhere, and you can put a layer above or below another.

In the box there are 2 arrows with an action which navigates to the next or previous slide. You can also see that the slider has a slider background which you can set in the General tab of the Slider settings.

Responsive

The whole slider group is fully responsive. The sizes of the text are smaller on mobile, the rows wrap if it’s needed, and there are layers which are hidden on smaller views. You can set the font sizes device specifically with the text scale option, so you can set different font sizes on different devices.

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

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

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