The base of the Advertising Agency slider is a simple type slider. These are the most common sliders you can see on websites. You can easily recognize them because they’re pretty much everywhere. They display one slide at a time, which allows the visitor to focus on the content.

Apart from using the Simple slider type, the Advertising Agency slider is also full width. This means it takes up the space between the left and right edge of the screen.

One of the most interesting aspects of the Advertising Agency slider is how it was set up. It contains three slides: a Static Overlay and two regular slides. A Static Overlay is a special kind of slide that is always on top of all regular slides. In this template we used it to display the 3 images around the corners of the content.

Layers

Although there are no special layers, some of them have interesting settings. For example, the video layers which are in Absolute position use a custom Aspect Ratio. This allows them to resize properly when the slider gets smaller.

There’s also an Absolute positioned layer behind the content of both slides. You can easily find this layer from the Layer List.

Animations

The Advertising Agency slider is full of cool effects. They’re all layer animations, and the most noticeable one is on the Static Overlay. It’s the rotating text, what you can find around the top left corner. It has a Loop animation which makes it rotate continously. The text is actually in an image layer, which contains the words in a circle shape already. Both this layer and the other two layers on the Static Overlay have an incoming animation.

On the slides you can see some spectacular effects. We created them using using events and layer animations. For instance, hovering on the “Who we are?” text does two things. First, it makes the text move 40px to the right. Second, it makes a video appear on the right side.

There’s also a background animation to make the slide switching more interesting. We choose one of the new animations, Distortion for this purpose. It’s Shard type animation gives a nice touch to the template.

Layout

Apart from the Static Overlay, both slides are based on a two column row. The left column contains Default positioned layers, which have text. However, the right hand column contains Absolute positioned layers.

What’s the difference between Default and Absolute positioned layers? Simply put, the way they behave on the slide. Default positioned layers actually take up the space they need. So if you break a one line text into two lines, it will push down the other layers after it. But Absolute positioned layers don’t take up space; they’re just floating around. So if a one line Absolute positioned text breaks into two lines, it will cover the layer after it. We recommend building your main content with Default positioned layers. Then if you want to add some decoration, you can use Absolute positioned layers for those.

The other interesting part of the layout is the way left columns look and behave. At the editor you can see 40px padding on the Column where the texts are. The button below them has -40px margin, making the content not aligned in the editor. However, when you view the slider in the preview or in a live site, you’ll see they’re aligned. When the mouse is over the text layers, it triggers their layer animation. As a result, the layer moves 40px away to reach its original position. Additionally, they create a super nice effect.

Responsive

Smart Slider is a great tool to create responsive sliders. Additionally, it offers many tools to fine-tune how your slider looks on small screens. Additionally, some responsive-friendly settings activate automatically. For example, a row’s columns automatically break into new lines on mobile. This gives more space to display their content.

You can also adjust the font sizes separately for each device. Additionally, you can also adjust the margin around the layers. Furthermore, you can change and the padding of the rows and columns. These options help create the perfect distance between your content.

Related Documentation: Layer Animations & Events

Related Post: Do you need a Free Full Width Slider for your Site?

The post Advertising Agency 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 Cosmetics slider is a modern looking full page slider, which is perfect to display your products. Full page sliders fill the screen both horizontally and vertically. They’re super popular nowadays, because they look stunning on the large monitors that people use.

There’s a white border around the slider, which gives a nice frame to the slider. You can adjust the border at the General tab, under Slider Design.

Layers

You can find the same layers on each slide of the Cosmetics slider. There are two heading layers, one for the main headline and another for the price. There’s a text layer to display the description of the product. Also, you can find a nice CTA button the visitors can use to buy the product.

Every slide has four image box layers. These are special kind of layers, which can display an image or icon, a heading and a description. We used this layer to display the list with the check marks.

Animations

There are interesting animations on the Cosmetics slider. The first animation you’ll see is the layer animation, that introduces the row to the slide. It’s a simple left move animation, but it looks a lot more special because of the masking. The masking is a special kind of animation that makes the layer animation play inside the layer’s boundaries. In other words, the layer animation is only visible when it’s inside the current layer’s area.

The other animation is the Background animation what you’ll see when you switch slides. It’s a parallax-like effect, because it moves the two slide background images at the same time, just with a different speed. As a result, when you switch to the next slide, the next slide moves in fast and covers the current slide.

Layout

The content is placed to the bottom left corner of the slide, which makes the layout trendy. Creating such layout is very simple. First, you need to set a maximum width to the Content layer. Second, align it to the left. Finally, change the vertical align to bottom so the content will appear in the bottom of the slide.

