Page Fragments User Interface Reference¶
To access available Fragments, go to a Content Page, and click on the Edit icon () in the Application Bar. Ensure your edit mode is set to Page Design and click on Fragment and Widgets () in the editing Sidebar Menu.
While editing a Content Page, open the Fragment and Widgets () panel in the editing Sidebar Menu.
Drag and drop a Fragment to the desired location in your page layout.
Once added, you can change its placement at any time. You can also view its placement in your page’s structure as well as access its configuration options in the Selection panel () of the editing Sidebar Menu.
Liferay DXP provides options for configuring individual Fragments as well as their sub-elements. These options can vary, though some are common to all. You can view available configuration options in the Selection panel () of the Sidebar Menu. Click on a Fragment or element and select which options you’d like to configure from the available tabs.
You can also localize some Fragment settings for the target audience’s language. To learn more, see Localizing the Fragment Configuration.
Here you can configure Fragment specific options (e.g., heading level, video URL, button type).
Here you can configure standard Fragment options (e.g., dimensions, background, borders), as well as Fragment specific options on occasion. With DXP’s Responsive Layout Editor, you can also configure these settings for different devices. See Configuring Fragment Styles and Fragment Styles Reference for more information.
Here you can select an element’s image, view its resolution, and provide its alt text.
Here you can map page elements to available assets by selecting the desired item (e.g., web content article, document, blog) and specifying which of its fields to display in the element (e.g., title, author, name).
Available: Liferay Portal 7.3 GA2+; previously called Layouts with panels and rows.
Layout Elements define drop zones and can be used to create the desired page structure. DXP’s default layout Fragments include Containers and Grids. Once configured, you can drag and drop widgets or other Fragments into the defined areas, including additional containers or grids to create even more complex structures.
Use container Fragments to add drop zones to a Content Page. In addition to standard style options, this field can be configured to maintain a fixed width or to adapt to fill the width of its page section. You can also set a container’s Link field to add either internal or external links. Once published, clicking on the name of the fragment redirects users to your specified destination.
Use grid Fragments to add multiple drop zone modules to a Content Page. These modules can be arranged into rows and columns. In addition to standard style options, you can determine the number of modules for each grid, the number of modules per row, and the vertical alignment of each module’s content. You can also manually adjust the width of each module.
These are simple design elements that add basic functionality to a page. Examples include buttons, headings, and tabs. With these Components, you can build your page piece by piece. DXP includes the following Basic Components.
Use card Fragments to add an image with title, paragraph, and link elements to a Content Page.
Available: Liferay DXP 7.4+.
This Fragment defines a drop zone where you can add other Fragments and create advanced drop-down menus (A). For example, you can drag-and-drop a Card Fragment on the Dropdown Fragment’s drop zone so the Card content appears when the user clicks or hovers over the Dropdown.
In this table you can see a description of the Dropdown Fragment General options (B):
|Type||Controls the Dropdown Fragment style.|
|Size||Sets the Dropdown Fragment size.|
|Panel Type||Defines the drop zone size:
|Display on Hover||When you check this option, the Dropdown Fragment opens on mouse-over.|
|Keep Panel Open in Edit Mode||Check this option to keep the drop-zone open while you edit the Dropdown Fragment content.|
Place the Dropdown Fragment inside a Grid Fragment to observe the differences between the Full Width and Mega Menu panel types.
Available: Liferay DXP 7.4+.
Use the External Video Fragment to embed additional video sources in your Content Page. You can use a valid URL or videos in Documents and Media. The supported sources include YouTube, Facebook, Twitch, Vimeo, and videos stored in Documents and Media.
The External Video Fragment does not support video controls for autoplay, loop, or mute. If you don’t need these controls in the Content Page, use the External Video Fragment. If you need to provide these controls, use the Video URL Fragment instead.
Use heading Fragments to add H1-H6 header text to a Content Page.
Use HTML Fragments to add an editable HTML element to a Content Page. Double-clicking on it opens a modal window where you can edit its content using HTML syntax.
Use image Fragments to add a configurable
image-square element to a Content Page. As part of configuration, determine whether to use the image’s original size, or adjust it to fit its context. To select an image, determine its resolution, and set its alt text, go to the
image-square element’s Image tab.
Use paragraph Fragments to add a simple text element to a Content Page, which can be configured using standard style options and mapped to available content.
Use separator Fragments to add a horizontal line between Fragments on a page. As part of configuration, you can determine its spacing and color.
Use slider Fragments to add image slides with text overlay to a Content Page. Each slide consists of image, title, and subtitle elements.
Use spacer Fragments to add horizontal blank space between Fragments on a page. As part of configuration, you can adjust its height.
Use the tabs Fragment to add multiple tabs with individual drop zones for widgets and other Fragments. Determine number of tabs, as well as standard style options.
The Video URL Fragment is called Video Fragment in Liferay versions previous to Liferay DXP 7.4.
Use the Video URL Fragment to embed videos in your Content Page. To select a video, enter a valid URL, either to YouTube or a video file. As part of the Fragment configuration, you can set the video to autoplay, loop, or mute. You can also choose to hide the video controls.
Available: Liferay DXP 7.3+
Use Content Display Fragments to display Site content individually or as part of a collection. Examples include web content, blog entries, and documents. You can also add page elements for rating or flagging page content. DXP includes the following Content Display Fragments.
Use the content display Fragment to display a single content item on a Content Page. As part of configuration, determine whether it displays your selected content using the Abstract or Title template.
Use the content flag Fragment to add a page element for flagging inappropriate content. As part of configuration, map it to content and determine its message.
Use the content ratings Fragment to add a page element for rating content. As part of configuration, link it with the desired content item.
Use the collection display Fragment to display asset collections on Content Pages. With it, you can choose from both manually and dynamically defined collections, as well as those defined by a Collection Provider. You can then choose whether a collection is displayed in a grid or with a list template (i.e., bordered, bulleted, inline, numbered, and unstyled). See Displaying Collections for more information.
Featured Content Fragments are complex page elements composed of multiple components. To preview a Fragment’s layout, hover over its Information icon (). DXP includes the following Featured Content Fragments.
Use the features Fragment to add text, images, and link elements to a Content Page for promoting key features. DXP includes the following layout:
Use the highlights Fragment to add image, text, and link elements to a Content Page for highlighting. DXP provides the following layouts.