1. Hero Header Slider

Let your creative side shine with the Tattoo Studio slider template. This template has a sleek and contemporary design that not only looks great but also adapts perfectly to any device, providing a smooth experience for everyone.

2. Product Carousel

Spice up your product showcase with the Full Width Product Carousel template, a cool slider that effortlessly combines style and practicality. By using the Carousel slider type, this template offers a visually stunning full-width layout, ideal for showcasing products and captivating your audience.

3. Blog Post Carousel

This kind of slider example lets you display your latest WordPress posts using your featured images as the background. What’s more, with Smart Slider 3 your post carousels will update dynamically each time you publish a new post. That means you can focus on your writing without having to worry about manually updating your slides in WordPress.

4. Logo carousel

Displaying the logos of the businesses you work with is a proven social proof technique, i.e. if Pizza Hut works with you, you must have a great business. With a logo carousel like this one, you can easily display client logos in a prominent space on your Homepage or About page. Plus, with infinity scrolling enabled, it will instantly catch your visitors’ eyes.

5. Instagram Carousel

Upgrade your website with the Instagram Carousel slider template and bring the vibes of your Instagram feed right to your website audience. This eye-catching slider effortlessly converts your Instagram posts into a captivating carousel, giving your website visitors a stylish way to dive into your content.

6. Fullscreen Slider

Take a cosmic adventure with our Undiscovered Universe slider template, created to take your website to new heights. Engage your visitors, by showcasing stunning visuals and enchanting animations that transport them to otherworldly places.

7. Landing Page

Treat your guests to the irresistible Bakery slider template, ideal for displaying the mouthwatering treats from your bakery. This demo website consists of five sliders that work together seamlessly, providing an engaging and informative experience for users.

8. Full-page Slider

Upgrade your content with the Office Exercises slider template, a lively presentation that blends captivating visuals, smooth animations, and easy-to-use navigation. Designed specifically for busy professionals, this slider is the ideal resource to showcase a healthier lifestyle and enhance your fitness content.

9. Shape Divider

The Animal Shelter template is a perfect blend of captivating design and visuals. Not only does it feature a simple slider type and full-width display, but it also incorporates subtle shape dividers, layer effects, and mesmerizing background animations.

10. Testimonial Slider

This testimonial slider features a minimalist design that is easy to read. The logos stand out and the photo helps visitors visualize who the quotes belong to. In addition, the navigation arrows and dots make it easy for visitors to scroll through and see other testimonials.

11. Groups of Sliders

Introduce your brand with ease using the Gibraltar template. It’s a simple and user-friendly solution that showcases a clean design and eye-catching layer animations. This template is flexible and can be used as a dynamic business portfolio or an engaging company website, providing various options to meet your requirements.

Wrapping Up

These are just some examples to show you what can easily be achieved with the right slider plugin and the right design. For more inspiration, check out the impressive sliders featured in Example Sliders, which include customizable sliders, blocks, and page templates.

Plus, you’ll be happy to know all of the examples featured in this article are available to customize with Smart Slider 3! Download the plugin for free today.

The post 11 Inspiring Slider Examples for Your Next Website appeared first on Smart Slider 3 — WordPress Plugin.

Conclusion

Sliders are dead, long live sliders! But seriously, gone are the boring, ugly, and hard-to-use sliders that were around 10 years ago. Modern sliders using 2024 design techniques are stunning. They use optimized high-quality photography and elements that were just not possible to implement back in 2013, such as complex previews and advanced accessibility, layering, and animations.

I hope the examples above inspired you to explore what’s possible with homepage sliders. For more impressive homepage slider examples, don’t forget to check out our Example Sliders.

The post 12 Inspiring Examples of Stunning Modern Homepage Sliders appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/wordpress-hero-image/ Fri, 09 Oct 2020 06:46:33 +0000 https://smartslider3.com/?post_type=blog&p=3839 One of the most important trends nowadays in web design is the WordPress hero image design. These special headers are often referred to as hero image, hero slider, banner, video header or carousel. Making a good first impression is incredibly important. You only get one shot with the first impression and you have only a […]

The post All About WordPress Hero Images From Idea To Implementation appeared first on Smart Slider 3 — WordPress Plugin.

]]> One of the most important trends nowadays in web design is the WordPress hero image design. These special headers are often referred to as hero image, hero slider, banner, video header or carousel. Making a good first impression is incredibly important. You only get one shot with the first impression and you have only a few seconds to grab your visitors’ attention.

In this article, I will introduce you to some of the best practices, hero image examples and provide incredible resources to help you create an effective WordPress hero image for your website.

What you can use a hero image for?

When you browse on the web you can encounter a lot of hero images with different goals. I collected some cases when you can use a hero image. Let’s see them.

• Highlight your product. The best way to highlight a product is a good hero image on your page. The visitors see this image first and can read small information about your product. Put a link on your Buy now page, and your visitors can instantly buy.
• Share information. You can use a hero image to share information about your product or services in another way. You can add text on the image, also you can add a video which gives information to the visitors.
• Feature the latest news. Do you want to feature your latest or an important post for the visitors? Put the title and a small description on the image, a button with the link of the post, and I’m sure, if it’s interesting, the visitor will click on it to read more.
• Design element. A hero image can be a great design element of your page, it is in the focus, cheers up your page, and usually gets interaction with the visitors.
• Create an emotion. Emotion can be a big factor. Evoking the right emotion can instantly build trust with your visitors.

How to choose a WordPress hero image?

When you choose a hero image, it’s important to keep in mind that your hero image not only needs to look good, its style needs to suit your whole website. If you use emotional hero images, think about the mood of your page. The images can be full page but smaller images also can be featured below the navigation bar. These large banner images are a trend in web design and precede an overview from your business, so you should choose a suitable image for your page.

Where to find the best free resources for a hero image?

Good images are a key part of a great hero image but finding images can be difficult. Here is my collection of the best websites to find free photos and videos.

• Unsplash – High-resolution photos
• Pexels – Best free stock photos in one place
• Picjumbo – Totally free photos stock images
• Kaboompics – Great place to get breathtaking free pictures for business or personal projects
• Death to the Stock Photo – Free photos by email every month
• Coverr – Beautiful, free videos for your homepage
• Pikwizard – Free stock photos for all your creative needs

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

What should a good hero image contain?

A WordPress hero image presents an overview of your service or product. It can be a simple image, but it is more successful if you use the content on it, like a CTA. Let’s see the 4 important parts of what a hero image should contain.

Call to Action

CTA button is the action you want your visitor to take, so your goal with the hero image is to persuade visitors to take this action. It doesn’t matter if your goal is to increase sales or generate email leads. But don’t forget you have to be clear about what action you want the visitor to take and make it as easy as possible. Okay, but how to start? Start with the CTA and work back. It will be so much easier if you know your goal exactly.

Good copy

The first headline your visitor sees is the most important copy you’ll write on your website. Writing a good web copy isn’t easy and it requires skills to get it right. Some of the best copywriters will spend weeks just crafting the headline. Your goal is to communicate your value and get the visitor to interact on your website.

Quality background

Probably imagery is the most important part of the hero image. It’s a powerful tool to help you communicate and differentiate your website. Your hero image should contain images, videos or graphics that catch the eye and captivate your audience. Mostly contextual images convey your message more effectively, non-contextual images don’t supplement the message with any additional information.

Live Preview

Impact

It’s all about creating that WOW moment. The best hero images achieve a balance between capturing the reader’s attention and providing an adequate amount of useful information.

For example, animations are great for making a website design unforgettable and grab your visitors’ attention. The key to animation as a design tool is moderation. There are many ways of using animation to improve the user experience in Smart Slider 3: layer animation, split text animation or memorable interaction.

