How can we help?

Add an easy-to-configure slideshow to your site with useful captions and appearance controls.

 

Add the Slideshow Module to a Page

To begin working with this module, go to Website > Website Editor and navigate to the page where you need the new content. Once there, in the upper right, click on +Add Content. Choose the Body Content area unless you are adding the module to your Header or Footer.

You'll see the Slideshow Module near the top of the list. Click to Add the module.

 

General Slideshow Settings

If you click the General Slideshow Settings button from the initial image uploader screen (pictured below) you can access some basic overall configuration settings for how your slideshow will behave. Here are your options:

1. Slideshow Transitions - We have several different styles of transitions you can choose from. There are no 'disco-lights' or 'warp speed' animations, all of the options are pretty low-key. All slides in your slideshow will use the one you select:

• Slide - Slides the next image into place from right to left with the old one moving out ahead of it.
• Fade - Fades quickly from the current image into the next one.
• Wipe - Wipes the current image off the screen to the left and then moves the new one in from the right.
• Reveal - Like Wipe, but the current image moves diagonally off screen to the lower left and the new one comes in from the upper right.
• Cover - The current image moves off to the right and new one simultaneously comes in from the right, seeming to cover the old one.
• Uncover - Like cover, but the current image moves off screen to the left while the new one comes in from that side.

2. Slideshow Speed - You can set the number of seconds each slide will display before moving to the next. If you don't have much text to read, lower numbers are good.

3. Slide Height - The Normal height is 400 pixels, so if your image is taller than that, the system will display the middle 400 pixels for the full width of the image, so the top and bottom may be 'chopped off' for tall images you upload. The Tall height for this setting is 560 pixels.

4. Hide Arrows - To either side of the slide image are square arrow buttons to either advance or reverse the image to the next or previous one. If you want, you can use this checkbox to hide those controls. The small circles in the lower center of the slideshow can still be clicked on to navigate with or without the arrow buttons.

5. Image Style - The images for your slideshow can display in the default Rectangle style, with all four corners squared, or in the Rounded Corners style, or Diagonal Corners, with upper-left and lower-right corners squared and upper-right and lower-left corners rounded.

6. Button Style - Your buttons, if you choose to use them, can either have Square corners, slightly Rounded corners, or the Round style makes the end of the button like a half-circle.

7. Back - The Back button will take you back to the main Image Upload screen of the slideshow without saving. If you have unsaved changes it will warn you.

8. OK - This button will save changes you've made and take you back to the main screen of the slideshow.

 

Configuring Your Slideshow

The new module will open and show some placeholder content. You'll notice our sidebar where you can configure and load your content and see your changes as you make them as they'll appear on the page when you're done. The main panel of the Edit tab allows you to upload all your images.

Please Note: It's a good idea to work with images that are already wider than they are tall. In the example below, a tall image was used, and the system focuses on its middle, as in the image below.

You are able to load images from the Server, from your Computer, or from a Camera whenever you click the Upload Image button. You can load as many images as you like for your slideshow.

Once an image is uploaded, when you hover over it you'll see a Manage button and in the upper right a Delete button. See the section below on Managing Slides for the different ways you can configure each slide. For the Delete function, there is no undelete, but you can always upload the image again if needed.

 

Image Guidelines

It's a good idea to keep the following in mind when planning out the images you'll use in your slideshow.

• Basics - Images should be wider than they are tall, since they display wide across the page.
• Dimensions - For a standard-width slideshow that occupies the central content area of the page, the pixel-width should be no less than 1200 pixels wide and at least 400 pixels high. If you set the module to be Extra Wide (see the Settings tab info below) the width should be at least 1920 pixels wide and 400 pixels high. There is a Tall setting listed below, so if you need taller images you can turn that on and that height would be 560 pixels high. You can upload taller images, but only the middle part of it will display, as in the example above.
• Type - Jpeg and PNG images are recommended but other formats such as WEBP and SVG can also be used. File size should not exceed 4mb, and images that are larger than 2,000 pixels in their largest dimension will be sized down on upload.

 

Manage Slides

When you click to Manage an image, a new panel will open with options for how to configure the slide content. Here are your options:

1) Original Image - For your reference, you can see the original image you uploaded.

2. Show Text Box - If you won't need a text box over the image, you can completely turn it off by un-checking this box.

3. Text Box Settings - Clicking this button will give you options for configuring text box alignment, size, etc. and these options are explained in the section below on Text Box Settings.

4. Show / Hide Buttons - Clicking any of the Eye buttons will show or hide the element you're working with, either the Title, the Body or the Button Text. One or all can be hidden, if needed, by default they all display.

5) Title - Add a title for the image's caption.

