Skip to main content

How to Author Components

Once a component has been inserted on a page, you then will need to author the component; configuring it's settings and setting up options as needed. Users can single-click on any component to highlight and select it for further editing.

Component Toolbars

Component toolbars are the main way users interact with a component's options. Each component has a toolbar with a limited set of options and options may vary between each component.

By selecting a component when clicking on it, the Component Toolbar will appear and may include any/none of the following items:

Edit

Some components allow for direct editing in-line of certain fields. Those components will display this icon. Selecting the icon will automatically activate the inline field editor.

Configure

Opens a pop-up CQ Dialog for configuring the properties of the selected component.

Styles

For changing the Styles of the selected component, if available.

Copy

For copying the selected component(s). Multiple components may be selected using Ctrl + Clicking individual components. All currently-configured component settings will carry over.

Cut

This is the same as "Copy," except when doing a Paste this component will be removed from it's original location.

Delete

This will delete the selected component(s).

Insert

Opens the Insert New Component CQ Dialog window for selecting a new component to insert.

Paste

This will paste the previously-copied or cut component(s) directly above the selected component.

Group

For selecting a group of components so you can copy, cut, or delete them at once.

Parent

For quickly viewing and selecting the parent container components of the selected component.

Convert to Experience Fragment Variation

Will convert the selected component(s) into an Experience Fragment.

Layout

For quickly changing the layout or width of the seleced component without the need to switch to Layout mode.

Moving a Component

There may be instances where, after placing a component, the component needs to be placed elsewhere.

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. AEM indicates where the component can be deposited. Drop it in your desired location.

Component Library

Follow the link below to our Component Library to understand what each component does and how to set them up for use.