Inserting a Component
Inserting a Component
After you open the page, you can start to add content. You do this by adding components (also called paragraphs).
To insert a new component:
-
There are several methods of selecting the type of paragraph you want to insert:
-
Double-click the area labeled Drag components or assets here… - the Insert New Component toolbar opens. Select a component and click OK.
-
Drag a component from the floating toolbar (called sidekick) to insert a new paragraph.
-
Right-click an existing paragraph and select New… - the Insert New Component toolbar opens. Select a component and click OK.
-
-
In both the sidekick and the Insert New Component toolbar you see a list of the available components (paragraph types). These may be split into various sections (for example, General, Columns, and so on), which can be expanded as required.
Depending on your production environment, these choices may differ. For complete details on components, see Default Components.
-
Insert the component that you want on the page. Then double-click the paragraph, a window opens that lets you configure your paragraph and add content.
Inserting a Component using the Content Finder
You can also add a new component to the page by dragging an asset from the Content Finder. This automatically creates a component of the appropriate type containing the asset.
This is valid for the following asset types (some will be dependent on page/paragraph system):
Asset Type | Resultant Component Type |
---|---|
Image | Image |
Document | Download |
Product | Product |
Video | Flash |
To create a component by dragging one of the above asset types:
-
Make sure that your page is in Edit mode.
-
Open the Content Finder.
-
Drag the required asset to the required position. The component placeholder shows you where the component will be positioned.
A component, appropriate for the asset type, will be created at the required location - it will contain the selected asset.
-
Edit the component if necessary.
Editing a Component (Content and Properties)
To edit an existing paragraph, do one of the following:
-
Double-click the paragraph to open it. You see the same window as when you created the paragraph with the existing content. Make your changes and click OK.
-
Right-click the paragraph and click Edit.
-
Click twice on the paragraph (a slow double-click) to enter the in-place editing mode. You will be able to directly edit the text on the page, instead of inside a dialog window. In this mode, you will be provided with a toolbar at the top of the page. Just make your changes and they will be automatically saved.
Moving a Component
To move a paragraph:
-
Select the paragraph to be moved:
-
Drag the paragraph to the new location - AEM indicates where the paragraph can be moved to with a green checkmark. Drop it in your desired location.
-
Your paragraph is moved:
Deleting a Component
To delete a paragraph:
-
Select the paragraph and right-click:
-
Select Delete from the menu. AEM WCM requests confirmation that you want to delete the paragraph as this action cannot be undone.
-
Click OK.
Cut/Copy/Paste a Component
As when Deleting a Component you can use the context menu to copy, cut and/or paste a component
Inherited Components
Inherited components can be the product of various scenarios, including:
-
Multi site management; also in combination with scaffolding.
-
Launches (when based on livecopy).
-
Specific components; for example, the Inherited Paragraph System within Geometrixx.
You can cancel (then re-enable) the inheritance. Depending on the component, this can be available from:
-
Live Copy
If a component is part of a livecopy or launch, it is indicated by a padlock icon. You can click the padlock to cancel the inheritance.
- The padlock icon is shown when the component is selected; for example:
- The padlock is also shown in the dialog of components; for example:
-
An Inherited Paragraph System
The configuration dialog. For example, as with the Inherited Paragraph System within Geometrixx:
Adding Annotations
Annotations allow other authors to provide feedback on your content. This is often used for review and validation purposes.
Previewing Pages
There are two icons in the bottom border of the sidekick that are important to previewing pages:
-
The pencil icon shows you that you are currently in edit mode where you can add, modify, move or delete content.
-
The magnifying glass icon lets you select preview mode where the page is displayed as it will be seen in the publish environment (a page refresh is sometimes also needed):
In preview mode the sidekick will be reduced, click the down arrow icon to return to edit mode:
Find & Replace
For larger scale edits of the same phrase a Find & Replace menu option lets you search for, and replace multiple instances of a string, within a section of the website.
Locking a Page
AEM lets you lock a page, so that no one else can change the contents. This is useful when you are making numerous edits to one specific page, or when you need to freeze a page for a short while.
To lock a page:
-
In the Websites tab, select the page that you want to lock.
-
Double-click the page to open it for edit.
-
In the Page tab of sidekick, select Lock Page:
A message shows that your page is locked to other users. In addition, in the right pane of the Websites console, AEM WCM displays the page as locked and indicates which user has locked the page.
Unlocking a Page
To unlock a page:
- In the Websites tab, select the page you want to unlock.
- Double-click the page to open it.
- In the Page tab of sidekick, select Unlock Page.
Undoing and Redoing Page Edits
Use the following keyboard shortcuts while the content frame of the page has focus:
- Undo: Ctrl+Z (Windows) or Cmd+Z (Mac)
- Redo: Ctrl+Y (Windows) or Cmd+Y (Mac)
When you undo or redo the removal, addition, or relocation of one or more paragraphs, flashing (default behavior) highlights indicate the affected paragraphs.
Undoing and Redoing Page Edits - The Theory
AEM stores a history of actions that you perform and the sequence in which you performed them. So, you undo several actions in the order that you performed them. Then, you can use redo to re-apply one or more of the actions.
If an element on the content page is selected, the undo and redo command applies to the selected item, such as a text component.
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 make decisions 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 again to move the paragraph, use the redo command.
- 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
- Copying, cutting, and pasting items across pages
- Adding, removing, and changing files and images
- Adding, removing, and changing annotations and sketches
- Changes to Scaffold
- Adding and removing references
- Changing property values in component dialog boxes.
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.
Experience Manager
Adobe Experience Manager Sites at Summit
Register for these user sessions:
- Put the Customer at the Center and Build Relationships That Last a Lifetime (attend online)
- Adobe Experience Manager Sites: Top Innovations (attend online)
- How EY Enhanced Regulatory Knowledge Management with Adobe Solutions (attend online)
- Elevate and Empower Teams with Agentic AI for Exceptional Experiences (attend online)
- The True Cost of a Failed Implementation (attend online)
Connect with Experience League at Summit!
Get front-row access to top sessions, hands-on activities, and networking—wherever you are!
Learn more