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.

The Politician template is a Slider Group. What makes Slider Groups special is that they can contain many sliders, what you can display together using a single WordPress shortcode or block, or Joomla module. The Politician template contains 7 blocks total. Blocks are special kind of sliders, which can only display one slide.

We used the very first block to create a cool menu for the template. It uses the Scroll to Alias link action to make the browser scroll to a slider. This action is super useful as it lets you scroll to any slider within the current by calling the alias you set for them.

Layers

The Politician template has many blocks, and they use the most basic layers: heading, text, image and button.

Animations

There are many cool animations and effects that bring the Politician template to life. Right on the first block below the menu, there’s a parallax effect. The parallax effect is a popular effect on modern websites, as it gives the illusion of depth to websites. In other words, it makes the background and foreground scroll with a different speed, which makes it look like the section below covers the background. All in all, it’s a pretty spectacular effect.

On the last block you can spot the Ken Burn effect. It’s another trendy effect that slowly zooms on the image, giving it some motion.

The last kind of animation you can see on most of the blocks is the layer animation. Layer animations are super useful to introduce layers to your sliders and blocks with a cool effect.

At the Campaign Issues blocks you can spot something interesting when you hover on the cards. Their box shadow is darker on hover, giving each card an interesting hover effect. Although it’s not really considered an animation, but it’s a nice looking effect that worth mentioning.

Layout

The most interesting layout in the Politician template is in the Manifesto block. This block has a two column row, that contains a large image on the left, and a couple of text layers on the right side. What makes this layout look special is the smaller images in the left column. They are decoration layers, so were added in Absolute position which let us move them on top of the main content image.

Responsive

Smart Slider is a responsive slider plugin for WordPress and Joomla and it offers many tools to fine-tune your sliders. Additionally, some settings are automatically made for you, saving your time and effort in your projects. For example, if you use a row it’s columns automatically break under each other on mobile.

Apart from that, you can also reduce the font size for mobile devices to make your texts more mobile friendly.

Sometimes you might have layers that you don’t need or just don’t want to show on mobile. Using the Hide on option of Smart Slider, you can easily hide these layers from your small screen visitors.

Related Documentation: Slider Group

Related Post: How to Customize a Slider Template?

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

Full width headers are living their heyday on modern websites. It’s no wonder they’re so popular: a section that fills the whole width of the page looks great on large screens. This is especially true for this block.

The Block type is a special slider type of Smart Slider 3. It’s a kind of slider that can only display a single slide. You can use it to create animated sections of your site. In other words, you can take advantage of the power of Smart Slider without having to create an actual slider.

Layers

There are no special layers in the Traveler block. In fact, this block uses the most basic elements: heading, text, image and button layers. All layers have white colored text, that has high contrast with the dark background. There’s a large CTA button, which has a special hover effect. It has a dark background color, and also uses the backdrop-filter to blur the background behind. This CSS code is added to the CSS field of the button’s background.

There are social icons at the bottom of the slider. They’re image layers, but you can easily replace them with the Icon layer. At the top-left corner there’s another image layer, which displays the site’s logo. But these aren’t the only image layers this template has.

If you open up the Layer list, you can find four other image layers in Absolute position. These images serve as the background of the slide.

Animations

There’s a layer parallax effect on the Absolute positioned image layers, which creates that cool looking effect on scroll. To create such an effect, we split the image in three. Then we added each image as an Absolute layer. Finally, we moved the layers on top of each other, and selected the parallax depth.

Layout

The Traveler block’s layout is special. There are two rows creating the main layout. The first one, on the top, is a full width one. The bottom row, on the other hand, has a maximum width set, and it’s also stretched.

What makes Traveler block truly stand out is that it serves both as a hero section and a page header. In the top row there’s space for your site’s logo and navigation.

Responsive

Parallax effect doesn’t always work and look good on tablet and mobile devices. For this reason the three images which create the desktop background are hidden on mobile and tablet. On smaller screens there’s another Absolute positioned image that servers as the background.

Another interesting aspect of the mobile layout is that the menu displays below the logo. This happens because the logo is in the left column of the top row, and the menu is in the right column. Every row has a Wrap after option, which decides how many columns can fit next to each other on small screens. By default on mobile the Wrap after is 1. As a result, every column takes up a new line, which minimizes the time you need to spend with the mobile layout.

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

The Orion page group is a landing page which stays from 6 blocks and a slider. You can create your whole page using sliders and blocks. If you create a slider group then you can put your sliders together, and it is enough to publish the group, and your sliders will be under each other.

Layers

You can meet with basic layers in this slider group: headings, text layers, images, and button layers. Usually they are in rows and columns which you can use to create a great layout. You can customize each layer in Smart Slider. For that, open the Layer window. Here you can change the content, or the style of the actual layer. Also, you can add a layer animation to the layers in the Animation tab.

Animations

There are many amazing effects to make the sliders stand out. For example, the parallax effect on the Partner block, which looks really great on any slider. When you scroll up or down, you can see different parts of the background image. We’ve also used the shape divider feature to improve the visual experience. The shape divider is a great separator between sections, also you can animate them.

Layout

