The Virtual Conference is a simple type slider. That’s the most common slider type you can find on the web. Simple sliders display one slide at a time, which helps visitors focus on the content of the slide. The Virtual Conference template is also a full width slider. Full width sliders fill the entire browser horizontally. This makes them popular on modern websites, as they look great on a large monitor.

For navigation this template offers two options. First, the most obvious one, the text blocks at the bottom. They were created by the Thumbnail control, but they don’t display any image. This makes the Thumbnail control versatile, because you can choose not to have an image but text only. As a result you can create special navigation for your visitors to enjoy.

The other way to switch slides it via dragging or swiping. In fact, a swiping navigation is on of the most comfortable actions for touch screen devices. It’s especially liked by mobile users because it feels natural.

Layers

Each slide of the Virtual Conference slider has three layers: image and headings. The image layer displays a custom icon. It also has a semi-transparent background color, a padding and a border radius.

The heading layers display the textual content of the slide. Additionally, on the first slide there’s a special layer: the Animated heading. The Animated heading layer can display content with cool effects. For example, it can use the typewriter, which makes the slider look more interesting.

Animations

Smart Slider has many cool animations to choose from. They help to make your slider slider look more interesting and stand out from the crowd. At the Virtual Conference template we choose to add a modern background animation. Background animations play when the slides are changing. So they won’t distract the visitor from enjoying the content. We choose one of the new Morph animations, Wave.

Layout

The base layout of each slide is aligning the content to the bottom of the slide. In Smart Slider layers are positioned from their parent element. So to align layers to the bottom you need to edit their parent, which is usually the Content layer. At the Content layer you should choose Bottom at the Vertical align option.

Responsive

Smart Slider is a responsive slider and it offers many tools to fine-tune the look on small screens. One of the most common things you need to do to make the slider look good on mobile is reducing the text sizes. Otherwise the content would be uncomfortably large, and make the slider way too tall as well.

Related Post: Create A Responsive Thumbnail Slider

Related Post: 10 Beautiful Full Width Slider Examples

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

Sliders are the most widely used design elements on websites. They are usually the first parts of the page that the visitor sees when they arrive. People use sliders to showcase their most important content. Since sliders are so important parts of the site, they often have some kind of inner navigation. For example arrows or bullets but if there are many slides to see, arrows are a bit uncomfortable to use. Bullets are slightly better, but they’re hard to use on mobile devices. This is why slider developers came up with the idea to create a thumbnail slider.

Thumbnails are one of the best navigation elements in a slider that you can use, and in Smart Slider 3 you can easily create a slider with thumbnails. At the thumbnail control you can turn it on and simply customize it. You can even upload a picture, so you don’t need to use the same image as you have used in the background.

Layers

Each slide has the same structure and layers: there are 2 headings on the top, after an image comes, and then a text layer. The first heading is uppercased which you can set at the Style tab of the layer window under the More button.

Animations

Everyone loves animations on a website and on a gallery slider, they can make your page more powerful. Besides the main and background animations in the Pro version of Smart Slider 3 you can put animation on every layer. In this demo slider you can see the same animations coming one after another on every slide.

You can check every layer animation in a visual timeline, where you can set the delay, the duration and the sequence. If you click on the animation on the timeline, it will open the layer window animation tab where you can edit the selected animation. Pressing the space key will start the animations, so you can see a preview of the animations.

Layout

All of the layers are in a 1 row 1 column structure. The row has a white background, and the column has a 2px border which gives a frame to the content. The content layer has a maximum width so the white box will have the same width on bigger screens.

Responsive

All of the layers are visible in smaller screens, just in this case they are smaller. You can customize the font size with the Text scale option on smaller screens. Also, by default the thumbnails are hidden on mobile, but at this slider we have enabled them, so they are visible, and the visitors can navigate between slides.

Related Post: Create A Responsive Thumbnail Slider

Related Post: How to Create Beautiful Responsive Image Slider?

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

The post Thumbnail slider 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.

