Getting Started With Adobe Experience Manager (AEM)

This getting started with Adobe Experience Manager blog is perfect for new users!
i

Written by Katelyn Booth

February 22, 2022

Adobe Experience Manager (AEM) is the most powerful content and digital asset management system. It enables you to efficiently deliver digital content experiences that are innovative, consistent and scalable.

But, there’s a big problem. Because AEM is so comprehensive and flexible, the learning curve
for new users is huge.

The road to AEM success is usually fraught with avoidable rookie mistakes, frequently underused features and endless pages of confusing Adobe documentation. This guide is your fast track to AEM success.

Read on to get:

  • An introduction to key AEM features from our seasoned AEM experts (which is actionable and easy to understand)
  • Pro tips that help you get acclimated to AEM faster and avoid common mistakes
  • Real-world examples of use cases to help you determine how and when to use features
  • Step-by-step tactical instructions to perform common AEM author processes

Don’t have time to go through this beginner’s guide now? (It’s quite in-depth!)

Grab this blog in PDF form and get a couple of bonus documents to help you do more with AEM – or, engage our team to do even more with this powerful platform!

Click to jump to a section:

Environments | Application Consoles | User Interface (UI) | Icon Glossary | Building Blocks | Site Structure | SEO-Friendly URL | Authoring | Assets | Tags | Next Steps

Let’s get started, there’s lots to learn!

Environments

The first step to working effectively in AEM is to understand the types of environments. You can
think of environments like different levels within AEM. Each environment has different functions
and log-in portals. You’ll use different environments for developing, testing, staging and
publishing content.

The first step to working effectively in AEM is to understand the types of environments. You can think of environments like different levels within AEM. Each environment has different functions and log-in portals. You’ll use different environments for developing, testing, staging and publishing content.

Why is this a critical first step? Without a clear understanding of environments, authors tend to:

  • Work inefficiently
  • Accidentally push content live that’s still in testing and development
  • Not effectively troubleshoot common AEM challenges

The three standard environments are: Development, Stage and Production

You’ll have access to different environments based on your role. But, you still need to be familiar with each environment to work efficiently and avoid costly mistakes.

Without a clear understand of envrionments, Adobe Experience Manager beginners tend to work inefficiently and accidentally publish content live

How to use each environment

In each environment, there are at least two instances: Author and Publish.

Frequently Asked Question: If I use the “Publish” instance in the Development or Stage environment, will I push the update live?

No. Publishing in Development or Stage environments won’t push updates live. It will only push the update to that environment’s Publisher instance. Once the content is in Publisher, you can share a link with people who don’t have access to the system. You can make the instance password protected if needed.

You’ll only push an update live in the Publisher instance of the Production environment.

Using Author and Publish instances in each environment

Here’s an example of how to use these three environments and Author and Publish to create a digital experience:

Development Environment

Author instance: Let’s say your team wants to develop a new carousel component for a product landing page redesign. The developer will create, unit-test and receive approval from their local host environment. Then, they’ll release the enhancements in the Development environment and validate the code. Now, as an author, you’ll use the Author instance to build the content using the new feature. Even though your dev team has already validated the code, check for any functionality discrepancies. If there are any, immediately call them out.

Publish instance: When you’re ready for review and initial approval of that content, you’ll move the content to the Publish instance by publishing the page. You’ll then be able to provide a link to the page on the development site for review and testing purposes.

Staging Environment

Author instance: After passing tests in Dev, your team will then migrate the code/content in Staging. Be sure to stress-test all elements so you can identify anything that seems “off” and alert all relevant team members immediately.

Publish instance: When you’re ready for another round of review and approval, you’ll move the content to the Publish instance. If you’re receiving approval from non-AEM users, this is your final approval before moving the content to Production. Be sure to receive a chat or email with approval to continue moving ahead.

Production Environment (Live)

Author instance: Now, your team will use the Author instance in Production to validate code enhancements are working as expected. Then you can begin staging your content in Production. Confirm all new content has replicated exactly from Stage and you have approvals (if needed).

Publish instance: Then, you’ll push the content live by publishing. After publishing, navigate to your website and validate everything is working as expected across various browsers and devices. Then notify your team once the updates are live. Even if all the previous checks passed both dev and author validation, your broader team will want to perform final confirmation on the live site.

Pro Tip #1: Ensure consistency between environments

Testing and consistency are two critical components of every successful development release. Failing to maintain 1:1 content consistency across the environments is a common mistake. It’s inefficient both for developers trying to create code and marketers who are trying to obtain approval for new campaign initiatives.

You need to be consistent to make sure your whole team is testing new enhancements in Development and Stage environments that are as close to the Production version as possible. That will help you avoid delays and mistakes before pushing content live.