The other cool layouting the Cosmetics slider is the usage of the row and columns which contain the layers. The white and cream colored boxes are columns of the same row. By default the columns of the row are next to each other, but using the Wrap after option on the row it’s possible to display them below each other.

Responsive

Smart Slider 3 is a responsive slider, and offers many tools to fine-tune the look of your slides on mobile. The two most useful tools are the font resizer, and the ability to hide layers on different devices. Additionally, the padding and margin values what you can use to create distance between the layers can be changed on tablet and mobile devices.

At the Cosmetics slider we hid the image box layers on mobile to reduce the height of the slide. Also, we reduced the font sizes to allow the texts to better fit into the slide. By default the Wrap after of the rows is set to 0 on mobile, which causes the columns to break into new lines. We changed it to 1 at this slider to put the CTA button and the price into the same line.

Related Video: Layer Animations & Timeline

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

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

Settings

This slider is a full page slider, so it is as big as your screen, filling the 100% width and height of your browser. When you scroll with your mouse or use the bullet control on the right, you can notice the background animation which gives a great experience. The slider has 3 slides, and when you are on the third slide and scroll down, you can see the content below the slider.

Layers

There aren’t too many layers in this slider, there are 2 headings, a button and an image layer. You can easily customize them, change the text, the font family, colors, or any styles. Also, you can add layer animation to each layer if you want.

Animations

How your slider works might have a bigger design influence on your website, than the actual contents on it. You need to carefully pick the right choices of what you would like to say with your slider. It can be “party all time”, or “we are professionals”, maybe something else. But you don’t want it to be too simple, which wouldn’t tell anything besides “boring”. The background animations give you many options to choose from, but being boring isn’t one of them.

The best thing about background animations is that they are attractive. They can be implemented to the background images, which usually cover your whole slides, so the effects can be very powerful. You can also handle them easily, we have “sets”, where you can even choose from only vertical animations, if your slider is set up to have a vertical behaviour. This animation option is available globally, but you can select them individually for your slides, too, to have specific effects on the different slides. There is a preview, which helps a lot with picking out the animations.

Layout

The slider has a simple layout, the layers are under each other, each layer is in a new line. You can easily use this layout on a dynamic slide, just copy the slide and paste the content in the dynamic slide. Then replace the content fields with variables. The top heading can be a category tag, the big heading the title of your post, and the read more button can link to the actual post.

Responsive

The slider is fully responsive, it looks good in each device, on bigger and smaller screens as well. On smaller screens we used the text scale option to make the text smaller. This helps that the text isn’t too big on mobile, and won’t take up too much space.

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

Related Post: Animations & Effects in Smart Slider

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

The Orion Full Page template is a simple slider, displaying one slide at a time. This is one of the most common usage of sliders, as it allows presenting one single message without any interruption. It’s also a full page slider, which means it fills the both width and height of the browser. Full page sliders are loved by modern web design as they look gorgeous on the large monitors people use.

For navigation the Orion Full Page template offers arrows and bullets. Arrows are great for slide to slide navigation. Bullets, on the other hand, have two purposes. First, they show the available slides to see. Second, they allow quick navigation between slides that are not neighbors. Apart from arrows and bullets, it’s also possible to switch slides by swiping or dragging the slides.

Layers

The Orion Full Page template doesn’t have complex layers. In fact, it uses the most common ones: heading, text and button. The text layer has a visual highlight by bolding some parts of the text.

The text layer makes it easy to bold parts of your text. Simply select the words you want to bold and click on the B button.

Animations

Each slide presents its layers with a nice set of layer animations. The layers come in from the top with a slight blur effect which makes the loading spectacular.

Additionally, there’s a special background animation set for the slider. It’s the “Zoom out” animation that makes it look like the images are zoomed when the slides are switching.

Layout

The layout of this template is very simple. When you add layers to Smart Slider, by default they appear in the middle of the slide. This template kept the default behavior for a simple but nice look.

Responsive

Smart Slider is a responsive slider and offers many tools to optimize the mobile result. At this template our favorite tool was the Font resizer which helped us optimize the text size for mobile.

Related Documentation: Where to find the Slide Library?

Related Post: Smart Slider 3 – Slide Library

The post Orion Full Page 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.

Just like any hero image, this slider template fills the entire width and height of the browser like a banner. You can set its layout to be Fullpage at the Slider Settings’ Size tab.

One of its many benefits is the ability to catch your visitors’ attention within the first few seconds as they are usually placed at the top of the webpage.

By implementing this template you can also easily navigate between slides by either horizontally dragging them or simply switching slides with your keyboard.

