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

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

Layers

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

Animations

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

Layout

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

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

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

Responsive

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

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

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

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.

Settings

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

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

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

Layers

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

Animations

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

Layout

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

Responsive

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

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

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

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

Slider Settings

The Interior Showcase template displays more slides next to each other. The showcase slider type which is the base of the slider can display an odd number of slides together. But it always keeps the active slide in the middle. This helps the visitor focus on the primary slide and also see that there are other slides which they can check.

The extra slides displaying next to the middle one can be used for navigation. Clicking on any of these slides makes the clicked slide appear in the middle. Apart from these slides, each individual slide contains navigational arrows to switch forward or backward. Additionally, you can switch slides by dragging or swiping.

There’s also a bullet navigation at the bottom of the slider. Bullets are great way to indicate how many slides there are to see and you can also use them for navigation. The bullets show the slide that has the number 1 on it in the middle. This happens because the starting slide is actually the one in the middle of the slider that was set to be the first slide.

Layers

The Interior Showcase slider uses simple layers to display the content. It has a heading, a text, two image and a button layer. The image layers create the forward and backward navigation using Link actions. While the other layers provide the textual content of the slide.

Animations

Although Smart Slider has many great animations, such as layer animations or parallax effect, we choose to keep this template simple. For this reason, the only special effect it has is the Shape Divider at the bottom of the slider.

Layout

The Interior Showcase slider uses a simple layout, but it still looks special. It’s content it placed at the top and bottom of the slide. How to achieve such look? Well, you need a row where the Stretch option is enabled. The Stretch makes the row fill up the whole slide vertically, so it can push the content above it to the top of the slide. Then inside the row’s column the content is Vertically aligned to the bottom.

Responsive

Smart Slider is a responsive slider that offers many great features to make your slides look perfect on small screens. For example, you can adjust font sizes to make the texts easier to read on small screens. Additionally, you can hide layers that are less important to save space on your slider. At the Interior Showcase template we hid the button and the text layer on mobile.

Related Documentation: Link actions

Related Post: 10 Beautiful Full Width Slider Examples

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

Slider Settings

The Renovation template is a simple slider that takes up the full width of the browser. Such sliders are popular in modern web design, because they look great on any screen. What’s also cool about this template that all of its slides use different color scheme. As a result, it’s a colorful addition to any modern sites.

One of the most interesting features of this slider is that if its top is not visible during slide switching, the slider scrolls to it. This way if your smaller screen users check out the full slide, they’ll be at the top of the next one after they switched forward. Small features like this can create a super cool experience for visitors. How to achieve this scroll to top behavior? Change the value of the Scroll to Slider option to Top – When needed.

Layers

You can find the most common layers on the Renovation slider. There are headings, texts and images to display content. You can also find a special layer on each slide, the Highlighted heading. It’s a great way to make some content stand out, and this template uses it to highlight the keyword on each slide.

There’s also a custom navigation on each slides using Link Actions on the columns of a row. This navigation is not only looks great, but it’s very convenient as well. Also, there are bullets available for navigation.

Animations

Smart Slider has many amazing animations and effects. To make the Renovation template more interesting, we added the layer parallax effect to some of the layers. So when you move the mouse over the slide, some layers make a subtle movement. As a result, the slider look more interesting.

At the bottom of the slider you can find a cool looking Shape Divider. It uses one of the new shapes, Paper 4.

Layout

The base of all slides is a two column row. By default when you add a row, it has two columns, each having 50% width. However, you can adjust the width of the columns to make their sizes fit better for what you’re creating. On this template we split the columns 41-59%, so the right column is slightly wider than the left.

Another interesting thing is that we used Absolute positioned layers to decorate the slider. Absolute positioned layers are floating on the slide, without taking any actual space which means you can place them anywhere. This makes them perfect for creating decorative stuff on the slide.

Responsive

Smart Slider is a responsive slider with many tools to help you make your slider look perfect on any device. You can adjust font sizes to make the texts fit better into small screens. Additionally, you can break a row’s columns into separate lines to make more room for the content. Alternatively, you can also hide layers to make the content fit better for small screens.

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