Pro Tip #2: Bypass Dispatcher for troubleshooting

If someone sends you a publisher URL for troubleshooting, you need to be able to quickly identify which environment is causing the issue. You can determine the environment by referencing the URL. Dispatcher is a caching tool that improves web page delivery for end-users.

You can bypass the dispatcher by appended a "?" to the publisher URL to see if unwanted caching is causing an issue

You can bypass the Dispatcher by appending a “?” to the Publisher URL to verify if a web page is experiencing unwanted caching instead of an actual error.

Pro Tip #3: Replicating or packaging authored content

To release new content, you have to manually replicate or package any new content across the necessary environments.

Application Consoles

Within AEM’s application, there are nine main consoles available from global navigation. Your accessibility to all consoles is dependent on user permissions and/or licensing.

As a beginner author, you will most frequently use the two most common consoles – Sites and Assets.

But it’s important to be familiar with all nine consoles so you can work most efficiently and work towards fully leveraging AEM’s capabilities.

SitesThis is the Content Management System (CMS) where you build website hierarchies using different content elements. One major advantage of AEM is that it’s extremely agile. With AEM Sites, you can launch new content at the speed your market demands. Website content is the anchor of most brands’ success. Become familiar with this console first and master it.

Assets The Assets console is your traditional digital asset manager (DAM). It has powerful “out-of-the-box” features to upload, edit and manage assets to use across your multi-channel experiences. Assets include images, videos, documents, templates and content fragments. This console also has add-on features, like Dynamic Media and Brand Portal, that accelerate collaboration across your creative and technical teams and vendors. Along with Sites, you’ll use this console the most, especially as a beginner author.

Projects Use this console to correlate different types of information to a “Project” so you can be more organized, productive and streamlined. Information in a project might include assets, experiences, links, description, team, landing pages, emails, workflows, launches and tasks.

Experience FragmentsWith this console, you can create innovative digital experiences that transcend across your different marketing channels — not just your website. Imagine being able to deliver consistent brand messaging across channels without relying on numerous platforms and teams to support and execute your customer journey. AEM Experience Fragments makes this possible by allowing you to create repeating blocks of structured content with different variations for different channels.

Forms This console provides a centralized portal for users to create, manage and publish dynamic forms for web and mobile devices. Data collection through forms is an extremely powerful tool for marketers to obtain first-party intelligence of their audience. The kind of data that can influence strategic, bottom-line-driving decisions. AEM Forms integrates with back-end processes to handle data in meaningful ways.

ScreensThe Screens console allows you to leverage your digital experiences for in-store or in-venue jumbo screens. You might use Screens if you create content for in-person interactions (e.g. brick-and-mortar merchandising displays). Repurpose digital experiences like these to maximize their value.

PersonalizationUse this console to create dynamic content experiences and deliver the right content at the right time on the right channel. With AEM Personalization, you can use known information, like ideal personas, targeted end-users or behavioral interactions, to design personalized experiences. Then, use rules to dictate the process flows to execute.

CommerceIntegrate an eCommerce system into the Commerce console to pull product data into AEM. Then, create personalized B2C shopping experiences based on contextual information. AEM Commerce also supports real-time management of product information, shopping cart, discount promotions, check-out experiences and more.

Communities – Use the Communities console to manage gated community sites and promote end-user engagement around an area of interest or expertise. You might use this console to develop relationships with site visitors through blogs, forums, file sharing, tag mentions or scoring.

User Interface (UI)

AEM has two user interfaces, Classic UI and Touch UI.

  • Classic UI is a legacy version that AEM won’t support in future versions.
  • Touch UI works with both touch and desktop devices, and you’ll notice similar themes featured across the Experience Cloud solution landscape.
Classic UI within AEM
Classic UI

Touch UI allows you to use the latest AEM innovations and sets you up for success when you migrate to AEM Cloud.  Throughout this guide, we’ll cover topics supported by version 6.4 and up using Touch UI.

Need help switching to Touch UI?

Adobe has removed most of the Classic UI documentation from their online resources. If you’re currently using Classic UI, you can find basic handling information within the AEM 6.2 Sites Authoring User Guide.

That being said, it’s critical that you transition to Touch UI to fully leverage the capabilities of AEM and set your team up for success in the future. Need expert help? Check out our AEM consulting.

Classic UI won't be supported in future version of Adobe Experience Manager

Icon Glossary

We’ve built an image glossary to fast-track your acclimation to AEM! Click here to grab it for yourself.

Pro Tip: Be very cautious when deleting content

Once you’ve looked over the glossary, I want to call attention to this fact: there is no recycling bin or archive icon!

Once you delete content, it’s really gone. You’ll only be able to get it back through some expensive development time, so when I say be very cautious, I mean it! I’ve seen clients spend countless hours trying to recover something important that was accidentally deleted and nobody wins in this scenario.

