Salesforce Docs Portal

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

Available in: both Salesforce Classic and Lightning Experience
Available in: Enterprise, Performance, Unlimited, and Developer Editions
User Permissions Needed
To customize an Experience Cloud site:
  • Be a member of the site AND Create and Set Up Experiences
  • OR
  • Be a member of the site AND an experience admin, publisher, or builder in that site
  1. Create a custom page 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.
    • 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 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
    • To add a section above or below the current section, click Plus icon.
    • To delete a section, click Trash icon. 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 beneath it. Deleting a column also deletes its content.
    Customize section options
  4. Use Section Style to add some panache, like background images and color.
    Color 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.
    Image 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.
    Image Overlay Color 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.
    Section Height 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.
    Content Width 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.
    Section styles in the property panel

See Also