Using the Page Editor
- Topics:
- Page Editor
CREATED FOR:
- Beginner
- User
For publishing from AEM Sites using Edge Delivery Services, click here.
AEM Site’s Page Editor is a powerful tool for creating and editing web content. The Page Editor’s tools and capabilities are accessed from the Page Editor’s UI toolbar.
The following video highlights some of the top features of the Page Editor.
Transcript
For an AEM Sites content author, some of the day to day activities involves creating a page, making changing for an existing page and publishing your changes to an external user. In this video let me take you through the page editor’s UI. From the AEM homepage, navigate to AEM Sites console and open the WKND sample site. Let’s browse through the Sites content hierarchy to find a page for editing. Take a note of the page title and the page template used to create this page. Select the page and click on the edit icon from the top toolbar, note that you need to have appropriate access rights and permissions to edit this page. Opening a page in edit mode helps content authors to add, update or delete content from a page with the help of components. Page editor UI has a toolbar that provides content authors with a set of tools to author content. Available toolbar options for a page depends on its configurations. The toolbar offers access to various options. Starting from the left side, the toggle side panel holds the asset browser, component browser and the content tree. Asset browser lets content authors search for assets required for page authoring. And allows you to search and use all assets stored in AEM Assets. Infinite scrolling is used to expand the list when needed. You also can filter your asset search using its asset type. Component browser shows all components that are available for use on your current page. The list of available components for a page depends on its template component policy configuration. The content tree tab within the side panel displays a tree view representation of your page or template so that it’s easier to understand how its content is structured hierarchically. Additionally, on a complex page it makes it easier to jump between components of the page. Next to the toggle side panel you can notice the page information icon. Page information icon opens a menu that provides page details and actions that can be taken on the page. Open properties display the metadata associated with your page and includes additional configuration for your page.
Using the start workflow you can invoke a workflow for your page. Selecting this option throws a workflow dialog box with a dropdown to perform the required operation and an option to input a name for your workflow. Workflow allows you to automate a series of steps that are performed on a page. The workflows that you use are specific to the business process of your organization and can be completely customized. For example, you can create a workflow to reduce some of the steps that you need to perform after a page is ready and if it needs additional review. Imagine that you need certain uses within your organization to review your content before publishing, instead of sending them separate emails you can create a workflow that sends a task notification to their AEM author accounts that notifies them of your change. Using workflows, you can reduce some of your repeating tasks and also collaborate with other users and track its progress. AEM allows you to lock a page so that no one else can modify the content for your page. Securing access to a page is useful when you’re making a lot of edits to one specific page or when you need to freeze a page for a short while. Once locked, the page view information within the AEM Sites console gets updated for other users, making this page no longer accessible for editing to other users.
You can also make your page live to external users using the publish page option.
Assuming your site page is already published, you can unpublish a page and external users will no longer have access to the page and might result in a page not found message. AEM Sites console UI displays information about published and unpublished details for a page. The edit template opens the page template for your page.
The view as published option opens the page in a new tab, refreshes the content and shows the page exactly as it will appear in the publish environment. You can click on the help icon and get a quick overview of the page editor UI options. Right next to the page information icon you can notice the emulator icon. Click on the icon and you can view your content on how it would appear on different devices. You can emulate your content for different devices, like desktop, tablet and mobile devices. You can also try different page orientations for each device group. Note that the emulator also adds a pixel scale on the top so that you can get an idea of how each device resolution and how your content gets displayed for different display ratios. Page edit toolbar displays your page title here. There are various modes when editing a page allowing for different actions. And the full list of page mode is listed here for us. In the edit mode content authors can edit the page and its content. In the layout mode you can create and edit your responsive layout dependent on each device group if the page is based on a layout container. In the time warp mode it allows you to view a page state at a particular point in time. Page modes are made available to a user based on your page configurations. The preview options displays the page as it will appear when published.
Right next to the preview option you can see an option to add annotations for your page. Click on the annotations icon and then you can add a new annotation by clicking on the insert new annotation option and then let’s add a new comment to change the background image. Note that you can add an annotation to a page for a specific component. Let’s select the image component and add a comment to choose another asset for this image component. This capability allows you to add annotations to the page. After the first annotation the icon will switch to a number indicating the number of annotations on this specific page. In summary, AEM provides content authors with a great set of tools and capabilities to author content in the page editor UI. I hope this video helps you get an overview of the page editor UI. -
Additional Resources
Experience Manager
- Overview
- Document Authoring
- Overview
- Set up
- Preview and publish
- Document structure
- Default content and sections
- Blocks and autoblocks
- Redirects
- Bulk metadata
- Page metadata
- Author authentication
- How to
- Document audit
- Document permissions
- Document versions
- Document workflows
- Embed iFrames
- Image alt text
- Prevent search engine indexing
- Responsive navigation
- Dynamic Media
- Site migration using Importer
- Customizing the Importer
- Bulk importing using Importer
- Generate Variations
- Experimentation framework
- Setup experimentation framework
- Metadata for experimentation
- Page Authoring
- Generative AI
- Content Fragments
- Experience Fragments
- Edge Delivery Services
- Developing
- Edge Delivery Services
- AEM Project Archetype
- Getting Started with AEM Sites
- Getting Started with AEM Headless
- Getting Started with AEM SPA Editor and React
- Extending Page Properties
- Responsive breakpoints
- Developing with the Style System
- Style System Best Practices
- Accelerate content velocity with AEM style systems
- Developing for Page Difference
- Implementing Simple Search
- Social Media Sharing
- Customizing Component Icons
- Personalization
- Components
- SEO
- Single Page Applications
- Multi Site Management
- Introduction to Language Copy
- Live Copy and Blueprint
- Create a Live Copy
- Manage Live Copy inheritance on a component
- Manage Live Copy inheritance on a page
- Live Copy overview console
- Create a Language Copy
- Translation Projects
- Create a multi-lingual Translation Project
- Translation Jobs
- Updating a Language Copy with Launches
- Create a Language Copy page
- Translation Job status
- Create a country site from Language Copy
- Translation
- Integrations
- Experience Platform
- Tags in Adobe Experience Platform
- Adobe Client Data Layer
- Analytics
- Adobe Target
- Overview
- Add Target extension to Tags Property
- Load and fire a Target call
- Create Adobe Target Cloud Service account
- Export Experience Fragments to Adobe Target
- Create Target Activity using Experience Fragment Offers
- Personalization using Visual Experience Composer
- Personalization of full web page experience
- Learn From Your Peers