Editing a Page

Launching the Editing Window

In the WCM, double-click on the page you wish to edit.  You may do this from either the left panel or the right panel.

The Editing Window for the page will launch in a new browser tab or window.  This is where you will be adding and changing content on the page.

Tip:  If you close the WCM and need to re-open it, you can click on the 'globe' button in the bottom right-hand corner of Sidekick labeled "Websites".

Adding Components

Before you can add the actual content to a page (e.g., text, images, etc.), components need to placed.  Components can be seen as "content containers" that tell AEM the type of content to expect, and what properties and fields it should display for editing.

The list of available components is located on the first tab in the Sidekick menu.  They are grouped under General, Columns, Form, Social and Other and are listed alphabetically.

To move a component, you can hover over a component and then click-and-drag on the light blue border surrounding it. Note, to move in this manner, you must drag on the border, not inside.

How to Add a Component

To add a component from the Sidekick, drag and drop it either above or below an area marked with "Drag components or assets here".

A green checkmark will appear, indicating that the component can be dropped in this area.  If you drag the component to an area that cannot contain a component, a red circle with a line through it will appear.

 

You can also right-click on the "Drag components or assets here" field and choose "New..." to add a component.

Component Right-Click Menu Options:

  • Edit, Annotate
  • Cut, Copy, Paste, Delete
  • New...

There are the options for interacting with components in AEM's Right-Click Menu. To access this menu, hover over a component and use your mouse's right-click function (CMD+Click for Mac users).

 

Edit pulls up the In-Component Editing window for the component.

Annotate allows you to leave post-it style notes for other authors on the page, and draw freehand shapes to draw attention to areas of the page you want to discuss or change the content of.

Cut deletes the component from its location and saves it to your AEM clipboard. Similarly, Copy saves the component in the clipboard but does not delete it. In another area of the page (or a different page if you navigate to it in the same browser tab through your AEM site), you can then use the Paste feature to insert the component. Delete removes the component without saving it to the clipboard.

Do not use your keyboard's Delete or Backspace key because this will usually trigger a browser's 'back' functionality.

New generates an "Insert New Component" menu, which looks like the Sidekick without the last 4 tabs.

Note: Any modifications you have made to a page in AEM Author will not appear on your live website until you have activated the page.

The next several sections will demonstrate how to use some of the more common components in AEM.  You may also wish to refer to the list of components in AEM for additional examples.