Content Page Editor UI Reference

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 (Edit icon ). This reveals the editing toolbar and sidebar, which contain tools and components for building content pages.

Click the Edit button to access the editing toolbar and sidebar.

Editing Toolbar

The content page toolbar contains tools for creating unique user experiences, setting localized translations, switching between edit modes, and more.

Click the Edit button to access the editing toolbar.


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.


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 ( Desktop ), Tablet ( Tablet ), Landscape Phone ( Landscape Phone ), and Portrait Phone ( 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.


The Fragments and Widgets and Page Design Options panel are only available in the desktop layout.

Edit History

Click the History button (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.

Revert your changes using the Undo, Redo, and History 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.

Choose between Page Design or Content Editing editing modes.

Toggle Sidebars

Click the Toggle Sidebars button ( Toggle Sidebars ) to hide the editing sidebars and preview your page. Click the Actions button ( 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 ( Page Template ) to create a page template based on the current page design.


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:

The editing sidebar includes these panels.

Fragments and Widgets

In the Fragments and Widgets panel ( Fragments and Widgets icon ), 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.


Beginning with Liferay 7.4 U37/GA37, click the Order button (Order Button) to reorder sets of fragments and widgets. Click the Star button (Star Button) to add a fragment or widget to your list of favorite elements.


Use the Browser panel ( Browser ) 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.


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 ( Page Content ), 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.


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 ( Page Design Options ) to change the page’s master page template or style book. Click the Cog button ( Cog Button ) to access additional Look and Feel options, including front-end client extensions.


In the Comments panel ( Comments ), 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.


For versions prior to 7.3, comments are disabled by default. To enable page comments, go to Control PanelSystem SettingsPagesContent Page Editor. Then, check the Comments Enabled box, and click Update.


For Liferay 7.3

In the Selection panel (Selection), 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.

Selection shows you a hierarchy of your page and contents.


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.


For Liferay 7.3

In the Contents panel (Contents), 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.