Skip to main content

How to Use Full Screen Side by Side Layout in Storydoc

Learn how to add and customize the Full Screen Side by Side layout block in your Storydoc presentations.

Written by Jack

The Full Screen Side by Side layout lets you place two elements — such as text and media — next to each other in a full-width, immersive block. It's perfect for creating visually striking slides that combine content with images or videos.

Adding the Full Screen Side by Side Layout

To add the layout, hover over the right edge of the editor canvas. Click on Add a content block and select Full Screen Side by Side.

The Add a content block panel showing the Full screen side by side option

Once added, the block will appear with two default areas: a text field on the left and a media placeholder on the right for you to fill in.

Editing the Content Inside the Block

Click directly on the text area to start typing or editing your content. The standard text toolbar will appear at the top, letting you change font size, style, color, alignment, and more.

Text editing toolbar shown while editing the text side of the block

On the media side, you'll see an Add element prompt with options to insert an Image, Video, or Media grid. Click your preferred option to open the media picker.

Default full screen side by side block with text on left and Add element options on right

From the media picker, you can search for stock images or videos, upload your own files, use AI Generate, or browse GIFs and logos. Select your media and click Use media to add it to the block.

Media picker showing stock video search results for

Customizing the Layout Block

Clicking on different parts of the block gives you different customization options. Here's a breakdown of each level:

Clicking on an Individual Element

When you click on a specific element (like the text box or the media grid), a contextual toolbar appears. For the media grid element, foir, you'll see options for Edit content, Align, Style, Radius, Layout, and Anchor.

Media grid selected showing Edit content, Align, Style, Radius, Layout, and Anchor options in the toolbar

Clicking on the Inner Container (Both Elements Area)

If you click on the area that contains both elements together (but not on the outer full-screen frame itself), you'll see options to adjust:

  • Align — horizontally or vertically

  • Background color

  • Border color

  • Border — adjust border thickness using a slider

  • Layout

  • Anchor

Inner container selected showing Background color, Border color, Border options in toolbar with border slider visible

Clicking on the Full Screen Layout Frame

Clicking on the outermost full-screen layout frame (labeled Full screen in the top-left corner of the block) gives you the most global customization options:

  • Align — horizontal and vertical alignment

  • Background — add a background image or video behind the entire block

  • Background color

  • Height — adjust the block height

  • Layout — change the container ratio (40/60, 50/50, 60/40) and media position (Left or Right), as well as the layout style (Straight or Diagonal)

  • Anchor

Full screen layout selected with Background media panel open showing Add background media option

Use the Container ratio setting to control how much horizontal space each side takes up. The Media position setting lets you flip which side your media appears on — Left or Right.



Screenshot 2026-06-30 124146.png

Tip: The Diagonal layout style adds an angled divider between the two sides for a more dynamic visual effect.

Did this answer your question?