On top of that, each slide has its own arrows and a rotating planet image in the bottom left corner with custom navigation that takes your visitors to the following or previous slide.

Layers

Each of the Undiscovered universe’s slides uses the exact same layers to achieve this unique layout. You can find the basic ones like headings, images, and texts across each one’s structure.

However, there are some special layers. On the top between the numbers, you can find an Area layer, that fills up its layer, creating a line between the headings. Together they show a simple counter. It displays how many slides are available, and which one is currently active.

Moreover, they all have built-in navigation in some of their image layers, as mentioned above, you can achieve this result by setting up the Link Action on the chosen layer.

The bottom left image of a planet is an Absolute Layer. They are easily adjustable and can be drag’n’dropped in your slide wherever you would like them to be.

In order to not get confused with how each layer is positioned, you can easily differentiate between them by checking their color in the editor or layer list. Absolute positioned layers are marked with a purple color.

Furthermore, they all offer a unique experience due to the custom CSS they have. This outstanding blur effect on the left side of every slide can be created by applying a CSS class to their containers in the style settings.

Then, you just need to add your unique design to the CSS section in the Developer settings tab. It is very simple but effective.

Animations

If you switch slides a few times you’ll notice it’s Main Animation. It uses the Crossfade type which is very subtle and short. The Main animation is great whenever you need a simple but elegant slider animation, as it can affect both the slide backgrounds and the layers.

On each slide, you can also find the Background Animation. This affects only their background but, in exchange, they are a very powerful tool in charming your visitors. The super slow pace of the Distortion-Wrap animation offers a fluid transition from one slide to the next.

On top of that, each block has its own layer animations in order to effectively introduce them. They all take advantage of the Basic Animation‘s easy-to-use settings.

However, the absolute layer is set to continuously rotate on its own, using a loop effect. This way the rotation continues as long as the slide is active, complementing the design of the Undiscovered universe slider.

Layout

This template has a quite simple layout. It is built with a two-column row structure. Each column takes up 50% of the slide’s width. While the right side doesn’t have any layers, the left side contains all the important ones, attracting the visitors’ attention.

In addition, the Full Width setting is turned on so it fully takes up the available width inside its container. Accompanied by the Stretch option turned on as well, resulting in it filling the available vertical space.

Responsive

This slider has a similar layout on each device: the two columns are next to each other. The only exception is the mobile view, where the second column is hidden.

Furthermore, one of the many useful tools in Smart Slider’s responsive settings is the Font Resizer, which can be very handy in any case to adjust your design specifically for each particular device.

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

Slider Settings

The Animal Shelter template is a simple type slider, the one that you can most commonly see on websites. It displays a single slide, so other content doesn’t distract the visitor when they view the page. It’s also a full width slider, meaning it fills the screen horizontally. Full width sliders are trendy in modern websites, because they look great on any screen size.

The template has a Shape Divider at its top and bottom. Adding a shape divider is an excellent way to enrich your slider. They’re pretty subtle, sitting under the layers but above the slide background. Oh, don’t bother looking for the Shape Divider on the first slide, because both that and the slide background are white. So you won’t see it there, but it will shine on the green and gray slides.

Layers

The template uses basic layers: headings, texts, buttons and images. Yet, it creates a beautiful section for your site. A heading layer lets you create actual, HTML headings for your slider. You can choose from h1 to h6 tag there, or if you don’t feel like needing either, you can just put the text inside a simple div. So, the heading layer is helpful to create short, headline sections. However, the text layer is a great way to enrich your slider with longer texts. And, of course, the image layer is a great way to add beautiful imagery to the slides.

Animations

The Animal Shelter template is very generous with animations. First, it has layer animations that you can spot when the slides load. The layer animations help introduce the layers to your slide with a nice effect. So it’s worth considering them when you build a slider.

The other effect you can quickly spot is the layer Parallax effect. There are many kinds of parallax effects on the web. The most common one is when the image stays still as the page scrolls over it. However, the parallax effect we added to this slider is connected to the mouse movement. When you move the cursor above the slider the layers move away from it with a slight animation.

The most interesting animation you can spot is the Background animation. It’s the Slices – Single effect, which is similar to the Reveal layer animation. It moves a single colored shape, which covers the current slide and as it moves out, it reveals the next slide. The animation uses the same green color that the second slide has. So it makes it seem like the paw prints are animated by it.

Layout

You can find many interesting layout solutions in the Animal Shelter template. The most interesting one is the button, as we used rows to build it. In fact, we built the light green button using a two column row as well. The left column contains the pawprint icon, and the right column has the text. We turned off the full width option at both of these rows, so they only take up as much space as their content needs. As a result, they create excellent custom buttons.

