Description: The key to a great slider is finding an appropriate and interactive way to display information. The image rotator inside the block provides you to display multiple images, promotions, videos, or anything else you want.
Premium: Gain access to all slider templates with a
single purchase.
The base of the Dating template is a simple type slider. We choose the simple type, because it can display a single slide, and that makes it perfect for this layout. Also, the Dating template is a full width slider, which means it fills the browser horizontally.
Apart from being full width, there’s another special feature on this slider. When you create a slider, the Limit slide width option is enabled for it by default. The Limit slide width option makes the slide have a maximum width, which prevents the slider from getting too tall. However, it prevents the content from reaching the edges of the slider.
Limit slide width off (left) and on (right)
Another setting we enabled for this slider is the Autoplay. It switches the slides in every 3 seconds. For slides which have moving textual content, 3 seconds autoplay is too fast. But for a slider like this, where only the images change, it’s a great duration.
Layers
You can find many various layers on the Dating template. Most importantly, there’s a CTA button what you can use to increase your conversion. You can also find headings to describe your site and slider, and there’s an image layer for your logo.
Animations
The first animation you see when you check the Dating template is the layer animation, which introduces the layers. It’s a cool scale animation, and it fits perfectly to the template.
The other animation is what you can see when the Autoplay switches the slides. It’s a Fade effect, which the Main Animation creates. The Main Animation can affect both the slide backgrounds, and the layers which don’t have layer animations.
Layout
The Dating template contains four slides: 1 Static Overlay and 3 normal slides. You can add a new Static Overlay from the Add slide menu. The Static Overlay is a special slide, because it’s above every other slide in the slider. For this reason, you should only have one Static Overlay. At the Dating template the Static overlay contains the texts inside a two column row.
Static Overlay location
The other 3 slides also contain a two column row, to ensure the perfect positioning. The left column has the image as its background. The right column is empty, so the brownish slide background is visible behind it.
Responsive
If you check the slider on mobile, you’ll see that the two columns break into new lines. This happens because the Wrap After option on the row, which decides how many columns can fit into one line. To help you create the best responsive slider in short time, we automatically set the Wrap after to 1 on mobile.
Another thing you might notice is that the font sizes are a lot smaller than on desktop. In Smart Slider you can use the Text Scale option to reduce or increase the size of the text on different devices.
