Touch Components 101

Your homepage for AEM building blocks

Encyclopedia

All

Actions Add user interaction points

Compound Layouts Packaged mini-layouts

Lists Create lists of synced content

Multimedia Insert images, audio & video

References Embed content from many sources

Structural Create space for new components

Text & Navigation

Components are the literal building blocks for AEM pages. Simply insert them into designated zones to construct page layouts and add content to your site.

Basic functionality is intuitive, though it takes some familiarity to know when to use what, and how to best leverage each. For accelerating your applied knowledge, turn to our Design Demonstration Site and the specific component tutorials listed in the Component Encyclopedia to the left.

Text Instruction

PDF Download

Video will pause and prompt where to click to continue
Chapters accessible from the toolbar in the video player
View in fullscreen desktop

Written Instructions

The baseline for all components

Search, select

Locate the desired component

From the far upper-left, click the Side Panel menu.
Click the Components list. The list of components is displayed.
Locate the desired component. Use the filter or category tools to assist.
1. Filter: Enter text to search.
2. Category: Open the menu to sort by the classic categories (Layout, Form, Image, Text, etc…)
Click the (i) information icon next to the component tile for descriptions.

Insert

Add components into pages

There are two methods to insert a component onto a page: (1) From the Components list or (2) directly from the component zone on the page.

Component list:
1. Click and drag the desired component from the list into a component zone on the page (where it says “Drag components here”)
2. Release the mouse when the blue arrow indicates a satisfactory position for the component.
Component zone:
1. Click a component zone directly from the page.
2. Click the (+) Insert component button from the toolbar.
3. From the popup window, click to select the desired component. Components are listed first in categories, then alphabetically.

Configure

Universal controls

Once on the page, click the component once to open the toolbar. A full list of functions listed below.

Note: Not all components have the following functions

Edit: A quick edit option that allows text and/or image adjustments.
Configure: Open the full configuration window.
Copy: Clone the component onto the clipboard.
Cut: Lift the component onto the clipboard.
Delete: Remove the component from the page.
Insert: Add a new component onto the page.
Paste: Lay copied/cut component from the clipboard
Group: Select multiple components (CTRL + Click).
Parent: Navigate the component nesting hierarcy. (e.g. a Panel Builder, Accordion or Tab).
Convert to experience fragment variation: ??

Find a doctor

Clinics & Services

Research Resources

Professional Training

Education Resources

Sandbox