---
schema_version: "1"
id: b7c3f799ad9e66d26b8669d662ced498ce67620f421cbf1297891693e6da7532
title: Create a Flexible Layout
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/community_builder_flexible_layout.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.community_builder_flexible_layout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 7e2ed6ad92cec42b28034c432e3f43fdb78cd35bb3a22c360902ca895711846e
description: Build highly customized pages using flexible layouts. Create and resize columns within each section, then add and stack sections to build out the page. Bring it all to life with background images and color.
products:
  - Experiences
release: "264"
---
# Create a Flexible Layout

Build highly customized pages using flexible layouts. Create and resize columns within each section, then add and stack sections to build out the page. Bring it all to life with background images and color.

### 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: both Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</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="d37182e70">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d37182e70 ">To customize an Experience Cloud site:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d37182e70 ">
              <ul>
                <li>Be a member of the site AND Create and Set Up Experiences</li>

                <li>OR</li>

                <li>Be a member of the site AND an experience admin, publisher, or builder in that
                  site</li>

              </ul>
            </td>

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

1. [Create a custom page](https://help.salesforce.com/s/articleView?id=experience.community_builder_create_page.htm&release=264.0.0&type=5 "To extend your Experience Builder template, create custom site pages. To get the most from your Salesforce data, add custom record detail, list, and related list pages. To display individual pieces of content along with any combination of components, use CMS content pages.") using a flexible layout. When you select a flexible layout for your page, you can’t change the layout type. The flexible layout lets you customize your page layout to suit your content needs.
    - To use a flexible layout with an existing page, [create a page variation](https://help.salesforce.com/s/articleView?id=experience.community_builder_create_page.htm&release=264.0.0&type=5 "To extend your Experience Builder template, create custom site pages. To get the most from your Salesforce data, add custom record detail, list, and related list pages. To display individual pieces of content along with any combination of components, use CMS content pages.").
    - To make the page span edge to edge, giving you full-screen-width sections, use the Set Max Page Width setting. First, [create a theme layout](https://help.salesforce.com/s/articleView?id=experience.community_builder_theme_apply.htm&release=264.0.0&type=5 "A theme layout defines the top-level regions of your page, such as the header and footer, navigation, search, and the user profile menu. A theme layout component categorizes the pages in your site that share a theme layout.") from **Settings** | **Theme** | **Configure**. Then, in Edit Properties, deselect **Set Max Page Width**. Now you can create a page from this theme layout with sections that span the width of the screen.
2. Build out your sections. A section consists of a row on your page and all its content.
    
    Example section:
    
    ![An example of a section](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_layout_section.png)
    
    - To add a section above or below the current section, click ![Plus icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_add_section_plus_icon.png).
    - To delete a section, click ![Trash icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_trash_icon.png). Deleting a section also deletes its content. Pages must include at least one section. To delete the last section, create another section and try again.
    - To reorder sections, drag the section to place it where you want it.
3. To customize a section, select it. Use Column Options to add, remove, and resize columns in this section.
    
    - To customize the column structure in this section, select a column layout preset (1).
    - In the Column Distribution field (2), use the handles between columns to resize them. The columns snap to a 12-column grid. The number in each column represents the grid units that the column uses out of 12. To get two columns of equal width, give each column a value of 6. A section can have up to six columns.
    - To delete a selected column, click the ![delete icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_x_icon.png) beneath it. Deleting a column also deletes its content.
    
    ![Customize section options](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_section_options.png)
4. Use Section Style to add some panache, like background images and color.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small "><colgroup><col style="width:26.525198938992045%"> <col style="width:73.47480106100795%"></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Color</td><td class="slds-cell-wrap" style="vertical-align:top;">Sets the section’s background color. To set a color, click the color swatch and use the color selector or enter a specific hexadecimal code in the text box. Use the slider to adjust the color’s strength.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Image</td><td class="slds-cell-wrap" style="vertical-align:top;">Adds a background image to the section. Upload an image or select one from your org’s asset library. Then select the Image Layout and Image Position in the section.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Image Overlay Color</td><td class="slds-cell-wrap" style="vertical-align:top;">Adds an overlay color to the section. To set a color, click the color swatch and use the color selector or enter a specific hexadecimal code in the text box. Use the slider to adjust the color’s opacity.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Section Height</td><td class="slds-cell-wrap" style="vertical-align:top;">Use the slider to set the minimum section height in pixels. The section adjusts automatically when content is taller. The minimum doesn’t apply to phones or tablets in portrait mode.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Content Width</td><td class="slds-cell-wrap" style="vertical-align:top;">Use the slider to set the content width as a percentage of the full width of the section. This setting doesn’t apply to phones or tablets in portrait mode.</td></tr></tbody></table>
    
    ![Section styles in the property panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_section_style.png)

#### See Also

- [Create Custom Site Pages with Experience Builder](https://help.salesforce.com/s/articleView?id=experience.community_builder_create_page.htm&release=264.0.0&type=5 "To extend your Experience Builder template, create custom site pages. To get the most from your Salesforce data, add custom record detail, list, and related list pages. To display individual pieces of content along with any combination of components, use CMS content pages.")
- [Change the Theme Layout of Your Experience Cloud Site’s Pages](https://help.salesforce.com/s/articleView?id=experience.community_builder_theme_apply.htm&release=264.0.0&type=5 "A theme layout defines the top-level regions of your page, such as the header and footer, navigation, search, and the user profile menu. A theme layout component categorizes the pages in your site that share a theme layout.")