A team slider is a kind of slider that focuses on the members of your team. It gives a nice, personal touch to your company’s website, and helps building trust in your hesitant customers. This slider allows navigating slide by slide in three ways. You can drag or swipe towards the right or left side, to switch to the next or previous slide. You can also use the white arrow on the blue background at the middle bottom. The third, and the most eye-catching is the thumbnail navigation.

We placed the thumbnails to the right side of the slider, aligned to the bottom of it. The thumbnails allow the visitor to see all your team members at once. Clicking any thumbnail switches to the slide with the person’s slide.

Layers

You can see heading, text and image layers on each slide, which are placed in rows and columns, and have different styles.

Smart Slider 3 has a cool feature, that allows you to rotate any layer, including rows and columns. At this slider we rotated a heading layer, which we use to show how many team slides are available, and which one is currently visible.

Animations

Smart Slider 3 has many cool effects you can use to make your sliders more interesting. We added some of the best effects to the Team Slider demo, to help you create a modern and responsive slider fast.

The most spectacular effect of the slider is the Reveal Animation. Reveal Animation is a cool and modern effect to introduce or remove layers from your slider.

Layout

The layers are placed in different rows and columns. The basic of the slider is a row with 2 columns. The left column contains 2 other rows: one on the top and one on the bottom. The top row has another row with the 3 image layers on it. On the column in the right side is only one image layer which displays a team member.

Responsive

When you check the slider in smaller devices, you can notice there are layers which are hidden on tablet and mobile. The hide option can help to make your slider smaller on mobile and tablet.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation

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

In Smart Slider you can create nice looking sliders and simple blocks. These blocks offer all the layers you have at a slider, but they show only one slide. Therefore, they’re perfect tools to create a landing page, as you can build them in a visual editor. This Blogger template features both stunning blocks and amazing sliders. The sliders are in a group, so you can publish them together. Also, you can customize all of the sliders and layers in this one page example.

Layers

This group has more sliders and layers on it. You can meet with heading layers, texts, images, and buttons. The first and last slider have headings with links on them. These layers use link actions, and if you click on them you can navigate to specific sliders.

Animations

When you check this landing page, you may noticed the layers are coming in with nice layer animations. With using animations you can cheer up your page, and call the visitors attention. The Categories slider is special, where you can meet with the layer parallax effect. If you scroll up or down, the layers are moving. You can customize this kind of animation in the Animations tab of the Slider settings, and you can add different values to the layers in the Style tab of the Layer window.

Layout

This slider group contains slider blocks and also has a showcase type slider. With the showcase slider type you can display more slides next to each other, and if you have enough slides, you can make a continuous circle. This can be a great way to showcase your posts or products, also you can create a testimonial slider.

Responsive

The Blogger landing page is fully responsive. The texts are smaller on tablet and mobile, and they have enough space. The images also look good, and you can easily navigate between the sliders and blocks with touch.

Related Post: Create A Responsive Thumbnail Slider

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

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

A full-width slider is the most popular way to display a slider in a website. These sliders allow viewing images in a large area, making them perfect as a header slider. This full-width slider example has thumbnail navigation, without actual thumbnail images. The simple text gives users an idea what the other slides are about, while indicating the currently viewed slide in a stylish manner.

This slider is the perfect choice for any blog website. You can easily create a dynamic WordPress post slider using this slider. A dynamic post slider helps you highlight your latest blog posts in a visually stunning way. You can display the name and avatar of the post author, the title, excerpt, featured image and, of course, the post category. These are the most important aspects which help get more readers on your actual blog post.

Layers

Each slide has the same layers: an image layer, 2 headings, a text layer and finally, a button layer. If you hover over the layers, you can notice the big heading has another color on hover. You can customize and change this color in the Style tab of the layer window. Here you need to change the typography to hover, and then you can set a different style and color for the hovered text.

Animations

When you switch slides, you can see the next slide comes in with a horizontal animation. This animation is the main animation of the slider which you can change to vertical or fade in the Animations tab of the slider settings.

Layout

The slider stays from 4 slides, and each slide has the same layout: the layers are under each other. On the bottom of the slider you can see the thumbnails control. The thumbnail shows the title and the description of the slides. You can change the title and the description at the Content tab of the Slide settings.

