Authoring (Editor)

The AEM editor provides powerful functionality to build pages. Through the editor you can add, move, and customize components.

Adding spacing on top and bottom of a component

To add spacing, switch to layout mode by click the icon in the component toolbar shown below.

Component Spacing

Then click the spacing icon,

Component Spacing

and select the amount of spacing for the top and bottom from the dropdown provided.

Component Spacing

Making and publishing changes

Important

After you make changes to your page or site you the users will not be able to see the changes until you publish your page.

Publish

Options

The top left of the editor provides access to open the sidebar or to perform various actions for the page.

Assets

Assets

Assets can be utilized to bring images into image components on page.

Components

Components

In the sidebar the components list can be used to drag and drop or place new components on to the page. The components can be filtered by category or you can search for specific components.

Page Options

Page Options

You can select the page options item at the top left to view various options and actions for the page.

You can select View as Published to view the page as it would look to a user.

View as Published

Editing Mode

Modes

You can change the editor mode or activate preview mode by making a selection in the top right.

Modes

The following editing modes are available:

  • Edit
  • Layout
  • Scaffolding
  • Developer
  • Timewarp

The two modes you will use most often are Edit and Layout

Page Content

You add content or create new components by opening the component sidebar and dragging components onto the page Components

components can be placed into Drag components here boxes in the editor

Components

Toolbar

Toolbar

The toolbar can be activated by tapping or clicking a component in the page. Different options are available for different components.

Inline Edit

Inline Edit

Activates inline editing for the component, allowing you to adjust text, images, and titles on the fly.

Configure Component (Open Dialog)

Dialog

Opens the component properties to configure an individual component

Styles

Styles

Lets you apply various Styles to the selected component. See the component help pages for more information.

Styles

Variants

Variants

Let’s you change how the component behaves or works by selecting various Variants

Variants

Copy

Copy

Copy the selected component.

Warning

You should avoid copying components between pages or sites, this does not follow best practices.

Cut

Cut

Cut the component and store it in the clipboard.

Delete

Delete

Delete the currently selected component.

Paste

Paste

Paste a component from the clipboard into the selected container.

Insert Component

Insert

Insert a new component above the currently selected component.

Group

Group

Group multiple components together to make moving them easier.

Parent

Parent

Activate a Parent of the currently selected component.

Parents

Convert to Experience Fragment

Convert to experience fragment

Turn this component into an Experience Fragment.

Adjust Layout

Adjust Layout

Adjust the size and offset of the currently selected component.

Layout

You can adjust the offset and size of various components within the page grid by entering layout mode.

Modes

In layout mode you’ll have drag points to adjust the component’s size or offset changing it’s position in the page.

Ruler

Adjust Layout

Adjust Layout

Alternatively, you can use the layout icon after left clicking a component to switch to the layout mode.

Hide Component

Hiding a Component Feature

This allows you to hide/unhide a component on certain viewports. This feature is available on v2 of AEM 6.4.

Basic steps in hiding a component

In author, left click the component to open the toolbar, then click on the Layout icon to the right as shown below.

Hide Component

On the next set of tools, click the Hide Component (eye-like) icon to enable the hide feature.

Hide Component

NOTE

To go back to the previous toolbar, click the “x” icon to the right of the hide icon.

Once hidden, a red icon to the right of the component will appear indicating that it is now hidden and will not be displayed on the website except on author.

Hide Component

Hiding a component on different viewports

The viewport emulator is visible on the top section of the page after clicking the layout icon on author.

Hide Component

You will have three viewports to choose from: desktop, tablet, and mobile. Select by clicking which viewport you wish to hide/unhide the component then follow the basic steps mentioned above.

Viewport

So, from right, the breakpoints are:

  1. Desktop
  2. Tablet
  3. Mobile
Desktop (Default)

Viewport

Note

Component hidden on desktop will also be hidden by default on tablet and mobile viewports. So, you have to switch viewport and unhide them.

Tablet

Viewport

Mobile

Viewport

Unhiding the component

To unhide the component, click the Parent icon while on layout view as shown below.

Unhide Component

Then click the immmediate layout container from the dropdown.

Unhide Component

On the next toolbar, click the Show Hidden Components icon.

Unhide Component

Now, to unhide the component, click the eye-with-check-like icon to the left of the component to disable the hide feature.

Unhide Component