In most of the sliders we have put the layers in rows and columns. With using rows and columns we can create good looking and responsive structures. One of the most special structures of this group has the Adventure block. There you can see a heading layer on the top, and there is a row with 3 columns. In the columns the layers are under each other.

Responsive

We built the slides using default positioning, which grants them great responsive behavior. If you check the page on your tablet or mobile, you can see the text sizes are smaller. You can set the font sizes device specifically with the text scale option what you can find in the layer menu or in the Style tab of the layer window.

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

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

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

Settings

This shape divider slider example is a full-width slider with lots of layer animations. The basic idea was to create a portfolio slider, which has the shape divider at its bottom. The white color of the divider matches the background color of the section below the slider. This makes it seem as if the curved shape is a part of the white section below.

The slider has a fixed background image, which is similar to the parallax effect. The result is stunning, you can easily achieve it. Each slide has gradient background colors with an opacity, so the slider background image is visible below the slides.

Layers

Each slide contains the same layers: there is a heading layer on the top, then a text layer and an image layer come. These layers are the main content of the slider, but you can see more layers below them. These layers are decorations in the slider, and are in absolute position. You can select these layers from the layer list, and then you can change or customize them.

Animations

This slider has lots of nice layer animations which can catch the visitors’ attention. The white heading layer creates the most interesting effect, the layers are above the shape dividers, thus the white heading seems to be a part of the divider.

The heading layer in the background is built up from 2 keyframes. The first keyframe has 300ms delay, and comes from 300px to their original position. The second keyframe has 200ms delay and it will finish the animation with a back out easing, and the text will go to the bottom.

Layout

In Smart Slider you can position your layer in 2 ways: with default and absolute position. The default positioning works like a page builder, and you can achieve a good responsive behavior. With absolute positioning you can move your layers freely on the canvas, and you can put the layers above or below other layers. You can also mix these positioning options, like in this example.

The animated layers in the background are in absolute position, and they are below the content layer. Because of that you will need to open the layer list to select these layers. Once you select a layer, you can move it, delete it or replace it.

Responsive

If you check this slider on smaller devices like tablets or mobile, you can notice, the background layers in absolute mode are hidden. Also, the default layers like the heading and text layers are smaller. You can make your text smaller with the Text scale option. This is device specific, so you can work with different values on different devices.

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

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

Related Post: 10 Beautiful Full Width Slider Examples

The post Shape Divider Slider 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.

It is a common practice among website owners and developers to welcome the visitors with a nice-looking, clean landing page where the users can find call to action buttons, and where they can get basic information about the website and its purpose. If it’s a company website, then a landing page usually lets the visitor know about the name of the company and what they are doing. If it’s a webshop then you can show some featured products, discounts and most popular products.

This whole page was made using sliders and blocks where you can display your portfolio. The Portfolio group stays from 5 sliders, which will be under each other if you publish the slider group. You can add more sliders to this group if you want, also you can fully customize each slider.

Layers

The first slider contains some basic information about the one-person company, giving the visitor a clear idea on what to expect when they arrive at the website. The clean design speaks for itself; no users will have trouble reading the texts on the slide, or on the buttons. Speaking of the buttons, the first slide has two of them. The first will scrolling further down on the page, while the How I work button will take the user to the second slide.

Besides that you can meet with heading layers, texts and image layers in the sliders. The third slider uses a special kind of layer: the caption layer. When you hover over the images, a caption will appear at their bottom part, giving some additional information. These images also have lightboxes on them, so when you click on any of the images, a lightbox will pop up, showing an extra image.

Animations

When the page was loaded, a simple and elegant flip layer animation happened on the texts and buttons. If you happened to miss it when you loaded the page, press the How I work button, wait for the second slide to load then click on Who are you? to see the animation.

Once you press the How I work button and the slide is changing, you can see a professional-looking background animation which conceals the first slide and introduces the second one. This slide’s specialty is the lightbox video, which opens up when the image with the play button is clicked.

The parallax effect is a special effect becoming more and more popular on websites, and used mainly for one reason: to wow the users. And it is doing a marvelous job with that. Parallax effect is creating the illusion of depth by moving some elements slower, than the others. You can see this parallax effect on this slider group.

If you hover over the second slider, and start moving your mouse (when it’s still over the slider) you’ll notice that the five small photos are trying to follow your mouse, creating a breath-taking effect even on a simple block element like this. This parallax effect can be added to any layer, and their depth can be adjusted at the layer settings. At the Animations tab on the Slider settings page additional customization options can be set such as the effect’s behavior on Horizontal and Vertical use cases (whether it will move by the mouse or by scrolling).

Layout

The slider group contains 2 sliders and 3 blocks. Slider blocks are basically allowing you to display one slide only without any control elements on it, but the same layers and slide-level options are still available, therefore it is like a row editor from a page builder. You have the elements to be added, and you have a visual way to configure them to your liking.

The portfolio block has a special layout, because there is a fixed slider background. If you scroll back and forth a little bit, you see that the illusion of depth is a little bit different in this block than it was in the previous one. In this case, the illusion is given by the fixed background.

Responsive

The whole landing page is fully responsive. There are layers which are hidden in smaller views, also the font sizes are smaller. You can set the font size with the text scale option device specifically, so you can set different values on different views.

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

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

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