Core components

Content tree

The Content Tree panel provides a hierarchical view of all components added to the page. In the Content Tree, the components are arranged according to their placement within different sections of a page. Click an item in the Content Tree to view the component on the page and display a toolbar for working with the object in the page editor.

• Provides the page structure
• Clickable to auto-scroll to find components in the content area
• Helpful for complex page structures
• Mirrors wireframe designs

Mode switcher

The page editor has several modes that enable you to switch the context in the page editor to focus on different aspects in the editing process. You can click the Down Arrow icon between the Edit and Preview buttons in the page toolbar to change between modes.

The different modes of AEM are:

• Edit: Default mode for component editing
• Preview: Quickly view the content area without the authoring tools
• Annotate: Add comments and markups
• Layout: Modify layout rules for different devices
• Developer: Used to investigate the page technically
• Timewarp: View a page version based on a date

Adding components using drag & drop

You can add components using the drag and drop method.

Drag and drop from the side panel:

• Blue half circle indicates placement
• Can be difficult to gauge where in the page structure

Adding components using + icon

You can add components using the + icon on the toolbar. Clicking + to add a component directly above the selected component allows exact placement of a component, without worrying whether it is in one container or another parent container. For complex pages this is extremely helpful.

Advantages of adding component using + icon on toolbar:

• Precise placement above component
• Side panel not needed