Content Page Editor UI Reference¶
For Liferay 7.4 U37+/GA37+
Using the content page editor, you can add and configure elements in a content page. To open the content page editor, go to a content page and click Edit (
). This reveals the editing toolbar and sidebar, which contain tools and components for building 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 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 Liferay’s responsive layout editor. Here you can configure your page for different screen sizes. Available display options include Desktop ( 
), Tablet ( 
), Landscape Phone ( 
), and Portrait Phone ( 
). While editing the tablet and phone layouts, you can adjust the screen size manually using the resize handlebar. See Building Responsive Layouts for more information.
Note
The Fragments and Widgets and Page Design Options panel are only available in the desktop layout.
Edit History¶
Click the History button (
) to view changes made during your current edit session. You can use this history to reserve or restore changes. Alternatively, you can click the Undo and Redo buttons.
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. |
Toggle Sidebars¶
Click the Toggle Sidebars button ( 
) to hide the editing sidebars and preview your page. Click the Actions button ( 
) in the Application Bar and select Preview in a New Tab to see the current page experience and language in a new tab.
Create Page Template¶
Click the Page Template button ( 
) to create a page template based on the current page design.
Publish¶
By default, publishing makes your changes live immediately. However, if Workflow process is configured 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 panels in the editing sidebar:
- Browser (previously Selection)
- Page Content (previously Contents)
- Comments
Fragments and Widgets¶
In the Fragments and Widgets panel ( 
), you can access both out-of-the-box and custom page elements.
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 the out-of-the-box fragments or Developing Fragments to learn how to create your own.
Widgets: 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.
Tip
Beginning with Liferay 7.4 U37/GA37, click the Order button (
) to reorder sets of fragments and widgets. Click the Star button (
) to add a fragment or widget to your list of favorite elements.
Browser¶
Use the Browser panel ( ) to view, organize, and manage all elements in the page. Elements are displayed in a hierarchy. For Liferay 7.4 U37/GA37+, you can drag and drop elements in the Browser panel to reorganize them or double click elements to rename them. Selecting an element opens its settings in the configuration side panel. Select a fragment’s sub-elements to access additional settings. See Configuring Fragments for more information.
Note
When editing a content page, header and footer elements are not included in the Browser panel. You can only edit these elements in master page templates.
Page Content¶
In the Page Content panel ( ), you can view and edit content directly added to the page. This can include inline text, images, web content articles, and more. While viewing content, you can search for content items and filter by type. If the page includes a collection, you can view its items and add new items. See Managing Content in Content Pages for more information.
Note
Besides collections, mapped content is not listed in the Page Content panel. The panel only includes content added directly to the page.
Page Design Options¶
Open the Page Design Options panel ( 
) to change the page’s master page template or style book. Click the Cog button ( 
) to access additional Look and Feel options, including browser-based client extensions.
Selection¶
For Liferay 7.3
In the Selection 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, because you can only modify them in the master page template.
Contents¶
For Liferay 7.3
In the Contents panel (
), 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.
Comments¶
In the Comments panel (
), you can comment on fragments and widgets to collaborate with page contributors. You can also view, edit, delete, or reply to open comments. If mentions are enabled, you can tag users with page update permissions as part of your comment. To add a comment, open the Comments panel and select the desired page element.
Note
For versions prior to 7.3, comments are disabled by default. To enable page comments, go to Control Panel → System Settings → Pages → Content Page Editor. Then, check the Comments Enabled box, and click Update.