Skip to main content

Create a Slideshow

Updated

Three Slideshow modules are available and can include Titles, Descriptions and Buttons with links. Available on Custom Pages for all plans.

Video overview

Add Section to a Custom Page

Slideshows are accessed through the Custom Page 'Add Section' module.

  1. Click 'Images'

  2. Scroll down to 'Slideshows'

Select Slideshow Template

  1. Slideshow section

  2. Full-width image style template (1 across)

  3. Landscape image style template (1 central image, edges of other images to the left and right)

  4. Portrait image style template (3 across)

Each Slideshow can show a maximum of ten (10) images.

Slideshow Options

  1. Slideshow Template

  2. 'Add Images' You can add up to ten images to each slideshow at once

  3. The Button Text that appears is editable here (applies to all slides displayed in this specific Slideshow)

  4. Customize Design, set fonts, font sizes, text color, opacity, button style, navigation style, counter style, autoplay, animation (options differ between Slideshow templates)

  5. Delete Slideshow

  6. Saved state (always 'Save Changes' regularly)

If the Slideshow template is not the one you want, you will need to remove (5. 'Delete Slideshow' and re-add a different slideshow module.

Add Images

  1. 'Add Image' (an image is required for the slide to appear)

  2. 'Add a Title' (optional)

  3. 'Add a description' (optional)

  4. 'Link To' select a Page, Website or Email (optional)

  5. 'Save Changes' before leaving

Select Images

  1. Select images to add to slideshow

  2. Click 'Open'

Uploader Progress Indicator

  1. Slideshow Image Limit Reached will be displayed if you try to upload (or add) more than ten (10) images

  2. Queue showing uploader progress: Complete and Processing

Slides added

The images uploaded will appear with thumbnails and options as described below

  1. Hover an image thumbnail to see mini-toolbar with options above

  2. Image Description

  3. Change Image

  4. Set Focal Point

  5. Delete

  6. Add a Title (optional) there is a maximum character count of 60

  7. Add a Description (optional) there is a maximum character count of 160

  8. Link to (optional)

Set Focal Point

You can set the Focal Point for every image so that when viewed across a range of browsers and screen sizes the main portion of the image you want to always appear will.

It is best to Set Focal Point and then view on your live site or on different devices and then adjust if required.

Display Images Only

  1. In the upper-right corner of the Slideshow section you can toggle the switch to turn ON (blue) the 'Images Only' option. This will hide the Title, Description and Buttons from appearing and focus on image presentation.

  2. Click 'Customize Design' to access Images Only options

  1. Images Only enabled removes the options related to text and buttons from appearing

  2. Preview of Images Only (using Slideshow Two Module)

Full-width (Slideshow One Module) Animation Side by Side

This side-by-side layout is optimized for slideshows with more than 4 images.

  1. Images Only enabled

  2. Layout: Side by Side

  3. In-app Preview

Set Height of Slideshow – Full-width (Slideshow One Module)

When using the full-width slideshow and you have set 'Images Only' there is a new option:

  1. Height: dropdown to select from Small, Medium or Large

  2. Preview showing 'Small'

This is where having your Focal Point set will be important for some images, the default is to 'center' the image horizontally and vertically.

Full-width Height Live Website previews

Height set as 'Small' ^ above

Height set as 'Medium' ^ above

Height set as 'Large' ^ above

Create a Link

  1. Click 'Link To'

  2. Select 'Page' if linking to a page within your site

  3. Choose a page from the pages shown in the dropdown list and save

Slideshow Button Text

  1. 'Edit' Button Text

  2. Choose the text for your slideshow button (maximum 15 characters) This button text will appear over every slide if a Link has been set

Change Image Order in Slideshow

You can change the order of any of the images in the slideshow by clicking on the image thumbnail you want to move and dragging-and-dropping this over the thumbnail or the position where you want the image to be moved to.

Customize Slideshow Design

Each Slideshow Module has slightly different design options that are separate from any other Design settings you may have already set for your site.

  1. Customize Slideshow, experiment with the options available (screenshot shows for Slideshow One Module)

  2. Typography. Your Custom Page fonts are used by default, any typographic customizations you make will only affect this Slideshow

  3. Click 'Customize Typography' for more options

  4. View the customizations you make with the in-app preview to get an indication of how they will look

  5. Always 'Save Changes'

Title As Link

If you enable the 'Title As Link', the styling applied is the Typography > Advanced > Text Link styling

  1. Navigate to Design > Typography > Text Links

  2. The default is to display text links with 'U' (Underline)

  3. Preview showing Title with Underline

Customize Typography

  1. Heading Font

  2. Description Font

  3. Preview changes in-app

The 'Button Text' uses the same font as your themes Custom Page > Body Text Font.

Preview on Live Site

It is always best to view your Slideshow on your live site and see how it appears on mobile as well as desktop displays.

If you have the slideshow set to 'autoplay' this will stop if viewers tap or use the navigation arrows.

Fullscreen Slideshow One module preview above ^

Landscape Slideshow Two module preview above ^

Portrait Slideshow Module three preview above ^

Recommended images for Slideshows

Because our themes are responsive for narrower (mobile) or wider (desktop) displays we recommend that you select images that have the main focal point in the center of the frame so that at a minimum, the image works well cropped as a square.

You can set the Focal Point for each image (see Set Focal Point section above)

The Portrait slideshow that shows images three-across works best with images cropped in the 2:3 ratio.

Reach us at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!

Related to

Related articles