The Content Designer for Pages includes built-in tools that help you work more efficiently and stay focused while building pages. These tools reduce unnecessary navigation, support keyboard-based workflows, and make it easier to manage complex layouts.
You can use features such as the Navigation panel, Quick Actions menu, keyboard shortcuts, and advanced layout controls to create and edit pages faster without breaking your editing flow.
Navigation Panel
The Navigation panel provides a hierarchical outline of all sections, containers, columns, and blocks on a page. You can select an item in the panel to highlight and select it in the editor. When you hover over an element in the editor, the corresponding item is highlighted in the navigation tree. This keeps the panel and editor in sync.
The Navigation panel helps you move within complex layouts and edit specific elements. For example, you can select a container in the Navigation panel, open the Blocks panel, and add a block directly to the selected container.
Quick Actions Menu
The Quick Actions menu lets you perform common actions without opening multiple panels. Use Cmd/Ctrl + Shift + K to open the menu. You can add blocks, media, or trigger contextual actions based on the selected element. This menu is especially useful for keyboard-driven and accessibility-focused workflows.
Keyboard Shortcuts
Keyboard shortcuts help you work faster without using a mouse. You can use the keyboard to move through the elements in the designer. Use the Tab key and arrow keys to move between sections, containers, and blocks.
Additional keyboard shortcuts for text editing, navigation, and other actions are available from the question mark icon in the side panel.
You can undo and redo recent actions via standard keyboard shortcuts:
- Use Cmd/Ctrl + Z to undo an action.
- Use Cmd/Ctrl + Shift + Z to redo an action.
- You can also use the arrow icons in the editor to undo or redo changes as you edit.
Nesting Containers
Nesting containers lets you create advanced column layouts when the predefined container layouts are not sufficient. You can place a container inside another container, and each container can have its own column layout. This allows you to combine different column structures within the same section.
For example, you can stack containers with different column layouts underneath each other. To place different column structures side by side, you need to nest containers. You can nest containers up to three levels to ensure layouts remain readable and manageable.
Example structure:
- Container
- Container
- Container
- Container
Parent Element Indicator
The parent element indicator helps you move up the page hierarchy while editing. From a selected block or column, you can select the 4 square icon on the right side of the block header to select its parent element. This makes it easier to adjust layout settings, reorder elements, or apply styling at the correct structural level without manually searching for the parent element.
Profile Tags
Profile Tags let you personalize content automatically. You can insert values from text-based user profile fields directly into paragraphs, headings, or titles. When a user views the page, the tag is replaced with the value from their profile.
For example, Welcome back {firstName} displays as Welcome back Asha for users whose profile contains that value. This enables dynamic, personalized content with no additional setup or maintenance.
Comments
0 comments
Please sign in to leave a comment.