How to create a WordPress hero image easily?

Now may you want to put a hero image on your page, but you don’t know how to do it. The best if you search a plugin in which you can create a hero section for your site easily. With a plugin in the ideal case, you can put a text or a button on the image, and you can publish it where you want. Smart Slider is a great plugin to create hero images.

What is Smart Slider 3?

Smart Slider 3 is a free slider plugin with which you can easily create sliders, hero images and blocks without coding knowledge. With the drag and drop editor, you can build the block you want, and use layers like heading or button. It is fully responsive, and when you are ready, you can publish it with a simple shortcode, with Gutenberg or with a page builder, too.

Because Smart Slider 3 is not just a slider plugin you will be able to create the perfect WordPress hero image for your website easily. No matter what type you need, they’re typically located at the top of a website and these are the first things that people see.

Create a hero block

The block type is a special slider type of Smart Slider. The block displays only a single slide, which is a perfect choice to create a hero image. Creating a hero block with Smart Slider is very simple. Just click on the green new project button, and create a new project or start with a ready to use template.

Then you can edit your block in a visual editor. In the free version of Smart Slider, you can choose from 7 layers, in the Pro version there are 24 types of layers. You can put a layer where you want, change its color, size or put a link on it. Also, you have the option to animate your layers, which can call the visitors’ attention.

Why choose Smart Slider to create hero images?

• Drag and drop visual editor. With Smart Slider, you can edit your WordPress hero images as you imagined. The drag and drop editor helps you to create a hero block in minutes. With the responsive settings, you can make it look good on any device.
• Animations & Effects. In the Pro version of Smart Slider 3, you can use animations and effects to cheer up your hero image and call the visitors’ attention. Use the Ken Burns effect if you want to add a movement to your hero, or use layer animations to highlight content.
• Dynamic sources. Dynamically changing content on your hero block? It’s possible with Smart Slider 3, just create a dynamic slider, and use variables.
• Easy to publish. You can easily put a hero on your homepage, just use your page builder, the Smart Slider Gutenberg block, or the slider’s shortcode. As an alternative, you can use the PHP code of the slider and put it on your child theme.
• SEO friendly. SEO is crucial to make people find your website. In Smart Slider, you can fill the alt tags, and you can add text which the search engines can read.

What should you care about when you create a hero image?

• Focus on the content. The power of a large hero image is in the content. Focus on the most important part of your text, catch the visitors’ attention with an interesting heading and description, and use a Call to Action button. Don’t use too much text, keep the harmony between the image and the content.
• Use the correct image size. The speed of your page really matters. Don’t work with too big images, because it can slow down the loading time.
• Make the text readable. If you have text on your hero, take care of the legibility of your text. Use one of the popular hero image techniques such as text background or blurred image.
• Take care of SEO. Never burn text in your hero image. Use a plugin like Smart Slider which works well with the searching engines, and fill the image alt tags.
• Check it on different devices. Always pay attention to make your hero responsive. The image and the text should be legible on each device.

Popular WordPress hero image techniques

Perhaps the biggest challenge for a non-design user is creating a beautiful new WordPress hero image with Smart Slider 3 because there are an infinite amount of ways you can start. Below, I will show you the most popular examples and basic techniques on how you can use the imagery in the header of your website and make an awesome first impression.

Overlay

It’s really hard to make text stand out when it’s been laid over an image or video. The lack of contrast will cause readability issues and the last thing a visitor wants is to guess what they are reading. The overlay is a really simple method to lighten or darken your background and get a higher contrast. In Smart Slider 3 simply pick a color and set the opacity for your background. Try to find a perfect color and balance with the overlay, over and above don’t hide too much of the image.

Text Background

If you don’t want to hide the background then you can add a background behind the text rather than the entire hero image. Basically, you can pick the color of the background for every heading and text element in the layer window in Smart Slider 3.

Blurred Background

Blurring is one of the best ways to capture the essence of an image and improve the legibility of the copy. You can add a blur effect to your background at the Style tab of the slide.

Composition

If you have a great photo that has a safe space for the text then you shouldn’t hide the background with an overlay. Try to find the best place for the text which doesn’t impede the visual flow. Don’t cover faces or busy parts of the image!

Solid Background Color

Sometimes less is more and your website can be better if you eliminate the background image entirely. This design technique allows typefaces to be dramatic and have a strong visual impact. It’s an ideal opportunity to experiment with typography, layout and colors!

Video Background

Using background videos and animations can also add an interesting dimension to a hero image. When executed well, this method can enhance a page’s content. With Smart Slider 3 you can use background videos easily and enhance your hero image and make the user experience better. The quality and length of the video have to be top-notch to convey the message because the video definitely slows down your site. Not every website can benefit from this technique but it can be an enormous benefit to the overall design and branding.

5 hero image examples

Do you want to get inspired? I’ve collected 5 beautiful examples of hero images, each hero block is special, and the best thing is that you can import all of them from the Smart Slider’s template library, and customize it as you like.

1. Security Block

The Security Block is a great example of a hero image that you can use on your service page. This block has 2 versions: a free and a pro that you can use in Smart Slider. All the content is customizable, you can freely change the heading, the text, the links, colors or the images.

2. Traveler Hero

Want a full-width hero image? The Traveler hero was planned to a traveler blog or page, where the featured image could be the destination that your page is about. The CTA-s like the Explore Now or the social buttons can help you to inform your visitors, and build a social community.

3. Podcast WordPress Hero Image

Do you want a focus on the content of your hero? In the Podcast Block, you can organize your podcast. There are trending colors and a well-structured design which you can fill with your own blog content.

4. Crypto Hero Block

The Crypto Hero block is a special hero with their animations and effects. The animated heading layer with the typewriter effect and the particles in the background make your page come alive. The focus is on the animated text, but the CTA stands out with its blue color.

5. Headphone product hero image

Do you have a product page? Display your product images in a hero block in an interactive way. The main picture is a big headphone, and under that, you can see small images, and if you click on them, you can check other images from your product in a lightbox.

Conclusion

There are many ways to design WordPress hero images with Smart Slider 3 and you can choose from lots of techniques and trends as well. Oftentimes, these hero images are the first things that people see on your website so try to help them to quickly understand the value of your website. Download Smart Slider 3 for free, or buy a license for the Pro version. Good luck with your hero image and happy designing.

The post All About WordPress Hero Images From Idea To Implementation appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/full-page-slider/ Mon, 27 Apr 2020 12:00:35 +0000 https://smartslider3.com/?post_type=blog&p=15914 Sliders and carousels are popular web design trends in their own right. An interesting application of this type of web page element is the full page slider. I’m sure that you have encountered this type of slider on a lot of websites. But what is a full page slider and why is it good? Read […]

The post What is a Full Page Slider and How to Use it? appeared first on Smart Slider 3 — WordPress Plugin.

]]> Sliders and carousels are popular web design trends in their own right. An interesting application of this type of web page element is the full page slider. I’m sure that you have encountered this type of slider on a lot of websites. But what is a full page slider and why is it good? Read the article and you will know everything about the full page sliders.

What is a Full Page Slider?

A full page slider is practically synonymous with the concept of a hero image, which refers to any large header design. A WordPress hero image can be described as a large banner image prominently placed on a web page. More specifically, a hero image, like a full page slider, is generally placed at the top of a web page and fills the whole screen.

Many full page sliders are photographs that relate directly to the content, but several web designers have incorporated the use of additional types of media that include backgrounds, illustrations, and even videos. It can help create a positive first impression, and with the CTA elements you can navigate the user.

The full page sliders are available in the Pro version of Smart Slider 3, it is easy to use and fully responsive. Browse our gallery of full page sliders to see what this concept looks like in action!

