Settings

Using a colorful but simple fullwidth slider makes any website look modern and trendy. This slider stays from 6 slides, 5 simple and 1 static slide. The static slide is over the other slides, and there are the colored images which are moving if you hover over them.

Layers

The content of the fullwidth slider follows a minimalistic approach. For instance, the first slide has just three layers: a highlighted heading, a text and a button layer. This button layer serves as an easy to notice CTA. Clicking on it makes a few more layers show up, which serve as in-slider navigation.

Apart from using the Next service button on each slide, you can navigate via the arrows, which you can find at the bottom right corner of the fullwidth slider. To make the slider touch friendly, you can switch slides by swiping on mobile devices and dragging on desktop browsers.

Animations

The fullwidth slider example uses small, moving elements to create this colorful effect. These small icons rotate by themselves, but hovering on the slide activates yet another movement. This movement is happening because of the layer parallax effect, giving a really nice touch to this slider.

Layout

The first slide has the most interesting layout, there is a 1 row 2 columns structure. In the left column are the headings and the button layer. On the right side of the slide you can see 2 rows under each other which are only visible if you click on the CTA on the left.

Responsive

When you check the slider on smaller devices like on your mobile, you will notice that the columns wrap under each other, and there are layers which aren’t visible. These layers are hidden on mobile, so your slider won’t be too tall.

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

Related Post: 10 Beautiful Full Width Slider Examples

The post Full Width 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 SEO Agency template is a full page slider. Full page sliders are super popular because they fill the screen both vertically and horizontally. In fact, they make hero sections and hero sliders look spectacular! But you don’t need to create a typical hero slider to be able to use a full page slider. They’re super versatile and can be used for anything else.

There are two settings that go with the full page layout super well. The first option is the Mouse Wheel setting, which allows visitors to go through the slides by scrolling with their mouse. Since the slider fills the whole browser width and height, the mouse wheel option creates a great user experience.

The other option that goes well with the Full page layout is the Vertical Main Animation. The Main Animation is the basic way to make the slides (both background and layers) move. A vertical animation paired with the Mouse Wheel control and Full page layout creates a spectacular slider!

Layers

The SEO Agency template uses basic layers. You can find headings, texts, images and a button on each slide.

At the right bottom part of the slides, there are up and down arrows for navigation. These are image layers, and they can switch slides using the Link Actions.

Animations

The most obvious animation you can see on this template is the layer animation. Layer animations are great to introduce layers to your slider. That is why we use them to introduce almost all layers with some kind of cool movement.

The other animation you can see is the Layer Parallax effect. If you move your mouse cursor, the large round shaped image in the background slightly moves.

Layout

There are two kind of layouts in this template that worth mentioning. The first one is the large colored image and the figures on top of it. The base of the layout is the colored image which is in Default position. The reason the decorative figures can appear on top of it, because these are in Absolute position.

The other interesting layout is the rotated SEO text on the left side. It’s also an Absolute positioned layer, that’s rotated with Smart Slider’s Rotate option. To modify the text of this layer, simply open up the Layer List and use that to find it.

Responsive

Smart Slider is a responsive slider and has many great tools to fine-tune your slider for small screens. For example, if you add a row it’s columns are automatically wrap below each other on small screens. Of course if you have a layout where you need the columns to be next to each other, you are free to modify it.

Apart from the automatic options you can make lots of manual edits. For example, you can adjust the text size using the Font Resizer. Or, you can hide layers to ensure that your content fits into mobile devices. Additionally, you can even change order of the columns, for example, to make a column containing an image appear above the textual content.

Related Documentation: Fullpage layout

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

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

The Greek Restaurant template is a group that contains 6 projects. More precisely, you can find 5 Block type and 1 Simple slider type in this group. Blocks are special kind of projects that can display one slide only. So, they’re perfect for creating hero headers.

The first block in the Greek Restaurant template uses a full page layout. Full page sliders fill the screen vertically and horizontally as well. As a result, they’re a great choice for displaying content above the fold. The other sliders and blocks are full width, so they only fill the screen horizontally.

Layers

You can find two heading layers on all sliders. One displays the main headline and the other the secondary one. Most sliders also display an image using the image layer. Additionally, there’s a CTA button on two sliders. One is on the first slider, which actually uses a column layer to hold the link. The second CTA button is on the About us slider, and this one uses the button layer.

Animations

As most sliders in the Greek Restaurant template are blocks, they don’t have fancy slide changing animations. However, since they have a couple of layers, they have nice looking layer animations. For example, on the first slider, you can see the Reveal animation. What makes the Reveal animation special is that it introduces the layer by moving a colored shape on top of it. As a result, the Reveal animation looks modern and suits any kind of website.

The other animation you can spot on many sliders is the layer parallax. When you scroll on the page, some layers move at a different speed, which creates a spectacular effect. You can find this effect on the image of the first and 5th slider and the second slider’s cards.

Layout

Probably the most interesting layout in the Greek Restaurant template is the Dinner menu slider. This slider is actually made by two different sliders. One block that contains the main and secondary headline, and a slider that has the text bullets and the different slides. The same background color is set at both sliders, which makes it look like they’re one slider, but in fact, they’re not.

Responsive

Smart Slider is a responsive slider plugin so it lets you create sliders that look great on any screen. Moreover, it offers many responsive features to fine-tune the result on small screens. One of the most useful tools for optimizing for mobile is the font resizer. It lets you reduce (or increase) the font size for small screens, which is super handy.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

The post Greek Restaurant 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 Christmas Postcards template uses a Showcase slider type, which you may have seen on other websites. With this type, you have the convenience of displaying multiple sliders at once.

