Image Slider

Overview

Showcase your pictures in an animated carousel using our Image Slider. You can add or remove pictures and add custom titles and links to any image.

Add Image Slider

  1. From the Manage Pages section of the editor, first choose the page you'd like to add the Image Slider to.
  2. Go to the Add Element section and scroll to the media tab.
  3. Drag the image slider feature into the editing frame.
  4. Once you've placed the element, select images to display.

Set up the Image Slider

1. Press the Add Image button and the Choose & Place Images pop-up will appear.

2. Click to select an image.  You can select multiple images.  Selected images will have a blue border around them.

3. Press Done.

Options

Change the Image slider's look using the following display options:

General

The General tab is where you would choose to add, delete or crop images.

To add an image, simply click on the square that says "Add images". If you have many images, you may have to scroll down to find this option.

Hovering your mouse over any of the images in this menu will reveal additional options for each image.

Delete

Deletes the image from the photo slider

Link

You can set up a link for the slider to bring users to when a slider is clicked.

Existing Page: Links the slider to an existing page

Website URL: Links the user to a website URL

Link to a file: Links the user to a file that you uploaded in Images & Content

Email Address: Prompts the user to send an email when clicked

Edit
(Brings you to a new menu)
 

Layout 1 and Layout 2: Two types of layouts for your slider. There are different options for each of these layouts, but all the options are listed below.

Toggle slide content: Turn on/off slide content to show the text.

Color Overlay (L1): Color overlay for the entire slider

Text Background (L2): Color overlay for text

Title (L1): Title of the post

Text: Text of the post

Button (L1): Button (Leave blank to show nothing)

Alt (L1): Alt text

Edit Slide Link (L1): Edit the slide link for the slider

Position: Position of the text

Animation: Set an animation for the slider

 

Previous/Next Slide: Toggle between slider images for quicker editing

Crop
(Brings you to a new menu)

Crop your image. Note that can re-crop your image as many times as you want and even crop it back to it's original size.

Design

Design is where you will find options for styling your photo slider.

Effects

Hide slide content: Hide the slider's text content

Images fill slider: Have the images resize themselves automatically to fill the slider (no white space)

Autoplay: Automatically changes the images without user input

Show navigation arrows: Show the navigational arrows

Animation: Set an animation fo the slider when it first shows up on the page

Color

Note: Background image and color won't show if "fill slider" option is set to on.

Backround: Choose a background image for the slider

Color: Choose a background color for the slider

More

Advanced options for the slider.

Spacing

Margin: Set the margins for the slider

Height: Set the height for the slider. Adjust this option if your slider isn't showing properly on the mobile or desktop view.

CSS

Add CSS for all devices or for the desktop and tablet views

HTML

Edit the HTML for the site.

Troubleshooting and FAQs

Image won't fit/displayed incorrectly in the mobile view

The reason for this is because the dimensions are largely different - In the desktop view, the slider is recangular and wide. In the mobile view however, it's square, and so images don't display correctly.

You can fix this either by 1)creating two rows with sliders and using the hide on device feature or 2). editing the height in mobile view to be smaller.

How to change slider speed

It's not currently possible to change slider speed in the editor, however, if you open the HTML, you'll be able to change the speed by adjusting the slider interval property.

How do I show only the slider and not the contents?

Open the slider's settings and then go to design >>> Hide Slide Contents (turn on)

I don't want a button on my slider

If you don't want a button on a slider image, simply open up the slider image, then look for the "button" field and delete the text inside so it becomes blank.