Video overview
Add Section to a Custom Page
Slideshows are accessed through the Custom Page 'Add Section' module.
Click 'Images'
Scroll down to 'Slideshows'
Select Slideshow Template
Slideshow section
Full-width image style template (1 across)
Landscape image style template (1 central image, edges of other images to the left and right)
Portrait image style template (3 across)
Each Slideshow can show a maximum of ten (10) images.
Slideshow Options
Slideshow Template
'Add Images' You can add up to ten images to each slideshow at once
The Button Text that appears is editable here (applies to all slides displayed in this specific Slideshow)
Customize Design, set fonts, font sizes, text color, opacity, button style, navigation style, counter style, autoplay, animation (options differ between Slideshow templates)
Delete Slideshow
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
'Add Image' (an image is required for the slide to appear)
'Add a Title' (optional)
'Add a description' (optional)
'Link To' select a Page, Website or Email (optional)
'Save Changes' before leaving
Select Images
Select images to add to slideshow
Click 'Open'
Uploader Progress Indicator
Slideshow Image Limit Reached will be displayed if you try to upload (or add) more than ten (10) images
Queue showing uploader progress: Complete and Processing
Slides added
The images uploaded will appear with thumbnails and options as described below
Hover an image thumbnail to see mini-toolbar with options above
Image Description
Change Image
Set Focal Point
Delete
Add a Title (optional) there is a maximum character count of 60
Add a Description (optional) there is a maximum character count of 160
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
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.
Click 'Customize Design' to access Images Only options
Images Only enabled removes the options related to text and buttons from appearing
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.
Images Only enabled
Layout: Side by Side
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:
Height: dropdown to select from Small, Medium or Large
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
Click 'Link To'
Select 'Page' if linking to a page within your site
Choose a page from the pages shown in the dropdown list and save
Slideshow Button Text
'Edit' Button Text
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.
Customize Slideshow, experiment with the options available (screenshot shows for Slideshow One Module)
Typography. Your Custom Page fonts are used by default, any typographic customizations you make will only affect this Slideshow
Click 'Customize Typography' for more options
View the customizations you make with the in-app preview to get an indication of how they will look
Always 'Save Changes'
Title As Link
If you enable the 'Title As Link', the styling applied is the Typography > Advanced > Text Link styling
Navigate to Design > Typography > Text Links
The default is to display text links with 'U' (Underline)
Preview showing Title with Underline
Customize Typography
Heading Font
Description Font
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.
Still have questions? Reach us on our live chat or email us at info@format.com We’re here to help!