---
schema_version: "1"
id: 0aefbd4e6bbcc96162e3964e6683a0a0083f3b2e922937a31470a889b10de793
title: Lay Out Site.com Pages Using Panels
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_panel_add.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_add.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 37d533233e1184315b857ad5749dae64d861937b0f4e68e18593af192229cd6e
description: 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.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Lay Out Site.com Pages Using Panels

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.

### 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="d199519e77">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d199519e77 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d199519e77 ">
              <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>

When you create a page template or site page, you can use predefined page layouts that include headers, footers, and columns, which are created using panels. After it’s created, you can then further modify the layout to match your site's design.

If you need to add more divisions to the page and you're not familiar with CSS, the easiest method is to use row and column panels. This feature adds panels with predefined CSS positioning to ensure they align correctly on the page.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)

Note Predefined page layouts, and row and column panels use inline CSS to set their position. If you're familiar with CSS and are using CSS rules to style your site, you can remove the inline CSS by deleting it from the Code tab in the Style pane (![Style](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_css.png)) and clicking **Apply**.

To add row and column panels to a page:

1. Select the page (the top folder icon) 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)).
2. 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)** | **Add Rows and Column Panels**.
3. Select the number of row or column panels you require. If the page already contains content, it is placed in the first new panel.

To add a row panel:

- Above a panel, select the panel on the page or 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)** | **Add Rows and Column Panels** | **Insert Row Above**
- Below a panel, select the panel on the page or 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)** | **Add Rows and Column Panels** | **Insert Row Below**

To add row and column panels to another panel:

1. Select the panel on the page or in the Page Structure pane.
2. 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)** | **Add Rows and Column Panels**.
3. Select the number of row or column panels you require. If the page already contains content, it is placed in the first new panel.

To add a single panel, drag a **Panel** from the Page Elements pane (![Page Elements](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_pageitems.png)) onto the page.

By default, the height of a panel automatically adjusts when you add content to it because its Auto Height property is enabled. You can [disable the property to resize and reposition](https://help.salesforce.com/s/articleView?id=platform.siteforce_objects_working_with.htm&release=264.0.0&type=5 "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.") panels. If you hover over a panel on the page, an information popup appears that displays the width and height of the panel.

![Information popup with width and height displayed](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_panel_dimensions.png)

When you drag a page element onto a panel, the edges change color, indicating that the element is now grouped within it. To remove the element from the group, drag it outside the panel.

#### See Also

- [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.")
- [Position Panels Using CSS](https://help.salesforce.com/s/articleView?id=platform.siteforce_panel_position.htm&release=264.0.0&type=5 "A panel is a useful layout tool that defines the logical divisions of your page. Using CSS, you can position panels and improve the layout of the page.")
- [Changing a Page Element's HTML Tag](https://help.salesforce.com/s/articleView?id=platform.siteforce_html5_render.htm&release=264.0.0&type=5 "By default, panels, data repeaters, data elements, custom code, and content blocks are each defined as a div, but you can change this to any other HTML tag using the HTML Tag property. This gives you greater flexibility and control over how the page element is displayed on the page.")