6. Body - Enter whatever descriptive text you need for the slide.

7) Button Text - If you want to customize the text of the button, you can do so here. Space is limited so one-word or two-words are recommended.

8. Button URL - You can click this button to find any of the website Pages listed for your site, or you can paste the full URL of any page here and when clicked, the user will be taken there.

9) Open In New Browser Tab - If you want the user to stay on the current page and have the new page open in another browser tab, check this box.

Slide URL (not pictured) - If you have the Text Box elements all hidden, the Button URL area changes to Slide URL, and the entire image will be 'clickable' if you enter a URL here. You will still have the checkbox option to open the link in a new browser tab.

10. Back - The Back button will take you away from the slide without saving your changes. If you have unsaved changes you'll be offered the chance to save before leaving.

11. OK - When you're done configuring the slide, this button will save your changes and take you back to the main tab of the Slideshow.

12. On-Page Preview - You are able to see what your configuration choices will look like on the page in this area as you go.

 

Text Box Settings

As described above, if you click the Text Box Settings button when Managing a slide's content, you can configure the appearance of the text box. Here are your options:

1) Text Box Width - You can either leave the default Normal width, or if you want to be able to show more text, the Wide option is available, doubling the width of the text box overlay.

2) Alignment - You can have your text box Center-Aligned, Left-Aligned, or Right-Aligned, and you can set different slides different ways to mix things up, if you like.

3. Text Box Background - You can either have a White background or a Black one, and the text will auto-adjust to the opposite color to maintain contrast.

4. Opacity - The background is  75% opaque, by default, and you can increase or decrease that with the slider or by entering the desired value.

5. Button Color - This will either be whatever Brand Color is set on your Settings > Marketing > Emails tab or it will be a fully-opaque White.

6. Back / OK - Again, Back will take you back to the previous area without saving (and it will warn you if you have unsaved changes) and OK will save and take you back.

 

Working With the Settings Tab

The Settings tab is accessible from the Gear button at the top of the main Edit panel and has the relevant functions from our old Settings page for each module. Please note, in the Module Toolbar on the page there is no button for Settings as with older modules, and that is because we have moved it here. Here is what you can configure in the Settings panel:

1. Module Width - This module places content within the center 1170 pixels of the page width and will responsively scale down for mobile devices viewing the website. If you have a large background, up to 1920 pixels wide, you might want to set the module Extra Wide to fill that width. The center content will remain its current width, but the background will expand out up to 1920 pixels wide, which is the width of full HD displays. If you aren't using a large background image, keeping this setting on Normal is recommended.

2. Background Color - You can set a Background Color here by entering the color's hex code complete with the pound-sign / hashtag at the front, as pictured with the light gray below.

3. Background Image - If you have a background image you would like to use for the module it is best to first size it to either 1920 pixels wide if you are using the Extra Wide setting above or to 1170 pixels wide. When you click on the area to Upload Image, you will be add an image either From Server (previously uploaded images), From Computer, or From Camera if you are working on a mobile device. Please note, the image will focus on the vertical center, so if your background image is taller than the module content, the top and bottom of the background will not appear. In the example below, we are only seeing the vertically-centered one-third of the height of the image, but its full width is exactly 1170 pixels. Also note that as with column images, when you hover over the image thumbnail in the sidebar you can remove it to upload a new one or you can download the image, if needed.

4. Background Repeat - If you don't need your image to repeat, as in the example above, you can leave this field blank. If you have loaded an image that would need to repeat, such as the repeatable 'tile' pictured below, you can use a repeat control from the list below to govern how it will repeat in the background. For an image like the one below, it will automatically repeat across the width of the module (repeat-x) if you leave the field blank.

If using a background image that is not as tall as the module, you can set the Background Repeat to simply 'repeat' and it will fill the available background as pictured here:

Here is how all repeat options would work:

• repeat - For small, 'tile' images that are made to match up if set next to each other. This option will have the image repeat infinitely to fill the space of the background.
• repeat-x - For images that are the same height or taller than the module, this option will repeat the image across the width of the module in a single row. For images that are significantly taller than the module, the bottom of the background image row will be cut off.
• repeat-y - For images that are like a bar the width of the module's content area (1170px) or more, this option will repeat the image vertically as a background in a single stack. If you are using the Extra Wide setting for Module Width you will want this image to be at least 1920 pixels wide.
• no-repeat - This option will allow the image to load only once: so if you want an off-balance image, such as a background that appears only on the left side of the module you would use this option.

5. View Revisions - Just as in the older Settings page for other modules, you can click this link to see a list of saved versions of this Featured Content module. You can click on a Revision to revert the module to that previous save. Be sure to save your work first if you might want to come back to the currently configured module.