Components

Pages in AEM are comprised of several components which house the content pieces that make up your pages and overall website. Content in components can be both edited and configured to suit the needs of the author. Best practices and guidelines for use of thoe components is outlined in this user guide. 

Types

Most components can be grouped into one of the categories below. All of the components listed in this section should be available to users for use on their page. If you don't see a component listed here, it is likely not available for general use 
 
  • Text: Text components are used to place different text content types on the page. Whether you need to highlight a single piece of content or input a large section of content on your page, these components will handle the task. 
  • Media: Media components allow visual elements to be placed on your pages. In general most media types used will be video and images. 
  • Action: Action components are used when the goal of the component is to have the user complete an action. Examples include both clicking a button or filling out a form. 
  • Organization: These components are supplemental to the content on the page and allow you to organize other components. 
  • Lenses: Lenses are components that display information that exists somewhere else, either through a separate database or on another page in AEM. With lenses, you don't actually enter in the content on the page, rather you pull in formatted data from another source for display on your site. 

Adding Components

There are two ways to add components to your pages. 

  •  

Component Toolbar

Selecting a component will open the toolbar. This provides access to various actions that can be performed on the component. The toolbar is a grey bar that appears above the selected component a horizontal listing of icons are made available in order to perform specific actions on the page. Those icons and actions are described below. 

Edit (Pencil Icon)

Dependent on the component type this will allow you to edit the content of the component . Often a toolbar will be provided.

Configure (wrench icon)

Dependent on the component type, this will allow you to edit and configure the properties of the component. Often a dialog will be opened. 

Copy (two overlapping squares)

This will copy the component to the clipboard. After the paste action, the original component will remain.

Cut (scissors icon)

This will copy the component to the clipboard. After the paste action, the original component will be removed.

Delete (trash can icon)

This will delete the component from the page with your confirmation.

Insert Component (plus sign icon)

This opens the dialog to add a new component. 

AEM Tip

Remember, you can also add components by dragging them from the side rail and dropping on your page. 

Paste (clipboard icon)

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

AEM Tip

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 (square with handle icons)

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