Content Page Editor UI Reference¶
Using the Content Page Editor, you can add and configure elements in your Content Page. To open the Content Page Editor, click Edit (
) at the top right of the Application Bar. This reveals the editing toolbar and sidebar, which contain tools and components for building your Content Pages.
Editing Toolbar¶
The Content Page toolbar contains tools for creating unique user experiences, setting localized translations, switching between edit modes, and more.
Experiences¶
Using the Experience drop-down menu, you can create copies of the current page to customize for a specific audience. See Content Page Personalization for more information.
Translations¶
Click on the language flag to access the translation drop-down menu. Here, you can view the status of active languages for a Page, as well as switch between languages to view and edit translations directly. See Configuring Site Languages for more information.
If you use Experiences for Content Page Personalization, you can configure the Experience using the languages available for your site. See Managing Experience Localization for more information.
Device Display¶
Click the device icons to access DXP’s Responsive Layout Editor, where you can view and configure your Content Page layout for different screen sizes, such as desktop, phone, or tablet. These layout controls include
Desktop
Tablet
Landscape Phone
Portrait Phone
Note
The Fragments and Widgets and Page Design options in the Content Page sidebar are only available in the Desktop layout.
In the Tablet and Phone layouts, you can further adjust the screen size using the resize handlebar.
Edit History¶
Click History (
) to view changes you’ve made to the Content Page during your current edit session. Use the undo and redo buttons to reverse or restore those changes.
Edit Mode Selector¶
The editing options available in the Content Page sidebar depend on the editing mode you choose.
Edit Mode |
Description |
Available Options |
|---|---|---|
Page Design |
You can design pages when you have permission to update the page and the page content. |
|
Content Editing |
You can edit content when you have permission to update the page but not the page content. |
All options in Page Design mode plus: |
Preview and Publish¶
After making your changes, click Preview (
) to show the published view of your Page. While previewing your changes, you can select which experience, language, and device layout to view. When finished, click Publish. By default, publishing makes your changes live immediately. However, if you’ve enabled a custom Workflow to direct the review and publishing process, clicking Publish initiates your defined procedure.
Editing Sidebar¶
Depending on your selected editing mode, you can access these options in the edit sidebar:
Before DXP 7.4, the Browser (
) button functionality was provided by these two controls:
- 
Fragments and Widgets¶
In the Fragments and Widgets sidebar panel (
), you can access both out-of-the-box and custom Page elements for building your Page.
Fragments: Fragments are extensible, reusable, drag-and-drop elements that serve as the primary building blocks for Content Pages. Examples include layout elements, videos, and banner images with text overlay. See Using Fragments to learn more about DXP’s out-of-the-box fragments, or Developing Fragments to learn how to create your own.
Note
For a description of the different Page Fragments in the Content Page editor, see Default Fragments Reference.
Widgets: As in other DXP contexts, widgets are applications that add dynamic functionality to a Page. Examples include blogs, message boards, and calendars. See Using Widgets on Content Pages for more information.
Browser¶
Available: Liferay DXP/Portal 7.4+
The Browser sidebar panel () allows you to view, edit, and manage all web content on the Page. The mapped content on a Page can be from different types of assets: documents and media, web content articles, etc. This includes content displayed in widgets and mapped to content fields. See Managing Content in Content Pages for more information.
Page Elements: Page Elements shows a hierarchical outline of all Page elements, where you can select, configure, or remove those elements. Clicking any element on the Page while in the Design mode opens the Selection panel and highlights the selected element in the hierarchy. When an element is selected, you can access its General, Styles, and Link options, if it has any. See Configuring Fragments for more information.
Note
A Page’s Header and Footer are not listed in the Page Elements panel hierarchy. This is because you can only modify them in the Master Page Template.
Page Content: From Page Content, you can access the content included in the Page and the options to edit them. This content is grouped by type, including essential information, name, and subtype. From here you can complete different actions:
Filter content by type or name, so you can quickly find and edit it.
See all the Collection items, add new items.
Edit images or the inline text using the editing controls.
Edit the Inline Text from the edit button in the sidebar.
Tip
When you filter content by type, your search is narrowed for that type. Hover over the search results to highlight the corresponding Page element.
Page Design Options¶
Click Look and Feel (
) to change the Master Page Template or Style Book.
Comments¶
Use Page Fragment comments to collaborate with team members while developing your Content Page. Once made, you can view, edit, delete, or reply to open comments in the Content Page sidebar’s Comments panel (
). If mentions are enabled, you can tag Users with Page update permissions as part of your comment.
Note
For versions prior to 7.3+, comments are disabled by default. To enable Page comments, go to Control Panel → Configuration → System Settings → Pages → Content Page Editor. Then, check the Comments Enabled box, and click Update.
Selection¶
Available: Liferay DXP/Portal 7.3.
In the Selection sidebar panel (
), you can view a hierarchical outline of all Page elements, as well as select, configure, or remove those elements. Similarly, clicking any element on the Page while in the Design mode opens the Selection panel and highlights the selected Page element in the hierarchy. When an element is selected, you can access its General, Styles, and Link options, if it has any. See Configuring Fragments for more information.
Note
A Page’s Header and Footer are not listed in the Selection panel hierarchy. This is because you can only modify them in the Master Page Template.
Contents¶
Available: Liferay DXP/Portal 7.3.
Here you can view, edit, and manage all web content on the Page. This includes content displayed in widgets and mapped to content fields. See Managing Content in Content Pages for more information.