October 30, 2016

7 Great Uses for the Skizzar Slider Widget

Here at Skizzar we’re a big fan of making it as easy as possible to implement the most current design trends into your website, and with as little effort as possible! So, with that in mind, we want to talk about one of our most useful (and our personal favourite) elements – the slider widget – and how you can use it to bring your site to life!

Sliders have been around for years! They are a great way of displaying eye-catching information and grabbing the attention of your users from the minute they view your site, so it’s worth knowing your way around this widget and learning how you can get the most out of it. So without further ado, here are our top 7 best uses for the Skizzar Slider widget.

Traditional Slider

Well, it makes sense to start with what the slider is best at…sliding. With the Skizzar slider widget you can set a background image/colour, featured image (which you can align top, left, right or bottom) and Heading/excerpt text. When you combine this with the power of being able to add in an unlimited amount of slides – you actually have a very powerful tool in your hands.

It means you can easily create a layout like this:


This is a slide with a background colour of #8b8cc9, featured image (the phones) aligned left, layout style is full page and auto slide set to 4 seconds.

Have a play with the layout options and display options to get the slider to sit in your site as you want it to. It’s a great and visual way to show off what your site is about for all those visitors who are only planning on hanging around for a few seconds!

The Hero Header

The trend known as hero images may be summarised simply as large attractive headers. You will have seen them, a big background iamge that generally relates to the content of the site, with some bold text over the top, something like this:


To make a slider like this on your own site, start by adding a slider widget to your page.

The slider widget has 3 layout options; Boxed, Full Width and Full Screen. We suggest using either Full Width or Full Screen for your hero header.

Add you text to the slider and then select a background image to add to it. We recommend a minimum width of 1900px for your background image to ensure that it fills the whole page. You may also want to check the following options:

  • Stretch (this will stretch the image to fill all screen sizes)
  • Darken (This will slightly darken the image and allow text on top to stand out better)
  • Parallax (This adds a parallax, 3D scrolling effect to your image…it’s dead cool)

These options can be found on the individual slide background settings as shown in the image below:

skizzar website builder tips for the slider widget 1

Landing Page

A landing page is the first page of your website which some people like to make look as striking as possible and then add an enter button to take them to the main body of the site.

A slider is a great way of creating a landing page for your website because of the full page layout option.

To build a landing page,
Add a slider to a blank page with the layout setting set to full page. Delete all the slides except for one, and on the remaining slide change the background colour or add an image (Note, if you are using a background image, play around with some of the bg image settings such as stretch and darken to make it fit properly on your site). If you have a logo or an image you want to use it’s a good idea to add this as a featured image – you can also set where the image is aligned on the slide. Add some text and a button to the main page of your site and you’re done.

To set this page as the front page of your website, go to Site Settings > Static Front Page on the main menu in the customizer and pick your landing page.

Lastly, we’ll want to get rid of the footer on this page only – this is a little bit fiddly, but hover over the Skizzar icon in the customizer and click on DevKit – the DevKit allows you to insert custom code to your site – it’s a very useful tool if you have a few coding chops. Add this code into the DevKit

.home #footer.footer-site { display:none !important }

This will remove the footer on the homepage (which, if you followed the previous step, should be your landing page) and no other page.

Page Header

So it’s common practice to put some sort of fancy big header on your home page (like a hero header), but what about all your other pages. Personally, I think it’s overkill to have a full page slider on every page. But, having said that, it is nice to have something at the top of each page instead of jumping straight in with text. So why not have a slider with your page title on it, something like this:


This is a simple way of making your site attractive and letting your users know what page they are on (and what it’s about) without them having to do much work to find that information out themselves! This slider is set to Full Width  in the layout options, a striking background image which is stretched to fit the whole screen, darkened slightly and with a parallax effect added to give the site a little extra pizazz!

Side Note: Personally, I think a website will live or die based on it’s images – get good images and it will lead to good business. If you don’t have high quality images to hand, you might want to consider using stock images (royalty free images). Here at Skizzar we hold several premium stock imagery accounts, but we also love using this free service: – give them a look over if you are after some great and free images for your website.

Testimonial Slider

Testimonials are an incredibly effective way of letting your users know that you are real, you do a great job and that people are using your business. However, a page full of testimonials is off putting for a visitor – infact, I can honestly say I’ve never visited the testimonials page on any site.

So, say hello to the testimonial slider – a great way of displaying several testimonials in one place without it coming across as a long, boring list of quotes.

Here’s an example we like:


Set your testimonial slider to either Full Width or Boxed layout (boxed means it won’t take up the full width of the page), make sure the slides are set to autoplay in the slider settings and show the slider arrows and dots so users can scroll through them at their own pace.

There are plenty of things we could say about the content for your testimonial slider, but here are some quick tips:

  • Make the testimonials real…from real people! You might think no one can tell – but I like to think they can
  • Add a picture – it shows they’re real, from real people…and makes it look better visually
  • Don’t make them too short, don’t make them too long. Something like “Great service” is a rubbish testimonial – but then a long winded one with every last detail is too intense. Aim for around 300 – 350 characters
  • Use testimonials that talk specifically about what was good about the service you provided – this will let your visitors know exactly what to expect from you, and again, it comes across more real!

Page Separator

If you have a lot of content going on one page, or, if you’re going for a single page site, you might want to consider breaking it up a little bit. Using a slider as a visual separator is a great way to do this, here’s an example of what this design technique can look like:


Set your slider to Full Width in the layout options, add a great background image (we like to check the parallax option too as it looks great when scrolling past it!), you may also like to use the stretch and darken options to make your background image fill the whole width of the site and to make your text on top stand out better.

Add a header and some excerpt text (and maybe a button) and you’ve got yourself a kick ass separator on your site.

Video Background

Last but not least, video backgrounds. We LOVE this feature! If you have a great video for your business, then you should totally add it as a background to a full page slider, it’s by far one of the most eye-catching design techniques you can use for your site.

The Skizzar slider widget allows you to embed videos from youtube or vimeo as a background, or to upload your own mp4 video. Here’s how to do it.

  • Add a slider to your page and set the layout to Full Page
  • Delete all the additional slides except for the first one (you’ll only need one slide for this)
  • Click on the background settings for that slide and select the source for your video from the dropdown (Self hosted, Youtube or Vimeo)
  • Add in the link or upload your video (self hosted only)
  • Done!

There are, however, a few things to consider before you go crazy and add videos everywhere:

  1. Videos will autoplay as soon as your site loads. This has the advantage of meaning your users don’t have to action anything, they are just greeted with it. The downsides are that it will play out sound, and a lot of visitors will be put off by this – so we advise making a separate video just for your site (which you can set to private if you are using youtube/vimeo) and using that.
  2. Videos are BIG files – so if you are planning on self hosting, make sure it’s not going to use all of some poor guy’s data if they view your site on their mobile
  3. Speaking of mobiles, video backgrounds won’t play on all devices (thanks to the loving relationship between apple and adobe), so instead it will default to displaying the video thumbnail, so make sure your video has a relevant and high quality thumbnail set in the youtube/vimeo video settings.

We love video backgrounds so have worked hard to make sure that they look great on all screens – so why not give it a try on your site and see how it looks.

That’s all from us this week – we can’t wait to see how you start using sliders on your site to bring it to life! Drop us a message or a support request if you need help with any of the slider features, or visit our help site at