Building Blocks

These will be frequently-used and knowing these will only help you learn the language of Adobe Experience Manager!

Components

Components are configurable elements used to build content. These can be either out-of-the-box Core Components or custom ones that you build using your development resources. We highly recommend using Core Components for the following benefits:

  • Cuts costs and inefficiencies. Components are fundamental to using AEM. Custom components require expensive development time to develop, test and maintain. Core components are out-of-the-box and available for immediate use. They often meet all the needs of users without any customizations needed.
  • Allows you to use the most innovative components. AEM enables you to create the most innovative digital experiences more efficiently and at scale. Core Components are already-tested Adobe proprietary tools to help you get the most out of this platform. 
  • Sets you up for long-term success on AEM Cloud. When you migrate to AEM Cloud, Core Components will automatically update to new versions as they’re released. No more development time spent constantly updating fundamental components to make sure they’re compatible with the new version.

The standardized categories of core components include Templating, Page Authoring, Container, Form, and Commerce.

Templating

  • Navigation: Display a site navigation menu
  • Language Navigation: Display a language switcher
  • Breadcrumb: Display a breadcrumb navigation

Page Authoring

  • Title: Display a page heading
  • Text: Display a rich text paragraph
  • Image: Display an image asset
  • Button: Display a button or anchor button
  • Teaser: Link an image or text
  • Download: Display an asset for download
  • List: Display a list of pages
  • Experience Fragment: Display an experience fragment
  • Content Fragment: Display a content fragment asset
  • CF List: Display a list of content fragments
  • Embed: Embed a third-party widget
  • PDF Viewer: Embed a PDF Viewer widget to display Document Cloud PDF’s
  • Progress Bar: Display a progress indicator
  • Social Sharing: Add social sharing links
  • Separator: Display a section divider

Container

  • Container: Group and layout components
  • Carousel: Cycle through content panels
  • Tabs: Switchable content panels
  • Accordion: Toggle panels of related content

Form

  • Form Container: Group and layout form components
  • Form Text: Display an input field
  • Form Options: Display different options to choose from
  • Form Hidden: Hidden form component
  • Form Button: Display a form button

Commerce

  • Product: Display a commerce product data
  • Product Teaser: Display commerce product teaser
  • Product Carousel: Display commerce product carousel
  • Related Products: Display commerce-related products
  • Product List: Display commerce products
  • Search: Display product search results
  • Featured Category: Display a list of categories

Related: Want more AEM tips and tricks? Try this blog!

Page Templates

With Page Templates, certain Roles (e.g. Admin, Developer, Template Author and Author) can create and edit content templates that other users must abide by. Page Templates help enforce content governance, but one of the advantages of AEM is that you get to decide how flexible or rigid you make these templates.

A comparison of flexible, rigid, and a combination of the two for templating within AEM

A more flexible template is right for you if:

  • Your team includes experienced authors with a keen design eye. You need design experience as well as an understanding of AEM to create effective content experiences with a very flexible template.
  • You need to be more agile and adjust your design on pages based on performance. More flexible templates allow authors to immediately make changes that could impact the customer experience and results, like moving the location of a call-to-action.
  • You need scalability. Your platform is frequently launching new sites that all use the same core functionality.
  • You have resources to anticipate future needs and develop a scalable content architecture.
  • You’re willing to endure the upfront cost for long-term savings and benefit.
  • You’d rather use development resources for creating innovations rather than making minor adjustments based on performance, new solution launches or new marketing tactics.

A more rigid template is right for you if:

  • Your team doesn’t include experienced authors or authors with design experience.
  • You want to promote consistent branding knowing that users can’t stray away from guidelines (since the rigid template doesn’t allow it).
  • Your design and layout don’t frequently change. You might release new products, but how you promote that offering doesn’t change often.
  • You have high author turnover. Or, you have many different markets using the same system and don’t have time for extensive onboarding.
  • When branding requirements change, you’d rather rely on development for the “fool-proof” fix instead of relying on authors to edit templates.

A template that’s mildly flexible and mildly rigid is right for you if:

  • Your marketing department likes to push boundaries to engage with audiences in different ways, but still needs guidelines to be “on brand.”
  • You’re constantly evaluating metrics and recommending UX tweaks to improve performance but you still need to abide by strict brand guidelines.
  • You have mixed skilled authors and provide proper onboarding and documentation.
  • You’re a global brand. You need to be consistent but adhere to localization requirements.
  • You prefer compounded small changes for anticipating future state. But, you’re not willing to completely overhaul the system.

Pro Tip: Become familiar with Roles

