Settings

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

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

Layers

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

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

Animations

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

Layout

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

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

Responsive

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

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

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

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

The base of the Advertising Agency slider is a simple type slider. These are the most common sliders you can see on websites. You can easily recognize them because they’re pretty much everywhere. They display one slide at a time, which allows the visitor to focus on the content.

Apart from using the Simple slider type, the Advertising Agency slider is also full width. This means it takes up the space between the left and right edge of the screen.

One of the most interesting aspects of the Advertising Agency slider is how it was set up. It contains three slides: a Static Overlay and two regular slides. A Static Overlay is a special kind of slide that is always on top of all regular slides. In this template we used it to display the 3 images around the corners of the content.

Layers

Although there are no special layers, some of them have interesting settings. For example, the video layers which are in Absolute position use a custom Aspect Ratio. This allows them to resize properly when the slider gets smaller.

There’s also an Absolute positioned layer behind the content of both slides. You can easily find this layer from the Layer List.

Animations

The Advertising Agency slider is full of cool effects. They’re all layer animations, and the most noticeable one is on the Static Overlay. It’s the rotating text, what you can find around the top left corner. It has a Loop animation which makes it rotate continously. The text is actually in an image layer, which contains the words in a circle shape already. Both this layer and the other two layers on the Static Overlay have an incoming animation.

On the slides you can see some spectacular effects. We created them using using events and layer animations. For instance, hovering on the “Who we are?” text does two things. First, it makes the text move 40px to the right. Second, it makes a video appear on the right side.

There’s also a background animation to make the slide switching more interesting. We choose one of the new animations, Distortion for this purpose. It’s Shard type animation gives a nice touch to the template.

Layout

Apart from the Static Overlay, both slides are based on a two column row. The left column contains Default positioned layers, which have text. However, the right hand column contains Absolute positioned layers.

What’s the difference between Default and Absolute positioned layers? Simply put, the way they behave on the slide. Default positioned layers actually take up the space they need. So if you break a one line text into two lines, it will push down the other layers after it. But Absolute positioned layers don’t take up space; they’re just floating around. So if a one line Absolute positioned text breaks into two lines, it will cover the layer after it. We recommend building your main content with Default positioned layers. Then if you want to add some decoration, you can use Absolute positioned layers for those.

The other interesting part of the layout is the way left columns look and behave. At the editor you can see 40px padding on the Column where the texts are. The button below them has -40px margin, making the content not aligned in the editor. However, when you view the slider in the preview or in a live site, you’ll see they’re aligned. When the mouse is over the text layers, it triggers their layer animation. As a result, the layer moves 40px away to reach its original position. Additionally, they create a super nice effect.

Responsive

Smart Slider is a great tool to create responsive sliders. Additionally, it offers many tools to fine-tune how your slider looks on small screens. Additionally, some responsive-friendly settings activate automatically. For example, a row’s columns automatically break into new lines on mobile. This gives more space to display their content.

You can also adjust the font sizes separately for each device. Additionally, you can also adjust the margin around the layers. Furthermore, you can change and the padding of the rows and columns. These options help create the perfect distance between your content.

Related Documentation: Layer Animations & Events

Related Post: Do you need a Free Full Width Slider for your Site?

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

Top 5 Products slider is a modern slider for your website to highlight your products or services. It uses just the right amount of effects to make it interesting for the visitor.

There are more ways which you can navigate between the slides. You can click on the arrow image on the bottom which goes to the next slide with a link action. You can drag and you can use the number type bullets on the bottom right corner. These bullets are fully customized for this layout, but you can also customize it at the style and font settings by clicking on the green buttons at the Slider settings → Controls.

Layers

There are more kinds of layers visible on this slider: there is a button on the top, then heading and text layers come, and under that you can see 2 button layers. Probably the most noticeable part of the Top 5 Products slider is the gray CTA at the bottom. This large CTA stands out of the other content of the slide. Additionally, it also gives an idea about the upcoming slide content. People are more likely to click on a button, when they are fairly certain what to expect afterwards. So this CTA helps to increase your click through rate.

