Add an Image Slider to the Splash Page

3 min

An image slider can be added to your Splash Page using the HTML feature in the Splash Page editor. You can use a service that provides the HTML code, such as Power IO, to do this. Power IO allows you to make one free image slider with a limited number of images very easily. They offer additional features and options for a fee.

The other option is to use CSS by using the instructions from W3 Schools.

To use either method, you will want to have images that are the same size or that have been cropped to be the same size as each other.

Using an external site

If you use an external site to create the image slider, you will want to obtain the HTML / CSS from the site you select. If you are using Power IO, you can get this from the publish button using the Embed with code option.

Copy that code and head over to the Splash Page editor.

In the Splash Page editor:

Add a single column to your splash page in the location you want the slider to appear.

From the Content area, select HTML and add it to the column you just created.

In the HTML content block that is on the right of the editor screen, paste in the code that you copied from the website.

Click to Save your Splash Page.

Using A CSS Template

This is the more complicated of the two methods, but using your own CSS allows for more control of the image slider. It is recommended to utilize the following article as a guide.

Suggested Article: W3 Schools

To begin, you will want to upload your images to a file-sharing location. The easiest method is to upload them as graphics on the splash page while you set up the slider. Ensure all the images are the same size in pixels.

Add a Row to the Splash page where you want the slider to appear.

Add the HTML content block to the column you just created. Then click on the column/content block where it says "Hello, World!" to open the Content field.

Download the file below and open it to edit.

CSS for Image Slider.docx

Locate the Container Width section (shown in Red) and set the max width to the same size as the images you will use in Pixels. In the document that is currently set to 1080px.

Scroll down in the document to locate the actual file URLs for the images (Shown in red)

They will look like this:

<div class="text">Into The Woods</div>

</div>

Replace the bolded URL with the URL for the image you wish to use. If you added the image to your splash page, you can obtain it by clicking the image, and the URL will be listed on the right side of the screen.

This line - <div class="text">Into The Woods</div> is optional and can be removed if desired. It adds a description to the image, with the text in the bolded area.

Repeat Step 5 for each image you are adding to your slider.

You can now delete the images from your splash page by clicking on the image and clicking the Delete Icon.

Copy the whole document with your image URLs and paste this in the HTML box you created earlier, and save the page.

Once saved, you will be able to view your image slider on your Splash page.