Also, you have the option to customize the thumbnails. For that go to the Controls tab of the Slider settings. Do you want to change the blue hover color of the thumbnails? For that click on the green style button at the thumbnail, and change the tab to active on the top right corner.

Responsive

The full-width thumbnail slider is fully responsive. When you check it on your phone, you can notice the thumbnails are hidden and the texts are smaller. You can set the font sizes with the text scale option device specifically.

Related Post: Enrich your Blog with a Post Slider

Related Post: Create A Responsive Thumbnail Slider

Related Post: 10 Beautiful Full Width Slider Examples

The post Full Width Thumbnail Slider appeared first on Smart Slider 3 — WordPress Plugin.

This slider is a simple image slider where the image changes automatically. There are large thumbnail images you can use for navigation. This allows you to preview all images in the slider and pick those the visitor is most interested in. The currently viewed slide’s thumbnail is clear and looks like the slide background picture but the other slide thumbnails are darkened which gives a modern look to the slider. Besides the thumbnails, visitors can navigate by swiping from slide to slide.

The slider has a slider autoplay setting. The visitor can start and stop it with the solid autoplay icon at the top right corner. Allowing the user to start the autoplay gives them control over it which is favorable by them. So how can you set up an autoplay like this? Go to Slider settings → Autoplay and configure the autoplay the way you want to. Set the autoplay duration and any other setting to your liking. Configure its look to match your slider, position it where you prefer to have it and you’re done. The visitor can now start and stop the autoplay when they choose to do so. They’ll love having so much control over your slider while viewing your beautiful pictures!

Layers

Creating an image gallery slider does not always mean you want to use words. It’s perfectly possible to create a beautiful image slider without a single line of text. This Autoplaying thumbnail slider is a great example for this. It’s a very minimal slider, with zero layer, but it looks elegant and professional.

Animations

When you switch a slide, you can notice the background animation. You can change this animation at the Slider settings → Animations tab. Now 2 types are selected, but you can change it if you want.

Layout

The slider is minimal, below the background images you can see the thumbnails, and on the top right you can notice the autoplay button which you can start or stop the autoplaying.

Responsive

The thumbnail bar can be scrolled through by swiping or dragging which is very convenient for both big and small screen users.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Create A Responsive Thumbnail Slider

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

Vimeo is a great video hosting platform, loved and trusted by millions of users. The platform is so popular that lots of website owners choose to host their videos on Vimeo. Vimeo supports embedding videos to 3rd party websites. This allows website owners to create a slider from their Vimeo videos which they can show on their site.

Each slide contains a Vimeo layer, and you can navigate with the thumbnails or with the arrows to the next slide. In the right side you can see a little preview from your slides, where you can display a title and a small description.

Layers

Each slide contains a Vimeo layer. The videos don’t autoplay in this slider but you can change that at the layer’s settings. Before doing so, you should know that browsers often disable autoplaying videos which have sound. When we developed Smart Slider 3, we made sure that these browser limitations affect the user experience as little as possible. This means that as soon as the visitor interacts with the page (e.g. clicks anywhere) it starts the video if it can. The Vimeo layer, which displays the video, has many other useful features for you to use. The autoplay isn’t the only setting, there are many more to choose from. For example, you can loop the videos or adjust their quality.

Animations

The Vimeo slider does not switch slides automatically either so the visitor needs to do it. If you prefer that the slides change automatically, you can enable the slider autoplay feature for the slider. From the visitor’s perspective, it’s probably better if there’s no autoplay to avoid confusion. When the visitor decides to switch slides, they see a simple fade animation.

Layout

The slider above shows you how to create a minimal video gallery using Smart Slider 3. The visitor can navigate from video to video using arrows. And, as you’ve probably seen, there’s a more obvious and convenient way for the navigation. The right side of the slider is a thumbnail control, without images. Thumbnail control displays the slide thumbnail, name and description. Of course, you can disable any of these settings, like we disabled the thumbnails. You can customize each thumbnail’s active and normal state, which can help you highlight the active video.

Responsive