When creating a new template, there are a few different Roles necessary to orchestrate this process. These Roles include an Admin, Developer, Template Author and Author. Want more information on Roles? Reference Adobe’s documentation on Page Templates.

Experience Fragments versus Content Fragments

Beginner authors often confuse content and experience fragments. Content Fragments are a powerful tool that helps create consistent content experiences more efficiently. They’re also wildly underused!

Here’s a breakdown of the differences between Experience Fragments and Content Fragments and how to best use them.

Pro Tip: Use structural Content Fragments

There are two types of content fragments — simple and structural fragments. You can’t customize simple fragments — they’re out-of-the-box and have very limited features. In contrast, with a structural content fragment, you make it easier for authors to input content. This is the method we recommend for more customization and consistency.

Ready to create a structural content fragment? You need to create a content fragment model. Click here to skip ahead to the Assets section for step-by-step directions.

Site Structure

To create an intuitive user experience, all websites should follow a similar page hierarchy, like this outline:

Example AEM site structure, including root node

Pro Tip #1: Reorder your pages in your navigation by editing your site structure

In most circumstances, your navigation will pull in from your site structure. AEM will automatically order your pages for you in the order that you created them. If you need to reorder pages, then you need to drag and drop that page within the tree site structure.

For example, you might need to reorder pages if you add a new product page and you want this page to be the first menu item.

Pro Tip #2: Make broad configurations at the root node page so the descendant pages inherit the edit

To maintain the site structure and make any updates or edits, you need to first consider the site hierarchy.

When you’re making global edits, start by finding the root node page where that information is located. You need to find the root node page and make the change there so your edit appears across all applicable pages, not just one page you’re editing. 

A global edit might include updating a logo, header or footer or enabling GDPR settings. This information is going to be in different locations based on your template and developer customizations. If you’re unsure where the information is located, start by searching through the highest nodes.

Once you make the edit to the parent page, the edit will cascade to all descendant pages.

Note: Most developers don’t lock global settings. So, you could break the inheritance of a setting from a parent page to a descendant page and just update a descendant page. If you don’t see your global edit appearing on the homepage, then you likely broke the inheritance and only updated a descendant page.

You need to update the parent or the root node page for the global edit to apply.

Pro Tip #3: Follow this simple process to easily manage images in the system

Make sure your folder structure in Assets mimics your site’s structure. That way you can easily manage images. You’ll stay streamlined across your author team by avoiding duplicate images and disorganization.

Structuring your Adobe Experience Manager DAM like your site makes searching easier!

SEO-friendly URL

The page or asset structure defines URLs. Here’s how to adhere to SEO best practices so users can easily locate your content.

When creating a new page, authors will follow the prompts from the Create Page wizard. Once you select a template, you’re required to add a Title that displays in the browser tab.

Then, you’ll add in the Name field to create the page path. If you don’t add anything in this field, AEM will generate the field based on the Title with all lowercase and hyphens instead of spaces. URLs should be human-readable, meaning that anyone should be able to identify the content without viewing the page.

Do & Don’t SEO URL example:

Men’s Waffle-Knit Tee Product Page URL structure

  • Do: https://www.companyname.com/en/products/mens/waffle-knit-tee.html
  • Don’t: https://www.companyname.com/EN/Products/Mens_Cateogry/sku-TE8308KR.html

Authoring

Sites Action Toolbar

Here’s how to fast-track your familiarity with this toolbar and avoid common mistakes.

  • Create – used to create a new element.
  • Edit – opens a page in Edit mode.
  • Properties – prompts the page properties configurations.
  • Lock – locks a page while working but only the same user can unlock it.
  • Copy – used to replicate an existing element (“1” will be appended to the original name).
  • Move – either move or rename an existing page – this will move child pages as well (unpublish before this action).
  • Quick Publish – this feature will publish the page or new edits.
  • Manage Publication – used to manage publication (publish or unpublish) multiple pages or schedule deployments for a later date and time.
  • Delete – remove a page from the site (unpublish before this action).

Creating a New Page

Step 1: Navigate to the desired parent element within the site’s structure.

Step 2: Either select the blue “Create” button in the upper-right corner or click directly on the parent’s thumbnail. That will prompt the full toolbar menu and you’ll select the first option labeled “Create.” 

Step 3: Then click “Page” to initiate the Create Page wizard.

Step 4: From the Template step, choose your desired template then select “Next” to progress to the Properties setup.

Step 5: Add SEO Title and Name fields. From Properties, add the required Title field that will display in the browser tab. The Name field isn’t required but we recommend adding it for SEO.

Reference the SEO-friendly URL section of this guide for more tips.

Pro Tip: How to create a new page fast… even without documentation

If your instance is lacking documentation or direction, start by crawling the site to identify similar page layouts. Then, within Sites, locate the existing page through the URL structure. Click on the thumbnail to see which template was used.