Related Post: 10 Beautiful Full Width Slider Examples

The post Renovation 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.

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.

The Nala Fullpage uses the simple slider type. Simple sliders are the most common sliders you can find on websites. They display one slide at a time which allows visitors to view every part of the slider before moving forward. It uses the full page layout, which means the slider takes up the width and height of the browser’s viewport. As a result, the only thing visible on the screen is the slider.

Layers

Smart Slider has several layers to create content. There are some layers that are more popular than others, because they help creating the most needed content for the slides. Some of these layers are heading, text, button and image. You can find each of these layers on the Nala Fullpage slider.

Animations

The Nala Fullpage is full of animations. Right when the slider loads you can see the layers moving in from the left and right side. These are layer animations which are nice tools to have as they can introduce the layer in a trendy way.

The other effect is visible when you change slides. It affects the background animations, making them move in a special way. The background animation we used here is the Morph – Wave animation. It morphs the current image into the next one with a wave-like effect.

Layout

Probably the most interesting layout solution in this slider is a custom button. We created it using a row layer that has the button’s background and border. It also has a nice hover effect. Additionally, the clicking on the row (or anything inside it) opens a video in a lightbox.

Responsive

Nowadays you need to create websites and sliders that look great on the smallest screens. Smart Slider provides you all the tools you need to create a responsive slider for your websie.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Just as it can be noticed from its name, this slider is created with the Full-width slider type. One of its many benefits is that it offers a responsive look that can look outstanding on different screen sizes.

It makes use of different types of controls to offer your visitors the most convenient experience while browsing your website. One of them is to simply drag your slide horizontally. This is most beneficial for smaller screen sizes, where swiping is often used.

Besides this, you will notice the three dots under the slider. Visitors can use the bullet points to choose whichever 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.

Lastly, the third option is to use the arrows shown on each side of the slide. They are easy to understand with their clear and individual design. In addition, it’s perfect for viewing slides one by one.

Layers

This template uses many types of Smart Slider’s captivating layers. It implements the fundamental layers, like the Image layer, Heading layer, and Text layer.

However, some of them, like the Image Area layer, are specifically designed using Absolute layers. They are super easy to use, as they can be drag’n dropped anywhere in your design, enhancing the whole outlook. This makes it easy for overlapping layers just like we did in this template with the Image Area layer.

Moreover, we can find that the Countdown layer is very eye-catching with its own uniqueness, which is perfect in this case, as this template is representing the company’s achievements with it.

The layer parallax setting is a simple but effective way to enhance your image’s character, in this template’s case it’s used as a design element.

Animations

This template’s Main Animation is set to Horizontal, so the slider moves horizontally. It’s very simple but effective.

Moreover, as you can see the content is introduced in many different ways. Using Shape Dividers can cheer up your slides with their trendy design. What’s more, is that they are fully customizable, so you can create your own modern graphic shape.

On top of that, all of the layers have their own smooth and lightweight layer animations. They all together help with catching and keeping the visitors’ attention with their unique movements. The Monolith Full Slider template’s animations are all in harmony together, which can be easily created using the visual timeline. Here the delay and duration can be changed.

Layout

The two-column row layout can be found on each of these slides. Both sides assis different purposes. Let’s take the first slide as an example, while the left side provides us with important information, the left side’s purpose is more about making the whole look more engaging with the supporting images it offers. Both are very important in their own ways. Altogether, it results in the perfect minimalist layout.

On the other hand, the following two slides are wholly about providing information for the potential user. Both have one of their columns separated into another two rows with two additional columns.

Responsive

Smart Slider offers different solutions for responsive design. This template’s layout offers many benefits that the slides can take advantage of to create the perfect view for each device. The Wrap After setting lets you design your rows differently for all screen sizes. You just need to set the number of columns you would like to break your content into.

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.

In addition, the Hide On option was the perfect solution for the third slide’s text content. It lets you hide different layers device specifically.

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