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

Traditional sliders, which display one slide at a time, are still very trending. For this reason, we chose the Simple slider type for our new slider template, the Real Estate. Nowadays it’s common to use a slider as a hero section of the page. Typically, these sliders take up the full width of the page, just like the Real Estate slider does.

So, this slider is perfect to use it as the hero header of your site. Because it displays only one slide on larger screens as well, it has plenty of space to create a gorgeous layout.

There are several ways for the visitors to browse this slider. The most obvious way is using the bullets at the bottom of the slider. Their unique, line-like layout makes the bullets look trendy and modern.

Apart from the bullets, visitors can browse with swiping or dragging. Additionally, the first slide has a custom navigation via the images. Clicking on each image will switch to one of the last three slides.

Layers

The first slide of the Real Estate slider provides a unique experience due to the Caption layers it has. The Caption layer is a special layer in Smart Slider 3 Pro. It helps you create a caption for your image on mouse enter easily. This caption layer is also used for navigation, which can be done easily using the Link Actions. Watch the video below to see how easy it is to set up a Link Action for a layer.

Apart from the Caption layer, each slide has a CTA button.

Animations

There are some interesting animations and effects in this slider. First, it has a Shape Divider, which creates the white-colored curve at the bottom of the slider.

Then, on each slide there are layer animations. The text use a basic animation, that moves them in from the left. But the images use the Reveal type animation. Reveal animations are special kind of layer animations. They don’t just animate the layer, but they place and move a single colored box in front of it. This make the effect look more special.

When you switch slides, you can stop a simple fading effect as the layers fade out. This is the Main Animation, which affects the layers, when they don’t have animations. Since the layers have incoming layer animations, they don’t fade in. Instead, they use their own special animation to appear on the slide. But none of the layers have outgoing animations, so they just fade out.

Layout

The layout of the Real Estate slider looks very special, but it’s actually quite simple. It’s based on a large row, which has two columns. The first column, where the texts are, is 1/4 wide. The larger column is 3/4 wide, and contains another row in each slide. However, on the first slide, the inner row has three columns, and each column is 1/3 wide. On the other slides, the inner row has two columns. One of them is wider, for the bigger image, and one smaller, for the 3 small images.

Responsive

Smart Slider 3 is a responsive slider, and it has a unique way to position layers. These are the Default positioned layers, and you should use them to create your slide content. First, you can work quickly and precisely with them. Second, they’re easy to use. Third, they help creating responsive sliders with minimal effort.

When you add a Default positioned layer, it keeps the text size on smaller screens. This ensures that your content remains legible even on the smallest mobile device. Default positioned layers can increase the height of the slider, if they need more space. As a result, your slider stays enjoyable for mobile users. But you haven’t had to make any changes for mobile yet, because the system takes care of these for you.

Of course, there are responsive options you can use to adjust your slider for small screens if needed. For example, you can change the font sizes to make the content fit better into mobile size. When you add rows to your slides, then their columns break into new lines on mobile due to the Wrap after option. To create the layout of the inner row, the Wrap after option had to be adjusted there.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

Settings

It’s a popular design choice on modern websites to put a full page hero header or slider to the website. These sliders fill the whole width and height of the browser. On today’s large monitors a full page slider provides enough space for a good first impression.

After you got your visitor’s attention, they’ll want to see more of your site, so they start interacting with it. One of the most natural ways to interact with the page is to scroll down. In Smart Slider you can use this scroll action to switch slides. As a result, instead of scrolling to the next section of the page, the visitor sees a new slide. This works great with a vertical animation, because it makes the slides look like they’re new sections of the page.

Layers

The purpose of a portfolio slider is both to showcase your previous works and to get you new jobs. For this reason the first slide contains two call to action buttons. One large button leads the visitor to your Latest Projects, and another leading to a contact page.

This second button is actually a special layer called Highlighted Heading. With this layer you can highlight the most important part of your text with a cool effect. It’s a great layer to grab attention, so it’s a great choice for a less ostentatious CTA button.

At the bottom of the first slide you can see two super counter layers. Counters are great to display numeric details about your product or services.

Animations

Smart Slider has many cool effects you can choose from to make your slider look more stunning. The layer animation, what you can see on each slide, is one of these effects. It brings motion and life to the slides, which makes it easy to grab the attention of your visitors.

Layout

The slides in the Full Page Portfolio slider have a very simple layout: there’s a row with two columns in each slide. The left column contains the text, and the right one has images. By default this layout would place the image below the text on mobile. But in Smart Slider you can change the order of the columns, so it’s possible to show the image first. This gives a much better look on small screens.

Responsive