Another interesting layout solution is the usage of the Absolute positioned layers. Absolute positioned layers are great for adding decorative elements to the slide. For example, the two green shapes on the first slide are Absolute positioned layers. That is why they can overlap the dog picture.

The boxes on the second slide look interesting because they have a slight offset. This offset is actually a padding on their container column. Adding paddings to different columns causes their content to lose their alignment. As a result, they create an interesting layout.

Responsive

Smart Slider is a great tool to create beautiful and responsive sliders for your website. It offers many tools to optimize your slider for small screens. For example, you can reduce the font size of text on tablet and mobile using the Font Resizer. This helps to make the texts fit better into small screens.

A rather busy slider can look great on large screens, but many layers often cause troubles on mobile. For this reason, you can hide any layer you don’t want to see on small screens. Additionally, if you’re working with rows, you can change the color order on mobile. By default when you add a row that breaks on small screens the columns keep their order. In other words, the column that was in the left will be at the top, and the column that was in the right will be at the bottom. However, you can change this order to create a better looking layout for small screens.

Related Tutorial: Rows and Columns

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

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

The Christmas Ornament Shop slider uses the Simple slider type and it’s also full width. So, it looks like any typical slider you can see on website. It displays one slide at a time which is good for two reasons. First, it gives you plenty of space to display content. Second, seeing one slide at a time helps the visitors focus on the message.

For navigation people can swipe through the slides with their cursor or hand. If they’re on desktop or tablet, they can use the arrows located on the sides of the slider. If the visitor is using their phone, they can use the bullets located at the bottom of the slider as another navigation option.

Layers

The Christmas Ornament Shop slider uses the most basic layers. There are heading, text, button and image layers. There’s one special layer on each slide, creating the ribbon decoration. That’s 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.

Animations

There are some spectacular animations on the Christmas Ornament Shop slider. Let’s start with the most obvious one: it’s the Particle effect. Despite having many cool effects to choose from, we decided to go with a custom particle effect. As a result, we were able to simulate a snowing effect for the slider.

The other effects on the slider are more subtle animations. You can see an incoming animation on all layers to make their entrance more interesting. There’s also special background animation, Slices – Single. This animation makes the current slide move out followed by a solid color which then reveals the next slide below.

Layout

The layout of the Christmas Ornament Shop slider is mostly super simple. The slides are based on a two column row structure. However, there’s an interesting layout solution you can spot, which is the decoration ribbon. It’s an Absolute positioned layer located in the right column. We aligned it to the middle of the column and gave it a custom size to ensure that it fills the whole slider.

Responsive

Smart Slider is a responsive slider and it provides several tools to create an awesome looking slider for small screens. One of the most popular responsive tools is the Font Resizer which allows adjusting the size of the text on the currently edited device, without affecting the other devices.

The other cool feature is the ability to hide layers that are not needed for a particular device. For example, at the Christmas Ornament Shop slider we hid the ribbon layer on mobile.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Settings

The fashion slider example shows a simple but spectacular way of creating a trendy slider that shines on any modern website. It’s a stylish slider that looks wonderful for any webshop. The slider is a full page slider, it fills the full width and height of the browser. It stays from 3 slides, and there are more ways which you can navigate between them. You can simply drag, but you can use the arrow and bullets controls. If it isn’t enough each slide contains a row which you can navigate to the next slide.

Layers

The slides have the same structure, and same layers with different content. There is a row with 2 columns, the left column contains 2 image layers, and the content is on the right side. There are heading layers, text layer, button layer, and there is a row inside the other. This row is special because it has a link action on it, so when you click on the row, you can navigate to the next slide.

Animations

We added the layer mouse parallax effect to add an extra touch to this modern slider. You can see this effect if you move your mouse above the slider. When you switch a slide, you can see the background animation. These slice background animations give a clean and modern look to your slider. They’re super eye-catching so your visitors will love them.

Layout

Smart Slider has 2 positioning options: default and absolute. With default position you can create your layout easily, you can put your layers under each other, or with using rows and columns you can put them next to each other. The other positioning is the absolute which you can put your layers everywhere in the canvas, and you can put a layer above or below to others. We have used both in this slider.

Responsive

The slider looks astonishing on mobile devices and tablets as well. If you check it on mobile, you can notice there are layers which aren’t visible. You can hide layers on different devices, which you can save space, and your visitor can focus on the important parts.

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

Related Post: Everything You Need to Know about the Parallax Effect

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