Full-screen images that transition as you scroll : with or without accompanying text per image.

Reveal sections feature full-screen images and a number of different transition effects between them that are applied when the reader scrolls through the story. It is also possible to add a block of text for each image.  Transitions between images include swipes up, down, left and right, and also a fade effect.


To edit the section, click the green edit media button.

You'll then see a column of images appear at the right of the screen.  These represent landscape and portrait frames within the Reveal section.

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/59100a56548a9_reveal-01.jpg

Remove all the default images by clicking the delete all button on the right.  Click the drag and drop area to select images from your computer.  You may choose to add images one at a time, or select multiple to add them simultaneously. Or, you can drag one or more images from your computer file system to that area to include them in the section.  

The images that you add through this process are automatically assigned as landscape (wider than tall) frames. Portrait versions for tall screens will be created by default by cropping the landscape images to the middle. Clicking on the thumbnail images opens a media window for each image.  This is where you can choose to add custom cropped images (you may wish to have a different image appear on tall screens, for instance) as well as captions to individual frames.

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/59100b17474e9_reveal-03.jpg 

Clicking the transition toggle between the images enables you to choose the transition effect that will occur between the frames.

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/59100aa64f6af_reveal-02.jpg


Media guidelines

  • Full­-screen landscape image: 2560px x 1440px JPEG at 100% quality
  • Full-screen portrait image: 1080px x 1920px JPEG at 100% quality

Read about image safe areas and download image templates here to check that your images will display well across multiple screen sizes and devices. 


Adding text blocks to one or more images in the section.

A block of text can be added to each individual image in the section.  If added, it will scroll up the screen as the reader scrolls through the story.

Adding text is completely optional.  To do so is as simple as clicking on the placeholder text that says "Add text here" and typing or pasting in your new text.

If you choose not to add text to any or all frames in the Reveal section, the frames will display without text to your readers.  

Text can be styled using all of Shorthand's usual options to change size, position, and colour etc. and you may also insert images, buttons, dividers, spacers (and HTML if your subscription allows it) into the text block.

Styling the text block itself is achieved through the section options, accessed with the cog icon next to the section's thumbnail on the left side of the editor:

These options enable you to change the colour and transparency of the text boxes in the section as well as the default text colour within the section.