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.
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.
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.
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.
Bring images to life using a flipbook animation effect available in Shorthand. Find out more here.
- 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
- 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.
- 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.
Scrollmation sections support options including, if your theme allows for it, changes to text and background colours. For more, see: