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.
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?
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.
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.
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.
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.
