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.
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, “oversized” header design. A 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, front and center.
Many hero images are photographs that relate directly to the content, but several web designers have incorporated the use of additional types of media that include vector backgrounds, illustrations, and even video.
Browse our gallery of full page sliders to see what this concept looks like in action.
Why Use a Hero Image in Website Design?
Hero images have earned their place in today’s top website design trends because of the many benefits they afford those that use them. Here are just a few reasons to consider hero images/full page sliders on your website:
- They catch attention. New visitors to 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 hero image 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 hero image can help give your visitors an idea of what the site is about and can help build a positive first impression, especially if your website is one that requires trust, such as ecommerce websites.
- They direct users to a link or call-to-action (CTA). A great example is Melyssa Griffin’s website, where she’s facing her CTA, which directs you as a visitor to also look toward it.
Types of Hero Images
Full page sliders can be configured to display many different types of content. Here are a few practical applications with regards to hero images in full size sliders:
- Product images. Gives the visitor an idea of what your website is about, right off the bat. Examples include Bando, which sells cutesy products, and Yosi Samra, a shoe brand.
- Founders or owners of site. This is most important for people who are trying to establish a personal brand. Showing prominent images of themselves makes it so that visitors will start to see and trust them. Examples include Melyssa Griffin, Marie Forleo and Mariah Coz, who are all thought-leaders or sell online courses (Marie Forleo’s even has a video).
- Contextual images. Best for services, as these give visitors an idea of what the website is about by providing an image to demonstrate a concept. Products can also make use of this type of hero image if they are trying to sell a certain type of lifestyle. National Allergy, an ecommerce company that sells allergy medicines, shares an image of a doctor on their full page slider, instead of allergy medicines, to give the impression that their medicines are doctor-approved.
- Non-contextual images. These are images that don’t necessarily give an idea of what the site is about but are used because they are trendy or look visually appealing. Unfortunately, these types of images often distract from the message. Because of this, you should try to avoid using these images. Of course, there’s an exception to every rule. A successful example of a company that uses this tactic is 500friends.
How Hero Images are 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. Digital agency Mabbly uses this concept to show off their company’s greatest asset—their employees:
- 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. Here’s how Search Engine Journal uses a full page slider for their news content.
Rotating Galleries: Great for showcasing products or portfolio work when there’s more than one item you want to draw attention to. Here’s how ecommerce store Tanks that Get Around uses a full page slider to showcase products:
How to Design or Choose a Hero Image
Choosing a hero image is tricky because it is ultimately subjective. The factors and technicalities of implementation depend on what you are offering—service, product, or content. Luckily, Angie Schottmuller created a 7-step framework for judging and deciding on hero images:
- Purpose Clarity: Does the image clarify the purpose of the site?
- Keyword relevance: Does the image complement the target keywords?
- Design Support: Does the image support the design leading to the CTA?
- Authenticity: Does the image represent your brand in a credible way?
- Added value: Does the image add value, improve relevance or demonstrate benefits?
- Desired emotion: Does the image portray desired emotions that trigger action?
- Customer “hero”: Does the featured image depict the customer as the “hero” once equipped with this solution?
The benefits of incorporating the concept of a hero image with a full page slider involve the ability to showcase multiple images and addressing many different aspects of this framework.
Hero Image/Full Page Slider Best Practices
If you’re still a little confused as to how your hero image/full page slider design should shape up, consider these best practices:
- Be choosy when choosing hero images. As mentioned above, non-contextual images can disrupt the UX, so choose images that reflect the website’s theme, purpose, or campaign. Watch out as to whether the image truly adds value or not. It is advised not to use stock photos. Even though they are easy, cheap, and convenient to use, it is usually obvious that the image is a stock photo, and the hero image is supposed complement your offering or speak to your audiences— something a stock image cannot do.
- 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. Hubspot shares several case studies that have proven this to be true.
- 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.
- Use high-resolution images. Your hero image will be located front and center on your website. Besides being aesthetically displeasing, having a pixelated image shows that you don’t care about the little details on your website and customers may assume that you don’t care about them, either.
- 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 image’s color palette to truly catch attention and get people to act.
- Consider designing for different screen sizes. More people are using mobile devices to access the internet and mobile responsiveness is an important cornerstone of Google’s search algorithm. Because of this, make sure that your chosen slider plugin is responsive across desktop, tablet, and smartphone.
- Consider using other media forms, such as illustrations or video. You’re not limited to only photos!
How to Test Hero Test Images
As with many other web page elements, it can be useful to test the content of your full page slider hero image to determine whether or not they’res resonating with your target audience. But testing for the right images to include in your full page slider can be tricky.
Consider testing these image types and full page slider features:
- Still vs moving images
- Interactive vs autoplay video
You’ll also want to consider the value proposition of an image. What emotion does it evoke? Do these images cause users to behave differently on your site? Do your best to objectively answer these questions yourself or even consider user testing this aspect of your WordPress website.
Why Use a Full Page Slider on WordPress
Images can help provide clarity or illustration to a concept. This is especially true when it comes to hero images, which, when executed with strategy, act as the website’s centerpiece and a source of instant high-level information for visitors to use to make sense of the website.
For a full page slider that can handle customization beyond simple images and best practices for page load and mobile responsiveness, download Smart Slider 3 for WordPress.