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

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.

The slider on this page is a full page video slider. It plays an MP4 video in the background, behind all the layers. These layers usually contain more important information than the background video. Because of this, it makes sense to put the video in the back. Since the video only serves design purposes, it’s not a big problem if some parts of the video aren’t visible. To ensure that your texts are legible, make sure to use a different font color than what the video’s main color is. To improve the legibility further, you can set an overlay for the video at the layer window.

The slider is suitable as a hero header. All major desktop browsers support MP4 videos, which we use for backgrounds. What’s even better, the modern mobile browsers can play these videos as well. There’s one thing you should be aware of, and it is the way mobile browsers handle videos. They allow only muted videos to play automatically.

Layers

There’s not much content on the slider, so the visitor can focus on the message. There are only 3 layers: a heading on the top, a text layer below that, and an image box which opens a lightbox video.

Animations

Smart Slider 3 Pro has a lightbox feature, which is used on this sample. The lightbox opens the same MP4 video which you can see in the background. Of course, you can put any other video to the lightbox, or an image, or even any URL. Using a lightbox you can allow visitors to enjoy the content without any distraction.

Layout

This slider is a full page slider, so its height and width fill the 100% of your browser on any device. If you want to use it as a homepage slider, and you have a navigation on the top, then you can decrease the height of the slider with the height of your navigation.

Responsive

When you check the slider on mobile, you can see the texts are smaller. This is because of the text scale option which you can set the font size device specifically. With this setting you can make the content legible, and good looking on each device.

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

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

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

Creating beautiful sliders in Smart Slider can often result in having many sliders on your dashboard. To help you organize the sliders you made, you can create Slider Groups and place sliders inside them. Slider Groups are like folders: they help categorize your sliders, making it easier to find the one you’re looking for. Additionally, groups can help simplify the publishing process. Instead of having to publish all sliders one by one, you can publish the whole slider group.

The Vlogger template contains 4 blocks in a slider group. Blocks are special slider types in Smart Slider. They’re not exactly sliders, as they don’t slide, since they can only display one slide. Think of blocks as sections, where you can use Smart Slider’s features, without having to create an actual slider. Most blocks in the Vlogger template are full widths, but the third one is a full page block. As a result, it fills the whole browser window both vertically and horizontally.

Layers

The Vlogger template is full of interesting layers. Even in the first block you can find two interesting layers: a video and an input layer. Of course, you can find the common layers in this template as well. There are headings, texts, CTA buttons and images on most slides.

Videos are great storytelling tools at your disposal. They help introduce your brand or product better and deeper than static images could. So, it’s a good idea to use a video on your website. The video we use at the first block starts automatically, immediately capturing the attention of the visitors. Also, it pauses when they scroll away, so they can continue watching it where they left off.

Animations

There are cool layer animations on most of the layers at each block. For example, at the first block the headings on a yellow background, the input and video layers show up using the Reveal layer animation. The Reveal animation is a special kind of layer animation that animates a solid background before revealing the content of the layer. This effect looks trendy and modern, and suits well on today’s sites.

The other kind of layer animations you can spot is the Basic Animation. It’s not as fancy as the Reveal animation, as it simply animates the layer it was applied to. On the first block you can spot this animation on the first and last text layer.

At the second block you can find a nice lightbox, which displays a video from YouTube. Adding a lightbox is easy in Smart Slider. First select the layer that you want to click on to start the lightbox. Then click on the + sign at the Link field and go to the Lightbox tab. Finally, enter the link of the video you want to show in the lightbox. At the second block, the lightbox is added on the column that contains the image and heading.

Layout

The most interesting layout is the broken grid-like layout in the first block. The yellow heading slightly covers the video layer next to it. This happens because of the negative left margin on the video layer.

Responsive

Smart Slider is a responsive slider for WordPress and Joomla. It offers many great tools to fine-tune how your sliders look on small screens. For example, you can hide layers, or change the font size on mobile. For this, simply use the Font resizer.

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

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

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

Showcase sliders shine if you want to create a slider that shows many slides at once. This slider type keeps the main video slide in the middle while it shows parts of the next and previous slides beside it. This shows visitors that there are more slides to see and encourages them to check them out. In the current slider’s case, the slides on the left and right are semi-transparent, and also smaller than the middle one. This helps the visitor clearly identify the content they should interact with.

The slider is full width, which means it will cover the browser width. This makes the Video Showcase slider a great header slider or a landing page slider. It’s also great for post sliders or showing images instead of videos.

Layers

Each slide has the same layers: an image, 2 headings and a button layer. This button uses link action to go to the next slide. Each video in this slider opens in a lightbox. This means that the actual video doesn’t load with the slider, only the placeholder images do. Lightboxes are great to show videos, because they allow the visitors to focus on the video with no distraction. The videos in this slider come from YouTube, but they can be simple MP4 videos or hosted by Vimeo.

Animations

If you switch a slide it moves horizontally. This is the main animation of the slider which you can set in the Animations tab of the Slider settings. Here you can set the showcase animations, too. The previous and next slides are a bit smaller and have an opacity, so you can focus on the active slide in the middle.

Layout

We created the slides with default position, which ensures the great responsive behavior for the layers. In this case, this means that the texts remain legible on all devices, including the smallest mobiles. Visitors can navigate between the slides using the bullet dots, dragging or swiping or using the “Next video” button.

Responsive

Showcase sliders have a special responsive behavior, which allows them to display more than one slide on each device. The problem is that on mobile the slides can shrink too much because of this. We set this slider up to ensure it has the best responsive behavior a showcase slider can have. Thanks to that, the slider looks gorgeous on mobile.

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

Related Post: Add Lightbox Slider to your WordPress site

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

The Green Energy template is a slider group. What makes slider groups special is that they can contain any number of sliders and blocks. They’re like folders, that let you export and publish a group of sliders together. Additionally, they help organizing your sliders in your Dashboard.

In this template you can find 4 blocks and 1 slider. If you’re wondering what’s the difference between a slider and a block, here’s a simple explanation. Blocks are special kind of sliders, that can only display one slide. This lets you take advantage of Smart Slider’s cool features on your website, without having to create an actual slider.

All sliders and blocks are full width in the Green Energy template. Full width sliders are popular, because they fill the browser horizontally. There’s another thing worth mentioning about the first block. It has a slide background video. Background videos, just like background images, are design elements that let you fill the whole slide area with your content.

Layers

Usually there are many sliders and blocks in a slider group. As a result, there are many different layers inside them as well. Of course, this template is no different. However, you can find the most popular layers, the heading, text, image and button layers here.

Animations

There are many layer animations in this template. Almost all blocks have some kind of special effect on some of their layers. For example, the menu on the first block appears with an incoming layer animation. Similarly, the text blocks in the Services section use a layer animation to appear.

Apart from the layer animations, there’s a lightbox in the first block. It opens up a video from YouTube when you click on the play icon.

Layout

The Green Energy template has many interesting layout solutions. Let’s highlight the two most interesting and see how they were built!

You can find the first interesting layout on the Invest block. It’s the green box that’s aligned to the bottom of the block. The base of the slider is a two column row, and this box (which is actually another row) is placed in the right column. The vertical align on the Column is set to bottom, and the row has a maximum width. This prevents it from filling the column horizontally.

The other interesting layout that worth mentioning is the bottom slider. It’s navigation and textual content is on a Static Overlay. However, the images are on regular slides. Both the Static Overlay and the other slides have a three column row as their base. However, on the Static Overlay the first column, which has the content, is wider than the other two columns. This creates the kind of overlapping effect.

Responsive

Smart Slider offers many tools to create perfect looking sliders for mobile devices. Some tools, such as wrapping a row’s columns into new lines take effect automatically, although you can change it back if you need the columns to be next to one another. This behavior was quite useful in the Services block, which allowed the two columns to display below each other in the main layout. Also, the inner row, which contains the image and texts also wraps to more lines automatically.

But there are other options which you can adjust manually, such as the font size or the alignment. For example, on the first block the layers are aligned to the left on desktop, but they’re aligned to center on mobile.

Related Documentation: Slider Group

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

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

The wedding page group stays from 6 sliders. The first is an autoplaying slider with a static overlay and navigation. The second and third sliders are blocks, so have only one slide in the slider.

The 4. slider is a showcase type slider. Showcase sliders need a certain amount of slides to create a full carousel. Since this slider has only 3 slides, the last slide can’t appear on the left side of the first one. This creates an interesting effect, which is great for story telling. And the last 2 sliders are also blocks, and have a special layout.

Layers

The wedding slider group stays from basic layers like headings, texts, buttons and images. Since these sliders are together, they should have used the same styling and matching colors to keep the harmony. There are more layers with a link which you can navigate to the next slides thanks for the link actions.

Animations

When you load the wedding page, you can notice a lot of animations on it like layer animations, or the Ken Burns effect. The Ken Burns is a panning and zooming effect, and it is simple, elegant and works on any kind of images.

Layout