Animations

Top 5 Products slider uses a couple of trendy effects which are available in Smart Slider 3. A really cool effect is the “slice” background animation. This effect looks like the reveal layer animations, but it affects the slide background images instead of the layers.

Layout

The Top 5 Products slider showcases many amazing features of Smart Slider 3 Pro. The slides themselves were built using default positioning, Smart Slider 3’s unique way of editing. In default position you can build your content using structures, such as rows and columns. The building is fast and easy, and the responsive result is amazing.

Using a full page slider is a popular design choice amongst website designers. A full page slider fills the whole browser viewport both vertically and horizontally, and the result is amazing. Full page sliders are really versatile. You can actually use them to fulfill any purpose, such being a hero header, or part of a landing page. The Top 5 Products slider you can see above is just as versatile as any other full page slider.

Responsive

The slider has lots of content on the desktop, but if you display all of these on smaller views, then the slider will be too tall, and crowded. To avoid this you can hide layers which content isn’t too important, like the content of the next slide, instead of that the arrow is bigger, and more touchable.

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

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

The post Top 5 Products appeared first on Smart Slider 3 — WordPress Plugin.

The Digital Art template is based on the Carousel slider type. The carousel is one of the slider types of Smart Slider which can display more slide at a time. It’s also a full width slider, which is very popular because it looks great.

Another interesting feature displayed on this template is the slider background image. Slider backgrounds sit behind all slides of the slider without moving away. So its perfect to give a nice touch to any slider you create.

There are bunch of navigation options available on this slider. The most obvious are the arrows sitting on the left and right side of the slider. They’re super great for slide to slide navigation and make it simple to navigate the slide. Another navigation option are the bullets, which also indicate how many slides there are to see. Swiping on touch screens and dragging with the mouse is also available to switch slides.

Layers

The Digital Art template uses the most basic layers: image, heading, text and button. But as you can see even with such simple layers it’s perfectly possible to create a stunning slider.

Animations

The most interesting aspect of the Digital Art template is its animation. The template has both layer animations and events. In Smart Slider you can use events to trigger layer animations on various actions. Like at this template’s case hovering on the slide makes the two rows appear. Not hovering on the rows anymore makes them hidden again.

As touch screen devices don’t have hover actions, hover based events turn into touch based events on these devices. So, for example, a mobile user can touch the slide to reveal the layers and touch somewhere else to hide them.

Layout

The base layout of each slide is two rows. One row is at the bottom with it’s Stretch option enabled, which pushes the other row to the top. At the bottom row’s column the content is vertically aligned to the bottom. This makes the layers appear at the top and bottom of the slide.

Responsive

The basic responsive behavior of the Carousel sliders is that as they display as many slides as can fit into the current slider width. Then, as the screen gets smaller, the slide that can no longer fit disappears and the remaining space is divided between the remaining slides. As a result, the Carousel slider’s slides have approximately the same size on desktop, tablet and mobile devices.

Because of this, it’s generally very easy to make Carousels look good on mobile. Additionally, they usually need little to no responsive adjustments. But if you feel you need to make changes, you can always adjust the font size or even hide some layers you don’t want to show on mobile.

Related Documentation: Layer animation

Related Post: 9 Inspiring WordPress Carousel Examples

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

This absolutely stunning Construction slider is a full-width slider. As its name suggests it takes up the entire horizontal width of your browser, making it a popular choice for those with wide monitors. Plus, it’s fully responsive so it looks great on any device.

There are three ways for visitors to browse the slider. The first option is to use the arrows located at the bottom right corner of the slider. These arrows have a cool hover effect which makes it simple to switch between slides.

The second way is by selecting the “Next Slide” button, which will take the user through the slider one by one. This one is created by using the Content tab’s Link option.

