Responsive Lanes

You can use responsive lanes to section the content of a responsive page into groups. Tiles within a responsive lane stay together when the responsive page is resized.

By default, a responsive page starts with two lanes. To add more lanes, highlight an existing lane in your responsive page, select (Add new lane), and then select Add lane to left, Add lane to right, Add lane above, or Add lane below. Reorder lanes by dragging and dropping them in another section of the page.

You can enter lane titles to help you organize the lanes in your page. On a lane title, you can also include Dynamic Text. Lane titles resize when the responsive page is shared on smaller or larger screens. To hide a lane title, select an existing lane, and then select Start of the navigation path (More Actions) Next navigation step  (Show/Hide) Next navigation step TitleEnd of the navigation path.

To resize a lane, grab the lane border and drag it to the left or to the right. A grid appears and it is used as a reference on how the lane can be resized. Resizing a lane will also resize adjacent lanes, and the tiles within each lane will adjust to the new lane size.

You can copy lanes from a responsive page and paste them with all their contents to other pages.

You can also change lane styling properties such as the background color by selecting Start of the navigation path Next navigation step  (Edit Styling)End of the navigation path. Select the lane title to see styling options for the title such as adding a border, setting the title's background color, setting text properties, and inserting shapes or images to help you enhance the visual style of your presentation.

Previewing responsive pages on different devices

You can preview a responsive page to see how it looks on different screen sizes and device types. To preview a responsive page, from the story toolbar, select (Device Preview). From the preview screen, you can change the device or size to see how your page looks on a particular device or screen size. In some cases, tiles resize and flow to fit smaller resolution screens when space becomes limited.

Because text fonts can appear too small or too large on different screen sizes, you can set the font size for each screen size:

  1. From the preview screen, select a Device and a Size.
  2. Switch to Designer mode.
  3. Select the widget whose text you want to resize.
  4. On the Styling tab, use the Text Selection list to choose which text in the widget you want to resize, and then use the slider to choose an appropriate Font Scale.