You have two options to create the new page depending on how closely the existing page should resemble the new page:

1) Copy that page and swap the content

— OR —

2) Use the same template to start building from scratch

That will ensure you have full access to the desired functionality within that given template.

Related read: Key differences between a DXP and CMS to know

Adding Content

AEM's assets toolbar

Step 1: Locate the page. Navigate the tree structure in Sites then click the thumbnail image and select Edit in the upper toolbar. This will open the page in a new tab within the browser. Unless the page is locked, it will be ready for editing.

Step 2: Locate an empty parsys. Find the placeholder text “Drag components here.” (Or you can select an existing component and click the plus sign icon within the action toolbar. That will insert a new component directly above it.)

You can drag and drop a component from the left-side panel. Alternatively, you can select the plus sign icon (the Insert Component dialog) to display the full list of components available within that section.

Parsys is a must-know term for Adobe Experience Manager beginners. It's a placeholder that instructs authors where they can place components.

Step 3: Create a container. When creating a new section of content, you want to first use a container as the parent element to nest components within. With grouped elements, you avoid having to copy and paste one element at a time.

Plus, grouping elements in a container makes it easier to follow guidelines, like margin requirements.

Creating Containers Pro Tip:

Leave extra parsys between each section and subsection to avoid nesting unwanted elements. This also makes it easier to add new content later on.

A common mistake among beginner authors is they end up nesting containers together. That’s disorganized and it could break guidelines and impact UX. Make sure to validate proper nesting by hovering over parent elements and ensuring there isn’t any overlapping.

Using containers is a must for authoring pages in Adobe Experience Manager

Step 4: Add the component and configure. Once you add a component within the container, then you can configure the element. To add content, use the configuration dialog. Configurations will vary depending on requirements, but you can open the dialog by hovering and clicking on an element.

Then, select the wrench icon from the action toolbar. Update the configurations available within the dialog (reviewing every tab). Then click on the checkmark to save or the “X” to cancel without saving.

Layout Container

Layout Containers are an underutilized secret weapon. It allows us to create innovative designs with a business’s existing assets WITHOUT development time.

Here are two pro tips to best use this little-known AEM Core Component:

Work in sections by adding a parent container

Once you have a parent container, you can nest other containers to create more intricate layouts to display your content. A parent container will also provide greater flexibility to maintain optimal rendering across any viewports. To create a parent container, use either the Layout Container or Container from the Core Component library.

Adding containers side by side

First, enable Layout mode by selecting the double-sided arrow on the component’s action toolbar. Then adjust the margins to reduce the size. If you want to add two containers side by side, then add another sibling component and adjust the size ensuring the combined width doesn’t exceed the max-width.

Want more information on AEM’s responsive layout? Click here.

Responsiveness

Responsiveness is a feature you can use when:

  • Responsiveness isn’t ideal AND
  • You need to serve the content to end-users right now

But, this shouldn’t replace front-end development with media queries. This feature is helpful, but it won’t provide the precision achieved through development efforts.

Check responsiveness by viewing your page on different devices

Demo example: Fixing mobile responsiveness

If a page with Core Components isn’t rendering with optimal responsiveness, use the device emulator to adjust content for various viewports. In the image above, the 33/66 container wasn’t stacking automatically in mobile.

So, the author used the emulator to specify the container widths for tablet and mobile devices. You can do this in three easy steps:

  1. Select the emulator icon from the menu
  2. Select each container element and choose the layout feature from the action toolbar
  3. Drag the sides to define the ideal width

Responsiveness Tip: Don’t use this feature to rearrange content

The Responsiveness feature does not support rearranging content at various viewports. If you use the emulator mode to move or remove an element, then this change will affect all devices.

Previewing a Page

After configuring a section, make sure to preview the page before publishing to ensure your layout is matching what you’re seeing in edit mode. We recommend you preview frequently while you’re editing to avoid layout issues.

Here’s how to preview:

Select the Page Information icon in the upper left menu to display the flyout menu then click “View as Published.”

— OR —

You can access preview mode by appending the parameter “?wcmmode=disabled” to your author URL.

Page Properties 

Page Properties handles page-level configurations that are not visible on a page. You might use Page Properties to:

  • Add a vanity URL
  • Add metadata through tags and a description
  • Hide the page in the navigation

How to view Page Properties:

You can view Page Properties from the tree structure of the Sites consoles OR within edit mode by clicking the Page Information menu then selecting “Open Properties.”

Page Properties configurations will differ depending on templates. As an author, it’s important to familiarize yourself with the various features to better inform your decisions when working without defined processes.

Page Properties Pro Tip: Keep it simple

First, test all Page Property options in lower environments before moving to production. If all options perform the same function, then evaluate the best end-user experience. Does one implementation provide a more streamlined experience?