Alternatively, visitors can also navigate by dragging the slider horizontally. This method is particularly useful for touch screens, as swiping the slide is more convenient.

Layers

It’s got all the essential layers like Headings, Text, and Buttons to get you started. But that’s just the tip of the iceberg because it makes use of Smart Slider’s power to showcase some truly unique options.

Let’s dive in with a couple of standout examples, the Image Area and the Area layer. You’ll find these on all three slides.

The Area layer lets you add a splash of background color to your layers, which makes it perfect for the Construction slider template to give its product names that elegant touch they deserve.

On the other hand, if you’re in the mood for some stylish decoration, the Image Area layer has got your back. This layer lets you cover a designated area with your chosen image, which you can effortlessly adjust to fit your needs. In this case, it adds a touch of flair with its striped design at both the bottom and the top left corner of the slider.

But wait, there’s more! Slide number two reveals the List layer, a subtle yet incredibly handy addition that can easily elevate your content.

And if you’re looking to really make your slider shine, don’t miss the third slide, which introduces the eye-catching Progress Bar layer. It’s that one layer that takes your slider to the next level.

Moreover, you can notice that some headings contain parts that are designed differently than the rest of them. this effect can easily be achieved by adding custom CSS to them in the Developers tab. Once you’ve added your unique designs you can include their classes in the containers of the style settings. This template’s headings stand out with a transparent design, making the content even more engaging.

Animations

The Construction slider template is full of amazing animations, so let’s dive in!

First up, let’s talk about the Main Animation. It’s set to Horizontal, which gives your background a cool sliding effect. It slowly and gracefully moves from right to left, catching your visitors’ eye.

But that’s just the beginning. this template doesn’t stop at the background, it’s got layer animations and events as well. These animations are like magic for your content, making them stand out in all the right places. Watch as layers enter the slider, some sliding in from all sides, and others elegantly scaling up.

And here’s the best part, in Smart Slider you can use events to trigger these layer animations at just the right moment. In this template, it’s as simple as clicking those white buttons. It provides the perfect way to captivate your visitors and keep them engaged with your content.

Layout

This template has a neat and organized structure going on. Each slide follows a two-column row structure.

On the left side, you can find all the text content occupying the space. Meanwhile, the right side is all about the visuals, showcasing interesting images.

However, the real stars of the show are the Absolute layers. Absolute layers float on the slide, without taking up any real space. This means that you can place them wherever your heart desires. They are your ticket to creating decorative content on the slider.

Responsive

Smart Slider comes with many tools to fine-tune your slider for smaller screens.

It also has responsive settings that activate automatically, which means your content needs little to no responsive adjustment.

However, if you still think you need to make some changes, you can easily edit the font size or even hide some layers you don’t want to show on smaller screens.

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

The Crossfit template is a full width slider. People love full width sliders, because they fill the available horizontal space. As a result, they can create gorgeous sections on their site.

The slider type is Carousel, which means more slides can appear next to each other. Carousels are great for creating a product or a post slider. But they’re also great for creating a slider about your team. There’s a slider background image set for the slider. This image creates the dark background behind the slides.

Although displaying three slides at a time suggests there are be more slides to see, there are controls to help the navigation. For example, there are nice green arrows on each side of the slider. They’re prompting you to view the next or previous slide. Additionally, there are bullets at the bottom of the slider. Bullets are useful elements to add to your slider, because they can help in many ways. First, they tell the visitor how many slides there are to see. Second, the bullets allow easy navigation to any slide.

Layers

The Crossfit template uses the most basic layers. First, there’s a heading layer that displays the person’s name. Second, there’s a text layer to display their occupation. Then the actual image of the person is an image layer.

There’s also a decorational image next to the heading and text layers, inside a two column row. Rows are the building blocks of Smart Slider and they help you place layers next to each other.

Animations

The Crossfit template uses layer animations and events to display the details of each person. How does this work? If you hover over the slide, the layers at the bottom show up. Of course, mobiles and touch screen devices don’t have hover state. So the layers show up when the visitor taps on the slide.

