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.

Settings

Unlike normal sliders, WordPress carousels show multiple slides at the same time. This is a really good way to showcase the latest or hot products, blog posts, images or videos. You can set the whole slider and the slides widths and select the number of items to move. Creating and managing a responsive carousel has never been easier.

At carousel sliders you can set the slider size and the size of the slides separately. The slides which display next to each other are in one pane. You can set a maximum width for the pane which you can limit the maximum amount of slides that can be displayed next to each other. In this slider 3 slides appear in one pane.

Layers

The most attractive layer is the Transition layer in this slider. If you hover over the image, you can check another image with a fading effect. With this you can display 2 images in the same place.

In some slides you can notice a new or sale badge in the top right corner. These layers are in absolute position, and always are in that corner. You can anytime replace the text, or delete it.

Animations

The carousel uses a horizontal main animation, if you click on the arrows, bullets or drag with your mouse, the whole pane will move horizontally. If you want to switch only one slide, not the whole pane, then you can enable the single switch option at the Slider settings → Animations tab.

Layout

If you open the layer list, you are able to check all of the layers on your slide. As you can see on the image below, there is a transition layer on the top of the slide, and a row below that image. This row stands out from 2 columns where heading layers are.

Responsive

If you check the carousel on smaller screens, you will notice that the carousel slider works that way, that it can only show as many slides as many can fit into the available space. So on mobile devices you can see only one slide, and should drag if you want to see the others. The arrows are hidden on mobile, because with that you can save space on the edges, but the bullets helps the visitor to see there are more slides in the slider.

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

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

The post Product Carousel 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.

Settings

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

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

Layers

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

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

Animations

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

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

Layout

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

Responsive

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

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

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

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

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

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

Smart Slider 3 has a special slider type, the Carousel which is perfect to create an amazing slider. WordPress carousel can show more slides next to one another which means you can recommend for example more blog posts at once. The carousel displays the slides in a trendy card-like design, which guarantees the good responsive behavior. This gives another reason to use it for creating a Post Slider but you can use this type as a Product Slider as well.

This template is a full width slider so your slider will be 100% width of your page. This carousel has 1200px maximum pane width, whose value defines the maximum width of how far your slides can go within the slider. The slides have 360px width with 20px minimum slide distance, so you will see 3 slides next to one another.

Layers

Each slide has the same layers on it: a row with 3 text layers. At the first text layer the name is a link, and the link has a different color, so you can highlight the author, also you can link. At the second text layer the “Yoga” text is bold. Text layers can accept HTML codes, which you can reach this kind of layout. But you can also use the highlighted heading layer, where you can add a different style to the highlighted text.

Animations

When you click on the arrows or bullets on the bottom, or drag with your mouse, you can switch the entire pane. 3 slides will move together with a horizontal animation. This animation is the main animation of the slider. If you want to switch the slides one by one, then you can enable the single switch option, and then one slide will move at the slide switching.

Layout

At the carousels the slides are next to each other. At this example 3 slides are in one pane, the arrows are on the left and right sides and there is a number type bullet control on the bottom which gives a frame to the slider.

Responsive

The carousel is fully responsive, so on smaller devices you will see 2 or 1 slide, which can fit the available space. Besides, the slider is touch friendly, your mobile visitors won’t have troubles with it. To make the navigation easy and convenient, the slider has both arrows and bullets. Bullets are great to allow a quick navigation and show how many slides there are to see.

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

Related Post: Enrich your Blog with a Post Slider

The post WordPress Post Slider Carousel 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 Monolith Boxed Slider makes use of the Showcase slider type. One of its unique features is that it can represent more than one slide next to each other.

However, the selected slider is completely in focus drawing the visitors’ eye. The ones on each side have a lower opacity to enhance this effect even more. It results in a design that makes them look slightly faded out. Setting it up is very simple and you can easily achieve this in just two easy steps. First, set a slider background color. Then, lower the opacity of the Before and After slides.