Why should you use a Full Page Slider on your site?

Full Screen Sliders like Hero images, have earned their place in today’s top website design trends because of the many benefits they provide to those who use them. Here are just a few reasons to consider why to put full page sliders on your website:

• They catch attention. New visitors of your site only have 0.05 seconds to form an opinion about your website and you want your first impression to be a good one.
• They add a personal touch. Use a full screen slider to show off products or services (or both!) in a way that’s unique to your company and branding.
• They help build trust and credibility. Having a full page slider can help give your visitors an idea of what the site is about and can help build a positive first impression.
• They direct users to a link or call-to-action. You can use buttons if you want to give the visitors something to click and take an action.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

How to create a Full Page Slider in WordPress?

The simplest way to create a Full Page Slider in WordPress is to find a slider plugin that has an option to create full size sliders. For example, you can use Smart Slider Pro to create such sliders. In fact, Smart Slider makes it very simple to create a full size header slider for your website, as you can enable the full page behavior with one click.

Settings of Full Page Slider in Smart Slider 3

With Smart Slider 3 Pro you can easily create a full size homepage slider, all you need is to choose the Full page layout in the Slider settings. If you use this layout, your slider will have full width and 100% height of your screen. It is fully responsive, so in mobile and tablet you can achieve the same full page behaviour.

The Fullpage layout works the way that it calculates the size to the full screen. But it can happen that you have a menu above the slider and you want to decrease the slider height to adjust it to your menu. In this case you can use the modify slider height option with which you can set a smaller height to your slider.

A frequent usage is to navigate a full page slider with vertical scroll. You can turn on this scroll control at the General settings and even you can set the main animation to vertical.

Types of Full Page Sliders

Full page sliders can be configured to display many different types of content, and have a few practical usage:

• Product sliders. They give the visitor an idea of what your website is about right off the bat.
• Founders or owners of site. This is the most important for people who try to establish a personal brand. Showing prominent images of themselves makes visitors start to see and trust them.
• Contextual sliders. Best for services as they give visitors an idea of what the website is about by providing an image to demonstrate a concept.
• Non-contextual sliders. These sliders don’t necessarily give an idea of what the site is about but are used because they are trendy or look visually appealing.

How are Full Page Sliders used

There are multiple use cases to consider when it comes to using full screen sliders:

• Single page design: Full size sliders add a great aesthetic to single page designs, breaking up the rest of the text content in an appealing way.
• Full-screen background: If your company or offerings are visually-focused, using a full page slider can help you draw attention accordingly.
• Featured post content: Running a news site? Magazine type themes and featured posts that make use of full size sliders draw attention to trending content.
• Rotating Galleries: Great for showcasing products or portfolio work when there’s more than one item you want to draw attention to.

Full Page Slider Best Practices

If you’re still a little confused as to how your full page slider design should shape up, consider these best practices.

1. Be picky when choosing hero images

Non-contextual images can disrupt the UX and these types of images often distract from the message. So choose images that reflect the website’s theme, purpose or campaign. Watch out as to whether the image truly adds value or not.

2. Optimize image sizes

Using large images can affect loading times, especially for mobile. As a result, a delay in page loading time can affect multiple aspects on a website: customer experience, sales, SEO, conversion, and revenue among them. In Smart Slider 3, there is a lot of options with which you can speed up your slider, but the best is if you optimize your images before you upload it.

3. Choose images that have an emotional appeal

Humans are emotional creatures, if you want them to act a certain way, you have to make them feel emotional attachment to something.

4. Use high-resolution images

Your hero image will be located in the front and in the center on your website. Besides being aesthetically displeasing, having a pixelated image shows that you don’t care about the small details on your website and customers may assume that you don’t care about them either.

5. Emphasize the CTA

Technically, your full page slider doesn’t have to have a call-to-action but you should definitely make use of this feature when relevant. Design the CTA in a contrasting color compared to the hero images color palette to truly catch attention and get people to act.

6. Consider designing for different screen sizes

More people use mobile devices to access the internet and mobile responsiveness is an important cornerstone of Google’s search algorithm. Because of this, make sure that you’ve chosen a responsive slider plugin like Smart Slider 3.

Full Page Slider Examples

Creating a gorgeous full size slider can be challenging. Here are 5 gorgeous examples to inspire you and give you cool ideas to create your own full page slider. All templates are included in Smart Slider Pro and you can download them with one click.

Full Page Portfolio

Live Preview

The Full Page Portfolio slider is a great way to introduce yourself or your business to the visitors of your site. It has a modern design that contains all important information. Additionally, it’s super comfortable to browse on all screens. On desktop, a single scroll can switch slides, while on mobile tapping does the same.

Static Slider

Live Preview

The Static Slider is perfect for creating a hero header. It’s content doesn’t move at all, however the images in the background keep rotating. There’s a Shape Divider on the template, that looks like a large, downward pointing arrow that indicates the visitors that there’s more to see below the fold.

Flower Shop

Live Preview

The Flower Shop slider grabs the attention with its modern animations first. The image slides in slightly, then the texts are revealed in perfect harmony. You can find trendy pastel colors in the template, which make it suitable for any modern website.

Cosmetics

Live Preview

The Cosmetics slider is a kind of full screen slider, that doesn’t look full screen. It takes up the whole width and height of the page, but it has a white border, keeping some distance between the edge of the screen and the images. As a result, the Cosmetics slider looks absolutely stunning and very unique.

Full Page Hotel

Live Preview

The Full Page Hotel slider, similarly to the Cosmetics above, is a kind of full size slider, that doesn’t completely look full page. At the bottom of this slider there’s a Shape Divider, creating the white line. This line covers the bottom of the image, but the slide content appears above it. As a result, the broken grid effect is created, which gives a modern look to the slider.

Final Thoughts

Full page sliders are not only design elements, they can be an important part of your page. They catch the visitor’s attention and add a personal touch.

Use it on your homepage and the full page slider will give the first positive impression about your website. With Smart Slider 3 Pro you can easily create a full page slider, and you can customize it to your website content. Give it a try, you won’t regret it!

The post What is a Full Page Slider and How to Use it? appeared first on Smart Slider 3 — WordPress Plugin.

Beautiful Avada Slider Examples

Do you need inspiration to integrate beautiful sliders to you Avada theme? Check out the following examples with Smart Slider 3!

1. Static Full Page Slider

Avada’s Cryptocurrency demo looks gorgeous with a full page slider. I chose the Static Slider demo, because its shape divider fit so well to the white section below.

2. Colorful Full Width Slider

SEO is an important part of every website. No wonder ThemeFusion created a beautiful website template targeting agencies who provide SEO services. The Fullwidth slider demo is a perfect fit for this template.

3. Full Page Hotel

A full Page slider gives a nice touch to any website. Avada’s Hotel demo is no different. You can easily add the slider to this demo by disabling the default slider first. Then add the slider you made with Smart Slider 3 using Fusion Builder.

Conclusion

When it comes to Avada sliders, you’re not just restricted to the slider plugins that come bundled with the theme — you can use whatever slider plugin you want!

So why not give Smart Slider 3 a try? The free version comes with more features and functionality than the bundled Avada slider options. Plus, it comes with regular updates and expert support.

The post How to Create a Stunning Avada Slider for WordPress appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/astra-theme-slider/ Sat, 28 Mar 2020 09:23:07 +0000 https://smartslider3.com/?post_type=blog&p=10371 In our busy world we can’t spend lots of time building websites, sometimes we have just a few days. But if you aren’t a developer, can you build a website? Can you make it in such a short time? Can you simply customize and make it responsive? Yes, it is possible! With the Astra Theme […]

