---
schema_version: "1"
id: 7039b7f8d7630b2126b99fdf1014a42aef6485191c4c722092547c12dececc46
title: Edit and Work with Site.com Page Elements
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_objects_working_with.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_objects_working_with.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 619ede9b9469bb2c6df046c9ce774e06a447a97ae3046261f8e1d50acfa3379e
description: The Page Structure pane displays the hierarchy of all elements on the page and is a very useful way of selecting, moving, and reordering elements, particularly for more complicated page designs.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Edit and Work with Site.com Page Elements

The Page Structure pane displays the hierarchy of all elements on the page and is a very useful way of selecting, moving, and reordering elements, particularly for more complicated page designs.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d84536e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d84536e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d84536e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
        </tbody>
      </table>

- To select a page element, either click it on the page, or select it in the Page Structure pane (![Page Structure](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_domtree.png)). This highlights the element on the page and displays the item's selector bar and **Actions** menu (![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)).
- To edit a page element, such as a content block, image, or custom code, either:
    - Double-click the element on the page.
    - Select the element on the page and click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Edit** on its selector bar.
    - Select or hover over the element in the Page Structure pane and click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Edit**.
    - Click **Edit Content** on the toolbar (for content blocks only).
- To move a page element, either:
    - Select the element on the page and drag it to the correct position, or click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Move** on its selector bar.
    - Drag the item to your preferred location in the Page Structure pane, or select it and click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Move** | **Direction**. You can also drag all page elements other than panels to your preferred location in the Page Structure pane.
- To resize a page element, select it and drag the resize handles to the correct size. If the corner resize handles are unavailable, it means the item's Auto Height property is enabled, which adjusts the height depending on its contents. To resize it to a set height, disable the property by either deselecting **Auto Height** in the Properties pane (![Properties](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_properties.png)), or by clicking one of the bottom resize handles and clicking **Disable Auto Height** in the popup message that appears.
    
    ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)
    
    Tip If you disable the Auto Height property on an image, but you want it to retain its aspect ratio—the relationship of height to width—press and hold down the SHIFT key while you drag to resize it.
    
    Alternatively, if you're using CSS to style the page element, adjust the style of the class or ID that styles it.
- To delete an element, select it and either:
    - Click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Delete** on the item's selector bar.
    - Press **DELETE**.
    - Click ![Cut](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_cut.png) on the toolbar.
    - In the Page Structure pane, click **![Actions](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_actions.png)** | **Delete**.

If a site page or page template is based on another page template:

- The content of all editable page elements on a child page or template is linked to the content of the editable elements on its parent page template. When you update the content of an editable page element on the parent template, the changes are pushed down to any child pages or page templates. However, if you modify the content of an editable page element at the child page or template level, you break the link between the elements, and any subsequent changes made to the page element on the parent template don't trickle down to its children.
- You can't reposition or resize its page elements. However, if the element's Auto Height property is enabled in the template, the height adjusts to fit the content in the template-based page. To edit the page element, you must edit it in the page template.
- You can't delete its page elements. To delete the page element, you must delete it from the page template.
- You can't alter the events, properties, or style of an editable page element, such as its color, position, and size.

#### See Also

- [Site.com Page Elements](https://help.salesforce.com/s/articleView?id=platform.siteforce_objects.htm&release=264.0.0&type=5 "Page elements are the building blocks of your site pages and page templates. Combined, they provide the page's structure and content.")
- [Add Site.com Page Elements](https://help.salesforce.com/s/articleView?id=platform.siteforce_objects_add.htm&release=264.0.0&type=5 "Page elements are the building blocks of your site pages and page templates. Panel elements add structure to your pages. You can think of both pages and panels as “containers” for the page elements that you add to them.")
- [Add Content Blocks to Pages](https://help.salesforce.com/s/articleView?id=platform.siteforce_contentblock_add.htm&release=264.0.0&type=5 "Content blocks contain the text of your website pages, and can also house images, videos, and hyperlinks. Designers and site administrators can add content blocks to pages when in Design Mode.")
- [Lay Out Site.com Pages Using Panels](https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_add.htm&release=264.0.0&type=5 "A panel is a useful layout tool that defines the logical divisions of your page and lets you group page elements together for easy movement and positioning. Think of it as a container for other page elements, including other panels, or as a div that wraps around the content placed within it. Panels are ideal for adding editable areas to page templates.")
- [About Editable Page Elements](https://help.salesforce.com/s/articleView?id=platform.siteforce_page_about_editable_elements.htm&release=264.0.0&type=5 "When you mark a page element as Editable on a page template, that page element becomes editable in any child pages or templates derived from the parent template.")