Tabs help you organize information, giving your page a tidy and streamlined look. Here’s a quick guide to creating tabs using Studio box and anchor link features.

Here’s what you’ll need:

Start by dragging a box from the left panel onto the canvas.

Expand the box and set padding for the top and bottom.

Add a text box inside the main box and style it as needed.

Add buttons inside the main box for switching between tabs.

Place content to display with Tab 1 (AAA).

Select the parent box for the buttons and the parent box for content, then group them (⌘ + G).

Set the group’s width to 100% and make any necessary responsive design adjustments.

Copy the grouped box from earlier to create Tab 2 and Tab 3.

Set the height of the outermost box to “auto” and adjust the content and design of Tab 2 and 3.

Assign unique IDs to each grouped box containing buttons and content (e.g., tab-1, tab-2, tab-3) in the right panel.

Set anchor links on each tab switch button to connect to the corresponding content.

Add padding to the top of each tab for smooth transitions.

Select Tab 1, 2, and 3 together with "Shift" and group them (⌘ + G).

Set the width of the newly grouped boxes to 100%. With this group still selected, adjust the alignment to "→" and overflow settings to "Hide."

Finally, adjust the position of the heading text box using negative margins.

Use the live preview feature to test how your tab navigation looks and works.