by Bernadett Toth on February 14, 2019

What is a Full Page Slider and How to Use it?

Full page slider

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 fill the whole screen.

Flower Shop Smart Slider 3 template
Flower Shop Smart Slider 3 template

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.

This slider type is 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 to Use a Hero Image in Website Design?

Full Size Slider
Full Size Slider

Hero images, like full page sliders, 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 hero images/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 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 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.

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.

Why to 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 full page sliders which act as the website’s centerpiece and a source of instant high-level information for visitors to use to make sense of the website. A full page slider can handle customization beyond simple images and best practices for page load and mobile responsiveness.

Split slider
Split slider

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.

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 responsive mode in the Slider settings. If you use this mode, 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.

Smart Slider 3 is fully responsive
Smart Slider 3 is fully responsive

The full page mode 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.

Full Page slider settings
Full Page slider settings

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.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

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.

Fashion Slider
Fashion Slider

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.

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!

Bernadett Toth

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team.
I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.

You can reach me at [email protected].