Accessing and Navigating the Universal Editor navigating
Learn the basics of accessing and navigating the Universal Editor.
Introduction introduction
The Universal Editor enables editing any aspect of any content in any implementation so you can deliver exceptional experiences, increase content velocity, and provide a state-of-the-art developer experience.
To do this, the Universal Editor provides content authors with an intuitive UI that requires minimal training to simply be able to jump in and begin editing content. This document describes how to navigate the Universal Editor.
- For details on authoring using the Universal Editor, see the document Authoring Content with the Universal Editor.
- For a more detailed introduction to the Universal Editor, see the document Universal Editor Introduction.
Prepare the App prepare-app
To author content for an app using the Universal Editor, the app must be instrumented by a developer to support the editor.
Accessing the Universal Editor accessing
Once the app is instrumented to work with the Universal Editor, the Universal Editor can be access both inside of AEM as a Cloud Service and directly without accessing AEM.
Accessing within AEM as a Cloud Service accessing-aem
- Sign into your AEM as a Cloud Service authoring instance.
- Use the Sites console to navigate to the page created for use with the Universal Editor that you wish to edit.
- Edit the page.
- The Universal Editor opens to edit the selected page.
Accessing Directly accessing-directly
-
Sign into the Universal Editor. You need an Adobe ID to sign in and have access to the Universal Editor.
-
After you are signed in, enter the URL of the page you want to edit in the location bar. so you can start editing content such as text content or media content.
Understand The UI ui
The UI is divided into these main areas.
The Experience Cloud Header experience-cloud-header
The Experience Cloud header is always present at the top of the screen. It is an anchor that tells you where you are within Experience Cloud and helps you navigate to other Experience Cloud apps.
Experience Manager experience-manager
Select the Adobe Experience Cloud link at the left of the header to navigate to the root of your Experience Manager solution to access tools such as Cloud Manager, Cloud Acceleration Manager, and Software Distribution.
Organization organization
This displays the organization you are currently signed into. Select to switch to another organization if your Adobe ID is associated with multiple.
Solutions solutions
Tapping or clicking the solutions switcher lets you quickly jump to other Experience Cloud solutions.
Help help
The help icon provides quick access to learning and support resources.
Notifications notifications
This icon is badged with the number of currently assigned incomplete notifications.
User Properties user-properties
Select the icon representing your user to access your user settings. If you do not have a user picture configured, an icon is randomly assigned.
The Universal Editor Toolbar universal-editor-toolbar
The Universal Editor toolbar is always present at the top of the screen just below the Experience Cloud header. It gives you quick access to navigate to another page to edit and to publish the current page.
The Home Button home-button
The home button returns you to the start page of the Universal Editor
On the start page you can enter the URL of the site you want to edit with the Universal Editor.
Location Bar location-bar
The location bar shows you the address of the page you are editing. Select to enter the address of another page to edit.
l (the letter l) to open the address bar.Authentication Header Settings authentication-settings
Select the authentication header settings icon if you need to set a custom authentication header for local development purposes.
Emulator Settings emulator
Select the emulation icon to define how the Universal Editor renders the page.
Tapping or clicking the emulation icon reveals the options.
By default the editor opens in desktop layout where the height and width are automatically defined by the browser.
You can also chose to emulate a mobile device and within the Universal Editor:
- Define its orientation
- Define the width and height
- Change the orientation
Preview Mode preview-mode
In preview mode, the page rendered in the editor as it would be seen on your published service. This allows the content author to navigate the content by clicking links, and so on.
p to toggle to and from preview mode.Open App Preview open-app-preview
Select the open app preview icon to open the page you are currently editing in its own browser tab, free of the editor to preview your content.
o (the letter o) to open the app preview.Publish publish
Select the publish button so you can publish the changes to the content live for consumption by your readers.
Ellipsis ellipsis
Additional, standard options are accessible using the ellipsis button.
For example, the ability to unpublish a page (i.e. reverse the action of the Publish button) is accessible via the ellipsis button.
Additional Buttons additional-toolbar-buttons
The Universal Editor offers a customizable and extensible authoring experience. If you see additional buttons in the toolbar, your Universal Editor has been extended.
- For details on extension possibilities, please see the Customizing and Extending the Universal Editor.
- For details on how an individual extension works, please see the Extension Manager documentation.
The Editor editor
The editor occupies most of the window and is where the page specified in the location bar is rendered.
If the editor is in preview mode, the content will be navigable and you can follow links, but you cannot edit the content.
Properties Panel properties-rail
The properties panel is always present along the right side of the editor. Depending on its mode, it can show details for a component selected in the content or the hierarchy of the page contents.
Properties Mode properties-mode
In properties mode, the panel shows the properties of the component currently selected in the editor. This is the default mode of the properties panel when a page is loaded.
Depending on the type of component you select, details can be displayed and modified in the properties panel.
Not all components have details that can be shown and/or edited.
d to switch to properties mode.Content Tree Mode content-tree-mode
In content tree mode, the panel shows the hierarchy of the page content.
When selecting an item in the content tree, the editor scrolls to that content and selects it.
f to switch to content tree mode.Open in CF Editor edit
When editing, the options for the selected component appear in the properties panel, where you can edit the selected component. If the selected component is a Content Fragment, you can also select the Open in CF Editor button.
Tapping or clicking the Open in CF Editor button opens the Content Fragment editor in a new tab. This allows you access to the full power of the Content Fragment editor to edit the associated Content Fragment.
Depending on the needs of your workflow, you may want to edit the Content Fragment in the Universal Editor or directly in the Content Fragment editor.
e to open a selected Content Fragment in the Content Fragment editor.Add add
If you select a container component either in the content tree or in the editor, the add option appears on the properties panel.
Tapping or clicking the add button opens a drop-down menu of components that are available to add to the selected container.
a to add a component to a selected container component.Duplicate duplicate
If you select a component within a container component either in the content tree or in the editor, the duplicate option appears on the properties panel.
Tapping or clicking the duplicate button duplicates the selected component.
Delete delete
If you select a component within a container component either in the content tree or in the editor, the delete option appears on the properties panel.
Tapping or clicking the delete button deletes the component.
Shift+Backspace to delete a selected component from a container.Additional Buttons additional-properties-rail-buttons
The Universal Editor offers a customizable and extensible authoring experience. If you see additional buttons in the properties panel, your Universal Editor has been extended.
- For details on extension possibilities, please see the Customizing and Extending the Universal Editor.
- For details on how an individual extension works, please see the Extension Manager documentation.
Next Steps next-steps
Now that you know how to access and navigate the Universal Editor, you are ready to author content using it.