Editing Page Content editing-page-content

After your page is created (either new or as part of a launch or live copy), you can edit the content to make the updates you require.

Content is added using components (appropriate to the content type) that can be dragged onto the page. These can then be edited in place, moved, or deleted.

Your account needs the appropriate access rights and permissions to edit pages.
If you encounter any problems, Adobe suggests that you contact your system administrator.
If your page, or template, or both are set up appropriately, you can use a responsive layout when editing.
When in Edit mode, links in your content are visible, but not accessible. Use Preview mode if you want to navigate using the links in your content.

Page Toolbar page-toolbar

The page toolbar offers access to the appropriate functionality, dependent on the page configuration.

Page Toolbar

The toolbar offers access to numerous options. Depending on your current context and configuration, some options may not be available.

  • Toggle Side Panel

    This opens/closes the side panel, which holds the Asset Browser, Component Browser, and Content Tree.

    Toggle Side Panel

  • Page Information

    It provides access to the Page Information menu including page details and actions that can be taken on the page including viewing and editing page information, viewing page properties, and publishing/unpublishing the page.

    Page Information

  • Emulator

    Toggles the emulator toolbar, which is used to emulate the look-and-feel of the page on another device. This is automatically toggled in layout mode.


  • ContextHub

    Opens the context hub. Only available in Preview mode.

    Context Hub

  • Page Title

    This is purely informational.

    Page Title

  • Mode Selector

    It displays the current mode and lets you select another mode such as edit, layout, timewarp, or targeting.

    Mode Selector

  • Preview

    Enables preview mode. This displays the page as it appears when published.

    Preview mode

  • Annotate

    It lets you add annotations to the page when reviewing a page. After the first annotation, the icon switches to a number indicating the number of annotations on the page.


Status Notification status-notification

If a page is part of a workflow or multiple workflows, this information is shown in a notification bar at the top of the screen when editing the page.

workflows notification

The status bar is only visible to user accounts with appropriate privileges.

The notification lists the workflow that is running against the page. If the user is involved in the current workflow step, options to affect the workflow status and get more information about the workflow are also available such as:

  • Complete - Opens the Complete Workitem dialog box

  • Delegate - Opens the Complete Workitem dialog box

  • View details - Opens the Details window of the workflow

Completing and delegating workflow steps by way of the notification bar works as it does when participating in workflows from the Notification inbox.

If the page is subject to multiple workflows, the number of workflows is displayed at the right end of the notification along with arrow buttons to let you scroll through the workflows.

Notification for number of workflows

Component Placeholder component-placeholder

The component placeholder is an indicator to show where a component is positioned when you drop it - above the component you are currently hovering over.

  • When adding a component to the page (dragging from the component browser):

    adding a new component

  • When moving an existing component:

    moving an existing component

Inserting a Component inserting-a-component

Inserting a Component from the Components Browser inserting-a-component-from-the-components-browser

You can add a component by using the component browser. The component placeholder shows you where the component is positioned:

  1. Make sure that your page is in Edit mode.

  2. Open the component browser.

  3. Drag the required component to the required position.

  4. Edit the component.

On a mobile device, the component browser fills the entire screen. Once you start dragging a component, the browser closes to show the page again so you can place the component.

Inserting a Component from the Paragraph System inserting-a-component-from-the-paragraph-system

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

  1. Make sure that your page is in Edit mode.

  2. There are two ways to select and add a 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 component selection

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

    The Insert New Component dialog box opens to let you select your required component:

    Insert New Component

  3. The selected component is added to the bottom of the page. Edit the component as required.

Inserting a Component using the Assets Browser inserting-a-component-using-the-assets-browser

You can also add a 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 is valid for the following asset types (some depend on the page/paragraph system):

Asset Type
Resultant Component Type
Content Fragment
Content Fragment
This behavior can be configured for your installation. See Configuring a Paragraph System so that Dragging an Asset Creates a Component Instance 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.

    A component, appropriate for the asset type, is created at the required location - it contains the selected asset.

  4. Edit the component, if necessary.

On a mobile device, the asset browser fills the entire screen. When you start dragging an asset, the browser closes to show the page again so you can place the asset.

When browsing the assets, if you find that you must make a quick change to an asset, click the edit icon next to the asset’s name to start the Asset Editor.