The Wedding Gallery slider’s layout looks beautiful and unique. What makes it special is the row with the small images, which break out of their grid and cover a part of the big image on the left. Creating this layout is quite simple.

Create a row with two columns.

1. Put an image layer on each column and select the image you want to display.
2. Remove the paddings from the columns and row. (Press and hold the Shift key to adjust the paddings on the opposite sides, too.)
3. Select the row and add a top margin on it. This slider has 20px top margin.
4. Give a negative left margin to the row. This slider has -80px left margin.

Responsive

The slider group is fully responsive, and looks good on any device. Showcase sliders have special responsive behavior. You can set a size for the slider itself, and one for the slides inside. Thanks to this, you can control the amount of slides that will show up in your slider. For instance, if you set your slider size to be 1500px wide, you can make 3 500px wide slides appear with 0px slide distance. Being able to specify different slider and slide sizes creates many possibilities for your slider.

In this example, we took advantage of another great feature, the Maximum slider height. This setting prevents the slider from getting taller than the set size. We set it to 700px, the same as the height of the slider, which means as the slider gets wider, more slides will be visible. This setup is close to the best way to set up a showcase type slider.

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

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

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

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

The Dance Festival block is not an actual slider. It uses a special slider type called Block. What makes Blocks different from sliders is that they can display one slide only. So, they can’t actually slide, but they let you use Smart Slider’s amazing features.

The Dance Festival template is full page, which means it fills the screen both vertically and horizontally. This makes it perfect to use as a hero header.

Layers

The most important layer on the Dance Festival template is obviously the countdown layer. The Countdown layer is a new addition to Smart Slider, and it lets you create a countdown to a date you’re looking for. This date can be the start of a festival, the opening of a website or anything else.

Other notable layers are the heading and text layers. They help build the content of the template and describe the purpose of the block. Additionally, there’s a CTA button which urges visitors to buy their ticket to the festival.

Animations

The most obvious movement on the Dance Festival template is actually coming from a video. In Smart Slider Pro you can use an MP4 video as the background of the slider, and we used that at this template. The background video brings life to the slide with its continuous movement, and makes the block look great.

The other animation you can find on the template is the layer animation. It’s added to many layers, which appear with a nice movement.

Layout

The Dance Festival template’s layout is built with rows. There’s a 3 column row at the top and a 1 column row at the bottom. In the middle there’s another 1 column row, which is stretched so it pushes the other two rows to the top and bottom respectively.

Responsive

Smart Slider is a responsive slider for WordPress and Joomla. Thus, it has many options to fine-tune your sliders for small screens. For example, at the layers which contain text you can reduce the font size for small screens.

When you optimize your slider for mobile, we recommend making sure your slider is smaller than 600px. This way it will nicely fit into the smallest mobile screens.

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

Related Post: Introducing Countdown Layer

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

Settings

This slider is a block type slider, so only has one slide without any controls, it can be a great header on your page. Creating a block with a video background is very easy in Smart Slider. You can put mp4 videos in the background, and if you mute the video and turn on the autoplay, it can be a good design tool to grab your visitors attention. If you want to make the texts readable use a background color as an overlay above the video.

Layers

The slider is created with default positioned layers which work like a page builder and really simple to edit. You can find an image and a heading on the top, and after an animated heading comes. Animated heading is a great way to call the visitors attention. Now 3 text changes after each other. Below the Animated heading you can see an important part of the slider, the button. With buttons you can reach the visitor to click and take an action.

The bottom part of the block is also special, there is a row with a white background and with a nice shadow. The row has 6 columns, and has image layers and counter layers on it.

Animations

The Animated heading layer can rotate different highlighted text with the chosen animation. With this animation you can grab your visitor’s attention, and show your most important message. When the slider loads you can see another animated layer – the counters. With these layers you can show numbers with a nice looking animation.

Layout

On this block you can find a shape divider effect at the bottom of the slider. You can see a simple white “rectangle” divider which gives the impression that the white bar with the Counter layers is above the block.

The block stays from 2 main rows: the first row contains the top part of the slider with the image, heading, animated heading and button. The second row is the white row on the bottom. The first row is stretched which makes it fill the available space, and pushes the second row to the bottom.

Responsive

When you check the slider in mobile, you can notice the content is smaller and the bottom images are hidden. You can use the Text scale to make your text smaller, and it is a device specific setting, so it doesn’t affect other devices. With hiding a layer you can save space. If a slider is too big on mobile, it doesn’t look good, and with hiding a layer you can reduce the height.

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

Related Post: 10 Beautiful Full Width Slider Examples

The post Yoga Hero 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.