The post Build Your Website Easily with Astra Theme and Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

]]> In our busy world we can’t spend lots of time building websites, sometimes we have just a few days. But if you aren’t a developer, can you build a website? Can you make it in such a short time? Can you simply customize and make it responsive? Yes, it is possible! With the Astra Theme and with a slider you can build a good-looking site just in a few hours. And with a slider you can cheer up your site. Smart Slider 3 is a great possibility to realize this in your Astra Theme.

In this article I will show you how you can build your website with Astra Theme and Smart Slider 3.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

About Astra

Astra is a very simple and customizable theme in which you can customize your own content. This theme has simple editing options. The Theme is available for free at WordPress.org and it has wide-ranging popularity. It has 1+ million active installs and 5/5 stars rating.

So you can trust it!

Astra is made for page builders, therefore you can customize it without a coding knowledge. You can change the design in the WordPress Customizer. Besides that it offers you ready to import websites. You should just install the Starter Templates plugin to get the beautiful layouts.

Using the Astra Theme is very extensive. You can use it for your blog or you can make an eCommerce, a small agency or a business website. You can change everything in the Theme, and can reach the result what you imagined.

It is important mention that Astra is made for speed. And this isn’t just a “marketing trick”, this is a real fact what the Theme promises. But I will write about that later.

Has the Astra Theme slider tool? Unfortunately not, and I miss it. Slider makes your site more expressive, but you can use the Smart Slider 3 plugin, and you can easily put it into your theme. So if you want to build a website using free tools, Smart Slider 3 with Astra Theme provides you a great option.

How about page builders?

Page builders are very populated in WordPress. You should just imagine what you want, and with simple drag and drop your website is ready. But a page builder can’t work well without a good theme. A theme should be optimized to be highly compatible for page builders.

Astra offers different solutions with which you can be sure that your website will look exactly how you imagined it. It gives you more space to focus on design. At the post and pages you can disable the header, title or the footer. You can switch a layout inside a post/page, and you can choose a sidebar option as well.

So Astra lets you customize every setting on every page, so you can simply personalize your website. You can focus on the content. There aren’t places what you can’t change with a page builder, if there is something, you can easily switch that off.

How about sliders?

Nowadays I can’t imagine a website without a hero image, and a slider is an extended version of that. In a slider there are multiple versions of your hero images which you can make your site even more professional with.

Sliders are particularly good design tools which allow images, videos and other content like CTA buttons. The content can be expressive and maximizes the space on your website as well.

When a person visits your website, it makes a good impression on them if your site:

• is easy to read,
• simple,
• clear,
• and good-designed.

And sliders can add these conditions for your website.

Tutorial: Astra Theme with Smart Slider 3 – Website in 1 Hour

Import a template from Starter Templates

In Astra there are a lot of free and premium ready to import websites. You should download just the Starter Templates plugin and you can choose which page builder you are using: Elementor, Beaver Builder, Gutenberg or Brizy.

Using these templates is a good choice, they look gorgeous, modern and can be imported easily. Some of the templates are only available in paid version, but there are a lot for free ones.
You can preview them and by 2 clicking you can import what you want.

First you should install the plugins which are in your chosen template. Finally you can import the site.

Import a slider from the Template Library

You have a ready template now and you need just a slider to the top. You can use slider easily in Astra Theme, and if you want to be ready fast, Smart Slider 3 has a Template Library as well. And you can import a slider from there.

In the Slider Library there are a lot of premium and free sliders, now I will import a free one.

After that you can customize your slider and you can put it into your Astra Theme. Adding to Astra Theme slider is very simple with your favorite page builder. You should just use the Smart Slider 3 widget, and you have a slider in your site now!

If you would like to learn about how you can publish Smart Slider 3, watch our video:

It took about 5 minutes to have a ready template on your site considering that you have looked around on the Astra Site and knew which Astra template you would use. Importing a slider and putting it in your template is not more than 5 minutes. So you have 50 Minutes yet if you would like to finish your page in one hour.

Now you should just personalize your content. Very fast, very simple and you can enjoy building a website.

Creating in Astra Theme slider for the heading part

With Astra Theme you can even make a custom header with Smart Slider 3. This is also simple, you can choose a widget type for header in the Customizing → Header → Primary menu.

Then in your Customizing menu → Widgets you can set the Smart Slider 3 widget.

You should just choose which slider would you like to display. And now you have a header on all of your pages with your slider.

But there are more options to apply your Astra Theme slider, first of all you can download the Astra Hooks plugin. With this plugin you can paste a shortcode fast everywhere on your page.

You should just copy and paste your sliders’ shortcode into a place where you want to display it.

So I can tell you there are a lot of options to make your own website.

How about speed?

The speed of your webpage is the most important thing what you have to consider. People don’t have lots of time to wait loading your site, so it should be fast. It depends on a lot of factors, but choosing a good Theme and a fast hosting can be the solution.

Astra loads only about 0.5 second. That is usually short, because most homepages load about 1MB. It is optimized for speed, and needs only 50 KB of resources to load. It doesn’t use jQuery, instead of that it uses Vanilla. And Astra Theme gets high ratings in all page speed test tools.

Smart Slider 3 only loads after everything else has finished loading on your website to be able to calculate the positions where everything should be. Normally it doesn’t take lots of time, but if you uploaded a high quality picture it can be slower. So most of the speed depends on the used rich media. But in Smart Slider 3 you have the opportunity to optimize your slider.

Smart Slider 3 offers a lot of speed settings for you in the Pro version.

What can you do to optimize your slider?

• Choose the correct image size: Use images where the dimensions are close to your slider size!
• Use device specific images: You can use device specific images what can be easily set, also you can optimize your images even better.
• Reduce the number of slides: Don’t use too many slides on your page! Furthermore you can display your images randomly. This is also an option in Smart Slider 3.
• Use the Smart Slider 3 image resizing feature: The Optimize tab → Layer image resize and Background image resize options can be really useful. They will resize the images to the sliders size automatically.
• Use the lazy loading: With this feature you can set up that a certain number of images load.

So Smart Slider 3 in Astra Theme takes care of your problems with the speed.

Final Thoughts

I can recommend Astra Theme to everybody who starts building a website now and doesn’t know which Theme to choose. It loads fast, it is clean and you can fully customize it. And it works fine with Smart Slider 3, hence you can take your site more professional.

Astra is a great decision if you like to use page builders, and Smart Slider 3 is the best choice to use a slider in your Astra Theme. With this Theme and with this plugin you can save a lot of time.

The post Build Your Website Easily with Astra Theme and Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/oceanwp-slider/ Fri, 27 Mar 2020 07:00:11 +0000 https://smartslider3.com/?post_type=blog&p=8230 A good theme is the basis of your site. If you would like to make a good impression on your visitors, you should choose a great theme. If you like using page builders, your decision will often come to OceanWP. OceanWP is a free WordPress theme that has a lot of premium features. It has […]

The post How to Add a Slider in OceanWP Theme appeared first on Smart Slider 3 — WordPress Plugin.

]]> A good theme is the basis of your site. If you would like to make a good impression on your visitors, you should choose a great theme. If you like using page builders, your decision will often come to OceanWP. OceanWP is a free WordPress theme that has a lot of premium features. It has more than 600,000 active installs and a five-star rating with many great reviews. Also, a slider is almost a default feature on websites. To use OceanWP slider, Smart Slider 3 can be a good choice for creating powerful, clean and beautiful site.

Why is OceanWP a good choice?

OceanWP is fully responsive and e-commerce ready, furthermore it integrates very well with WooCommerce. It’s designed to work with the best page builders, therefore works well with Elementor, Visual Composer, Divi, and Beaver Builder too.

