Meditation for Beginners: Boost Your Productivity in 7 Days
12 Lessons
3 hr 30 min
Simple Solutions for Common Dog Behavior & Training Problems
18 Lessons
2 hr 45 min
Sewing Patterns 101: Learn to Read Sewing Patterns
6 Lessons
8 hr 20 min
previous arrowprevious arrow
next arrownext arrow
Slider

Courses

Description: Need an elegant and modern way to sell your courses, without having to give up on all the bells and whistles? Have a look at the Courses slider, which was designed with simplicity in mind.
💻 Slider Settings | 🎓 Layers | ⚡ Animations | 🏗️ Layout |📱 Responsive

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.4.1.6

Tags:

Slider settings

Courses slider is a gorgeous full width slider what you can use on your website. It features a nice image in front of single colored background. This gives a modern look to the whole slider. Additionally, this dark background the Shape Divider at the bottom truly stand out.

Shape Divider at Smart Slider
Shape Divider at Smart Slider

The arrows on the Courses slider stay inside the slide content. How to create arrows like that? Using the Advanced Position at the arrow control. With the Advanced Position feature you can use Control variables for positioning. This way you have a lot more options to place your arrows, bullets and thumbnails on your slider.

Advanced positioning at the Arrow Control - Smart Slider 3
Advanced positioning at the Arrow Control

Layers

You can find some special looking layers on this Courses slider. Let’s start with the button layer, that has an icon in front of the textual content. At the button layer you’re able to select an icon the layer shows, which can help you make better CTA.

CTA buttons with icons - Smart Slider 3
CTA buttons with icons

At the bottom of the slide you can find two image box layers. These layers are special, because they let you hold an image or icon, a heading and a description in a single layer. This opens up many designing possibilities.

Image box layer layouts - Smart Sldier 3
Image box layer layouts: top, right, bottom, left

To get this left-aligned layout, we put 540px max width on the row. As a result, the layers are taking up approximately half the slide, which gives a nice layout.

Animation

The most special part of the Courses slider is its animation. What makes the animation look so cool is that the Main animation got combined with two layer animations. So, what does exactly happen when the slides switch?

The Main animation moves the downscaled Content layer to the middle. Then the Content layer starts to scale up, and during this time, the layers in the row move in from the right.

Apart from these cool effects, the slider has a lightbox feature which you can launch from a CTA button. It prompts the visitor to learn more about your course by watching a video.

Layout

The layout of the Courses slider is based on the Content layer. This Content layer has the image of the slide. The reason this creates a special look, because the Content layer can only as big as the slide canvas is. In other words, it does not always cover the whole slide.

Difference between the Content layer background (left) and Slide background (right)
Difference between the Content layer background (left) and Slide background (right)

Responsive

There are some cool responsive tricks the Courses slider uses, mostly on mobile. First things first: when you optimize your slider for mobile, you should aim to make it maximum 600px tall. This would make the slider fit nicely on the small mobile screens.

How did we achieve the smaller size? The first step was to reduce the heading layer’s font size. This can be done very simply in the Slide editor, and you can see the result immediately on the canvas.

The next responsive trick is to use the row’s Wrap after option to break the CTA buttons columns into two lines. To do something like this, simply change the Wrap after to 1 at the row. By the way, this is actually the default value for the rows you add. However, the Wrap after option was set to 0 at the row where the image box layers are. As a result, they ended up next to each other.

Different text align on desktop (left) and mobile (right)
Different text align on desktop (left) and mobile (right)

If you carefully look at the slides of the Courses slider on mobile, you might notice that the text align changed. On desktop, the layers were left aligned. However, on mobile they’re in the middle.


Related Documentation: Layer animation

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Museum website landing pageShowcase slider for WordPress image galleryScene SliderKen Burns