---
title: "Creating and editing tabbed content using the visual page builder"
date: "2021-03-12T10:17:20+00:00"
summary: "Learn to create and edit tabbed content effortlessly using our visual page builder. Master adding, reordering, and customizing tabs with step-by-step instructions and helpful tips for a polished, interactive user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-and-editing-tabbed-content-using-visual-page-builder"
id: "bdf3d9a5-b4e7-4de7-81d8-e176c4cd4a41"
---

Tabbed content is a special case where the drag and drop behavior has been modified.

Adding tabs to a tabs container
-------------------------------

If you have a 'Tabs container component' and a 'Tab item component' you have to use the **Add before,** **Add after** or **Duplicate** to add more than one tab item component. 

1.  **Drag** the first **tab item** into the tabbed container.  
      
    
    ![638bd456-drag-first-tab-item.png](https://acquia.widen.net/content/tqa253noej/web/638bd456-drag-first-tab-item.png?v=623f998f-bbbd-434d-9e3d-4b37a58c2b0b)
    
      
     
2.  Then, to add another tab, click on the **ellipsis button** on the first tab and either click **Duplicate** to duplicate the first tab, or click **Add after** or **Add before** to add another tab item component.  
      
    
    ![f1c99c6c-add-second-tab.png](https://acquia.widen.net/content/frazl9mq7f/web/f1c99c6c-add-second-tab.png?v=18d69b49-a6ed-4269-aa25-dd1c93b86244)
    

Important

To select the tab item, you must move your mouse pointer over the content area or the tab and not the tab itself.

Reordering tabs
---------------

You cannot drag the tabs to reorder them because this would interfere with the tabs own interactive behavior. To reorder your tabs:

1.  Click on the **tab** that you want to move.
2.  Then, click on the **ellipsis button** for the tab. To access the toolbar for a tab, you need to move your mouse pointer over the content area of the tab and not the tab itself.
3.  Then click **Move up** or **Move down** to move the position of the tab in relation to the other tabs.  
      
    
    ![0893e943-reorder-tabs.png](https://acquia.widen.net/content/kj9h8oghb4/web/0893e943-reorder-tabs.png?v=3100cf95-f73d-418c-afaa-fe948ef763f7)
    

Important

You must first select the tab you want to affect. Then, open its menu to use the 'Move up' and 'Move down' controls.