It is always great when the theme customization options are integrated into the default WordPress editor. Here you can see a live preview of the changes you applied. In the customize menu you can set up different theme elements such as the header, footer, menu and sidebar. First of all, I can tell you that the OceanWP customize menu is very well collected, containing many settings. The WordPress customizer is where OceanWP really shines. With the extensions you get more and more options which you can customize your site.

Ocean Extra: recommended basis plugin

Ocean Extra is a recommended plugin for the settings. If you navigate to the Theme Panel, you have the option to enable/disable the customizer panels. You can upload your logo, favicon, similarly choose your primary color and typography. In the Theme Panel “My library” is available, where you can create your own template like custom header or footer.

With this plugin you get a detailed meta box under the posts or pages with the name Ocean WP Settings. There are a lot of options by which you can customize a post or page. I think this is one of the best features in the OceanWP with lots of options. You can add shortcode to many places, hide sidebar, change menu color or set a new header.

OceanWP Extensions: from OceanWP slider to the sticky header

OceanWP can be extended with free and even more premium plugins. You can buy separate extensions, or likewise a core bundle of extensions all at once. OceanWP has premium extensions like the Sticky Header or Footer which is the basis of many sites. One of my favourite ones is Elementor Widgets, it makes building your website easier with Elementor page builder. Navigation Widget, Ajax Search, Logged In/Out widget can be useful on your site as well.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

However, there are a lot of free plugins you can download to the theme. What I suggest is the OceanWP Extra, as I have written above. The theme offers lots of demos that you can use and customize on your site with the Demo Import extension. It is probably the easiest way to make a site quickly. OceanWP slider plugin is a Posts Slider, which means that you can make OceanWP slider with 1 or 3 posts or products.

The plugin generates a shortcode, what you can use. I think it’s a basic extension but it is simple and can be easily set up. If you would like to use on OceanWP slider with even more functions, I recommend you Smart Slider 3.

Smart Slider 3 as OceanWP slider

Smart Slider 3 can be certainly a great alternative to OceanWP slider plugin. It can be easy to use as the default OceanWP slider. It helps you create beautiful and complex sliders, and you can customize everything. The best part is that Smart Slider 3 is free, just like OceanWP. Also, it’s available in the WordPress Plugin Directory. The plugin is, first of all, fully responsive, clean and powerful, furthermore user friendly. Using Smart Slider 3 is easy to learn, which also helps a lot documentations and videos.

Smart Slider 3 can be a great free alternative to many premium sliders, but it is more than average image sliders. It has layers, beautiful effects and dynamic slide generators. You can autoplay between the slides and set up the time to change it. In this plugin you can also make a video slider with YouTube or Vimeo which makes your site morFe professional. Also, the plugin has more wonderful features in PRO version.

How to create responsive OceanWP slider free with Smart Slider 3

After installing Smart Slider 3, you can load an example from our demo page or begin to make a new slider. Smart Slider 3 has different layers which have their own settings and you can customize them. For example, you can change the font color and family of the heading and text layers or set background color. You can choose slide background image fill, and also you can add a background animation. After you have finished your slider, you can publish it.

Insert to the OceanWP slider with Smart Slider 3 is very easy with shortcode:

OceanWP has more opportunity to insert a shortcode. You can just easily copy and paste the slider shortcode into a post or page. Also in OceanWP Settings you can customize the position: before/after the top bar, header, title or footer. Or customize it with Elementor.

In OceanWP you have the chance to make a custom header or footer. This is like a template, and Smart Slider 3 is a good opportunity to use it as a custom header. The easiest way of making a custom header, when you use a page builder like Elementor.

• STEP 1: Navigate to the Theme Panel → My library, than Add New. If you use Elementor, choose Elementor Canvas template in Post Attributes, after that you can customize it.
• STEP 2: When you are ready, go to the Customize menu → Header → General, and set your Custom Header. That’s all!

Reasons to use Smart Slider 3 in your OceanWP theme

• Free: Smart Slider 3 is the most powerful free slider plugin in the plugin directory.
• Responsive: You can customize the slider easily for any mobile devices.
• User friendly: Drag & drop slide editor with intuitive tools.
• Easy to insert: using shortcodes
• Different layers: heading, text, button, image, YouTube, and Vimeo
• Customizable: Every inch of the layers and the slides, such as color, font or size etc.
• Design: It makes your site more professional

Dynamic Slider to your blog

Like the OceanWP slider plugin, the Smart Slider 3 also can create sliders from your posts. You should just once set it up, after that the slider will automatically refresh the content. That’s also easy to do, just choose to give dynamic slides to your slider and one of the WordPress generators. After that, a lot of settings appear, by which you can customize your dynamic slider.

I’ve made an example for you, where I’ve set 3 sliders. I used a free demo slider for the base. Than I gave the title and the date and the first 300 words of my posts as description. The dynamic post slider uses the post’s featured image as the slide background.

WooCommerce slider to your webshop

OceanWP is e-commerce ready, you can build easily an awesome webshops with WooCommerce. In the PRO version of Smart Slider 3 you can build your website to be more efficient and spectacular. You have the possibility of making a dynamic WooCommerce slider with a lot of settings.

With this dynamic slide generator, you can show the contents of your products. You can set up how your slides will look with the data of the first slide. You can put down layers, and use the variables to put those data inside them what you want there to be. In our documentation you can find more information about filters and variables.

Conclusion

I really liked this theme, I found a solution or setting for everything what I needed. OceanWP works very well with the page builders and it’s easy to use and learn. If you would like to build a professional website free, you should try OceanWP with Smart Slider 3.

The post How to Add a Slider in OceanWP Theme appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/hero-slider-ideas-examples-and-inspiration/ Fri, 13 Jul 2018 08:00:14 +0000 https://smartslider3.com/?post_type=blog&p=9274 One of the biggest trends in web design and WordPress in recent years has been the use of big images. And not just large, but completely oversized images that come to life on screen. When used at the top of the page, they’re known as hero headers. But what I want to tell you more […]

The post Hero Sliders in Web Design: Ideas, Examples and Inspiration appeared first on Smart Slider 3 — WordPress Plugin.

]]> One of the biggest trends in web design and WordPress in recent years has been the use of big images. And not just large, but completely oversized images that come to life on screen. When used at the top of the page, they’re known as hero headers. But what I want to tell you more about today is hero sliders.

What is a hero slider?

A hero slider extends the idea of a hero image, allowing you to present multiple hero images in sequence, using captions, transitions, and animation.

A hero slider is defined as a large, featured series of images prominently displayed on the homepage.

What’s so impressive about this hero slider on the Lonely Planet website is a number of things:

• It features four stunning photos, which you can scroll through at your leisure, or sit back and watch it on autoplay.
• There’s clear navigation at the bottom – each image has a description that puts it into context.
• There are clear calls-to-action labelled “Read More” that direct the reader to complete the desired action.
• When you click on the navigation, the autoplay stops so you can focus 100% on each image.

First impressions count, and this hero slider makes good use of Lonely Planet’s extensive archive of beautiful travel photography, making a strong first impression on would-be travelers.

What’s more, Angie Schottmuller describes a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade”.

So a hero slider isn’t simply series of large photos – they are large photos that complement your value proposition – in the case of Lonely Planet, beautiful travel locations – to provide clarity and context to your visitors. It’s a series of photos with a purpose.

Why Use a Hero Slider?

To really understand why hero sliders work, it’s important to understand some basic psychology behind how people judge your website. How visitors perceive your website plays a crucial role in how they interact with it. People feel happy when they see a website that:

• instantly makes sense,
• is easy to read,
• clear, and
• understandable.

It doesn’t take long for people to make a judgment about who you are and what you represent, and a hero slider helps create a sense of ease, clarity, and understandability right away.

