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
| Available in: Salesforce Classic |
|
Available for purchase in: Enterprise, Performance, and Unlimited Editions Available (with limitations) in: Developer Edition |
| User Permissions Needed | |
|---|---|
| To build, edit, and manage Site.com sites: |
Site.com Publisher User field enabled on the user detail page AND Site administrator or designer role assigned at the site level |
- To select a page element, either click it on the page, or select it in the Page
Structure pane (
). This highlights the element
on the page and displays the item's selector bar and
Actions menu (
).
- 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 | Edit on its selector bar.
- Select or hover over the element in the Page Structure pane and click | 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 | Move on its selector bar.
- Drag the item to your preferred location in the Page Structure pane, or
select it and click | Move | Direction. You can also drag all page elements other than panels to
your preferred location in the Page Structure pane.
- Select the element on the page and drag it to the correct position, or
click
- 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 (
), or by clicking one of the bottom resize handles and
clicking Disable Auto Height in the popup message that
appears.
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 | Delete on the item's selector bar.
- Press DELETE.
- Click
on the toolbar. - In the Page Structure pane, click | Delete.
- Click
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.