Simplicity is also key for maintaining complex author environments that might not have documentation to support every function. Make sure you’re testing, evaluating, documenting and communicating across involved teams to develop processes that will improve efficiencies.

Page Activation

Once you’ve thoroughly tested and obtained approval, your page is ready for activation.

Step 1: Using the Page Information menu, select “Publish Page” and follow the activation wizard. You’ll activate the page as well as all references on the page.

Step 2: Then use your environment’s publisher link to display the final version of the published content.

Always keep in mind: Activating a page in production will push your page and all references live.

You can deactivate a page by selecting “Unpublish Page” from the Page Information menu or the Manage Publication within the Sites console.

Page Activation Pro Tip #1: Initiating the approval workflow

Some users will not have permission to publish content directly. When that’s the case, these authors can use the Manage Publication action to initiate the approval workflow.

Page Activation Pro Tip #2: Clear your cache

If you’ve activated a page and you’re still seeing old content displayed, your first step to troubleshoot should be to clear your cache. That often does the trick.

Page Activation Pro Tip #3: Re-publishing

The page auto-saves any edits you make, but you have to re-publish to serve saved edits to end-users.

Versions

With every activation launch, you create a new version of the page and edits automatically save.

If you want to revert to an older version…

  1. Select the page thumbnail from the tree.
  2. Then toggle the side panel and select “Timeline.” This will display the page history and any versions created.
  3. Click the “Revert to this Version” button to restore that content.

But, be careful relying on this feature too heavily.

Every system will have different settings on how many versions you can store. And, every activation will automatically create another.

Versions Pro Tip: How to avoid overriding important versions To avoid overriding important versions, use “View as Published” to evaluate your page in lower environments instead of reviewing directly within Publisher. You can also try delaying activation until after your page has been thoroughly unit tested in Author and is ready for the next steps. 

Related read: The advantages of choosing AEM as a cloud service

Assets

Assets is a digital asset manager (DAM) housed within AEM’s application. With this console, you can store, edit and manage assets including images, videos, documents, content fragments and more. The Assets console has advanced collaboration capabilities so you can leverage content quickly across omnichannel experiences.

Users getting started in AEM often miss that in Assets, you need to use Card View mode to see many of the essential functions

When navigating Assets, make sure you’re viewing this console using Card View mode (select the view menu icon directly right of the blue Create button).

That’s compared to the Sites console, which uses Column View mode. In Assets, many of the essential features are only available through Card View mode. It’s commonly missed because you have to manually shift view modes.

Key Features

Collection allows users to categorize similar assets — by location, commonalities or user selection — for organizational purposes. This feature streamlines accessibility for repeated usage by the user network (authors, creative, marketers, dev, etc.)

Metadata allows you to add relevant information about an image for search engine optimization.

Tagging use Tagging to classify assets for internal or external organization. For internal purposes, you can assign tags for search filtering within the system. For external purposes, you can use tags for displaying dynamic content that appeals to an audiences’ profile.

Renditions use this feature to create different “cuts” of an asset for ideal rendering across different areas of your site.

Renditions example: Let’s say you feature a recent press release on your home page with a small thumbnail, headline and intro copy. End-users click the call to action and are redirected to the page displaying the same image as a banner. Depending on where the image is displaying, you could use a different rendition of that image for the banner versus the call to action.

Versionsuse Versions to restore an image to a previous state before edits within the system. Testing not working as expected? Reverting to an old design due to timing constraints? Simply revert to the saved version.

Helpful resource: Want to review a mega-list of supported file types in Assets? Click here.

Assets Action Toolbar

Familiarize yourself with this toolbar to fast-track your success within the Assets console.

  • Create – create a new workflow, folder, file or content fragment
  • Share Link – share an asset or folder URL with other users
  • Download – download the asset to your local machine
  • Checkout – lock asset to other users while you are making changes
  • Properties – asset metadata schema (customizable)
  • Edit – basic asset editor features (rotate, crop)
  • Annotate – make comments on assets
  • Manage Tags – add tags
  • To Collection – to group assets for sharing with users
  • Copy – create a copy of an asset or folder (“1” will be appended to the original name)
  • Move – used to remove or rename an asset (unpublish before this action)
  • Quick Publish – to publish the asset
  • Manage Publication – used to manage publication (publish or unpublish) multiple assets within a defined scope or schedule deployments for a later date and time
  • Delete – remove asset or folder (unpublish before this action)

Asset Organization 

Establish folder organization early on and remain consistent to ensure automation continues to function properly.

As a starting point, mimic your Assets folder structure after the corresponding site. So, you should have a root folder representing the site followed by a country/language folder and broken down by landing and sub-page folders.

