With Smart Slider 3 you can create gorgeous sliders for your site. Additionally, you can create not only sliders, but simple blocks as well, like this template. Blocks are special, because they not exactly sliders. They display only one slide, which makes them perfect to create cool sections for your site.
🎓 Pro Version Available
Did you know this template has a alternative made with the Pro version of Smart Slider 3? What more do you get with the Pro template?
The Limit Slide Width option, which fixes the slide canvas, is enabled at this template. As a result, the slider won’t get taller than the set slider height. Additionally, the content remains in the middle of the slide, which makes the block look nicer.
You can find four simple layers on this template: a heading, a text, a button and an image layer. Each textual layer uses a Google Font, DM Sans. Smart Slider 3 recognizes Google Fonts automatically, so if you want to use a Google font in the slider, it’s enough to just type in its name.
Block type sliders can only display one slide. So there are no slide switching animations available for them. As a result, you won’t see any animation on these blocks. As a result you can create a section that seamlessly bends into your site.
The slide content is placed in a two column row. On the left side you can find the textual layers, and the image takes up the right side. The row is full width, which means it always fills the available horizontal space.
The slide background makes this block look truly special. On the background there are solid color shapes, which give a playful but modern look to the block. We also changed the Focus point of the image, to ensure that the blue and purple shape at the top stay visible.
Smart Slider is a responsive slider plugin, so any slider or block you create is responsive. The rows you create automatically break each column into a new line on mobile. This happens because of the Wrap after option of the row, which is set to 1 by default.
When the columns break into new lines, the left column is on the top, and the right one is on the bottom. But in this slider’s case the default behavior didn’t create a good looking layout. So we changed the column order to make the column with the image inside appear on top. As a result, the slide looks better, and the text is easier to read.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!