---
title: "Editing components on your page using the visual page builder"
date: "2021-03-12T09:51:12+00:00"
summary: "Learn to edit components effortlessly using our visual page builder. Master accessing toolbars, editing nested elements, and managing overlapping components for a smoother website customization experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/editing-components-your-page-using-visual-page-builder"
id: "5f9c00b4-71ac-4bde-a40e-4c68568aab9b"
---

Table of contents will be added

Accessing the components toolbar
--------------------------------

Move your mouse pointer over the component you want to edit to display its toolbar. You can move your cursor over the **drag handle** on the left of the toolbar to display the name of the component.

![8938212a-component-tooltip.png](https://acquia.widen.net/content/jxuasnkd4d/web/8938212a-component-tooltip.png?v=bd49b31c-a696-4943-bc8c-a1b46c3edee8)

Editing a component
-------------------

1.  Click on the **edit button** in the component toolbar to open the components content and settings form.
2.  Make your changes in the component form and click **Apply**.  
      
    
    ![92817e9c-edit-component.png](https://acquia.widen.net/content/kylrjq99qm/web/92817e9c-edit-component.png?v=a883905b-2687-4846-b767-89cac5e0a243)
    

Important

When you edit a component, your change will not be saved until you click **Save now** in the top right off the screen.

Editing overlapping nested components
-------------------------------------

Sometimes, two components may overlap and occupy the same space. When this happens, the toolbars for the components will be combined into a horizontal stack and the following behaviors will apply:

*   Each component in the stack is represented by a drag handle.
*   The component to the left is the parent of the component to its right.
*   When you move your cursor over the each handle, the name of the component will be displayed as a tooltip.
*   To access the toolbar of each component, click on the drag handles.

### Editing overlapping components

1.  Move your mouse over the **drag handles** to locate the component you want to edit. Tooltips provide the name of each component.  
      
    
    ![be37f45e-overlapping-component-drag-handle.png](https://acquia.widen.net/content/tycgzvoewp/web/be37f45e-overlapping-component-drag-handle.png?v=47b0b5c3-bf97-47da-8a57-7a62a28e53c4)
    
      
     
2.  Click on the **drag handle**. This will expand the toolbar for that component.
3.  Click on the **ellipsis button** to open the component menu or click on the **edit button** to edit the components settings and content.  
      
    
    ![e4f6dca1-overlapping-component-menu.png](https://acquia.widen.net/content/vokujpspsq/web/e4f6dca1-overlapping-component-menu.png?v=ddb3bb2f-6d94-4fa3-9978-24dbcf94e039)