How can we help?

Load images that march across the page and that feature and link to whatever you like. Clicking on an image shows it full size and offers a link to go to the page.

 

Add the Carousel 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 Carousel Module near the top of the list. Click to Add the module.

 

General Carousel Settings

When you open the Carousel module you'll see the main settings panel where you can begin uploading images and do a few other configurations. Here are your options:

1. Thumbnail Settings - This will open the Thumbnail Settings panel detailed below where you can adjust things like the speed, thumbnail height and other effects.

2. Upload Image - You can upload as many images as you like, we recommend 5 - 10. Images that are square or slightly wider than they are tall are recommended. The size can be up to 2000px wide. It is recommended you don't upload images that are extremely wide or tall, but the carousel is fairly forgiving. You are able to upload from the Server (already uploaded images), your Computer, or from a Camera.

3. Thumbnail Functions - When you hover over an uploaded image's thumbnail, you have options on different functions. In the upper left, you can click on the crop button to open the Cropping Tool, more details below on that function. In the upper right, you can click the X to Delete the image. Please note, there is no warning, so if you delete an image and need it back, you will have to upload it again. Click Manage to adjust the properties of the image for links and Alt Text, etc., more on that below. You can also click and drag a thumbnail to a different order in your lineup, as desired.

4. Show / Hide Header - By default, there is no header for the carousel, but if you want one, click the eye icon to display it. You will then be able to enter the text you like in the Header field and you'll see it on the page as you go.

5. Caption- If you would like text about your carousel you can enter it in this field, as pictured above.

6. Cancel - If you decide to cancel and close the module you can do so with this button. If you have unsaved changes a warning will pop up and give you the chance to save.

7. Save - If you have made any changes anywhere in the module, the Save button on this main settings panel will save them, close the module, and you'll see your changes on the page.

8. Module Settings - For settings about how the module will appear on the page, such as being regular or extra wide or for adding a background, the Module Settings panel will let you configure your carousel. More on these settings below.

 

Thumbnail Settings

If you click the Thumbnail Settings button from the main settings panel, the panel below will open and give you options on how you would like your Carousel thumbnails to appear.

1. Thumbnail Height - You can set your Carousel row of thumbnails to a height that works for you. Here are your options for Small, Medium, and Large:

2. Carousel Speed - Set the number of seconds the carousel will pause as the thumbnails march across the page. Anywhere from 1 to 5 seconds.

3. Maximum Images Shown - For computers used to view your website, you can set how many thumbnails will appear in the row, anywhere from 3 to 9. The higher numbers make more sense if you have this module set to Extra Wide in the module settings described below. Examples above were for 5 thumbnails, but here is what the extremes look like:

4. Maximum Images Shown (Mobile)- Mobile device screens often don't have as much width to work with, so setting a lower number here makes sense. Options for this area go from 1 to 7. Pro Tip: You can preview in Chrome what it will look like on mobile by dragging the width of your browser as narrow as it will go. You can also hit your F12 button and click the icon for Device Toolbar at the top. Clicking the button again changes back to the full view.

5. Show Hover Effects - If you check this box, as the user hovers over each thumbnail in the Carousel, they will zoom slightly.

6. Back and OK - If you just want to go back to the main panel, the Back button will take you there. If you have unsaved changes a warning will pop up for you. The OK button will remember your changes but you'll still need to click Save from the main panel to finalize them.

 

Manage Image

When you click to Manage an image, a new panel will open with options for how to configure the thumbnail link. Visitors can click on the thumbnail in the Carousel on the page, and in this area, if you want that large image to link to a page, you can set that up from this panel. Here are your options:

1. Image Thumbnail - For your reference, you can see a larger thumbnail of the image you uploaded.

2. Image Link - You can paste a URL here that you've copied, please enter the full page URL for external links. For on-site links, such as the example above for the Shop page, the URL needs only what comes after your .com, always starting with a forward slash.

3. Browse Pages - Clicking this button will open a window that will let you see website pages saved in the system. Clicking on a page will enter its URL into the Image Link field. You can also get file or image links this way for files that have been uploaded to the system. If you need to link to a product or class or some other data element page in the system, you should go to that page the way a visitor would on your website and copy the full URL then paste it into the Image Link area.

4. Open in a New Browser Tab - For most website navigation experiences, you might want to leave this off. In cases where the Carousel is on a page with content of critical importance to the visitor, having the link open in a new browser tab is best. You can avoid confusion on how to set this by imagining you're a visitor and thinking about which way would be the best for you.

5. Alt Text - It is highly recommended for your SEO (search engine optimization) that you enter Alt Text for each image you upload. This allows search engines and sight-challenged visitors to know what the image is about. A short description is recommended. If you couldn't see the image, what would you want to know about it?

6. Back and OK - If you just want to go back to the main panel, the Back button will take you there. If you have unsaved changes a warning will pop up for you. The OK button will remember your changes but you'll still need to click Save from the main panel to finalize them.

 

Image Cropping Tool

After you've uploaded an image, you have the option of hovering over its thumbnail and clicking the Crop icon for further adjustment of the image itself.

The image will load in the Cropping Tool window and will provide you the options detailed below:

1. Drag and Drop Crop Frame - Hovering your cursor over the middle of the image in the highlighted area will give you the four-way icon and you can click to drag and drop the frame to the part of the image you want to keep.
2. Resize from the Sides - You click and drag from the sides or corners to resize your cropping frame so that whatever you're wanting to focus on will fit.
3. Rotate - Clicking this button will rotate the image a quarter-turn clockwise, repeat to rotate more.
4. Zoom In / Out - If you need to focus on part of the image that's just not large enough, you can click the Plus button to zoom in, or if you have zoomed in, you can click the Minus button to zoom back out again.
5. Cancel / Done - If you don't want to crop, click Cancel. If you have set the crop the way you like, click Done and the thumbnail will change to focus on the part of the image you want.

Adjustments you do with the Cropping Tool are not permanent: if you click to Crop the image again, you will start with the full, original image each time, so you can always start over. Also, however you crop the image, only that part of the image will display when a visitor clicks to view the full-sized image.

After cropping images as needed, click Save at the bottom of the main settings tab to publish those changes to the page.

 

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.