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 such that the text scrolls under the images.

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/5910145bcda72_2cs1.gif

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 at the bottom of the screen showing thumbnails for each of the pictures in their sequential order.

https://cdn.elev.io/file/uploads/p9jpW4cYPyd717Yrl8GDNdjJSSFuIbXFNYXBroJVATQ/Wr55Ocnk0eEvyXcyxF0TP59KiQ1VikwyuIpX8fWEgx0/2CS-image-F9k.jpg


Drag the thumbnails to re-order the sequence, or hover over and click the cross to delete one at a time. Remove all images by clicking the trashcan icon to the right.

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, clicking the 'Add' button in the edit bar enables the selection of multiple images at once from your computer to upload into the section.

On wide screens the column of text 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.

Here's how to place your Scrollmation images inline.

Adding inline media

Insert images, video files, YouTube video and SoundCloud clips into the text column by clicking ‘Media’ between paragraphs.

You can also easily attach a link to inline images.

Insert HTML between paragraphs by selecting 'HTML'. Embedresponsively.com can help with generating responsive embed code for a number of tools.

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.