Homepage sliders are back! Or, should I say, they never left in the first place. If you’d believe the anti-slider brigade, homepage sliders are boring, annoying and bad for conversions. But the actual evidence proves otherwise.
Modern sliders have evolved beyond the basic slideshows that were everywhere 7 years ago. Big brands like SpaceX or Microsoft feature well-designed sliders on their websites. Contemporary sliders are gorgeous. They feature stunning imagery – usually high resolution photography – along with thoughtful copywriting, well-placed CTAs and design elements that ensure information is well-timed so users can absorb the content on each slide.
Why use a homepage slider on your WordPress site? The many benefits include:
- Focus. The ability to focus users on your key messages above the fold.
- Visuals. Users love stunning imagery. Sliders let you display more than just one image.
- Calls to action. Sliders provide opportunities to display multiple CTAs for your important content.
Let’s take a look at some examples of how you can use homepage sliders.
1. Full Width Gradient Slider
🎓 Available in Smart Slider 3 Free – Full Width Gradient Slider
In the Smart Slider 3 template library you can encounter that free beautiful slider template. It is a simple way to show the most important information with a heading, a short text, a button and a simple image. There are more opportunities to navigate to other slides, you can use the bullets and arrows, or just navigate with a mouse drag. The gradient background makes it colorful and fills the 100% width of your page.
👍 Why it works: The slider is simple and makes the first good impression if you use it at the top of your page. It is mobile friendly and looks fine on every device. It is not too much and only contains the important information, it is also easy to customize.
2. Client stories showcase
🎓 Available in Smart Slider 3 Pro – Client Stories
This slider is one of my favourite ones. It fills the full width of the browser, and there are 2 sections on it: an informational part with a CTA and with navigation, and an image with a testimonial in a white box. The responsiveness is also really cool: the two columns are below each other on tablets and mobile devices.
👍 Why it works: Looking at the CTA we can notice that its black background contrasts sharply with the pastel background, quickly drawing the user’s attention.
3. Courses slider
🎓 Available in Smart Slider 3 Pro – Courses
The Courses slider is a great example of a full-width homepage slider. The slideshow has a dark blue background with a Shape Divider that breaks and cheers up the structure of the homepage. With that, you can focus on the images, and on the content in the center. The structure is great and it looks good on mobile devices, too.
👍 Why it works: The CTA stands out from the slider, and with that, you can navigate to a specific page. There is all of the content that you need to know about the actual course: lessons, time, and you can check an introduction video in a lightbox.
4. Full page portfolio
🎓 Available in Smart Slider 3 Pro – Full Page Portfolio
Smart Slider offers a full page portfolio slider that can truly work on your homepage. It can be used as a hero header on your website. It fills the full width and height of the browser, and you can switch the next slides with scrolling. The layer animations make this homepage slider more exciting, the main image loads first, and then the content displays.
👍 Why it works: I like these modern colors and animated shapes! And there are many cool things in the slider like the highlighted heading, which highlights an important text, the button, which you can navigate to the next slider or the counters which makes the slider more interesting.
5. Winery showcase
🎓 Available in Smart Slider 3 Pro – Winery
The winery slider is a great example of how many options are available to showcase a product. This showcase slider can introduce more products next to one another and helps you to sell those wines. The active slide is in the middle and by clicking on the next or previous slides you can forward or backward to see the others.
👍 Why it works: There’s nothing confusing about this slider. The goal is that the visitor will click the buttons and buy the product. The layer animations are unique on each slide, and because of this movement, the visitor will focus on the bottles.
6. Full page video to your homepage
🎓 Available in Smart Slider 3 Pro – Full page video block
When you browse the web, you can encounter lots of videos on the homepage of the sites. Videos can call the visitors’ attention and are great design elements. In this video slider block, you can navigate to other pages, so it can be used as a navigation block on the top of the page.
👍 Why it works: The slider is simple, but the visitor can see enough information. What I really like about this slider is that it’s truly fullscreen, and because of this, it can be a great starting point of a page.
7. Podcast homepage block
🎓 Available in Smart Slider 3 Pro – Podcast block
For the first impression, this slider can look crowded however if you look at it more thoroughly, you will think that every element is important and well organized. This podcast slider stands out of the crowd and contains interactive elements: a CTA, icons which point to the social media, and an audio file that you can play.
👍 Why it works: In the background of this podcast block you can see a particle effect. Just move your mouse over the content, and the particles will move. This can be a cool effect when the visitor hovers over the block, and they will like it.
8. Renovation Full Width Slider
🎓 Available in Smart Slider 3 Pro – Renovation Full Width Slider
This slider uses a simple but different color scheme for each slide. It has a layer parallax effect to breathe some life to the slides. Additionally, it has a papercut Shape Divider enrich the visual experience. There’s also a custom navigation that helps visitors browse the slides.
👍 Why it works: The slider is simple looking, but has nice effects to catch the visitor’s attention. Each slide looks unique due to the different color scheme. The Shape Divider gives the final touch, making the bottom of the slider more interesting and less sharp.
9. Team homepage slider
🎓 Available in Smart Slider 3 Pro – Team slider
This slider focuses on the members of a team. It gives a nice, personal touch to a company’s website, and helps build trust in the customers. You can navigate with the arrow on the bottom, or with the thumbnails on the right side. The numbers of the top help the visitor to find out how many slides are available, and which one is visible.
👍 Why it works: This slider is beautifully composed. It’s obvious a lot of time and design has been put into this slider with each of its elements working together in harmony. It’s a great example of a slider that takes the concept of slideshows to a whole new level.
10. Layer Slider Example
🎓 Available in Smart Slider 3 Pro – Layer Slider Example
Everyone loves fancy transitions on their website, they help catch the visitors attention. The goal of that slider is to call the visitor to an action, the buttons and icons are waiting for a click. It is important to have a visual harmony among the layers and the background, this makes the slider complete.
Maybe it looks easy to put layers one another. However, if the contrast between the layers and the background isn’t enough, you can use a gradient background overlay to add a color to your slider, like in this Smart Slider example.
👍 Why it works: The animated heading attracts the eye and the visitor will click on the buttons and icons. The last slide is my favourite, there is a background video with a HTML layer which contains a contact form, and gets the visitor to do something.
11. Hotel homepage example slider
🎓 Available in Smart Slider 3 Pro – Full Page Hotel
This slider is a great example of how useful it can be to use rows and columns and creating a structure in a slider. There are a lot of different types of layers: heading, text, button, and a nice counter with animation. The background is moving a bit, this Ken Burns gives a movement to the slider. With the boxes, you can navigate to the next and previous slides, and they show up an image when you hover over it which is a really cool effect.
👍 Why it works: The slider can be used as a starting slider on your homepage. The row on the bottom contains every useful information in an attractive way. The Shape Divider makes the illusion that this row overlaps the slider, which cheers up the design.
12. Agency Landing Page
🎓 Available in Smart Slider 3 Pro – Agency Landing Page
Can you believe that with sliders you can create a whole page? Just imagine that you put sliders under one another, and use them as a landing page like in the Agency template. Use events to navigate to other slides, and you won’t have problems with the responsiveness neither. This slide group is clearly inspired by the idea of building, and the technological side of online presences.
👍 Why it works: The sliders are passing to each other and are in harmony. On the top there is a simple navigation with links where you can scroll to another slider. All you need is a minimal template, then customize the sliders and use it in a simple way.
13. Broken Grid Slider
🎓 Available in Smart Slider 3 Pro – Broken Grid Slider
This stunning slider is a new addition to the Smart Slider 3 template library and while it looks simple at first, there are quite a few different design effects going on. For a start, it has a broken grid layout, which has become a popular website trend in recent months and is unlikely to disappear anytime soon. When you hover over the slider, it shifts using a delightful parallax effect that will bring your static images to life. Then there’s the white Shape Divider in the background that helps makes the images pop. On top of all that, there are lots of controls for sliding through the images: navigational arrows, bullet controls at the bottom, and you can also click and swipe.
👍 Why it works: The layer parallax gives a special effect which you can’t encounter on every second website. It makes the slider unique, and with the broken grid layout your site will have a modern look. This slider can be a good hero slider on the top of your page.
14. Full Page Fashion Slideshow
🎓 Available in Smart Slider 3 Pro – Full Page Fashion Slider
What I love about this slider is that it’s a perfect example of what you can achieve with great photography, well-chosen slider elements, and thoughtful design. The primary focus of each slide is the transparent image to the left, but behind each of the models is a fixed shape with a subtle parallax effect. The heading, text and CTA give visitors clear direction on where to click to buy. There are also plenty of controls available to move through the slides, including navigational arrows on the left, numbers on the right (which also indicate how many slides there are), and a thumbnail of the next image in the slide so visitors know what’s coming up next.
👍 Why it works: Every layer has their own role, the heading draws the visitors’ attention, the arrows and numbers help to navigate and the thumbnail shows what is on the next slide. The buttons can be used as call to action elements, by which you can give the visitors something to click on and navigate to another page.
15. Homepage Product Slider Example
🎓 Available in Smart Slider 3 Pro – Homepage Product Slider Example
You wouldn’t think this is a slider, but it is! As you scroll down the page, each page animates, displaying a different fullscreen background color, varied images, text and a final prompt to download the app from the Apple App Store. It’s a simple concept with (literally) so many moving and animated parts.
👍 Why it works: The animations work in harmony together, come after each other. It makes the slider clean and modern. This isn’t a traditional slider, you can use it even by itself on your homepage. The scroll down animation helps the visitor navigate and check more information and details about your product.
16. Colorful Full Width Slider
🎓 Available in Smart Slider 3 Pro – Colorful Full Width Slider
This colorful slider is one of the best examples for a fullwidth slider. The layer parallax effect with the highlighted heading makes the slider powerful and awareness-raising. With that highlight you can focus the most important part of the slider. The colors are in harmony and the heading is more readable because there is a strong contrast between the color of the heading and the background.
👍 Why it works: With the animated highlight the visitor can focus on the most important message what you want to highlight, but the CTA buttons are the main part of the slider too. Clicking on them makes a few more layers show up with a nice animation, and shows more information about your project.
17. Autoplaying Static Slider
🎓 Available in Smart Slider 3 Pro – Autoplaying Static Slider
The fullscreen slideshow with a static text and varied backgrounds is an eye catching way to display your information which can attract people. The static slide is always above the other slides which moves behind it. In this case the layers will get more attention because they are always visible. And the autoplay indicator shows you that the slider is live and something will happen.
👍 Why it works: A static slide is always visible and you should create it once. This is a good way to show your logo or watermark but it is a good way to put a text there which needs attention. And the autoplay with the animation in the background makes it more noticeable.
Creating Your Own Beautiful Homepage Slider with Smart Slider 3
With Smart Slider 3 you can easily create beautiful home page sliders. If you like any of the Smart Slider examples above, you can use them — just import them into your WordPress install when you sign up for Smart Slider 3 Pro.
