Settings

Traditional sliders, which display one slide at a time, are still very trending. For this reason, we chose the Simple slider type for our new slider template, the Real Estate. Nowadays it’s common to use a slider as a hero section of the page. Typically, these sliders take up the full width of the page, just like the Real Estate slider does.

So, this slider is perfect to use it as the hero header of your site. Because it displays only one slide on larger screens as well, it has plenty of space to create a gorgeous layout.

There are several ways for the visitors to browse this slider. The most obvious way is using the bullets at the bottom of the slider. Their unique, line-like layout makes the bullets look trendy and modern.

Apart from the bullets, visitors can browse with swiping or dragging. Additionally, the first slide has a custom navigation via the images. Clicking on each image will switch to one of the last three slides.

Layers

The first slide of the Real Estate slider provides a unique experience due to the Caption layers it has. The Caption layer is a special layer in Smart Slider 3 Pro. It helps you create a caption for your image on mouse enter easily. This caption layer is also used for navigation, which can be done easily using the Link Actions. Watch the video below to see how easy it is to set up a Link Action for a layer.

Apart from the Caption layer, each slide has a CTA button.

Animations

There are some interesting animations and effects in this slider. First, it has a Shape Divider, which creates the white-colored curve at the bottom of the slider.

Then, on each slide there are layer animations. The text use a basic animation, that moves them in from the left. But the images use the Reveal type animation. Reveal animations are special kind of layer animations. They don’t just animate the layer, but they place and move a single colored box in front of it. This make the effect look more special.

When you switch slides, you can stop a simple fading effect as the layers fade out. This is the Main Animation, which affects the layers, when they don’t have animations. Since the layers have incoming layer animations, they don’t fade in. Instead, they use their own special animation to appear on the slide. But none of the layers have outgoing animations, so they just fade out.

Layout

The layout of the Real Estate slider looks very special, but it’s actually quite simple. It’s based on a large row, which has two columns. The first column, where the texts are, is 1/4 wide. The larger column is 3/4 wide, and contains another row in each slide. However, on the first slide, the inner row has three columns, and each column is 1/3 wide. On the other slides, the inner row has two columns. One of them is wider, for the bigger image, and one smaller, for the 3 small images.

Responsive

Smart Slider 3 is a responsive slider, and it has a unique way to position layers. These are the Default positioned layers, and you should use them to create your slide content. First, you can work quickly and precisely with them. Second, they’re easy to use. Third, they help creating responsive sliders with minimal effort.

When you add a Default positioned layer, it keeps the text size on smaller screens. This ensures that your content remains legible even on the smallest mobile device. Default positioned layers can increase the height of the slider, if they need more space. As a result, your slider stays enjoyable for mobile users. But you haven’t had to make any changes for mobile yet, because the system takes care of these for you.

Of course, there are responsive options you can use to adjust your slider for small screens if needed. For example, you can change the font sizes to make the content fit better into mobile size. When you add rows to your slides, then their columns break into new lines on mobile due to the Wrap after option. To create the layout of the inner row, the Wrap after option had to be adjusted there.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

Settings

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

Layers

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

Animations

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

Layout

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

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

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

Responsive

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

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

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

Settings

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

It’s a popular design choice on modern websites to put a full page hero header or slider to the website. These sliders fill the whole width and height of the browser. On today’s large monitors a full page slider provides enough space for a good first impression.

After you got your visitor’s attention, they’ll want to see more of your site, so they start interacting with it. One of the most natural ways to interact with the page is to scroll down. In Smart Slider you can use this scroll action to switch slides. As a result, instead of scrolling to the next section of the page, the visitor sees a new slide. This works great with a vertical animation, because it makes the slides look like they’re new sections of the page.

Layers

The purpose of a portfolio slider is both to showcase your previous works and to get you new jobs. For this reason the first slide contains two call to action buttons. One large button leads the visitor to your Latest Projects, and another leading to a contact page.

This second button is actually a special layer called Highlighted Heading. With this layer you can highlight the most important part of your text with a cool effect. It’s a great layer to grab attention, so it’s a great choice for a less ostentatious CTA button.

At the bottom of the first slide you can see two super counter layers. Counters are great to display numeric details about your product or services.

Animations

Smart Slider has many cool effects you can choose from to make your slider look more stunning. The layer animation, what you can see on each slide, is one of these effects. It brings motion and life to the slides, which makes it easy to grab the attention of your visitors.

Layout

The slides in the Full Page Portfolio slider have a very simple layout: there’s a row with two columns in each slide. The left column contains the text, and the right one has images. By default this layout would place the image below the text on mobile. But in Smart Slider you can change the order of the columns, so it’s possible to show the image first. This gives a much better look on small screens.

Responsive

In Smart Slider your layers can have two different position type: Default or Absolute. Default layers are the perfect choice to create your slide’s content. Working with Default layers ensures your content remains legible on the smallest screens. Additionally, it prevents any content from getting cropped.

Absolute layers, on the other hand, are great for decorative content. On this slider, the colorful shapes are Absolute image layers. What makes them more special is that they’re Nested. Nesting means placing Absolute layers into a column, which helps with the positioning.

Related Documentation: Slide editing in Smart Slider 3

Related Post: Smart Slider 3.4 – Nebula

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

Settings

