Content Page Elements

Content Pages, like Widget Pages, are built by dragging and dropping elements onto the page and then configuring the way those elements appear. There are three kinds of elements:

Sections are fragments that define a space to place other elements. A section fills the entire width of the page. Sections can be thought of as complete Fragments that serve a purpose by themselves. A large banner image with a text overlay is an example of something you might build as a section.

Figure 1: A Section named Banner being displayed while editing a Content Page.

Figure 1: A Section named *Banner* being displayed while editing a Content Page.

Layouts are special Sections that define spaces where you can add fragments or widgets. Each layout you add fills the width of the page. You can add any number of layouts to the page.

Figure 2: A 3 Column and 1 Column layout stacked on top of each other.

Figure 2: A 3 Column and 1 Column layout stacked on top of each other.

Components are small design elements or pieces that add functionality to the page. A component might be an image with formatting or a block of text with styling pre-applied. Components must be added to the page inside a Layout. If you add a component outside an existing Layout, a one column layout is automatically added to contain the Component. While Sections should be complete by themselves, Components work together to build pages piece by piece.

Figure 3: Here are several of Liferays out of the box components arranged in the layout you saw previously.

Figure 3: Here are several of Liferay's out of the box components arranged in the layout you saw previously.

Liferay DXP ships with a plethora of Layouts, Sections, and Components to use to build pages, and a web developer can create their own Fragments to add to these.

Editable Elements

Fragments can have editable elements. After a Fragment has been added to a page, you can click on an editable area to provide your own text, image, or links in place of the default defined in the Fragment.

You can also map these elements to 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.). You can configure this by selecting the element’s Map button (Map).

For more information on developing these elements, see Fragment Specific Tags.

Now you’ll learn about each editable type.

Editable Text

Editable text can be plain or rich text. Plain text has no special styling. Rich text enables text styles, typographical emphasis, alignment, and list formatting.

Figure 4: The rich text editor provides a simple WYSIWYG interface with a number of formatting options.

Figure 4: The rich text editor provides a simple WYSIWYG interface with a number of formatting options.

Editable Images

Editable image elements allow replacing the image URL or an image from your Documents and Media library. You can provide a link target for the image.

To edit an image from the Content Page editor,

  1. Click on the image you want to replace.

  2. Click Image Properties.

Figure 5: Editing an image allows you to enter a URL, select an image from Documents and Media or set a link for the image.

Figure 5: Editing an image allows you to enter a URL, select an image from Documents and Media or set a link for the image.

From here, you can click Select to upload an image from Docs and Media or define an image URL. Click Clear to reset the image. You can also specify an image description.

You can also specify a background image for a layout from Section Builder. Click the Layout, select Layout Background Image, and define the image to display.

For more information on developing editable images, see Making Images Editable.

You can also define a link for your image. You’ll learn about this next.

Editable links can be associated with entities that redirect you to a content type or Page (e.g., buttons).

To edit a link from the content page editor,

  1. Click on the link or button that you want to edit.

  2. Click on Edit to edit the link text.

  3. Click on Link to edit the link properties.

  4. Click on Map to edit the link mapping (described earlier).

From the Link Properties popup, you can define the following link options:

Manual: defines a manual link or map it to an existing content field.

  • URL: sets the link’s URL.
  • Target: set the link’s behavior.

From Content Field:

  • Content: sets the content type.
  • Field: sets the field to display for the selected content.

Some of the content fields include

  • Categories
  • Tags
  • Display Page URL
  • Description
  • Publish Date
  • Summary
  • Title
  • Last Editor Name
  • Author Name
  • Basic Web Content

For more information on developing editable links, see Creating Editable Links.

Next you’ll learn about the Content Page Editing Interface.

« Creating Content PagesContent Page Management Interface »
Was this article helpful?
0 out of 1 found this helpful