Agencies
Services
How to Insert Components
What are Components?
- AEM components are used to hold, format, and render content made available on your webpages.
- Components can often be thought of as building blocks or bricks in building out your webpage.
- Many components will have preformatted features, such as font size and style, in order to maintain design consistency across the entire site experience.
- However, each component may have individual options and features that expand upon the functionality and user experience available. If there are any questions as to how components should be formatted, please see the style guide.
The Root Container Component
On any editable page, you will see a component called "Container [Root]" with a button "Drag components here." Anywhere you see those words in AEM means you can add various components to populate that section of the page.
How to Add New Components to Your Page
Add a Component from the Paragraph System
There are 2 ways to add a component from the paragraph system:
- click the "+" sign
- double-click the "Drag components here" box
Click the "+" Sign
Single click on "Drag components here" and you will see an "+" icon, which prompts a component list that you can select from.
Double-click "Drag components here"
Double-click on "Drag components here" and you will see an menu popping up, allowing you to select a component from the list.
Select a Component
After either one of the processes above, you will see a component list. The component list is grouped into categories. Select the component you wish to insert.
Tip: In the event you know the name of the component, you can begin typing in its name and the component list will search for that component.
Add a Component from the Components Browser
Drag and Drop
An alternate to adding a component through the paragraph system (above), is to open the Side Panel and drag and drop one of the options from the Component Library.
By opening the Side Panel and selecting the Components tab from within, users may see a full list of components that are allowed to be inserted on this page template. Users may insert new components from this same list by clicking and dragging an item on the list directly on to the page; dropping the component where needed.
Next Steps: Authoring Your Components
With the insertion of components onto the page users will need to learn about configuring their components.