In Smart Slider your layers can have two different position type: Default or Absolute. Default layers are the perfect choice to create your slide’s content. Working with Default layers ensures your content remains legible on the smallest screens. Additionally, it prevents any content from getting cropped.

Absolute layers, on the other hand, are great for decorative content. On this slider, the colorful shapes are Absolute image layers. What makes them more special is that they’re Nested. Nesting means placing Absolute layers into a column, which helps with the positioning.

Related Documentation: Slide editing in Smart Slider 3

Related Post: Smart Slider 3.4 – Nebula

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

The biggest challenge for any web designer is to craft a creative website for their clients. They use various techniques to amaze everyone who visits the website. One of today’s coolest trends uses illustrations. An illustration can make any website leave a memorable experience for the visitor. The most common approach to present such graphics is a header illustration. A header illustration helps grab the visitors’ attention as fast as possible.

When you create a slider and publish it, it will start on the first slide by default. But Smart Slider gives you more control over this, as it lets you change the first slide. This way you can decide which slide you want to start your slideshow on. When we created the Header Illustration slider, we made it start on the second slide, which is in the middle. You can change the first slide if you click on the 3 dots on the top right and click on the “Set as first” option. The star icon marks the starting slide in the slider.

Layers

The first slide of the illustration header has two large CTA-s, which you can use for navigation. These CTA-s are rows with 2 columns. Also, there’s a layer event connected to each row. When you hover on them a layer animation launches on the right side. This subtle effect gives a nice touch to the header slider.

When you click on the first row it takes you to the last slide of this slider. You can find a bunch of new illustrations and blobs here, and the parallax effect is present as well. What’s pretty cool on this slide is the counters. With the counter layer, you can count from a given number to another. This lets you create, for instance, animated statistics for your illustration slider.

Animations

The cool illustrations are the best parts of this slider. They occupy more than half of the slider, so it’s hard to miss them. The solid illustrations raise the visitors’ attention and give a neat look to the slider. At the right side of the slider, you can see colorful shapes in the background. These are the blobs, which have the mouse parallax effect, and this gives a fun touch to the slider. The shape divider at the bottom is the coolest floor you’ve ever seen in any header.

Layout

In Smart Slider there are two position modes, the default and absolute positioning. With absolute positioning you are able to put down your layers anywhere, but everything just floats, so the layers aren’t affecting each other or the slide. In default positioning layers are taking up space, where other layers can’t go, so layers won’t crawl under each other, also they are making the slide as big as it needs to be, to leave space for all the layers, margins and paddings.

You can find both positioning in this slider. The absolute layers are decorations and are below the defaultly positioned layers. They look good, and have a layer parallax effect on it.

Responsive

When you check the slider on mobile, you can notice the image layers in the background are hidden. With hiding a layer you can save space on smaller views, and the focus can be on the content of the slider.

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

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

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

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.

The Banking App template is a simple type slider. Simple sliders are the most common sliders you can find on the web. They display one slide at a time which is handy because it lets users focus on one message at a time. The slider is also full width, which means it fills the browser horizontally. Full width sliders look especially great on today’s large desktop monitors, which makes them one of the more popular layouts to display a slider.

The Banking App template has a slider background color set. Slider backgrounds are special because they stay in their places while the slides move on top of them. It’s worth noting that the slider background is covered by the Slide background unless it’s at least semi-transparent. At this template the slides don’t have background, letting the slider background color display.

Being able to go through the slides of a slider is super important. If people can’t reach the slides after the first one they can’t see their content and your hard work was in vain. To ensure that your visitors can check out your slides Smart Slider offers many different navigation options. In the Banking App template we used the Text bullet navigation. What makes this navigation special? It creates bullets using the Slide Title as their label. This helps giving the visitors a pretty good idea about the slide they are about to check out.

Layers

If you check the Banking App template it looks super special, doesn’t it? But it was built with the most basic layers: heading, text, image and of course rows and columns. Rows and columns are the building blocks of Smart Slider and help you create amazing layouts.

Each slide has a colored image in its middle part. That is the background image of the Content layer. The slides themselves have no background to allow the slider background to show up.

Animations

You can find a bunch of cool animations on the Banking App template. Let’s start with the most interesting one, which is the Particle effect. It’s the small dots behind the main content that keep moving around. They’re pretty subtle but give a nice touch to the slider.

Another animation you can see are the layer animations. They introduce some of the layers to the slide with a nice fading effect. Layer animations are available for each layer and have many customization options to create a nice looking effect.

Layout

The Banking App template’s layout is pretty special. It starts with a row which columns have 40% and 60% width. The right column contains the content: it has heading and text layers. It also has another row which has a negative bottom margin to make it move out of the container row.