In fact, it takes only about 50 milliseconds (that’s 0.05 seconds) for site visitors to form an opinion about your site. That’s how long you have to convince visitors to stay and not abandon your site.

Inspiring Examples of Hero Sliders

Some of the world’s biggest brands have recognized the value of hero sliders and their ability grab a visitor’s attention, allowing them to deliver key information in an organized and focused way.

SpaceX hero slider

SpaceX, like Lonely Planet, provides navigation below its images so visitors know exactly what’s coming up – three images that promote the company’s endeavors around space technology.

What’s great about hero sliders compared to single hero images is that you can feature a mix of image in limited screen real estate while still keeping visitors focused on your key messages.

Hero slider at Lamborghini

Lamborghini also uses a mix of video and high-resolution imagery to show off its cars, because why not? An image of a car is good, but a video of a luxury sports car speed along an open stretch of road? Even better. It creates a visually stunning cinematic experience.

When viewed on mobile, the slider defaults to a hero image, allowing Lamborghini visitors to views the car without the need to download high-resolution images on devices with limited bandwidth or data allowances.

Spotify’s hero slider

Spotify’s hero slider is simple yet effective. It maintains the same gradient background image, but allows visitors to scroll through a number of messages and corresponding CTA buttons. Why does this work? It’s easy, clear, and understandable – users don’t have to think too hard about what Spotify is offering, just click a button and download Spotify for free.

Stunning Examples of Smart Slider 3 Hero Sliders

With Smart Slider 3, you can easily recreate any of the slider designs above and make customizations to suit the look and feel of your WordPress site. Give Smart Slider 3 a try for free! and s Here are a few great examples that show off what you can achieve with this versatile plugin.

Virtual Conference

This gorgeous slider is a great example of modern hero sliders. It’s large, features a nice image and has spectacular effects. For example, it uses an Animated Heading Layer on the first slide, immediately catching the visitor’s attention. It has textual thumbnails for navigation. They’re great to explain what’s on the slide for the visitor before they decide to switch to it. Also, it has a cool Morph animation to switch slides

SEO Agency

Introducing your business is one of the most important aspects of having a website. The SEO Agency hero slider is a great way to do that. It’s a full width slider that uses pastel colors and nice illustrations. This vertical slider has a custom navigation (with emojis) on the first slide, and also next and previous arrows at the bottom. Apart from these the mouse wheel can be used to switch slides, which makes the experience super smooth.

Flower Shop Slider

This beautiful layered slider is a great example of how you can achieve a simple overlapping look, complete with animations, using several transparent layers and elements. The focal point is the main image of flowers on the right with transparent images of plants layered behind it; on top, there’s the name of the flowers arrangement and the price, all put together in a neat, eye-catching stack. The “shop now” CTA offers clear guidance to visitors who are ready to purchase, while the thumbnails on the right help the visitor scroll through the flowers and see what’s coming up next.

Rotating Hero Slider

This example, designed for web development and hosting companies, features a bright and clean WordPress design. But what catches the eye is the smooth wave effect at the bottom of the slider that adds a sense of movement. Again, there’s a clear CTA. Above it are icons that visitors can click through to see the other slides. Or, they can use the navigational arrows in the bottom-right. This slider also features a smooth fade transition that’s pleasing on the eye.

Common Problems with Hero Sliders (and Their Easy Solution)

Unfortunately, hero sliders do have haters. It’s true. And it’s a shame because, as I’ve outlined above, hero sliders have clear benefits for both site owners and users. Some of the common misconceptions include:

• “Sliders are confusing.” – WiderFunnel, 2011
• “People ignore sliders.” – Nielsen Norman Group, 2013
• “People consider sliders as advertising and don’t take in the messages they display.” – Neilsen Norman Group, 2013
• “Sliders are bad for SEO.” – Search Engine Land, 2013
• “Sliders don’t always work well on mobile devices.” – Brian Krogsgard, 2013

What you’ll notice about each of those links is that they were published in 2013 (with the exception of one review, which is even older). Well, it’s now 2018, which in tech years is a lifetime! Design techniques have advanced immensely over the past five years, nullifying many of the assertions made against hero sliders in these posts.

For a start, hero sliders back in 2013 (thanks to Wayback machine) looked a lot like this:

Ugly, right? No wonder people hated hero sliders. In 2018, hero sliders look like this:

Stunning! I often trot out this example because it’s so freaking beautiful. If it’s not already obvious, the difference between hero sliders from 2013 and those created in 2018 is design. It all comes down to good design. But also, modern slider solutions, such as Smart Slider 3, provide modern features, such as layers, transitions, text editing, custom CSS, and more – that make it easier than ever to design stunning sliders like the Squarespace one above with little effort.

Clearly, designing and choosing images and video for your hero sliders is as much art as it is science. It’s also just as much about branding as it is conversions. Fortunately, there are frameworks that can help guide decisions around hero slider design.

Angie Schottmuller’s 7-step framework provides a set of questions to ask yourself when judging hero images and video:

1. Keyword Relevance – Does the image visualize the targeted keyword or referring link text?
2. Purpose Clarity– Does the featured image help identify the page purpose and/or offer?
3. Design Support – Does the featured image support and enhance seamless flow of page design leading to the CTA? (i.e. photo size, complementary CTA color, contrast, complexity.) Does the featured image have a subtle cue pointing in the direction of the CTA? If yes, +1 bonus! (e.g. eye path, lines, shadows)
4. Authenticity – Does the featured image represent the organization and offer in an authentic, credible fashion? (i.e. genuine, honest, believable, actual vs. stock photo, brand-aligned)
5. Added Value – Does the featured image add value by showing detail or context to improve relevance, demonstrate benefits, and answer questions?
6. Desired Emotion – Does the featured image portray desired qualities or emotion to resonate and inspire action? (Considerations: mood, lighting, scene, body language, colors, urgency)
7. Customer “Hero” – Does the featured image depict the customer as the “hero” once equipped with this solution?

The hero slider above from 2013 lacks all of these points. But when you look at the Squarespace slider from 2018, it’s obvious a lot of thought has been put into its design, and it checks off each and every one of the 7 steps in Schottmuller’s framework.

Ultimately, great hero sliders have great design. They aren’t simply a sliding series of images. They are designed with purpose and with the user at the center of that purpose. Because when you ignore the user, and basic design considerations such as clarity, authenticity and emotion, you’ve really just got a boring set of images that don’t make any sense.

Again, with your hero slider, you’re looking to complement your value proposition and create a great first impression. And a well-designed slider will help you do exactly that.

What About SEO?

“Sliders are bad for SEO.”

Yes, this is true of some poorly-designed slider solutions. But modern options, like Smart Slider 3, make SEO a priority. This WordPress slider plugin allows you to add alt tags for each of the images in your sliders, as well as each layer in your slider. This ensures your images are not only accessible, but searchable in Google.

What About Mobile?

“Sliders don’t always work well on mobile devices.”

This might’ve been the case five years ago, but nowadays, slideshow plugins like Smart Slider 3 provide responsive solutions for different devices, including:

• The ability to swipe through slides rather than click
• You can turn layers on and off for different devices
• The ability to optimize fonts for smaller devices

With these features at your disposal, you can ensure your hero sliders look fantastic on all devices, including desktop and mobile.

Ready to Create Your Own Hero Slider?

Hero headers are among some of the best and most visually appealing trends in web design in recent years, but paired with sliders, they have even more visual punch. When done correctly, hero sliders deliver context and clarity, helping visitors quickly understand what your site is about and what you have to offer.

A great hero slider needs great design, and thanks to solutions like Smart Slider 3, anyone can create a beautiful slider with little effort, using features like drag-and-drop, animations, transitions, buttons, and more.

