Skip to main content

How to Use the Tabs Layout in Storydoc

Learn how to add and customize a Tabs layout in Storydoc to organize content and track reader engagement.

Written by Jack

Adding a Tabs Block to Your Story

The Tabs block lets you organize multiple sections of content into a clean, interactive layout. Readers can click through each tab to explore different information, and you'll get analytics showing which tabs they engaged with most.

To add a Tabs layout, look for the Add a Content Block icon on the right side of the editor, then select Tabs from the list of available content blocks.

v0_frame_001

Screenshot 2026-06-29 184233.png

Customizing Each Tab

Click on any individual tab to select it and access its settings. The toolbar at the top of the editor will show options to customize that tab, including:

  • Align — control how content is aligned within the tab

  • Background color and Border color — style the tab's appearance

  • Border and Radius — adjust the tab's shape and outline

  • Layout — set the content ratio inside the tab

  • Anchor — link to this tab from elsewhere in the story

  • Pin tab — choose which tab appears first when the reader reaches this section

Tab selected with toolbar options including Layout, Anchor, and Pin tab visible

Choosing a Layout for Each Tab

Each tab can have its own layout, independent of the others. Click Layout in the toolbar to open the Container Ratio options. You can choose from:

  • 30/70 — smaller left column, larger right column

  • 50/50 — equal split

  • 70/30 — larger left column, smaller right column

  • 100 — full-width single column

This means each tab in your block can have a completely different visual structure — for example, one tab could show a chart on the right with text on the left, while another tab shows a full-width image.

Container Ratio options shown in a dropdown with four layout options

Adding Content Elements to a Tab

Once you've selected a layout, you can add any element into each tab's content areas. Click inside the tab's content zone to reveal the Add element prompt, then choose from Text, Image, Video, or More to browse additional element types.

Each tab is edited independently — switch between tabs to add and customize content for each one separately. This lets you present completely different content under each tab heading.

Tab content area showing text and image columns with Add element options visible

Editing Tab Titles

To rename a tab, simply click directly on the tab's title text and type your new label. Tab titles should clearly describe what the reader will find inside — for example, "First-year results" or "Second-year results."

Tab title renamed to

Adding and Deleting Tabs

You can manage the number of tabs in your block at any time:

  • To add a tab, click the Duplicate button (shown at the far right of the tab bar when a tab is selected). This creates a copy of the selected tab, including its layout and content.

  • To delete a tab, select the tab and click the Delete button from the tab's options menu.

Duplicate button highlighted on the right side of the tab bar

Pinning a Default Tab

Use the Pin tab option in the toolbar to choose which tab is shown first when a reader arrives at this section. Click Pin tab while the desired tab is selected, and that tab will be the default open view for your readers.

Completed Tabs block showing

How Readers Experience Tabs

From the reader's perspective, the Tabs block is fully interactive. Readers can click through each tab to view the different content sections at their own pace.

As the creator, you'll receive analytics on which tabs each reader clicks. This tells you which sections of your content they were most interested in — useful for understanding what resonates with your audience and following up on the right topics.

Did this answer your question?