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.
Note: This tab implementation might not be fully accessible for all users, particularly those using keyboards.
Structure
Here’s what you’ll need:
Box: The main container
Heading Text: Titles for each section
Parent Box for Tabs: Holds all tabs together
Tab 1, Tab 2, Tab 3: Individual tabs
Tab Switch Buttons: For navigating between tabs
Content: Different content for each tab
Steps
1. Place a Box
Start by dragging a box from the left panel onto the canvas.
Expand the box and set padding for the top and bottom.
2. Add Heading Text
Add a text box inside the main box and style it as needed.
3. Create Tabs
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.
4. Duplicate Tabs
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.
5. Set IDs
Assign unique IDs to each grouped box containing buttons and content (e.g., tab-1, tab-2, tab-3) in the right panel.
6. Add Anchor Links
Set anchor links on each tab switch button to connect to the corresponding content.
7. Make Final Adjustments
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.
8. Live Preview
Use the live preview feature to test how your tab navigation looks and works.