I hope this tutorial has inspired you to experiment with hero sliders. Feel free to share your thoughts and questions in the comments below!

The post Hero Sliders in Web Design: Ideas, Examples and Inspiration appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/why-the-research-against-sliders-is-wrong/ Tue, 12 Dec 2017 13:48:00 +0000 https://smartslider3.com/?post_type=blog&p=5010 I’m tired of all the negative talk around sliders so I’m just going to leave this here… Yes, I know it’s the Squarespace homepage and yes, I’m well aware that this blog is on a site for a WordPress plugin. But you know what? The Squarespace website kicks WordPress.org’s ass. Why? Well, it’s beautifully designed […]

The post Why the Research Against Sliders is Wrong (and They Don’t Suck) appeared first on Smart Slider 3 — WordPress Plugin.

]]> I’m tired of all the negative talk around sliders so I’m just going to leave this here…

Yes, I know it’s the Squarespace homepage and yes, I’m well aware that this blog is on a site for a WordPress plugin. But you know what? The Squarespace website kicks WordPress.org’s ass.

Why? Well, it’s beautifully designed for one thing. And you know what else is really cool? Its sliders. That’s a big ol’ slider right there in the header.

When I first visited the redesigned version of the site after having not seen it for a while (I love WordPress, why would I visit Squarespace?!), it took me a few moments to realize I was looking at a hero header slider because it looked gorgeous. I mean, look at it. It’s stunning!

If you’ve been listening to the anti-slider brigade bleat on about how bad sliders are, spend a couple of minutes scrolling through the Squarespace homepage and then come back and tell me why sliders are terrible for user experience design, distracting, unattractive, slow and difficult to use… Those are some of the popular arguments against sliders.

Because I just don’t see it. Yes, sliders were pretty damn ugly five years ago, but I’d argue that they’ve come a long way since then and are now an essential web design tool that everybody’s using whether you realize it or not.

So in this post, I’m going to state my case for why sliders are making a comeback, attempt to shoot down the haters, and, hopefully, open your eyes to the possibilities that sliders offer.

Why Sliders Suck

Okay, you got me, sliders do suck – but only when they aren’t used or designed well.

Here are some of the commonly cited arguments used against sliders that have contributed to its bad reputation:

• Sliders are confusing – WiderFunnel, 2011
• People ignore sliders – Nielsen Norman Group, 2013
• People consider sliders as advertising and don’t take in the messages they display – Neilsen Norman Group, 2013
• Sliders are bad for SEO – Search Engine Land, 2013
• Sliders don’t always work well on mobile devices – Brian Krogsgard, 2013

Did you notice the commonality between the articles attached to those arguments? They’re all from 2013 except one (which was published in 2011, even older), which in tech terms is a lifetime ago. Web development and design have changed enormously since then, nullifying many of the assertions made against sliders as we count down the days to 2018.

It’s also important to note that the sliders talked about in those posts haven’t been designed all that well and are mostly hero headers – sliders aren’t exclusively used in headers anymore (though some are) and shouldn’t be.

To prove my point that sliders were ugly back in 2013, I used the Way Back Machine to find an example. Here you go:

Yes, it’s a slider for a competing plugin. Interestingly, Meta Slider is still the most popular free slider plugin in the WordPress Plugin Directory. Currently, it has 800,000 active installs and the same design it had back in 2013.

No wonder people think sliders suck.

Why Sliders Actually Work: The Research

Let’s take a look at a more recent study that shows – gasp! – sliders are a worthy design tool.

Kyle Peatt from Mobify, a mobile commerce and engagement platform, spent 11 months sampling approximately 7.5 million slider interaction events on several mid-sized to large eCommerce websites that do at least $20 million in sales per year.

Why invest so much time and effort into this research? Well, as a company that develops large-scale eCommerce sites for mobile devices, many of which have at least one slider, Peatt wanted hard evidence on whether the company was doing something wrong, i.e. doing a disservice to its customers by using sliders.

Instead of being reactionary and blindly following the negative noise around sliders, Peatt decided to do his own research.

The sampling he carried out on customer websites uncovered some interesting results, which I’ll compare here with data gathered by Erik Runyon. Runyon’s analysis of sliders for the University of Notre Dame is the most cited research when it comes to sliders sucking.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

1. People Do interact with Sliders

Runyon found that only 1.07% of visitors clicked on sliders in the featured banner sliders he examined for the university. For his research, he counted an interaction as a user clicking on a slide.

Peatt’s results, on the other hand, found that users interacted with product image gallery sliders at a high rate: 72% of users swiped through sliders at least once, while 23% directly interacted with sliders by zooming.

2. People Don’t Only Interact with the First Slide

Back to Runyon’s research. Of the 1.07% of people who clicked on the university’s sliders, 89.1% clicked on the first slide. The assumption would be that clicks on the second slide would trend down, right? Instead, Runyon found that clicks fell off the face of the earth – just 3.1% of all clicks.

Looking at Peatt’s results, he found that people directly interacted with the second slide of product image gallery sliders at a rate of 15.7%, and at least 64% of people advanced to the third slide – a roughly linear rate, not a steep drop.

3. Sliders Are Accessible

A lot of people assume that sliders aren’t accessible. I mean, you need to click the navigation arrows to see the next slide, right?

That may have been the case in years gone by, but nowadays sliders – like everything else on a website – are required to meet accessibility guidelines. The Web Content Accessibility Guidelines (WCAG) 2.0 provides rules for how to make sliders accessible for anyone.

Here are the guidelines in the WCAG 2.0 that relate to sliders and modern day sliders meet the requirements:

• Guideline 1.1 – Text Alternatives: Any text you create for a slider can be read by reader software.
• Guideline 1.2 – Time-based Media: Like any type of time-based media that is added to a slider, such as audio, video and captions, it’s up to the user to provide alternatives.
• Guideline 1.3 – Adaptable: Sliders can use both aria and role attributes to identify regions such as navigational arrows. Other semantic elements, like highlighting parts of the text by making it bold or italic, can also be done by sliders.
• Guideline 1.4 – Distinguishable: Depending on the sliders you’re using, it’s easy to adjust the color of every textual element, shape, arrow or bullet. For example, you could create a greater contrast between background images and layers by setting up a background color and lowering the image’s opacity.
• Guideline 1.4.2 – Audio Control: Sliders usually provide some way to control the volume or pause it.
• Guideline 1.4.4 – Resize text: Unfortunately, this can’t be controlled by sliders as the size of the text is usually based on the screen size.
• Guideline 2.1 – Keyboard Accessible: Sliders allow you to use your keyboard, including for links, arrows, bullets and other slide changing controls. For some sliders, when the keyboard captures the slider itself, you can use the arrow keys to switch slides.
• Guideline 2.2 – Enough Time: Autoplay and intervals are easy to set with sliders so you can ensure users have enough time to interact with the slider.
• Guideline 2.3 – Seizures: Sliders generally don’t force any kind flashing. While some sliders do feature flash effects, using it is the slider creator’s choice.
• Guideline 2.4 – Navigable: This guideline relates more to the general design of the website containing the slider, but for most sliders, you can select heading tabs and include links.
• Guideline 3.1 – Readable: It’s up to slider creators to provide text content that’s readable and understandable. As far as sliders are concerned, you can set font sizes and control their legibility.
• Guideline 3.2 – Predictable & Guideline 3.3 – Input Assistance: To meet this guideline, it’s up to the slider creator to consider the design of their site and slider.
• Guideline 4.1 – Compatible: The most popular sliders have been developed using valid code, the latest HTML standards, and work on any browser and device.