Separate commonly referenced files, such as icons, logos, product images, videos and PDFs, in individual folders with a sibling relationship to the landing page folders.

Want to save time in Adobe Experience Manager? Structure your folders within your DAM as the same as your website structure. This makes it so much easier to find assets

Did you inherit a mature system without any historic documentation on Asset organization? Here’s what to do.

It’s common for authors to inherit a mature system without any historic documentation of why/how processes were originally set up. As an author in these situations, you must become a system detective.

Start by examining existing functionality that’s working so you can replicate the implementation. Authors are like the front line of defense. You might not have the skills to identify complex backend processes that are seemingly working counterintuitively against your efforts. But, it’s imperative to gain a deep understanding of how they interact with the system at each roadblock. With this detective work, you’ll become your team’s leading expert.

Follow these file naming best practices. (Without them, broken images are more likely and files are harder to search for.)

File naming best practices

  • Use dashes instead of spaces
  • Clearly label the asset for searching
  • Use all lowercase letters
  • Avoid using any special characters (except for dashes or underscores)

Unpermitted characters for naming conventions

Here’s a space-separated list:

File:  * / : [ \ ] | # % { } ? &

Folder:  * / : [ \ ] | # % { } ? ” . ^ ; + & t

  • Do: companyname-transparent-header-logo.png
  • Don’t: Screen shot_2021-01-01.png

Use Tags to easily search assets, itemize results into collections, and leverage Adobe Sensei through smart tagging. Add tags through Properties on the Basic tab or by selecting Manage Tags from the toolbar. From either configuration, you can apply multiple tags using the tag browser.

Need more direction on how to create tags? Skip to the Tags section of this guide.

Use Collections to collaborate with other users and create, edit and share assets. Define these groupings through static or dynamic categorizing depending on your business requirements.

Create a new collection in these three steps:

  1. Access the Collections folder from the Assets console global navigation then click create.
  2. From the Create Collection wizard, configure the required Collection Title.
  3. Determine if the collection should be public or grant access to specific user roles.

Collections Pro Tip:

For static references, manually select the asset(s), click the To Collection feature from the toolbar and assign them to their corresponding collection.

The Profiles feature also allows for Asset organization. We won’t cover that here because it’s pretty advanced. Want to learn about it? Check out Adobe’s documentation

Search and Filtering Assets

You can search through the various consoles. You can also access assets through the left-side panel toggle icon using the Filter option.

Filter automatically prompts the filter properties from the search menu. Filter properties include saved searches, folder directories, files or folders, file type, file size, last modified, status, orientation, style, insights, Adobe Stock and UGC.

Content Fragment Models

What the content fragment editor looks like in Touch UI

three steps to enable and configure content fragment models:

Step 1: Make sure this feature is enabled in Configuration Browser.

Step 2: Now, make sure it’s applied to your Assets folder. To complete this, an Admin must navigate to Tools > General then open the Configuration Browser tile. From here, select the blue Create button in the upper right and enter your desired Title to correspond with your new configuration. Then choose the “Content Fragment Models” option. Click Create to save the configurations.

Step 3: Choose your content fragment model configuration. Start by selecting the global navigation and clicking Assets. Choose Files then navigate to your desired folder. Select the folder by hovering and clicking on the thumbnail until the checkmark overlay appears and click Properties from the toolbar (or by using the (p) keyboard shortcut).

From the folder’s properties, select the Cloud Services tab and choose your content fragment models configuration that you created in the previous step. Click “Save & Close” to complete.

Here are four steps to creating a new content fragment model:

Step 1: Select the global navigation then click on the Tools icon then select Assets from the left-side menu. This will prompt the Assets menu.

Step 2: Select the Content Fragments Models tile then choose the configuration folder.

Step 3: Click on the blue Create button and specify the required Title (and description if necessary) and click Create again to open the editor.

Step 4: Once you’ve completed the schema, save and exit the editor then publish the model from the console toolbar menu.

Content Fragment Model Pro Tip: Know your available data types

You need to know your available data types before creating your model so that you can consider limitations. Planning for limitations and business requirements in advance is a lot more effective and efficient than reacting to issues as they arise during the build process. Check out this section of Adobe’s documentation[7]  to get familiar with available data types.

Creating a Content Fragment

Once you’ve created your model, saved and published it, here’s how to create a content fragment in five simple steps:

Step 1: Navigate back to Assets > Files from the global navigation. Select the folder that you configured in Step 2 of the model enablement process above.

Step 2: Click the blue Create button and select the Content Fragment option.

Step 3: From the New Content Fragment wizard, choose the model that you created. Then click Next and specify the required Title. Select Create to complete the process and open the editor.