Layout

The layout of the slides is very simple but it looks amazing. There’s an image with a nice shape as the background of the slide. Then there’s the person’s image, which is an Absolute positioned image layer. Absolute positioning is great for decorative content to your slider. That’s because it allows placing the layers anywhere within the slide. This can happen because Absolute layers don’t actually take up space, they float above the slide.

The textual contents are in Default position. They also have a Max Width set to ensure that they always stay next to the image.

Responsive

Smart Slider is a responsive slider and offers a bunch of tools to fine tune your slider. However, at the Crossfit template we didn’t need to use most of the available tools. In fact, we only needed to reduce the font size on mobile using the Font Resizer.

Related Documentation: Layer animation

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

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

The Security block is a full width slider. The slider size is 1200*700 pixels with limit slide width enabled. What does it mean? The block will be 100% width of the screen but the content is limited to 1200 pixels. Also the limited width prevents the slide to getting too tall. It means that the block won’t be bigger than 700 pixels, if you don’t have too much content.

Layers

When you check the block, the first you will see is the Highlighted heading layer. This helps visitors focus on your heading. You can freely change the highlighted text or the way of the highlight. It is an animated, underlined effect now.

The block uses a modern combination of colors. The underline highlight and the bottom uses the same color as the image. This stands out from the dark blue background color.

Animations

As you surely noticed, every layer has a layer animation in the Security block, but now I would like to highlight the bottom section. This is a special section because when you hover over the boxes, they will move up, and a text will appear above that. This can be made with layer animations, events and with absolute positioning.

There are 2 parts of it: the hover effect – when the box moves up, and the other part – when the text displays.

How to achieve this hover effect?

1. Select a layer you want to animate. This layer is the column box in our example.
2. Add an incoming and outgoing animation for this layer.
3. Turn on the Repeatable at the Layer window → Animation → Events tab
4. Trigger the layer animation with the LayerMouseEnter and LayerMouseLeave events.

How to display text on hover?

1. Select the layer which you want to display on hover.
2. Add an incoming and outgoing animation for this layer.
3. Create custom events, and enable the Repeatable option.



4. Trigger these events on Mouse enter and Mouse leave.

Layout

All layers are structured in rows and columns. Firstly, it is important to mention the Heading layers in absolute position. They are on each other. If you want to change the text, or you want to move it to another position, use the layer list. Here you can find your layers, and you can hide them in the editor if you want.

The row of the bottom overlaps the row on the top. For creating this kind of layout you can use negative margins.

Responsive

The block looks good in every device. Use the Text scale to make your text lower. The bottom row wrap after value is 2 which means you will see 2 columns next the each other, and 2 wraps below them. Some layers are hidden on mobile to avoid the block will be too tall, but if you want to enable them, you can find them in the layer list.

Related Documentation: Layer events

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

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

The Company slider is a stunning full width slider, which helps you introduce your business in a spectacular way. It uses the simple slider type, which makes it perfect to use as a hero header.

In Smart Slider you have many ways to switch slides. There are bullets, thumbnails and arrow for that. On this particular slider you can find the arrow navigation. But the arrow isn’t the average forward and backward pointing shape. Moving the mouse over the arrow, it displays the name of the next slide. This is an awesome way to encourage your visitors to interact with the slider.

If you’re using a touch screen device, you can also change slides by swiping. Additionally, if you have a mouse available, you can switch slides by dragging them to the desired direction.

Layers

The Company slider has a wide variety of layers. There are heading, text, image and button layers. Additionally, there’s a video layer, and also a couple of image box layers. On the first slide you can immediately find a CTA button, which takes the visitor to the next slide.

On the last slide of the Company slider you can find four special image box layer. The image box layer is a kind of layer, that allows placing an image (or icon), a heading and a descritpion into the same layer. Then you can decide if you want the image above, below or on the sides of the text.

Animations