I should point out that the developers behind Smart Slider 3 have closely followed the WCAG 2.0 guidelines to ensure the plugin meets the relevant accessibility guidelines. This means that any sliders that are powered by Smart Slider 3 are accessible – so long as the user also considers the WCAG 2.0 guidelines and fulfills their responsibilities in satisfying the guidelines.

Is Slider Use Growing in Line with Mobile Use?

There are two important things to keep in mind when reviewing the findings above: Runyon’s data focused on a higher education website while Peatt’s looked at mobile eCommerce.

As Peatt highlights, sliders are “much more than a method of displaying marketing information on a homepage”, aka using a header slider.

“Because we focus on designing for mobile, one of our biggest concerns is making sure that we’re balancing information density with the limitations of small screens. That means making sure we’re always making the best possible use of horizontal and vertical real estate.” – Kyle Peatt

For Mobify, this means using sliders to maximize information density and maintain context without forcing users to scroll further down the page.

Sliders are better suited to retail and image-heavy websites, and when you pair these elements with mobile devices, you’re onto a winner. On mobile phones, it’s far easier to swipe through a slider of images than it is to click through a slider with a mouse.

It’s worth noting that the number of mobile phone users worldwide has grown from 4.01 billion in 2013 to 4.77 in 2017, and is anticipated to reach 5.07 billion in 2019. In addition, mobile now represents 65% of digital media time, while desktop is becoming a “secondary touch point” for digital users.

So as mobile use continues to grow and more and more people do their shopping online, I’d wager that slider use will grow too.

So… Should Websites Use Sliders?

Overall, Peatt concludes that the data opened his eyes to how much research is still needed on sliders. He suggests more data is needs to be collected on different types of sliders, how interaction with a carousel affects a user’s actions, and why swiping is one of the least-used interaction types.

Sliders aren’t automatically the best or right solution for every website. When it comes to marketing banners where users often exhibit “banner blindness,” the data shows sliders aren’t necessarily the best option. However, for product image galleries, they’re ideal because in this context, users know what the next slide holds and why they should view it.

Out in the wild, sliders are used liberally across the web – you’ve probably seen a bunch of them today and didn’t even realize it. So I’ve rounded up a collection of examples to show you how sliders are being used for just about any purpose and to show you the types of sites that are well-suited to sliders.

(I should also point out that you can create each and every one of the examples below using Smart Slider 3. It’s that good.)

Image Sliders

Marketplaces like Etsy, eBay and ThemeForest also use sliders so users can easily slide through product items.

You’re almost guaranteed to find sliders on any real estate website you visit, like realestate.com.au, for example. When you view a property on the site, images of the home are displayed using a gallery.

Even Tesla uses a slider to display the interior and exterior of its cars.

You’ve already seen one example from Squarespace’s homepage in this article, but if you scroll further down the site you’ll see the page is chock-full of sliders – and they all look stunning.

Sliders are ideal for hotel and accommodation sites like Airbnb that want to display a scrolling selection of options for users.

Amazon makes liberal use of sliders to display products on its homepage. The sliders it uses have been designed so you can see a hint of the next product in the carousel. It peeks out from the right, prompting you to click on the arrow so you can see the product image and description in full.

Now here’s an interesting take on slider design. On the Google Home Mini site, you can slide through different colored versions of the product using navigational arrows or by clicking on the corresponding colored buttons. As you advance through the colors, the background color also changes.

Testimonials

Almost every testimonial you see these days is in a slider, whether you’re conscious of it or not.

Take Help Scout, for example. The customer service and support platform uses sliders to display scrolling testimonials. Check out how awesome they look – the quote really “pops” thanks to the clean and focused design.

Uber uses testimonial slider to introduce a few of its drivers. The cut off image and text on the right indicates that there’s more to read.

Hero Sliders

Sliders are traditionally associated with hero headers and have copped a bad rap, mostly because they used to look really ugly and were difficult to use. Nowadays, improvements in web development and design have vastly changed how sliders look and function.

Microsoft uses a hero header to advertise its Surface Pro. There are multiple ways you can advance through the sliders – navigational arrows on either side of the image, buttons at the bottom of the image and a “play” button. It’s obvious that there are just two sliders thanks to the buttons at the bottom. The slider is also accessible so you can easily tab to move between the two slides.

McDonalds also has an accessible header slider, with clear navigational controls. It’s also obvious how many slides there are. The incentive for advancing through this slider is the chance of finding a deal.

Spotify uses a good old-fashioned hero header to advertise its premium sale. The messaging is clear and the CTA is obvious and highly clickable thanks to the use of contrasting colors. There’s nothing confusing about this slider – Spotify just wants you to “learn more” already.

The SpaceX hero slider scrolls through its missions quickly but the text navigation at the bottom lets you see what’s coming up so it’s clear what’s coming next.

Showcases

Sliders allow you to showcase your work or product, and even tease visitors with FOMO, as Lonely Planet does in the showcase slider below.

Likewise, National Geographic tell you “your wine adventure starts here” in its slider. Using a showcase slider, the magazine invites users to click through the images to see what else they might be missing out on.

Again, Microsoft uses a slider to showcase its Xbox One and the range of games available to play.

Like with anything in web design, there’s a place for everything and everything in its place. You just have to know when sliders are right for your users – and then design and configure them appropriately.

Tips for Creating Beautiful Sliders

If using a slider, or sliders, is a good fit for your website and would benefit your users, here are some tips to ensure you use them well.

• Design, design, design – The best sliders are beautifully designed (remember the Squarespace homepage?) and use high-resolution images.
• Use responsive design – Make sure your sliders are responsive and look great on every device, from big desktops to small mobile screens.
• Optimize images – Always use correct images sizes and ensure they’re compressed for fast loading. To help further speed things up, consider lazy loading images.
• Limit number of items in slider – As the research above clearly shows, interaction with slides tends to drop off after the first image. It’s best to stick to a maximum of 3 or 4 slides.
• Keep text to a minimum – A slider isn’t the place to display a lot of text. Instead, ensure any message you want to convey is clear and concise. And if you’re using a call-to-action button, use one or two at most.
• Use clear navigation – Ensure your sliders are easy to use. The idea here is that users shouldn’t need an instruction manual to work out how to use your slider. Sliders that use clear controls help to encourage interaction.
• Consider SEO – Ensure you’re using correct HTML tags with the right attributes.
• Consider Accessibility – Don’t forget accessibility. For more, check out the W3C’s guide to sliders and carousels.
• Always A/B test content – Hope isn’t a strategy – always A/B test your sliders so you know what content, navigation and other elements are working and not working.

Should YOU Use a Slider?

Yes… and no. Whether you use a slider or not all depends on the context. It’s silly to use a slider purely because you want to jam more content into a tight space. It’s important to think about whether the slider is appropriate for the page and the content you want to display and whether it will be useful for the user.

More research is needed into sliders and their effectiveness. The research often cited by slider haters is old and outdated. Web development and design have advanced considerably since 2013 when most of the research was released. While the Mobify data offers some insights into how mobile users interact with sliders on eCommerce sites, it would certainly be interesting to see new data on how users are interacting with sliders on non-eCommerce sites that use sliders for other purposes.

However, the Mobify research does clearly show that sliders are an ideal design tool in the right situations. Retail, fashion, photography, real estate – these types of businesses that heavily rely on imagery are ideal candidates for sliders, particularly as users have come to expect them when scrolling through image galleries when buying online.

If you do decide to use a slider on your site, be sure to consider the tips included in this article. No one likes a boring header slider – they’re so 2013. So do us all a favor and ensure you put time into designing your slider, optimizing images, using responsive design and making it accessible and easy for anyone to use.

The post Why the Research Against Sliders is Wrong (and They Don’t Suck) appeared first on Smart Slider 3 — WordPress Plugin.