The one in the middle takes the spotlight, and the ones on the sides kinda hover around it, making it easier to switch between them. The middle one stands out even more because the ones before and after are a bit transparent, thanks to the settings in the Animations tab.

Have you noticed the slides on each side tilt in different directions? This can also be adjusted in the Animations settings with the Rotate section.

This slider has a full-width layout, taking up the entire width of the browser window. No distractions, just the slider.

Navigating through it is a breeze. On smaller screens, you just need to swipe horizontally. On the other hand, on larger screens, you can use the bullet points to pick the slide you want. It can be super handy to see how many slides are actually available.

There’s also a ‘Next Letter’ button on each slide. Click on it, and that’s it! You’re onto the next slide.

Layers

Guess what’s great about Smart Slider 3? It’s got these amazing layers that take your slides to a whole new level. Add Headings, throw in some text, create buttons, and don’t forget the images.

However, the real deal is definitely the Absolute layers in this slider. Drag and drop them wherever you want, just like we did with those Image layers on the right side.

They are strategically placed, each image layer adding to the festive landscape. And here’s the secret ingredient: Z index. It ensures that these layers overlap in the best ways, creating layouts that are just downright mesmerizing.

There’s more magic with the layer parallax setting. It’s a simple trick but so effective. Check it out on this template, hover over the images on the right side, and see the layer parallax in action. It’s like the images come alive, adding an extra flair to the Christmas vibe.

Animations

There are several features in this slider that make its layers more interactive. One of these is the above-mentioned layer parallax effect.

Another specialty of this slider is the Particle effect you can spot in the background. These are small moving particles behind the slides, that interact with each other and the mouse as they are moving. The snowing effect on this template is the result of custom particles we’ve created. You can also customize the particle effect in the particle manager, by changing its effect, the number of particles, and its behavior when you hover or click on it.

In addition, you can spot incoming animations on most layers, which can be very useful to make their entrance more eye-catching. One of the more outstanding ones is the Reveal animation. It’s a perfect way to slowly reveal your message while engaging the visitors.

Layout

All of the Christmas Postcards slides create a captivating layout using Rows and Columns for their structure. They have their image and absolute layers on the right side while the main content stays on the left one.

This layout offers you the perfect opportunity to place your images below the text on smaller screens, like mobile view, without any hard work.

However, if you’d like them to appear in a different order, you can easily adjust them to show the images first in the column’s settings.

Responsive

In Smart Slider, you really don’t have to do much to make your sliders look amazing on smaller screen sizes.

Many settings activate automatically to make your work easier, but if you’d like to make some additional changes, then there are some great responsive functions that you can set manually.

For example, you can increase or rather, decrease the font size to fit smaller screens with the Font Resizer. In addition, you can also simply hide layers that you deem as non-necessary on mobile view.

The post Christmas Postcards 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.

The Sports Cars template is a simple slider, which displays one slide at a time. These sliders are super popular on websites, as they let the visitor focus on one message at a time. Additionally, the Sports Cars template is full page. A full page layout means that the slider takes up the available width and height of the browser.

There are three slides to see in the Sports Cars template. They’re immediately visible thanks to the thumbnail control at the top of the slider. The thumbnails are great for navigation, as they provide a preview of the slide’s content before switching to it. As a result, they can encourage visitors to change slides. Due to their size, thumbnails are not always good for smaller screens. For this reason we changed the thumbnails to bullets on tablet and mobile devices.

Behind the slide content there’s a slider background image, which has a radial gradient. Slider backgrounds are behind all other slides in your slider. So if you want to see them, it’s worth creating the slides without background, or with a semi-transparent color.

Layers

Most of the layers you can find on the Sports Cars template are basic layers. There are images, headings and texts which let you create your slide content easily. However, there are some super interesting counter layers on each slide. The counter layer is a special kind of layer where you can set a starting and a finishing value and it will count up or down from the start value.

The bottom contains a 6 column row, and the last one has a lightbox that opens a video.

Animations

You can find a couple of layer animations on each slide to make them more outstanding. In fact, you can add a layer animation to any layer on your slide. For example, in this template there’s a layer animation, an image and a row as well. If you add a layer animation to a container (like a row or a column) then everything inside the container will be animated.

Apart from the layer animations, the template also uses the layer parallax effect. The layer parallax effect is similar to the background parallax, but in this case it moves the layers based on the movement of the mouse. So, if you move your cursor above the slider from left to right, then the layers will try to move away from it.

Layout

The Sports Cars template uses some cool layout solutions. Specifically, the colored stripe behind the cars. How to create a layout like this? It’s actually simpler than you think. First, you need to add a row to your slide. By default rows come with two columns, so remove the unnecessary column. Then put the car image into the column.

Next, switch on the Absolute position switch and add an area layer into the column. Absolute positioned layers don’t take up space, just float on the slide so you can place them anywhere. Size this area layer in the following way: at its Style tab make it have 50% height and 500% width. A large width is needed to ensure that the stripe covers the slider on super large monitors. Change the Vertical align to top and set Top value to 0. That’s it, the shape will stay behind the car in every responsive scenario.

Responsive

Smart Slider is a responsive slider that offers a bunch of tools to ensure your slider looks great on small screens. For example, you can reduce the font size using the Font Resizer. Or you can hide layers you don’t need on small screens.

If you’re using columns then you can also change their order device specifically. As a result, you can move a column to a different place on mobile. We used this trick to create the pattern of the car details.

Related Documentation: Layer animation

Related Post: 12 Inspiring Examples of Stunning Modern Homepage Sliders

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