A column of text and images that change on scroll.

The Scrollmation section (or 'Two Column' or 'Two Row' Scrollmation section) features a text column and images that change in sequence as the reader scrolls.

By default, on wide screens, the text and images appear side-by-side in columns and on narrow screens (such as phones) the images and text appear in the same column with the images at the top and above the text, so that the text scrolls under the images.

As the reader scrolls, if there is more than one image they will change in sequence. The rate at which they change will depend on how much text has been entered and how many images have been added.

Edit the images by clicking the icon in the top-left of the image. This will open an edit bar on the right of the screen showing thumbnails for each of the pictures in their sequential order.


To remove the default images, you may do so one-by-one by clicking the cross icon that appears when you hover over each thumbnail, or delete them all at once by clicking the delete all button at the bottom of the section.

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/5910165436361_2cs-reorder2.jpg

Hovering over one of the images in the edit bar and clicking it will enable you to choose an image to upload in its place as well as set other attributes such as a caption or link on an individual image. Alternatively, the large drag and drop area of the thumbnail bar can be used to drag in multiple images from your computer file system at once, or clicked so that you can make a selection of multiple images from your computer. 

On wide screens the column of text in the Scrollmation section can sit on either the right or left of the screen. Use the arrow icon next to the text column to move it.

On smaller screens, the Scrollmation section will, by default, change to two rows with the image(s) appearing in a landscape orientation row at the top of the screen and the text below.

To ensure that your image isn't cropped in the small screen view, make sure it is in a 16:9 wide/landscape aspect ratio. Images that aren't at this ratio will be cropped to fit the space.


Alternatively, for small-screen view, images can be manually placed within the text column rather than appearing at the top of the page. Doing so allows you to display all or just some of your images within the text.

To do so,  click the + icon that appears between text paragraphs on the page and choose the option labelled insert Scrollmation image inline. You'll be shown a panel of each of the images in your Scrollmation set. Clicking one of the images will insert it into that place in your text.  

You do not need to place your images in the same order that they are used in the Scrollmation, nor do you have to use any or all of them.  If you do choose to place one or more of your scrollmation images inline, the standard Scrollmation display will not show within the section on small-screen devices.

You can also easily attach a link to inline images.

Animation effect

Bring images to life using a flipbook animation effect available in Shorthand. Find out more here.

Media guidelines

  • Images saved as JPEG at 100% quality
  • Suggested crops:
    Big Image (for large screens) 800px wide x 1422px high
  • Small image (for small/narrow screens) 1422px wide x 800px high. 

Inline image:

  • The widest that inline images will appear is 800px (apart from in tablet portrait view, when they are shown at 110% the width of the text column). To ensure your inline images fill the full width of the column, upload them at at least 800px wide.

Additional tips

  • If you have limited text, you may only be able to use one image in Scrollmation sections. Experiment with the number of images until you are happy that they don’t change too rapidly when reading the story.
  • Shorthand will automatically resize and compress your JPG images for multiple device sizes.

Section Options

Scrollmation sections support options including, if your theme allows for it, changes to text and background colours. For more, see:
Section Options.