Configuring Elements on Content Pages¶

After adding elements to your Content Page, you can configure and customize these elements in different ways.

To configure elements on a Content Page, click the element and select your options in the Content Page editor sidebar. For a description of the sidebar options, see Content Page Editor User Interface Reference.

Because Content Pages are built using Fragments, configuring your Pages requires working with Fragments. For a description of the Fragments user interface in the Content Page editor, see Page Fragments User Interface Reference.

These are common configuration options:

Setting the Layout Style¶

You can set different style options like background color, background image, margins, and opacity for your Content Page layout.

1. Click the layout element you want to change.

2. In the Content Page sidebar, under the Styles tab, configure the style options for your content:

• Content Display and Container Width

• Margin

• Background and Border color

• Effects

Note

The available color palette can be configured by the Fragment developer. See Fragment Configuration Types Reference for more information.

Editing Text In-Line¶

1. Double-click the page element containing your text to enter edit mode.

2. Select the text that you want to edit.

3. Use the inline text editor to update the text styles, typographical emphasis, alignment, and other text formatting options.

Note

Heading fragments cannot have line breaks. This is because Heading fields use text while Paragraph fragments use rich-text fields; only the latter can have multiple line texts separated by a line break.

Starting with Liferay DXP 7.4, you can configure a link to a URL or Page in editable text elements.

Editing Images¶

1. Click the image you want to edit.

2. In the Content Page sidebar, you can configure

• Image Source: select Direct to use an image from your computer or from the Documents and Media library, or choose Mapping to map the image from existing content. Optionally, set an image Resolution (available in Liferay DXP 7.4+) and Image Description.

• Link: Select the URL or Page to open when you click the image.

You can also specify a background image for a layout by setting the layout style or provide a link for your image by editing hyperlinks.

Configuring Image Resolution with Adaptive Media¶

Available: Liferay DXP 7.4+.

Starting with Liferay DXP 7.4, you can use Adaptive Media to adjust the image resolution dynamically, based on the target screen size.

Note

Adaptive Media is enabled by default in Liferay DXP.

After you enable an image resolution in Adaptive Media, the resolution is available in the Resolution drop-down menu for your Content Page image.

Consider these items when setting the image resolution in Content Pages:

• When you set the image resolution to Auto, Adaptive Media selects the best resolution for the target screen size automatically.

• You can define a fixed Resolution for a specific screen size using the Editing Toolbar’s Device Display controls and choosing the desired resolution.

• If Adaptive Media cannot find an appropriate resolution for the target screen, the Content Page shows the original image resolution.

Configuring the Grid Fragment¶

1. Click the Grid fragment you want to configure.

2. In the Content Page sidebar, under the Styles tab, select the style options for your content.

3. Under the General tab, select the Number of Modules (from 1 to 6) to specify the number of columns for the grid.

4. Click Show Gutter to show the spacing between modules.

You can adjust the module’s width to customize the layout:

1. Click on the Grid to select it. A blue dot appears between each of the modules, indicating that they can be resized.

2. Click one of the blue dots and drag to the left or right to adjust the module size.

Tip

You can use the Grid Fragment to customize the content layout for the different screens on desktop and mobile devices. For more information, see Building Responsive Layouts with the Grid Fragment

Copying a Page Fragment¶

To save time, you can duplicate a Fragment (Component, Section, Row, etc.):

1. Click the Fragment you want to copy.

2. Click the Options Menu () for the container and select Duplicate.

Note

When you duplicate a Fragment, you also duplicate the mappings and customizations.

Warning

Layouts (Sections or Rows) containing instanceable Widgets cannot be duplicated. In this case, a message appears indicating the Widget preventing the duplication.

Mapping Content¶

You can also map these elements to existing content. You can set the Content for the element (web content article, document, or blog) and choose its applicable Field to display (e.g., title, author name, tags, etc.).

To map your elements to existing content,

1. Click the Page element you want to map.

2. In the Content Page sidebar, under the Mapping tab, click the Add button ().

3. Select the content you want to map to your Content Page element.

4. Select the Field of your content that you want to map.