edit icon

Edit/Configure/Copy/Cut/Delete/Paste edit-configure-copy-cut-delete-paste

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

The actual actions available to the user are shown as appropriate and not all actions may be described here.

component toolbar options

  • Edit

    Dependent on the component type, this lets you edit the content of the component. Often a toolbar is provided.


  • Configure

    Dependent on the component type this lets you edit and configure the properties of the component. Often a dialog box is opened.


  • Copy

    This copies the component to the clipboard. The original component remains after a paste.


  • Cut

    This copies the component to the clipboard. After the paste action, the original component is removed.


  • Delete

    This deletes the component from the page with your confirmation.


  • Insert component

    This opens the dialog box to add a component.

    Insert Component

  • Paste

    This 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.
    • The pasted item is pasted above the item where you select the paste action.
    • The Paste action is only shown if there is content on the clipboard.


    note note
    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.
  • Group

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


  • Parent

    This lets you select the parent component of the selected component.


  • Layout

    This 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.


  • Convert to an Experience Fragment variation

    This lets you create an Experience Fragment from the selected component or add it to an existing Experience Fragment.

    Convert to Experience Fragment Variation

Edit (Content) edit-content

There are two methods of adding or editing content in components:

Component Edit Dialog component-edit-dialog

You can open a component to edit the content using the Edit (pencil) icon of the component toolbar.

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

  • Text component

    Text component

  • Image component

    Image component

    note note
    Editing does not work on an empty image component.
    Drag or upload an image (using Configure) before you can start to edit it.
  • Image component - full screen

    Entering full screen mode for the image component allows for more space to edit the image and showing extra editing options such as Launch Map and Reset Zoom. In addition, full screen allows for crop presets to be selected.

    Image component full screen

  • Components constructed from more than one basic component, such as the Text & Image foundation component, first ask you to confirm which set of edit options you want:

    Components edit options

Drag and Drop Assets into Component drag-and-drop-assets-into-component

For specific component types you can drag and drop assets from the asset browser directly into the component to update the content:

Asset Type
Component Type
Content Fragment
Content Fragment

Edit (Content) Full Screen Mode edit-content-full-screen-mode

For all components the full screen mode can be accessed with (and exited from):

Edit Full Screen Mode

For example, the Text component:

Text editor

For some components, the full screen mode has more options available than the basic in-place editor.

Moving a Component moving-a-component

To move a paragraph component:

  1. Select the paragraph to be moved with either select-and-hold or click-and-hold.

  2. Drag the paragraph to the new location. AEM indicates where the paragraph can be deposited. Drop it in your desired location.

    moving paragraph component

  3. Your paragraph is moved.

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

Edit Component Layout edit-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. This saves time by not having to leave the edit mode.

  1. When in the Edit mode of the sites console, selecting a component reveals the component’s toolbar.

    Edit mode in form

    Click the Layout action so you can adjust the layout of the component.

    Component toolbar

  2. Once the Layout action is selected:

    • 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.

    Form preview on multiple devices

    You can now modify the layout of the component as you would in layout mode.

  3. After making the necessary layout changes, click Close in the component action menu to stop modifying the layout of the component. The component’s toolbar returns to its normal edit state.


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

Inherited Components inherited-components

Inherited components can be the product of various scenarios, including:

You can cancel (then re-enable) the inheritance. Depending on the component, this can be available from:

  • Live Copy

    The component toolbar, if the component is on a page that is part of a live copy or launch (based on a live copy). For example:

    Live Copy

    The Cancel Inheritance option is available:

    Cancel Inheritance

    Or, re-enable inheritance if canceled already:

    Reenable inheritance

    The Rollout action is also available in the blueprint or Live Copy source:


  • An Inherited Paragraph System

    The configuration dialog box. For example, as with the Inherited Paragraph System:

    Inherited Paragraph System

Editing the Page Template editing-the-page-template

If the page is based on an editable template, you can easily switch to the template editor by selecting Edit Template in the Page Information menu.

If the page is based on a static template, you can switch to Design mode using the page mode selector on the toolbar to enable/disable components for use on the page.

You can easily see which template the page is based on when selecting the page in either Column view or List view.

Live Copy Status live-copy-status

The Live Copy Status page mode allows you a quick overview of the live copy status and which components are/are not inherited:

  • Green border: Inherited
  • Pink border: Inheritance is canceled

For example:

Live copy inheritance status

Adding Annotations adding-annotations

Annotations allow reviewers and other authors to provide feedback on your content. They are often used for review and validation purposes.

Previewing Pages previewing-pages

There are two options for previewing a page:

  • Links in the content are visible, but not accessible in Edit mode.
  • Use either of the preview options if you want to navigate using your links.
  • Use the keyboard shortcut Ctrl-Shift-M to switch between preview and the last selected mode.
The WCM Mode cookie is set for both options.

Preview Mode preview-mode

When editing content, you can preview the page using the preview mode. This mode lets you do the following:

  • Hide various edit mechanisms so you can have a Quickview of how the page appears when it is published.
  • Use links to navigate.
  • It does not refresh the page content.

When authoring, the preview mode is available using the icon at the top right of the page editor:


View as Published view-as-published

The View as Published option is available from the Page Information menu. This opens the page in a new tab, refreshes the content, and shows the page exactly as it appears when it is published.

Locking a Page locking-a-page

AEM lets you lock a page, so that no one else can modify the contents. This is useful when you are making numerous edits to one specific page or when you must freeze a page for a short while.

A page can be locked from either:

  • Sites console

    1. Select the page with selection mode.
    2. Select the lock icon.

    Lock icon

  • Page Editor

    1. To open the menu, select the Page Information icon.
    2. Select the Lock Page option.

Once locked the console view information is updated and when editing a lock symbol is shown in the toolbar.

Lock symbol

Locking a page can be performed when impersonating a user. However a page locked in this way can only then be unlocked by the user who was impersonated or by the admin user.
Pages cannot be unlocked by impersonating the user who locked the page.

Unlocking a Page unlocking-a-page

Unlocking a page is similar to locking the page. When the page is locked, the lock options are replaced by unlock actions.

The Page Information menu lists Unlock as an option and the Lock icon in the sites console is replaced by an Unlock icon.


Locking a page can be performed when impersonating a user. However a page locked in this way can only then be unlocked by the user who was impersonated or by the admin user.
Pages cannot be unlocked by impersonating the user who locked the page.

Undoing and Redoing Page Edits undoing-and-redoing-page-edits

The following icons let you undo or redo an action. These are shown in the toolbar when appropriate:

Undo and Redo

The keyboard shortcut Ctrl-Z is also available to undo page edit actions.
The keyboard shortcut Ctrl-Y is also available to redo page edit actions.
See Undoing and Redoing Page Edits - The Theory for the full details of what is possible when undoing and redoing page edits.

Undoing and Redoing Page Edits - The Theory undoing-and-redoing-page-edits-the-theory

Your system administrator can configure various aspects of the Undo/Redo features according to the requirements for your instance.

AEM stores a history of actions that you perform and the sequence in which you performed them. This functionality means that you can undo multiple actions in the order that you performed them and redo them to re-apply one or more of the actions, if necessary.

If an element on the content page is selected (such as a text component), then the undo and redo command applies to the selected item.

The behavior of the undo and redo commands is similar to that in other software programs. Use the commands to restore the recent state of your web page as you decide about content. For example, if you move a text paragraph to a different location on the page, you can use the undo command to move the paragraph back. If you then decide that the previous position was better, use the redo command to “undo the undo”.

You can:
  • Redo actions as long as you have not made a page edit since you used undo.
  • Undo a maximum of 20 edit actions (default setting).
  • Also use Keyboard shortcuts for undo and redo.

You can use Undo and Redo for the following types of page changes:

  • Adding, editing, removing, and moving paragraphs
  • In-place editing of paragraph content
  • Copying, cutting, and pasting items within a page

Form fields that form components render are not meant to have values specified while authoring pages. Therefore, the undo and redo commands do not affect changes that you make to the values of those types of components. For example, you cannot undo the selecting of a value in a drop-down list.

Special permissions are required to undo and redo changes to files and images.
The history of changes to files and images lasts for a minimum of ten hours. Beyond this time however, the reversal of changes is not guaranteed. Your administrator can change the default time of ten hours.