Step 4: Within the editor, you can input the data and create any variations of the content by selecting the Create Variation button from the left-side panel. Once you’ve made all changes, click Save to complete. Publish the fragment from the Assets console toolbar using the Quick Publish option.

Ready to learn more advanced capabilities of content fragments? Explore these topics in AEM’s documentation:

Tags

Don’t underestimate the power of tags. This feature is extremely helpful for system organization and usability. And, it’s also key in creating dynamic content that appeals to your audience.

You can create tags as metadata under Tools > General using the Tags folder.

Tags within AEM are often underutilized by authors

A Namespace is a similar concept to a folder. Create a Namespace to represent a site. Then, you use Tags to organize the tag hierarchy.

Example: Navigating Namespaces and Tags

Under your site’s namespace, you could have Products as your parent tag with Apparel and Home Goods as its direct children elements. Any descendants of a child further identify a specific item.

In the Apparel example, Shirt, Hat and Pants illustrate the Product tag’s structure. Use Tags to classify both pages and assets. Create tags within Properties of the element.

Pro Tip: Use Adobe’s Sensei for AI

With this tool, you can train your system to recognize similar items and automatically classify them.

Your Next Steps

With this guide, you should now be able to:

  • Create new pages
  • Configure pages
  • Preview and activate content
  • Create Content Fragment Models & Content Fragments
  • Create Experience Fragments for promoting channel agonistic content
  • Organize Site and Asset structure according to best practices
  • Understand when and how to use out-of-the-box components
  • Navigate Touch UI
  • Understand the key features of Assets
  • Best practices for asset management
  • Create and use tags for categorizing content

Now, put all that you learned into action so you can create consistent, innovative digital content experiences faster. Save this guide and come back to it often to make sure you’re best using AEM and avoiding common mistakes.

Need expert help managing AEM or migrating to the cloud? Our AEM consulting team is happy to work with you / your teams!

You May Also Like…

3 Marketo reports every user should utilize

3 Marketo reports every user should utilize

While the Analytics tab is hands down the most underutilized feature in Marketo, there are key reports you can leverage today to measure your marketing impact. Look at these four Marketo reports to measure your marketing success.

read more

Marketing Operations

Increase efficiency. Remove roadblocks.

Customer Experience

Wow Your Customers

Inbound Marketing

Right Channel, Right Message

Revenue Operations

It’s A (Unified) Team Effort

Digital Transformation

Turn Strategy Into Action

Technology Stack

Does Your Tech Stack Up?

Lead Management

Accelerate Leads to Revenue

Account-Based Marketing

Accelerate ABM Success

Flexible Options

Four options. One result: Greater marketing-sourced revenue.

Marketo Engage

Marketo Platinum Partner

Pardot

Accelerate Leads to Revenue

Hubspot

Build A Winning Ecosystem

Salesforce Marketing Cloud

Salesforce Certified Silver Partner

Salesforce CRM

12 Years of Integration Experience

Partners

Additional Technology Platforms

Oracle Eloqua

Oracle Platinum Partner

Adobe Experience Manager

Provide world-class experiences

Revenue Marketing University 

Training for marketers of all skill levels.

F5 Logo

F5 Networks

How a Network Security Giant Unified Global Marketing Operations

F5 Logo

Rackspace

How a Cloud Solutions Provider Unifed And Expanded Global Marketing Capabilities

F5 Logo

GE

How a Global Leader Drove Transformation At Scale

TraceLink

How a Supply-Chain Solution Provider Built Crucial Capabilities For Revenue

JobsOhio

How an economic development agency enabled major impact
Gilbarco Veeder-Root

Telstra

Streamlined tech stack = major cost savings

Telecomm

How A Multi-Channel Inbound Strategy Achieved A 600% Increase In ROI

A credit card, representing a Fortune 100 client of The Pedowitz Group's

Financial Services

How a Fortune 100 Credit Card Company Closed The Loop On Revenue

A credit card, representing a Fortune 100 client of The Pedowitz Group's

Mouser Electronics

Aligned cross-functional teams led to on-point targeting

Resource Hub

Read, Watch and Download

Trending Topics

Our Most Popular Content

Blog

Our Latest Articles

CMO Insights

Hear From Industry Experts

Get Timely Insights

Take an interactive assessment and get immediate results

About TPG

How are we different? Get to know us a bit better!

Careers

Learn more about working here

Case Studies

See real results from customers just like you

How We Work With You

How can we help you?

Partners

Learn about some of our Partners.

Introducing: The Loop

 

Revenue models are outdated. Here's your update.

About TPG

How are we different? Get to know us a bit better!

Careers

Learn more about working here

Case Studies

See real results from customers just like you

How We Work With You

How can we help you?

Partners

Learn about some of our Partners.

Introducing: The Loop

 

Revenue models are outdated. Here's your update.