---
title: "Adding components to your page using the visual page builder"
date: "2021-03-12T09:42:19+00:00"
summary: "Learn how to easily add components to your page using the visual page builder. Discover multiple methods including drag-and-drop, quick-add buttons, and inserting into drop zones for efficient and flexible page construction."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-components-your-page-using-visual-page-builder"
id: "853ea050-9ec1-43d9-a8b8-1575cf4bd97c"
---

Table of contents will be added

You can add components you your page using drag and drop or one of the other methods described below. 

Using drag and drop
-------------------

1.  Click on the **Plus button** in the top left of the layout canvas to open the side bar browser.  
      
    
    ![44b8c68a-open-sidebar-browser.png](https://acquia.widen.net/content/68123a60-9d90-41dc-80dd-70773739c358/web/44b8c68a-open-sidebar-browser.png)
    
      
     
2.  **Drag and drop** a component onto the page. Once dropped, the component will be displayed.  
      
    
    ![c33e1167-drag-and-drop.png](https://acquia.widen.net/content/e120b608-4b96-43b5-8c00-ec6eb97c48ae/web/c33e1167-drag-and-drop.png)
    

Click to add components to the top or bottom of the page
--------------------------------------------------------

1.  Click on the **plus button** at the top of the layout canvas to add components to the top or click on the **plus button** at the bottom of the layout canvas to add components to the bottom.   
      
    
    ![44b8c68a-open-sidebar-browser.png](https://acquia.widen.net/content/68123a60-9d90-41dc-80dd-70773739c358/web/44b8c68a-open-sidebar-browser.png)
    
      
     
2.  Click on the small **plus button** on the component you want to add to the page.  
      
    
    ![20857962-click-to-add-component.png](https://acquia.widen.net/content/1a2922c1-5946-4ff3-8ab1-68f34fead69a/web/20857962-click-to-add-component.png)
    
      
     

Click to add components directly before or after another component
------------------------------------------------------------------

1.  Click on the **ellipsis button** on one of the components on your page to open the component menu.
2.  Then click **Add content before** or **Add content after** in the menu.  
      
    
    ![911a9049-add-content-before-after.png](https://acquia.widen.net/content/c7477749-732f-4f2a-87c8-96fe10cd1355/web/911a9049-add-content-before-after.png)
    
      
     
3.  Then click on the small **plus button** on the component you want to add to the page.  
      
    
    ![20857962-click-to-add-component.png](https://acquia.widen.net/content/1a2922c1-5946-4ff3-8ab1-68f34fead69a/web/20857962-click-to-add-component.png)
    
      
     

Adding components into empty drop zones
---------------------------------------

If a component includes a drop zone, a placeholder for the drop zone will be displayed on the page. To add a component into the drop zone:

1.  Click on the **plus button** in the center of the drop zone.
2.  Then drag a component into it.
3.  Once a drop zone is populated by at least one component, the drop zone placeholder disappears.  
      
    
    ![1e9308e2-drag-into-drop-zone.png](https://acquia.widen.net/content/227490cd-f848-49e5-9f85-c7cb0a7c8275/web/1e9308e2-drag-into-drop-zone.png)
    

Adding components into populated drop zones
-------------------------------------------

When a drop zone includes at least one component, the drop zone placeholder is removed. To add another component to the same drop zone: 

1.  Drag and drop a component before or after any component already in the drop zone. A visual placeholder will show you where the component will be placed.  
      
    
    ![7378b42f-drag-into-populated-drop-zone.png](https://acquia.widen.net/content/d601190c-47da-4a25-9ee0-12b639b8031f/web/7378b42f-drag-into-populated-drop-zone.png)
    
      
     
2.  You can also click on the **ellipsis button** on a component within a drop zone and then click on **Add before** or **Add after.**
3.  Then click on the **plus button** on the component you want to insert.  
      
    
    ![4b22d4de-add-before-after-drop-zone.png](https://acquia.widen.net/content/76dec491-dc63-4395-bce1-157f312c9a93/web/4b22d4de-add-before-after-drop-zone.png)
    

Important

Use **Add before** and **Add after** to insert components into complex devices like sliders, accordions and tabs.