Slider Widget

 

The SiteOrigin slier widget gives you an easy way to add simple sliders to your sidebars, Page Builder pages or other widgetized areas. You build the entire form from within the widget form, so you don’t need to leave the interface you’re on to get things done.

This document will show you how to build a slider using a widget on a Page Builder page, but the same ideas apply to adding one to a widgetized area. If you’re not familiar with Page Builder you can read over the its documentation.

Start by adding the slider widget to your page (or widgetized area). The widget is called Slider, with the description “A simple slider widget.”

Adding a slider using Page Builder

Adding a slider using Page Builder

You’ll then be able to edit the form for the slider widget. Here’s what that should look like.

The Slider Widget form.

The Slider Widget form.

At the top you’ll see Slider Frames. We’ll get to that soon, for now, lets take a look at the other 3 values. Animation Speed is the number of microseconds the animation from one frame to another will take. In this example, we’ve chosen 800 which is the same as 0.8 seconds.

Timeout is how long each slide is displayed for. In this example, we’ll display each for 8000 milliseconds which is the same as 8 seconds.

Finally, we can choose the Navigation Color. At the moment there are only 2 options. Either black or white. You’ll need to choose which ever color will work best with your images.

You can add additional frames to your slider by clicking on the add button below Slider Frames. You can add as many frames as you’d like. Click on the small cross to the right of the frame’s title. You can also reorder slides by picking them up and dragging them.

Then click on the small down arrow to show the form for that individual frame.

Expanding a slider frame.

Expanding a slider frame.

This brings us to the form you’ll use to edit the slider frame.

Slider frame form.

Slider frame form.

The background and foreground images might be slightly confusing, so let me explain what each one is. The background image will form the background of the frame. Slider Widget stretches this image out so that it fills the entire width of your slider, which in turns stretches to fill the width of its container (usually your page). You can choose how it does this by selecting either Cover or Tile for the Background Image Type.

The foreground image is placed on top of the background image. It’ll never be stretched to any larger than the actual image size (but it will be scaled down for smaller screen devices). You’ll usually use this to overlay text on top of the background image.

slider-background-foreground

If you want to use the slider as a standard image slider, without any overlays, you can just upload your images to the background image.

The destination URL is the URL users will be taken to when they click on that slide frame.

Background Video

One of the most powerful features of the slider widget is how easy it makes adding background videos to your slider frames. This is a slightly more advanced feature. You do need to have a basic understanding of HTML5 video and the different video formats. MP4 is a widely supported HTML5 compatible video format. The only problem is that some browsers, namely Firefox, do not support it. This means you’ll usually need to upload your video in 2 formats. MP4 and something like OGG Video.

You can read more about supported formats here.

Start by adding a new background video in the same way you added a slider frame, by clicking on the Add button below the Background Videos heading.

Adding a background video

Adding a background video

You can choose the background video from your media library by clicking choose media, or use an externally hosted video by entering the video URL. You’ll also need to tell the widget what format the video is.

Once you’re done, click add again to create a video with a different format. Unless of course you’re only targeting one browser.

The background video is placed in much the same way as the background image. This means it’ll stretch out to fill the width of the container. It’ll play and automatically loop through the video. It’s important that you also use a background image when using a background video. This image will be displayed while the video is loading and it’ll be used on a fallback for mobile devices, which don’t allow auto playing of background videos.

That’s the entire process of adding a widget slider to your page or widgetized area. If you have any questions, please feel free to post them over on our forums.