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

Reveal sections feature full-screen media 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 sets of landscape and portrait 'frames' within the Reveal section.

Between the frames are some controls for applying an effect that will occur as your reader scrolls and each frame is revealed in sequence.  

The smaller icon on the left allows for choosing an effect.  Click it and you'll see a drop-down list of available effects:

Options include: none (the frames will instantly change from one to the next), fade, and down, up, left and right wipes. 

The slider next to the effect icon enables setting a speed for the effect.  This is the amount of 'scroll depth' (how much the reader needs to scroll) over which the effect is applied.  There are three speed settings: the slowest on the left, and fastest on the right.

You can see the applied effect and its speed by scrolling through the section in the editor and story preview. Depending on the images in your Reveal section and the mood of your story, you'll find different combinations of effects and speeds more appropriate, so be sure to try a few options.


Adding your own media

Remove all the default media by clicking the DELETE ALL button at the bottom of the right-hand column under the image thumbnails.  Click the DRAG & DROP area to select images from your computer.  

You may choose to add media one at a time, or select multiple from your computer to add them simultaneously. ...or drag one or more images from your computer file system to the DRAG & DROP area to include them in the section.  

Click the BROWSE FREE IMAGES button to choose images from a free online source.

Regardless of the chosen method for adding media, by default, they will automatically be 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 panel for each frame:


At the top of this panel, a toggle enables choosing whether the frame displays a still image or video.  The panel is also where you can choose to add custom cropped media for tall screens (you may wish to have a different image or video appear on tall screens, or choose that tall screens focus on a different part of the uploaded 'wide' media) as well as add captions and alt-text to individual frames.

 Media guidelines

  • Full­-screen landscape image: 2560px x 1440px JPEG at 100% quality
  • Full-screen portrait image: 1080px x 1920px JPEG at 100% quality
  • Full-screen landscape video: 1920px X 1080px (1280 x 720px can also be used),
  • Full-screen portrait video: 1080px X 1920px,

Read about image safe areas and download image templates here to check that your images will display well across multiple screen sizes and devices. See also video guidelines for supported video formats.

Adding text and foreground images to one or more background images in the section.

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

To add a text block, scroll to the appropriate image and click on the placeholder text that says "Add text here", then type or paste in your new text.

Adding text is optional: you may choose to have text blocks appear with all, some, or none of your background images.  

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.