---
schema_version: "1"
id: 50308868a4d351ab8495bc7cb81335086fcbdd0920ba039df92e7e5ac2b2c9dd
title: How Page Layout Elements Display in Lightning Experience
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/layouts_in_lex.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.layouts_in_lex.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 524266eb658a2b735583f094caa110b05388459ef3f13123efaec2dea6d4224d
description: When you change your page layouts in Salesforce Classic, it can impact the content shown on object record pages in Lightning Experience. However, in Lightning Experience, the page elements look different, and some features are not supported.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# How Page Layout Elements Display in Lightning Experience

When you change your page layouts in Salesforce Classic, it can impact the content shown on object record pages in Lightning Experience. However, in Lightning Experience, the page elements look different, and some features are not supported.

### 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: Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Page layouts are available in: <strong>All</strong> Editions</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Creation and deletion of page layouts is available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

Here’s a sample contact record in Lightning Experience. The highlights panel (1) contains key record fields and is the only part of a record page that you can’t customize using the page layout editor. The fields in the highlights panel are customized using a compact layout.

![Sample Contact Record Page in Lightning Experience](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/lex_contact_record_home.png)

These page layout elements are supported in Lightning Experience.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:22.32142857142857%">
        <col style="width:77.67857142857142%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d154172e94"><strong>Feature</strong></th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d154172e98"><strong>Description</strong></th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Actions</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">
            <p> Actions display in different places, such as the
              <strong class="uicontrol">Highlights Panel</strong> (1),
              <strong class="uicontrol">Activity</strong> tab (2), and the
              <strong class="uicontrol">Chatter</strong> tab (3). The actions are derived from
              the list of actions in the <strong class="uicontrol">Salesforce Mobile and Lightning
                Experience Actions</strong> section of the page layout.
            </p>
            <p style="margin-bottom:0;"><strong>Important:</strong> Some actions aren’t supported in Lightning
              Experience.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Blank Spaces</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">Blank spaces are supported in Lightning Experience.</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Canvas Apps</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">Canvas apps are supported in Lightning Experience.</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Custom Links</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">Custom links display under the <strong class="uicontrol">Details</strong> tab
            (4).</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Fields</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">
            <p>On pages that don’t use <span class="keyword">Dynamic Forms</span>, fields from
              the page layout display in a block under the
              <strong class="uicontrol">Details</strong> tab (4). You can remove or
              reorder fields on a page layout only via the page layout editor.
            </p>
            <p>On <span class="keyword">Dynamic Forms</span>-enabled pages, fields can be put
              almost anywhere on the page, using the <strong class="uicontrol">Lightning App
                Builder</strong>. A page layout defines which fields are
              available for use on the page, but the organization of the fields is
              done in the <strong class="uicontrol">Lightning App Builder</strong>. See <a href="https://help.salesforce.com/s/articleView?id=platform.dynamic_forms_overview.htm&amp;release=264.0.0&amp;type=5" title="The more fields that there are on your page layout, the more that the Record Detail component becomes a monolithic block of fields that you can’t customize. With Dynamic Forms, you can migrate the fields and sections from your page layout to individual components in Lightning App Builder. Then you can configure them the same way as the other components on the page - spreading them out across multiple columns and tabs, and dynamically showing and hiding them based on record data, user details, and device type, so that your users get only the fields and sections that they want.">Break Up Your Record Details with Dynamic Forms</a>. </p>
            <p style="margin-bottom:0;">The top-down tab-key order, which allows users viewing a record
              detail page to move through a column of fields from top to bottom
              before moving focus to the top of the next column of fields, isn’t
              supported in Lightning Experience. Even if a page layout is
              configured for a top-down tab-key order, tabbing moves from
              left-to-right through field columns in Lightning Experience.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Related Lists</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">
            <p> Related lists are included as Lightning components in Lightning
              Experience, and they appear in the <strong class="uicontrol">Related</strong>
              tab (5). Not all related lists are supported in Lightning
              Experience.</p>
            <p style="margin-bottom:0;">In Lightning Experience, the related list type determines how many
              fields are displayed in a related list. The <strong class="uicontrol">Basic
                List</strong> related list type displays only the first four
              fields of a related list. The <strong class="uicontrol">Enhanced List</strong>
              type shows up to 10 fields, lets you resize and sort columns,
              perform mass actions, and wrap text. To change the related list
              type, customize the <strong class="uicontrol">Related List–Single</strong>
              component or the <strong class="uicontrol">Related Lists</strong> component in
              the <strong class="uicontrol">Lightning App Builder</strong>.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Report Charts</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 "> Report charts that you add to a page layout appear under the
            <strong class="uicontrol">Details</strong> tab (4) in Lightning Experience. When
            you add a report chart to a page layout, it can take a few moments
            before the chart appears on Lightning record pages.
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Sections</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">
            <p>On pages that don’t use <span class="keyword">Dynamic Forms</span>, sections
              appear along with fields under the <strong class="uicontrol">Details</strong>
              tab (4). A section with no header is incorporated into the section
              above it.</p>
            <p>On <span class="keyword">Dynamic Forms</span>-enabled pages, sections can be
              put almost anywhere on the page using the <strong class="uicontrol">Lightning App
                Builder</strong>.</p>
            <p>See <a href="https://help.salesforce.com/s/articleView?id=platform.dynamic_forms_overview.htm&amp;release=264.0.0&amp;type=5" title="The more fields that there are on your page layout, the more that the Record Detail component becomes a monolithic block of fields that you can’t customize. With Dynamic Forms, you can migrate the fields and sections from your page layout to individual components in Lightning App Builder. Then you can configure them the same way as the other components on the page - spreading them out across multiple columns and tabs, and dynamically showing and hiding them based on record data, user details, and device type, so that your users get only the fields and sections that they want.">Break Up Your Record Details with Dynamic Forms</a>.</p>
            <p>A section with no header is incorporated into the section above
              it.</p>
            <p style="margin-bottom:0;">The <strong class="uicontrol">Detail Page Visibility</strong> setting controls
              whether the section header appears for both the detail page and the
              edit page. If the section header is set to display (or hide) on the
              detail page, the header also displays (or hides) on the edit
              page.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Standard and Custom Buttons</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 ">
            <p> Standard and custom buttons are treated as actions in Lightning
              Experience, just like in the <span class="keyword">Salesforce Mobile App</span>.
              Buttons can appear in various places on a Lightning page, depending on
              the button type and the page type. </p>
            <p style="margin-bottom:0;">Important:Custom buttons that call
              JavaScript aren’t supported in Lightning Experience.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e94 ">Visualforce Pages</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e98 "> Visualforce pages that you added to the page layout appear under the
            <strong class="uicontrol">Details</strong> tab (4). Only Visualforce pages with
            <strong class="uicontrol">Available for Lightning Experience, Experience Builder
              sites, and the mobile app</strong> enabled display in Lightning
            Experience on Lightning pages, utility bars, and the <span class="keyword">Salesforce
              Mobile App</span>.
          </td>

        </tr>
      </tbody>
    </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col>
        <col>
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d154172e340">Feature</th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d154172e343">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Actions</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">
            <p>Actions display in different places, such as the
              <strong class="uicontrol">Highlights Panel</strong> (1),
              <strong class="uicontrol">Activity</strong> tab (2), and the
              <strong class="uicontrol">Chatter</strong> tab (3). The actions are derived
              from the list of actions in the <strong class="uicontrol">Salesforce Mobile and
                Lightning Experience Actions</strong> section of the page
              layout.
            </p>
            <p style="margin-bottom:0;">Some actions aren’t supported in Lightning
              Experience.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Blank Spaces</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">Blank spaces are supported in Lightning Experience.</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Canvas Apps</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">Canvas apps are supported in Lightning Experience.</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Custom Links</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">Custom links display under the <strong class="uicontrol">Details</strong> tab
            (4).</td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Fields</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">
            <p> On pages that don’t use <span class="keyword">Dynamic Forms</span>, fields
              from the page layout display in a block under the
              <strong class="uicontrol">Details</strong> tab (4). You can remove or reorder
              fields on a page layout only via the page layout editor. On
              <span class="keyword">Dynamic Forms</span>-enabled pages, fields can be put
              almost anywhere on the page, using the <strong class="uicontrol">Lightning App
                Builder</strong>. A page layout defines which fields are
              available for use on the page, but the organization of the fields is
              done in the <strong class="uicontrol">Lightning App Builder</strong>. See <a href="https://help.salesforce.com/s/articleView?id=platform.dynamic_forms_overview.htm&amp;release=264.0.0&amp;type=5" title="The more fields that there are on your page layout, the more that the Record Detail component becomes a monolithic block of fields that you can’t customize. With Dynamic Forms, you can migrate the fields and sections from your page layout to individual components in Lightning App Builder. Then you can configure them the same way as the other components on the page - spreading them out across multiple columns and tabs, and dynamically showing and hiding them based on record data, user details, and device type, so that your users get only the fields and sections that they want.">Break Up Your Record Details with Dynamic Forms</a>.
            </p>
            <p style="margin-bottom:0;">
              <span id="layouts_in_lex__top_down_key_tabbing_in_lex"><a name="layouts_in_lex__top_down_key_tabbing_in_lex"><!-- --></a> The top-down tab-key order,
                which allows users viewing a record detail page to move through
                a column of fields from top to bottom before moving focus to the
                top of the next column of fields, isn’t supported in Lightning
                Experience. Even if a page layout is configured for a top-down
                tab-key order, tabbing moves from left-to-right through field
                columns in Lightning Experience. </span>
            </p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Related Lists</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 "> Related lists are included as Lightning components in Lightning
            Experience, and they appear in the <strong class="uicontrol">Related</strong> tab
            (5). Not all related lists are supported in Lightning Experience. In
            Lightning Experience, the related list type determines how many fields
            are displayed in a related list. The <strong class="uicontrol">Basic List</strong>
            related list type displays only the first four fields of a related list.
            The <strong class="uicontrol">Enhanced List</strong> type shows up to 10 fields,
            lets you resize and sort columns, perform mass actions, and wrap text.
            To change the related list type, customize the <strong class="uicontrol">Related
              List–Single</strong> component or the <strong class="uicontrol">Related
              Lists</strong> component in the <strong class="uicontrol">Lightning App
              Builder</strong>. </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Report Charts</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 "> Report charts that you add to a page layout appear under the
            <strong class="uicontrol">Details</strong> tab (4) in Lightning Experience. When
            you add a report chart to a page layout, it can take a few moments
            before the chart appears on Lightning record pages.
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Sections</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 "> On pages that don’t use <span class="keyword">Dynamic Forms</span>, sections
            appear along with fields under the <strong class="uicontrol">Details</strong> tab
            (4). A section with no header is incorporated into the section above it.
            On <span class="keyword">Dynamic Forms</span>-enabled pages, sections can be put
            almost anywhere on the page using the <strong class="uicontrol">Lightning App
              Builder</strong>. See <a href="https://help.salesforce.com/s/articleView?id=platform.dynamic_forms_overview.htm&amp;release=264.0.0&amp;type=5" title="The more fields that there are on your page layout, the more that the Record Detail component becomes a monolithic block of fields that you can’t customize. With Dynamic Forms, you can migrate the fields and sections from your page layout to individual components in Lightning App Builder. Then you can configure them the same way as the other components on the page - spreading them out across multiple columns and tabs, and dynamically showing and hiding them based on record data, user details, and device type, so that your users get only the fields and sections that they want.">Break Up Your Record Details with Dynamic Forms</a>. A section with no header is incorporated into the section
            above it. The <strong class="uicontrol">Detail Page Visibility</strong> setting
            controls whether the section header appears for both the detail page and
            the edit page. If the section header is set to display (or hide) on the
            detail page, the header also displays (or hides) on the edit page. </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Standard and Custom Buttons</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 ">
            <p>Standard and custom buttons are treated as actions in Lightning
              Experience, just like in the <span class="keyword">Salesforce Mobile
                App</span>. Buttons can appear in various places on a
              Lightning page, depending on the button type and the page type.
            </p>
            <p style="margin-bottom:0;"><span id="layouts_in_lex__sfx_no_support_for_js_buttons"><a name="layouts_in_lex__sfx_no_support_for_js_buttons"><!-- --></a>Custom buttons
                that call JavaScript aren’t supported in Lightning
                Experience.</span></p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e340 ">Visualforce Pages</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d154172e343 "> Visualforce pages that you added to the page layout appear under the
            <strong class="uicontrol">Details</strong> tab (4). Only Visualforce pages with
            <strong class="uicontrol">Available for Lightning Experience, Experience Builder
              sites, and the mobile app</strong> enabled display in Lightning
            Experience on Lightning pages, utility bars, and the <span class="keyword">Salesforce
              Mobile App</span>.
          </td>

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

These page layout elements aren’t supported in Lightning Experience.

- Expanded lookups
- Mobile cards
- S-controls
- Section header visibility for Edit Page
- Tags

The Lightning App Builder is used to customize the layout of Lightning Experience record home pages, not the enhanced page layout editor.

#### See Also

- [User Interface Elements for the Enhanced Page Layout Editor](https://help.salesforce.com/s/articleView?id=platform.customize_layoutcustomize_pd_elements.htm&release=264.0.0&type=5 "This list describes the enhanced page layout editor user interface elements and how you can use them in your page layout. To add elements, drag them from the palette to the layout. Valid drop locations show up in green. To remove elements, drag them off the layout and back to the palette.")
- [Customize Buttons on the Tabbed Activity Composer](https://help.salesforce.com/s/articleView?id=sales.activitytimeline_configure_call_task_event_tabs.htm&type=5&language=en_US)
- [Custom Record Page Settings](https://help.salesforce.com/s/articleView?id=xcloud.customize_records.htm&type=5&language=en_US)