On top of that, the layout of the slider is full-width, which means it fills the browser horizontally. As a result, it’s easier for more slides to display, especially on today’s large monitors.

You can browse them using one of the three options it offers. For smaller screen sizes the most beneficial is to drag each slide horizontally, as swiping is mostly used on them.

Besides this, there are three easily noticeable dots under the slider. Your visitors can use these bullet points to choose the slide they would like to view. Moreover, bullet points are very helpful in case you want to show the number of slides available in the slider.

And last but not least, the third option is to click on one of the slides slightly shown on each side of the main one. This is very optional if you would like to navigate between the slides one by one.

Layers

You can see mostly the same layers on all of the slides. Some simple layers are the Text layer, Heading layer, Button layer, and Image layer. Almost all of them can be found on each slide. What’s outstanding about them is how they are implemented to create a sophisticated look.

In addition, without any doubt, the most unique layer is the Image Area layer. This layer is perfect for adding a design element to your overall look.

You can easily check and change your layers in the layers list. It’s accessible from the top, just select the icon. Here you can check all layers of the slide, change their name, copy, delete, hide them, or change their order.

Animations

The most eye-catching animation on the Monolith Boxed Slider template is the Horizontal showcase effect. This slider type comes with many unique animation effects that you can try out and play around with to create your own individual design.

There are also basic incoming animations on all of the layers separately. They come in from different directions of the slide, smoothly introducing them. These movements together create a subtle but elegant look.

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

Layout

All of the slides are built using the 1 row 2 columns structure, except for the Testimonial slider. This block is separated into three equal columns taking up the full width of their container.

However, the most intriguing solution may still be the Portfolio slide’s layout. It creates a captivating gallery with its special arrangement. There are three columns, which contain three images in each of them.

Besides, all of its columns have the same space between them. This can be achieved by setting up the Gutter on their row container.

On the other hand, the images are simply separated by the top margin added to them.

Responsive

Smart Slider is very versatile in its responsive settings. Many of the layers take advantage of the Hide On option, which makes it easier to hide layers on smaller screens.

Not to mention the Font Resizer, which is one of the most useful gadgets, as it lets you uniquely optimize your layers device specifically.

Their main purpose is to offer your visitors a pleasant experience while browsing your site whether they are viewing from a smaller or larger screen.

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

Minimalist websites and sliders aren’t going to go out of date. Why not spice up your website with a minimalist testimonial slider? On the slider above, you’ll find a nicely placed slider background image. It’s easy to recognize the slider background image. This image stays static while the slides move in front of them. To increase the legibility of the slides, we’ve darkened the background image. This high contrast allows the white texts to be read on each slide.

Layers

The slides have an image layer, which displays the customer’s picture. The images were rounded beforehand. Below each image there’s a text layer. It contains the testimonial text, the customer’s opinion on the product. The text color is white and the size is big, as this is the most important part of the testimonial slider.

At the bottom of the slide there are two heading layers: the top has the customer name. The bottom one, with lighter font color, reads their occupation. This isn’t crucial info, but it might be a great addition. For instance, if you sell products for athletes, you want to show which professionals are using it. This encourages the visitor to buy.

Animations

After the slides have switched, the layers reveal themselves by fading in from the right. This gives a small motion to the slides which makes them more interesting for visitors. You can manage the layer animations in the timeline, here you can copy and paste the animations, change the duration, or set the delay. Also, if you click on the animations, the layer window will open where you can see the other layer animation settings.

Layout

The slider has a simple structure: the layers are under each other. The arrows are in the left and right sides, and the bullets are on the bottom which gives a frame to the slider.

Responsive

You can switch slides three ways: by arrows, bullets or dragging/swiping. This makes the slider mobile friendly. On mobile devices it’s more natural and convenient to swipe than to tap small elements. We’ve built each slide using default layers, which makes them behave better on small screens. For example, the texts are smaller on tablet and mobile. For that you can use the text scale option, which is device specific, so you can set different values on each device.

Related Post: Best Testimonial Slider Examples for WordPress

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

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