But what’s more interesting is the mobile phone image. It has negative margins to make it bigger than its container. It’s a creative solution that makes the whole slider stand out from the crowd.

There are also some decorational layers in Absolute position. What’s Absolute positioning? A special way to add decorative elements to your slider. Absolute positioned layers don’t take up space, they’re just floating on top of the slide, which makes it hard to use them to achieve a good responsive result. On the other hand, they can help adding a nice touch to the slider because they can overlap other layers.

Responsive

Smart Slider is a responsive slider that offers tons of tools to ensure your slider looks perfect on small screens. The Font Resizer is one of these options, and it’s going to be your best friend when you optimize for small screens. It helps you reduce (or increase) the text size on the current device.

Another great feature you can use is to hide unnecessary layers on different devices. For example, usually it’s unnecessary to have decorational layers on mobile. So you can just go ahead and hide them.

Related Video: Particle effect

Related Post: 10 Beautiful Full Width Slider Examples

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

Smart Slider’s newest template takes advantage of the Simple Slider type‘s easily manageable features. These slides are known for displaying only one of them at a time.

Besides that, they usually take up the full width of the page. You can easily change these settings to match your preferences in the slider’s Size settings tab.

In addition, for a smooth navigation the Tattoo Studio template applies the Arrow option on each slide. Therefore, inside the Controls settings this feature offers many ways for a unique design, just as it can be seen on this slider.

The navigation is nice and fully visible with a special hover effect, which makes it possible for the user to have an unmatched experience while browsing your site.

On top of that each slide has it’s own arrow button with a custom navigation that takes your visitors to the following one.

Layers

The Home, the Tattoo and the Piercing slide each uses the same layers for their design with almost exactly the same layout.

Nonetheless, all slides have one thing in common that instantly catches the visitors eye. They all have a CTA layer with a navigation as well. To achieve this result you can simply set up the Link Action on the layer.

Furthermore, the Services, the Gallery and the Pricing slide each provides a unique experience due to the custom CSS they have. This nice hover effect is achieved by applying a CSS class to their containers in the style settings. The following step consist of completing the Developer settings’ CSS section with it’s own unique design.

Animations

This template uses many fascinating animations that makes it into it’s own unique self. For instance, it’s Main Animation is set to Horizontal. It creates a moving effect that slides each one from their right to the left very smoothly.

Then, it applies layer animations on each layer. These can be very useful in making the introduction of each of your layers stand out.

Additionally, all the layers use the same basic animation that moves them in from either side of the slide.

Layout

There are two bases for the slides in this template. One of them is built up with using a two column row, each taking up 50% of the slide’s width.

While the right side contains an image layer, the left side holds the slide’s heading and text layers. These come to an end with an individual row design that creates a CTA button, completed with it’s heading and image layers.

Additionally, the next type of layout consists of rows upon rows, that contain the main content. Therefore, creating more of a centered layout for them.

The above mentioned heading and CTA button is paired with either a row showcasing it’s eccentric images or it’s own columns providing information by using image, heading and text layers for it’s sole purpose.

Responsive

If you check the slider on smaller devices, such as your mobile, you can see that the columns wrap under each other creating a better user experience on the additional device.

There are many other options that you can take advantage of in Smart Slider’s mobile-friendly features.

Such as setting specific font-sizes for each particular device, as well as hiding layers to improve your visitors’ circumstances on smaller screens.

The post Tattoo Studio 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.

The Nala Showcase template is based on the Showcase slider type. Showcase sliders are special kind of sliders, because they can display more slides next to each other. There’s one slide in the middle, and if there’s enough space, other slides can show up on its left and right side. Additionally, you can highlight the middle slide by making the before and after slides smaller, or semi-transparent.

Layers

There are several layers in the Nala Showcase slider. You can find the commonly used layers: heading, text, image and button on most slides. These layers help you create content for your slides. If you’re looking for something more interesting than these common layers don’t worry. There are more special layers on this slider, such as the Counter. The Counter is a numeric layer that counts up or down to the given number.

Animations

Although the Showcase sliders don’t have fancy animations, you still have many options to add awesome effects. Many slides contain layer animations to introduce their content. Layer animations are great to make your slider look more interesting and to add some movement.

Layout

Each slide has a different layout, which makes the slider a lot more interesting. There are also cool solution to create custom “layers”, such as a button by using a row. The row itself has the background color both on normal and hover state. Additionally, it opens a lightbox when clicked. The left column contains the image layer and the right one has the text.

Responsive

Smart Slider helps you create gorgeous sliders that look equally great on small screens. For example, you can optimize your texts by adjusting their font size to better fit small screens. You can use the Font Resizer for this.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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