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. Go to a content page and click Edit (
). This opens the editing toolbar and sidebar, which provide tools and components for building content pages.
Editing Toolbar
The toolbar offers tools for customizing user experiences, translating pages, switching edit modes, and more.
Experiences
Using the Experience drop-down menu, you can create customized versions of the current page for different audiences. 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 and switch between languages to view and edit translations directly. See Configuring Site Languages for more information.
If you use experiences, you can also manage translations for each experience. 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: desktop (
), tablet (
), landscape phone (
), and portrait phone (
). You can resize the screen using the resize handlebar manually. See Building Responsive Layouts for more information.
The Fragments and Widgets and Page Design Options panels only appear in the desktop layout.
Edit History
Click History (
) to see changes made in your current session. You can restore or revert changes from here or use 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 Toggle Sidebars (
) to hide the editing sidebars for a preview of the page.
Click Actions (
) in the application bar and select Preview in a New Tab to see the current page experience and language in a new tab.
Convert to Page Template
Click Actions () in the application bar and select Convert to Page Template (
) 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.
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 appear in a hierarchy. In 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.
Header and footer elements are not displayed in the Browser panel. These can only be edited in master page templates.
Beta Feature In Liferay 2024.Q4+, you can select multiple elements by holding CTRL while clicking each element, or by holding SHIFT and clicking to select a range of elements. You can also cut, copy, and paste elements by clicking Options (
) and choosing the desired option.
Press ESC to clear all selections or click outside the Browser side panel area.
Here’s a list of elements in the content page and their behaviors regarding copying and pasting:
| Element | Cut/Copy/Paste | Observation |
|---|---|---|
| Collection Item | ❌ | Cannot be copied or pasted. |
| Collection | ✅ | When pasting, the content is inserted at the beginning of the collection item. |
| Column/Module | ❌ | Cannot be copied. Only allows pasting items inside, which are inserted at the beginning. |
| Row/Grid | ✅ | Pasting inserts the content after the selected row or grid, not inside it. |
| Form Step | ❌ | Cannot be copied. Only allows pasting items inside, which are inserted at the beginning. |
| Form Step Container | ✅ | Pasting places the content after the form container, not inside it. |
| Fragment | ✅ | When pasting, the content is added after the selected fragment. |
| Drop Zone | ❌ | Cannot be copied. Only allows pasting items inside, which are inserted at the beginning. |
| Fragment Drop Zone | ❌ | Cannot be copied. Only allows pasting items inside, which are inserted at the beginning. |
| Container | ✅ | Pasting inserts the content at the beginning of the container. |
| Form | ✅ | Pasting inserts the content at the beginning of the form. |
| Root | ⚠️ | Only allows pasting using a keyboard shortcut. |
You can also use various keyboard shortcuts for actions like cutting, copying, pasting, and more. To view all available shortcuts, open the Keyboard Shortcuts menu (
) at the bottom left of the page editor.
Page Design Options
Open the Page Design Options panel (
) to change the page’s master page template or style book.
Click Options (
) to access additional page design options, including frontend client extensions.
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.
Besides collections, mapped content is not listed in the Page Content panel. The panel only includes content added directly to the page.
Comments
Use the Comments panel () to leave feedback on specific fragments or widgets and collaborate with 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.