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.

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.

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.

Settings

The most common sliders you can see on websites display a single slide at a time. The Organic Food slider is similar to these popular sliders. In Smart Slider, we call these traditional sliders Simple type sliders. They display a single slide, which can fill its container, the full width of the page, or the full width and height of it. This Organic Food template takes up the full width of the page. Full width sliders give plenty of space to display content. As a result, they help showcasing gorgeous images.

The slider doesn’t have arrows for navigation, but it has thumbnail images. They’re located at the bottom of the slider. What makes them looks special is that they look like half of them is on the slider, and half of them below. This happens, because of the size and position of the thumbnails.

Layers

The most special layer on this slider is a Highlighted heading layer. This layer draws a special shape around the highlighted text, which helps drawing attention to it.

The white layer on the left is a row, which has 500px maximum width. This limits the space the row can take up, which allows seeing bigger part of the slide background image.

Animations

There are three cool animations on the slider. First, the most noticeable animation is the Ken Burns effect. The Ken Burns effect is a zooming and panning effect, which came to the web from video editing. In this slider, the effect slowly scales down the images. In fact, web designers love using the Ken Burns effect because it’s subtle yet elegant. So, it helps making the images stand out.

The second animation is a Main animation. The Main animation is the effect, that can affect both layers and slide backgrounds. At this slider the Main animation is a simple fading animation. It fades out the background images, and also the layers. Since the layers have an incoming animation, the Main animation doesn’t fade them in. Instead, the layer’s incoming animation makes the layers appear on the slide.

The last effect on the Organic Food slider is the most fun one. It’s the layer parallax effect, which makes them react to the mouse movement. As a result, when the cursor moves to one direction, the layers move to the opposite direction.

Layout

The Organic Food slider uses both Default positioned and Absolute positioned layers. Default positioned layers are great to build content. They let you create a good looking, responsive slider super fast. In fact, Default positioned layers generally need little to no responsive adjustments. They’re marked with a blue color on the canvas.

Absolute positioned layers, on the other hand, are great for creating decorative elements. Although their responsive behavior isn’t as great as Default layers’, you can place them anywhere on your slider. On the canvas they’re marked with a purple color.

Responsive

Like any slider you’ll create with Smart Slider 3, the Organic Food slider is responsive, too. This means that the slider is enjoyable even on the smallest screens. To help with this, we hid the Absolute positioned layers on mobile devices. As a result, they won’t cover the content.

The text sizes have been reduced, too, to make the highlighted heading fit better to the mobile screen. We also adjusted the padding on the Content layer, to make the slides look less crowded.

Related Post: Use the Popular Ken Burns Effect on your Slider

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

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

Settings

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

Layers

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

Animations

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

Layout

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

Responsive

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

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

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

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

Slider Settings

The 404 Blurry template is a full width block what you can use to display a user friendly 404 error page. Blocks are special slider types in Smart Slider, what you can use to take advantage of Smart Slider’s awesome features, without having to create an actual slider. So, Blocks are not sliders, but sections, and they can only display one slide. As a result, they load fast which makes them perfect for creatign a hero header.

In the background of the slide you can find a blurred image, which displays circular shapes. Although this image is actually blurred with an image editor, Smart Slider has a blur option. So, if your image isn’t already blurry and you don’t want to edit it with your favorite image editor, you can just use our tool to make the images blurry.

Layers

The 404 Blurry block features the most commonly used layers. These layers are: image, heading and button. The two heading layers display the main headline and subheading which tells the visitor why do they see this page. The button is to create a nice CTA to go back to the home page.

The most fun elements on the slider are the image layers. They display illustrations, which are trendy elements to use on a website nowadays.

Animations

The 404 Blurry block is full of animations. Every image layer you can see has their own layer animations. For example, the cat image has a loop animation that rotates it away from the slider and back again. The planet images appear with a cool rotating and scaling effect.

Apart from the layer animations the layers also have layer parallax effect. This makes them react to the mouse movement, which is fun to play with. As you move the mouse cursor above the block, the layers move to the opposite direction.

Layout