The thumbnails need too much space on mobile and tablet, so they are hidden on smaller devices. When you check the slider on the tablet you can see only arrows. However, when you check it on mobile, you can see the arrows are hidden, too, but a new control is available: bullets. If the visitors see the bullets they will know there are more slides available, and they can navigate between the slides.

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

Related Post: Create A Responsive Thumbnail Slider

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

A YouTube slider is a great way to call your visitors’ attention and make a good visual impact. In Smart Slider 3 you can easily create a video slider, you can use YouTube and Vimeo videos in the free version, and in the Pro version you can put mp4 videos to your slider as well. In this example you can see that there are YouTube videos used, but the YouTube logo is hidden from the bottom side. This template is available in the Pro version of Smart Slider 3 because of some Pro settings, but you can create a similar slider with the free version as well.

Smart Slider 3 automatically creates a cover image for your YouTube layer and you can see that image before the video starts but you can change it if you want just like the Thumbnail image. There is the Slider autoplay mode turned on, so if you watch a video, the slide will automatically change to the next after the given time.

Layers

Each slide contains a YouTube layer. You can see the settings of the YouTube layer in the layer window. If you pause the video, you can see the related videos for your video. With the “Show related videos” option YouTube will show related videos that are from the same channel as the video that has just been played or the related videos can be displayed from any channel.

Animations

You can switch slides with the thumbnails on desktop or with arrows on tablet and mobile. Also, when you show a video, the slider autoplays. At these slide changes you can see a vertical animation. This is the main animation of the slider which you can customize at the Animations tab of the Slider settings.

Layout

The specialty of this slider is the thumbnail control on the left side. With a thumbnail slider you can navigate to other slides, also you can see how many slides the slider has. There is an arrow which you can navigate between the Thumbnails with. The Thumbnail shows the Thumbnail image and the Slide title which you can fully customize.

Responsive

On desktop screens you can navigate between the slides with the thumbnails. However, on smaller devices like tablets and mobiles you can’t see the thumbnails because they don’t have enough space. In these devices we have enabled the arrows control.

Related Post: Everything You Need To Know About YouTube Slider

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

Related Post: Create A Responsive Thumbnail Slider

The post YouTube Slider with Thumbnails appeared first on Smart Slider 3 — WordPress Plugin.

The Joomla Article Slider uses the most common slider type. It displays one slide at a time, which contains details from a single article. It uses the boxed layout, which makes the slider fit nicely into the container you place it.

The most interesting part of the slider are the thumbnails. They’re vertical, and have two purposes. First, they allow and easy way to browse the slides. Second, they indicate how many slides there are to see. On each thumbnail you can find the title of the slide as a caption.

The other navigation option is the arrow. It allows checking the slides one by one. The touch navigation is also available.

Layers

Each slide has the same layout, which makes the Joomla Article Slider perfect for creating a dynamic slide. There are two heading and two button layers on each slide. They help displaying the category, title, date and author of the post. There’s also a CTA button that can take the reader to the post.

On the button layer there’s an interesting hover effect. The button itself has a white border with transparent background. But on mouse enter the transparent color changes to white.

Animations

The only animation the Joomla Article Slider has is the Main animation. The Main animation is the effect that moves the backgrounds and the layers, if neither has their own animation. in this slider’s case this movement is horizontal, which looks simple but professional.

Layout

To ensure the legibility of the texts, the background image of each slide has a dark blue overlay. This helps increasing the contrast between the background and foreground. So your visitors will be able to read the post title, date and author more easily.

By default the headline would be too wide. This makes it more uncomfortable to read, so we set a max width on the heading. As a result, the visitor can read the text more comfortably. Additionally, it looks nicer as well.

Responsive

Smart Slider 3 uses a unique way to build slide. It’s called Default positioning, and it works very similar to the way page builders work. Every layer acts like a block, so they won’t overlap each other. This helps creating responsive sliders effortlessly, because the layers make space for themselves. The only change we had to make in the slider for mobile was reducing the font size of the headline. as it was too big. Although it wasn’t necessary, we also increased the top and bottom paddings of the slide, creating a nicer layout.

Related Post: How to Create a Joomla Slider?

Related Post: Create A Responsive Thumbnail Slider

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