Editing Page Content with the AEM Page Editor edit-content

The AEM page editor is a powerful tool for authoring the content of a page. Learn how to use it to drag-and-drop content and edit content in-place.

Overview overview

There are three basic actions you can take in the page editor to edit your content:

  1. Adding new components by dragging and dropping them onto the page.
  2. Adding new assets by dragging and dropping them onto the page.
  3. Editing components in-place that already exist on the page.

The AEM page editor provides an intuitive UI for performing these tasks in addition to giving access to more advanced features.

In addition, the editor allows you to organize the existing content on you page by allowing you to

Adding Components adding-components

You can drag-and-drop new components onto your page by selecting them from the component browser in the side panel and dropping them in a component placeholder.

Component Placeholder component-placeholder

The component placeholder is an indicator to show where a component will be positioned when you drop it. It has two appearances.

  • When adding a new component to the page (dragging from the component browser), it will appear as a gray box with details of the component you are placing.

    Placeholder when adding a new component to a page

  • When moving an existing component, it will appear as a blue square.

    Placeholder when moving an existing component on a page

In both cases, the target selected will appear as a blue outline below the component you are dragging. The target if where the component will be placed when you release it.

Adding a Component from the Components Browser adding-a-component-from-the-components-browser

You can add a new component by using the component browser. The component placeholder shows you where you are positioning the component.

  1. Make sure that the page editor is in Edit mode.
  2. Open the component browser.
  3. Drag the required component to the required position and release.
  4. Edit the newly-placed component.
On a mobile device, the component browser will fill the entire screen. Once you start dragging a component, the browser will close to show the page again so you can place the component.

Adding a Component from the Paragraph System adding-a-component-from-the-paragraph-system

You can add a new component by using the Drag components here placeholder of the paragraph system:

  1. Make sure that the page editor is in Edit mode.

  2. There are two ways to select and add a new component from the paragraph system:

    • Select the Insert Component option (+) from either the toolbar of an existing component or the Drag components here box.

      Insert a component

    • If you are on a desktop device you can double-click the Drag components here box.

  3. The Insert New Component dialog open to let you select your required component. Tap or click the component you wish to add.

    • Use the search filters to find your component.
    • Use the information icon next to component names to find out more about the component.

    Insert New Component dialog

  4. The selected component is added to the target that you had selected. Edit the component as required.

Adding an Asset adding-asset

You can also add a new component to the page by dragging an asset from the assets browser. This automatically creates a component of the appropriate type (and containing the asset).

This behavior can be configured for your installation. Please see the document Components Reference Guide for further details.

To create a component by dragging one of the above asset types:

  1. Make sure that your page is in Edit mode.
  2. Open the asset browser.
  3. Drag the required asset to the required position. The component placeholder shows you where the component is positioned and a target will show were it will be inserted.
  4. Release the asset onto the target. A component, appropriate for the asset type, is created at the required location containing the selected asset.
  5. Edit the component if necessary.
On a mobile device, the asset browser will fill the entire screen. Once you start dragging an asset, the browser will close to show the page again so you can place the asset.

If when browsing the assets you find that you need to make a quick change to an asset, you can start the asset editor directly from the browser by clicking the edit icon next to the asset’s name.

Editing Components In-Place edit-in-place

Selecting a component opens the component toolbar. This provides access to various actions that can be performed on the component.

Component Toolbar

The actions available in the component toolbar are appropriate for the selected component. You may see more or less depending on your selected component and they may or may not be described here.

  • Edit allows you to modify the content of the component, often in-place. Its behavior depends on the component.

    Edit button

  • Configure allows you to change some parameters of the component not directly related to its content, normally in a dialog. Its behavior depends on the component.

    Configure button

  • Copy copies the component to the clipboard to paste elsewhere. The original component remains unchanged.

    Copy button

  • Cut copies the component to the clipboard. The original component is removed.

    Cut button

  • Delete deletes the component from the page with your confirmation.

    Delete button

  • Insert component opens the dialog to add a new component.

    Insert button

  • Paste pastes the component from the clipboard to the page. Whether the original remains, depends on whether you used Copy or Cut.

    • You can paste to the same page or to a different page.
    • If you paste to a different page that was already open before the cut/copy operation, you must refresh the page to see the pasted content.
    • The pasted item is pasted above the item where you select the paste action.
    • The Pate action will only be shown if there is content on the clipboard.

    Paste button

  • Group lets you select multiple components at once. The same can be achieved on a desktop device by a Control+Click or Command+Click.

    Group button

  • Parent selects the parent component of the selected component.

    Parent button

  • Layout lets you modify the layout of the selected component.

    • This only applies to the selected component and does not activate the Layout mode for the entire page.

    Layout button

  • Convert to an experience fragment variation lets you create an experience fragment from the selected component or add it to an existing experience fragment.

    Convert to Experience Fragment button

Component Edit Dialog component-edit-dialog

Some components offer additional editing options beyond what is available in-place. You can open a component’s edit dialog the Edit (pencil) icon of the component toolbar to access additional configuration options.

The exact edit options will depend on the component. For some components some actions will only be available in full screen mode. For example:

  • Text component

    Toolbar of the text component

  • Image component

    Toolbar of the image component

Edit Components in Full-Screen Mode edit-content-full-screen-mode

Many components offer a full-screen mode for editing that can be accessed with this button.

Full Screen button

Full screen editing allows displaying more editing options than the in-place editor such as for the image component.

Image component in full screen

Use the Minimize button to exist full-screen mode.

Minimize button

Moving Components moving-components

To move a component:

  1. Select the component to be moved with either tap-and-hold or click-and-hold.

  2. Drag the component to the new location.

    • The page editor indicates the position of the component with a placeholder and where the paragraph can be dropped with a target.

    Moving a component

  3. Drop it in the desired location.

You can also use Cut and Paste to move a component.

Editing Component Layout editing-component-layout

Instead of repeatedly switching from edit to layout mode to adjust a component, you can select the Layout action for a component to change that component’s layout and save time by not having to leave the edit mode.

  1. When in Edit mode of the sites console, select a component to reveal the component’s toolbar.

  2. Select the Layout action to adjust the layout of the component.

    The Layout button of the component toolbar

  3. Once the Layout action is selected, you can modify the layout of the component as you would in layout mode.

    • The resizing handles for the component display.
    • The emulator toolbar is shown at the top of the screen.
    • Layout actions instead of the standard edit actions show on the component toolbar.

    A component in layout mode

  4. After making the necessary layout changes, tap or click the Close button in the component action menu to stop modifying the layout of the component and the component’s toolbar returns to its normal edit state.

    The component toolbar of a page component

The Layout action is limited in scope to the selected component. For example, if you are editing the layout of one component and then click another component, the standard edit toolbar (not the layout toolbar) displays for the newly selected component and the resizing handles and the emulator toolbar disappear.
If you need to edit the overall layout of the page, affecting multiple components, switch to the layout mode.

Editing Component Inheritance inherited-components

Inheritance is the mechanism where content can be linked such that changing one automatically changes the other. Inherited components can be the product of various scenarios, including:

You can cancel and re-enable the inheritance. Depending on the component, these options are available from the component toolbar, if the component is part of a live copy or launch.

  • Cancel Inheritance

    Cancel Inheritance button

  • Re-enable Inheritance if inheritance is already cancelled

    Re-Enable Inheritance button

  • Rollout is also available in the blueprint or Live Copy source

    Rollout button