Unlike normal sliders, WordPress carousels show multiple slides at the same time. This is a really good way to showcase the latest or hot products, blog posts, images or videos. You can set the whole slider and the slides widths and select the number of items to move. Creating and managing a responsive carousel has never been easier.

At carousel sliders you can set the slider size and the size of the slides separately. The slides which display next to each other are in one pane. You can set a maximum width for the pane which you can limit the maximum amount of slides that can be displayed next to each other. In this slider 3 slides appear in one pane.

Layers

The most attractive layer is the Transition layer in this slider. If you hover over the image, you can check another image with a fading effect. With this you can display 2 images in the same place.

In some slides you can notice a new or sale badge in the top right corner. These layers are in absolute position, and always are in that corner. You can anytime replace the text, or delete it.

Animations

The carousel uses a horizontal main animation, if you click on the arrows, bullets or drag with your mouse, the whole pane will move horizontally. If you want to switch only one slide, not the whole pane, then you can enable the single switch option at the Slider settings → Animations tab.

Layout

If you open the layer list, you are able to check all of the layers on your slide. As you can see on the image below, there is a transition layer on the top of the slide, and a row below that image. This row stands out from 2 columns where heading layers are.

Responsive

If you check the carousel on smaller screens, you will notice that the carousel slider works that way, that it can only show as many slides as many can fit into the available space. So on mobile devices you can see only one slide, and should drag if you want to see the others. The arrows are hidden on mobile, because with that you can save space on the edges, but the bullets helps the visitor to see there are more slides in the slider.

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

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

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

The Lawyer Slider is a full width video slider, and can fit to any page. You can use it as a hero header, so this slider can be the first that your visitors can see on your page.

The first thing you might have noticed that there is a video in the background. The video is used as the slider background, so it’s always visible below the slides. You can change it in the Slider settings → General tab → Slider design.

The slider contains 5 slides, one of them is a Static overlay, where the navigation is. You can use it to switch to the other slides. None of the slides have background, just layers which create the content. As a result, the slider background video is visible at each slide.

Layers

If you go through the slides, you can meet with different layers: headings, images, and buttons. The last slide offers special layers: animated counters. They give a nice visual experience, and attract the attention of your visitors. Also, with counter layers you can present numeric information in a more interesting way.

In Smart Slider 3 you can use links and actions on your layers. For example, a button layer can have a link to go to another page of your website. Or you can use link actions, like on the Static Overlay, to navigate to the other slides of the slider. This kind of navigation makes your site more interactive.

Animations

Each layer has a great incoming animation. When the slide loads, the layers are coming in one by one. You can check these animations in the timeline. The timeline is a visual way to check your layer animations. Additionally, it lets you view and change the duration and delay of the animations. Furthermore, you can add new animations, or copy them from layer to layer here.

Layout

Each slide has a different layout. There are the layers under each other in the first slide. On the second slide the layers are in a 1 row – 6 columns structure. The row wraps after 3 columns on desktop and tablet, and after 2 columns in mobile. On the third slide you can also see a row just in case with 3 columns.

But the last slide has a special layout: there is a row with 2 columns, and another row in the second column. The left column has a white background but the right one is transparent. So the content can be separated from each other. All layers can be found in the layer list, where you can change their order. Additionally, you can select a layer which you want to customize.

Responsive

The Lawyer Slider is fully responsive, so it looks good on each devices. To make the texts more legible on mobile, we used the Text scale option. Also, there are layers which aren’t visible on mobile devices, to avoid making the slider too tall. Of course, you can find these layers in the Layer List.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

Settings

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

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

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

Layers

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

Animations

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

Layout

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

Responsive

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

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

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

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

Settings

With a Layer slider you can cheer up the visual appearance of your website. You can tell your story by using layers like a heading or text.

This slider stays from 4 slides, and every slide has a different background color which makes your website colorful. It is important to keep the harmony between the layers and the background, the layers should be legible and clearly visible like in this Layer slider.

A navigation is also important on a slider, in this sample you can see the number type of bullets where the visitors will see how many slides there are, and can switch them. What is more, you can see arrows too, but the carousel mode is turned off here, so you can’t switch from the first slide to the last one, you can navigate only in one way.

Layers

The goal of this sample is to catch the visitors’ attention and with the buttons and icons call to an action. In this sample slider the animated heading layer is the first what you will see, which keeps up interest on your website. The animated heading changes more words with a nice animation, and the visitors will focus on that. In this example, the typewriter effect is used, but you can choose from more animations at the layer window.

The last slide is special where the HTML layer is used, which contains a contact form, and gets the visitor to do something. I can suggest the HTML layer for developers who want more functionality in their slider. In the background video is played, and with a video slider and with the animations your slider will come alive and be powerful.

Animations

Everyone loves fancy transitions on their website and layer animation helps you create really amazing sliders. The layer movement catches the visitors’ eye like in this example and that makes the slider complete. Use the timeline where you can set the duration and the delay of the animation, and can see how they work together.

Layout

Go to the second slide, and you will see this slide has a special layout. There is a basic row with 2 columns, so you can see the content on the left side, and images on the right. There are 3 images, but if you check it you will notice that 2 images are under the third thanks for the absolute positioning.

Responsive

Smart Slider has more responsive settings which you can make a fully responsive slider. With the Text scale you can make the text lower on different devices, also you are able to hide layers. If you have too much content on your slide, it can make your whole slider bigger. So take care of the sizes, and hide layers if it is needed.

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

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

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