Full-screen images that transition as you scroll.

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. Transitions include swipes up, down, left & right and also a fade effect.

To edit the section, click the green 'EDIT MEDIA' button.

You'll then see a row of images appear at the bottom 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 "CLEAR" button on the right.   Click the 'ADD' button to select images from your computer.  You may choose to add images one at a time, or select multiple to add them simultaneously. 

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 in the bottom row will open up the media dialog for each image and 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