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

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

Layers

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

Animations

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

Layout

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

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

Responsive

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

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

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

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

The Photo Story is a full width image slider, you can easily use it on your photography page. Each slide has a background image which can be your photo, and you can link a story and navigate to your blog.

The slider uses the full width layout so it fills the horizontal area of the browser. When you switch a slide the next image will fade in. This fade animation is coming from the Main animation. You can set or change it in the Slider settings → Animations tab.

The slider doesn’t use any controls. The arrow that you can see on it are image layers, and are linked with link actions which you can navigate to the next or previous slides.

Layers

The slider uses basic and simple layers: headings, and images. They are ordered in rows and columns. You can find all of the layers in the layer list. You can fully customize them. These layers were added manually into the slider. If you want more than 3 slides, then you can change the “03” to “04” which you can easily do in the layer window.

The layers have important roles in the slider. They aren’t just content, but you can also navigate with them. With the 2 rows where the previous and next titles are you can navigate with link actions.

Animations

The best feature of this slider is the text animation on the big heading at the bottom. When you switch slides, the text will move with a nice animation. You can customize this animation if you click on the layer → go to the layer window → Content tab. Here you can find a text animation section, where you can reach the animation manager. You can set the modes where the text can move, the duration or the transform.

Layout

At first sight you might think the slider uses a complicated layout. There are a lot of rows and columns in each other. The layer list can help you to find out the structure. Also, you can open or close a row or column group with the small arrows near their name which you can make the layer list simple.

Responsive

The slider is fully responsive. 2 columns are hidden on mobile devices, so you can see only the arrow images. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. Since this slider doesn’t contain too many layers, then it will be small. With using paddings, you can make the height taller which you can set at the Slide settings.

Related Post: How to Create a Cool Text Animation

Related Post: How to Create Beautiful Responsive Image Slider?

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