Tabs are a great way to organize information and create clean, easy-to-read pages. In this article, we'll walk you through one way to build tabs using Studio.Design's boxes and anchor links, like the example shown above.
Note: About this tab implementation
This method simulates tab switching visually through design — it doesn't create a proper HTML tab structure. As a result, features like keyboard navigation may not work correctly, and some visitors may not be able to use it.
Note: Behavior inside modals
On sites published with the new publishing platform, this tab-switching method may not display or work correctly when placed inside a modal. If you want to switch between pieces of content inside a modal, consider using the URL query filter feature instead.
1. Set up the base box
Add a box that will serve as the foundation for the entire tab system (both the tabs and their content).
If you'd like to include a heading, add a text box inside the base box.
2. Create the first tab and its content
As an example, let's build a design with three tabs: "Dog," "Cat," and "Rabbit."
Create the full set of tabs.
First, design what it should look like when the "Dog" tab is selected.
Next, create the "Dog content" that will appear when the "Dog" tab is selected.
Place this layer at the same level as the tabs in step 1.
Group the "Dog tab (selected)" and the "Dog content" together.
Name this group "Dog selected."
Set the "Dog selected" box to 100% width and auto height.
Tip: If the design inside the content stays the same across device sizes, this is a great point to make responsive adjustments — it'll save you time later.
3. Duplicate the tabs
Duplicate the "Dog selected" box (layer).
Update the design and layer name for each copy to match "Cat" and "Rabbit."
Set the height of the base box to [auto].
4. Set IDs and anchor links
Give each tab an ID.
For example:
・"Dog selected" box: dog
・"Cat selected" box: cat
・"Rabbit selected" box: rabbit
Add anchor links on every tab that point to the corresponding animal.
(In this example, you'll set 9 links in total.)
Now, when someone clicks a tab, the page jumps to the design where that tab is selected, making it look like the content has switched.
5. Final layout adjustments
Add equal top padding to each of the "Dog selected," "Cat selected," and "Rabbit selected" boxes. (This helps reduce any visual jumpiness when switching tabs.)
Group the "Dog selected," "Cat selected," and "Rabbit selected" layers together. Set the group's width to [100%].
With the group still selected, apply the following settings:
・Layout direction: right
・Alignment: top-left
・Overflow: set to [Hide], and check the [Use hidden instead of clip] option.
Finally, fine-tune the position of the heading text box using a negative margin.
6. Check and publish
Once everything is set up, use Live Preview to make sure the tabs work as expected.
If you're editing a site that's already live, be sure to update the site. Your changes won't appear on the live site until you do.