Smart Slider has two ways to position the layers. One is Default positioning, which you should always use to create the content of your slide. Default positioned layers have superb responsive behavior, and load fast on your site. The other is Absolute positioning, which is perfect to create decorative elements. You can drag’n’drop Absolute positioned layers anywhere on the slide, so it offers a free positioning. But it’s much harder to make them responsive than Default positioned layers.

At this slider you can find 3 Default positioned layers: the two headings and the button layer. The other layers are purely decorational, so they’re in Absolute position. The Absolute positioned layers are under the Content layer, which makes them appear below the main content.

Responsive

Smart Slider’s Default positioning allows you to create great looking sliders fast, and takes care of the responsive behavior. Of course, you have lots of tools if you’d like to fine tune the result. One of the most popular tools is the Font resizer, that makes the fonts smaller for mobile devices. This way they fit better into the slider, and make it look more professional.

Default positioned layers can increase the height of the slider if they need more space. We took advantage of this at the 404 Blurry slider, and set top and bottom paddigns to the slide. This makes the slide appear taller, and have more white space, which looks great.

Related Post: Why Do You Need a Good WordPress 404 page?

Related Post: 10 Beautiful Full Width Slider Examples

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

The 404 Illustration slider isn’t actually a slider. It’s a block, which is a special project type in Smart Slider. Blocks display one slide only, which makes them load fast. Additionally, they let you use all tools and features Smart Slider has, without having to create a slider.

The background of the slide is a simple image. However, the focus of the image isn’t at the middle of the picture but at its bottom. This way the road shape stays below the two people, no matter which device the block appears on.

Layers

You can find a bunch of layers on the 404 Illustration template. There are lots of image layers, a couple of headings and a CTA button. The most important layers, which create the content of the block are all in Default position. But you can find many decorational elements which are Absolute positioned. Not only that, but they’re also nested, which means they’re in a Default positioned layer. This helps better positioning the layer.

Animations

Every layer in this block has its own layer animation. This brings the block to life and makes it more interesting and cheerful for the visitors to see. In fact, there are various effects that move in the layers to the slide. For example, the people appear with a flipping animation. The texts fade in and move down.

There’s also a parallax effect on a few layers. When you move your mouse over the block, the clouds, the birds and the speech bubbles react to the mouse movement and move to the opposite direction.

Layout

There are many interesting layout solutions in te 404 Illustration block. For example, the way the two person’s image were put next to each other. Creating such layout is actually simple in Smart Slider. Just add a row and place one image layers into each column. Finally, pick the image you want displayed.

Responsive

Smart Slider is a responsive WordPress slider. It gives you plenty of tools to fine tune how you want your sliders to look on small screens. For example, at this block we used the Font resized to optimize the text sizes on mobile. Additionally, we resized the Absolute positioned layers so they’d fit better into the slide.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Why Do You Need a Good WordPress 404 page?

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

With the block type slider you can create any kind of layout, what you would like to have on your website without having to learn any coding. This template uses the block layout, and it can be a great hero header on your page.

Another advantage of the block type against the slider types is that it doesn’t need to load a lot of code, which is required only for sliders. This makes the loading time much better, and you could truly create your whole website from it.

Layers

The slider has a text layer, 2 headings, a button, and an image layer. The image layer is in absolute position because there is an effect on it. The text layer contains a link which can link to the author’s page. The read more button also can have a link, which can point to the actual blog post.

Animations

If you hover over the slider and move your mouse, you will notice the image is moving on the right. This effect is a layer parallax effect which cheers up your slider, and makes it more interesting.

Layout

The block has a simple layout: the layers are under each other. The image layer is in absolute position. With absolute position you can put your layers anywhere in the canvas, which can be useful at the decoration elements like this image.

Responsive

The Rock demo is fully responsive. If you check it on mobile, you can notice the image layer is hidden. With hiding a layer you can save space, and the visitor can focus on the content. The texts are also smaller, for that you can use the text scale option which is a device specific setting, so you can set the size in each device differently.

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

Related Post: 10 Beautiful Full Width Slider Examples

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