When you hear the word “slider”, I bet you think of an automatically rotating banner. This banner is full of visual elements you might not even have enough time to check. Well, there goes the great user experience. Due to this there are tons of research out there saying that sliders are bad. Of course, we’ve already investigated why that is a misconception. Today, we’re going to explore how can you take advantage of an automated rotating slider on your site.
Automated rotating slider
A banner is one the most important part of your site. This is the slider the visitor sees first when they arrive on your site. So it’s crucial to have a well-thought banner with quality images and content. And, of course, it’s important to let the users know there’s more content for them to see. One of the best tools for this is creating an automated rotating banner. This way you can replace the slider’s content, images and texts alike automatically. Of course, this should happen after the visitor had enough time to learn what’s the slide about.
It’s critical to leave enough time for the visitor to read the content of each banner. Otherwise, they’ll get frustrated. Frustrated users might leave your site instantly without having a second thought. Providing a way to navigate back and forth between the banner slides are just as vital. This allows people to navigate through your slides and find the one that interests them the most.
Creating an automated rotating banner layout
When you create an automated rotating slider, you should always use quality content. This includes short, attention raising texts and good images. The colors are also important to get the visitor’s attention. For instance, if you have a CTA be sure that it’s easy to notice. Use different colors and greater font size or even another font family. Basically, do everything to make your CTA stand out but keep the nice and clean look of the banner.
Regarding the texts: make sure they have good legibility. Use font colors that have high contrast with the background and choose a font family that’s easy to read. When you create an automated rotating slider, avoid using lots of texts. People won’t have time to read them, and constantly having to go back is frustrating. Write short and clear text and rather offer a read more button if needed. This allows the visitors to learn more and lets you keep a nice and clean banner.
Best ways of creating the content of the automated rotating banner
Once you have your beautiful images and the perfect title it’s time to create the actual slider. To create the automated rotating banner example on the top of this page, we mixed Smart Slider 3’s two editing modes, Content and Canvas. Canvas mode works like PhotoShop, you can drag your layers anywhere on the canvas. Content mode builds your content using structures. It allows you to create a slider which has great responsive behavior. And the best part is, you won’t have to spend hours to achieve that. The good result is instant.
On this slider you can find all Content layers at the back of the slide. That’s right, the texts on the left and the image on the right are both in Content mode. This lets the texts keep their legibility on small screens, which is always good. You can also manage your layout faster and better. There’s only one Canvas mode layer, the one on the front showing a different person on each slide.
The banner rotates automatically after 8 seconds. This leaves enough time for visitors to read the texts and helps them know there’s more to see. There are stylish arrows at their disposal to speed up the slide rotating process. And just above every slide’s heading there are small icons which serve the same navigational purpose.
Quality content is crucial for creating a good automatically rotating slider. Keep the texts short to allow users to read it before it switches away. Use relevant and meaningful images to enrich your banner and grab attention. Use Content editing mode to can add your most important content. Then add some decorational content, like images and texts, using Canvas mode.
Related Post: 12 Beautiful Full Width Slider Examples