Smart Slider has amazing layer animation builder system, where you can build spectacular layer animations frame by frame. Layer animations are great way to grab the attention of your visitors, so it’s worth using them. For example, at the Company slider we used layer animations to introduce the content at every slide.

Apart from layer animations, you can find another popular feature here. It’s the lightbox, what you can launch from the play button on the first slide. Adding a lightbox in Smart Slider is easy. Just go to the layer where you want to start the lightbox, click on the plus icon at the link and go to the Lightbox tab. Finally, enter the URL you want to show in the lightbox.

Layout

There are many interesting layout solutions in this slider. For example, on the first slide you can find a video, which takes up half of the slider width. This video is an Absolute positioned layer, which is placed into a column that it fills completely. To create the dark overlay, we placed an Absolute positioned area layer above the video.

You can find another interesting layout on the second slide. There’s a 6 column row which displays 3 columns in two lines.

Responsive

The height of the slider in Smart Slider is based on the height the content needs. In other words, if you put too much content in your slides, they can increase the height of the slider. This is especially concerning on mobile devices, where you have a limited width for the content. To ensure a proper height on small screens, we hid many layers on mobile.

Of course hiding content isn’t always possible, as you might want to show all your content to your visitors, regardless of the device they’re using. To avoid having huge slider height on mobile, you could create device specific slides. This would allow you to break your content in smaller pieces for displaying. For example, the cards on the 3rd slide could easily fit into a single slide on mobile.

Related Post: Why do You Need a Video Slider on Your Website?

Related Post: 10 Beautiful Full Width Slider Examples

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

The Barber group stays from 4 sliders. With Smart Slider you can create whole landing pages using sliders and blocks. If you create a slider group, you can put the related sliders in one place. Also, you can publish the sliders together, so instead of publishing your sliders one by one, just publish the group. You can fully customize each slider, and each layer, also you can add more sliders into the group.

Layers

The landing page uses the 4 basic layers: heading, image, text and button layer. The third slider is special because you can meet with 3 transition layers there. A transition layer can show 2 images. You can see the front image first, and if you hover over this image, the back image fades in. Also, you can change the animation type from fade to vertical or horizontal flip.

Animations

There are layers which are coming in with nice layer animation. You can manage the layer animations in the timeline. Here you can copy the animations, set the duration or the delay, also you can see all of the animations in the slider, so you can harmonize them.

Layout

The first block has a special layout: there is a static slide over the basic slide. This static slide contains a hamburger menu which stays from an image and button layers. If you click on the image, the button layers display, and if you click it again, then disappear. To create this kind of menu, you can use layer animation and events.

Responsive

The Barber group is fully responsive. If you check it on smaller views, like on your phone, you can see the texts are smaller, the rows wrap after more columns, and there are layers which are hidden, so the visitors can focus on the content.

Related Post: How to Create Beautiful WordPress Landing Pages That Convert

Related Post: 12 Stunning One Page Examples Which You Should Check

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

The Product Slider is a boxed slider, so it fits well in your posts or pages, because the slider can be as big as the container it’s in. You can use it as a static slider, so you can display your products, but with Smart Slider you can create a dynamic product slider as well.

Layers

The slider has layers on the bottom of the slides. You can find basic layers on the slider: headings and a button. If you check the big heading, you can see it has a yellow hover color. You can change this color in the Style tab of the layer window at the typography.

Animations

When you switch a slide, you can see the next or previous slide fades in. This animation is the main animation of the slider which you can change to horizontal or vertical in the Animations tab of the Slider settings.

Layout

Each slide has the same layout. There is a row with 2 columns. The first row contains 2 heading layers, and the second column has another row on it. This row also has 2 columns, the first has a heading, and the second a button layer.

Responsive

If you check the slider in tablet or mobile, you can see it is fully responsive. The main row wraps after 1 column on mobile, so the content has enough space, and the texts are legible. The texts are also smaller, which you can customize with the text scale option.

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

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