Documentation

Creating Content Page Compositions Using the Container Fragment

Layout and composition are the foundation of your Content Page design. When you get this right, your Content Page is easier to read and navigate, resulting in a richer and more consistent user experience. Using the Container Fragment in Liferay DXP, you can define drop zones for other Fragments, create Page compositions with a high degree of customization, and reuse these compositions across your Site Pages.

Tip

In addition to the Container Fragment, you can use the Grid Fragment to customize the Content Page layout and create a responsive design. For more information, see Building Responsive Layouts with the Grid Fragment.

When you create a new Content Page, a default drop zone appears. You can add any Fragment to this area, but using the Container Fragment as the first element in your composition has important advantages:

  • Greater layout control over the rest of the elements on your Content Page design, including the Flex Display Properties for advanced compositions (Liferay DXP 7.4+.)

  • Fragment compositions that you can save and reuse in other Content Pages.

  • Redirect users to another Page or URL when they click on the Fragment composition.

  • Leverage Style Books to standardize your Site appearance.

You can add Fragments on the by-default drop zone of a new Content Page.

Note

When designing your Content Page layout, start with the Container Fragment. Add other Fragments on top of this Container for maximum flexibility and layout control.

Example: Using the Container Fragment for a Banner Composition

This step-by-step example shows you how to create a banner-style composition using nested Container Fragments. The example also illustrates how to save the composition and adjust its settings in the Style Book.

Example of a sample Fragment composition using the Container Fragment

Step 1: Creating a New Content Page

  1. Under the Site Menu, go to Site BuilderPages.

  2. Click Add (Add Page) at the level where you want to add the new Page and select Add Page.

  3. Select the Blank template or one of the existing templates.

  4. In the Add Page dialog, type your Page’s Name.

Step 2: Configuring the Container Fragment

  1. From the Content Page sidebar, select Fragments and Widgets (Fragments and Widgets) and drag and drop the Container Fragment over the default drop-zone.

    Drag and drop the Container Fragment on top of the Content Page drop zone.

  2. Click the Container Fragment and in the Selection (Selection) panel, click Styles.

  3. Under the Padding area, set the four Padding options to 5 (A).

  4. Still in the Styles area, in the Background Color selector, select a gray color value of 200 (B).

    Define the Padding and Background Color value of the Container Fragment.

  5. Select Fragments and Widgets (Fragments and Widgets) and drop a new Container Fragment over the existing one. This creates a nested Container composition that appears when you click on the Selection (Selection) panel.

    Drag and drop a new Container Fragment on top of the previous one.

  6. From the Fragments and Widgets (Fragments and Widgets) panel, under Basic Components, drag and drop a Heading Fragment inside the inner Container in the composition.

    Drag and drop a Heading Fragment inside the inner Container Fragment.

  7. Drag and drop a Paragraph Fragment right below the Heading. Select the Paragraph in the composition and under the Styles section, choose a Margin Top of 3.

    Drag and drop a Paragraph Fragment right under the Heading Fragment.

  8. From the Selection (Selection) panel, click the inner Container. Under the General tab, type the URL where you want to redirect users when they click on this area.

    Define a target link or Page for the inner Container Fragment.

  9. From the Fragments and Widgets (Fragments and Widgets) panel, under Basic Components, drag and drop a Button Fragment in the composition, right below the paragraph.

  10. Select the Button and under the Styles section, set a Margin Top of 3. Under the General section, click the Type drop-down menu and choose Link.

    Configure the button Fragment type and top margin.

  11. In the Selection (Selection) panel, click the link for the Button Fragment. Under the Link section, type the URL you want to redirect users when they click the button.

    Configure the button Fragment target link.

Note

You don’t need to Publish the Content Page. In-progress work on a Content Page is automatically saved as a draft.

Step 3: Saving the Fragment Composition

You can save Fragment compositions as new Fragments and reuse them in other Content Pages. To learn more, read Saving a Fragment Composition.

Saving your Fragment Composition from the Container Option menu.

Step 4: Setting the Default Container Width in the Style Book

By default, the Container Fragment uses a Fluid width configuration. You can change the default setting to Fixed Width, and make this property available for other Content Pages based on the same Style Book. In this example with two nested Containers, you may want to configure the outer Container to adapt to the Page width while limiting the maximum width of Container with the text. To learn more about Style Books in Liferay DXP, read Using a Style Book to Standardize Site Appearance.

You can change the Container Width property to use a fixed width or adapt to the Page width.

Warning

To avoid breaking your Site layout configuration, use a test environment when working with Style Books. Do not update a Style Book configuration for testing purposes on a production Site.

  1. From the Selection (Selection) panel, click the inner Container Fragment.

  2. Under the Styles area, set the Container Width property to Fixed Width.

    Change the inner Container Fragment width setting to Fixed Width.

  3. Click the Page Design Option panel (A) and under the Style Book section (B), verify the active Style Book (C).

    Verify the default Style Book in use for the Content Page.

  4. Under the Site Menu, go to DesignStyle Books.

    Open the Style Books page under the Site Menu and Design section.

  5. Click the Actions (Actions) menu for the Style Book corresponding to your Content Page and select Edit.

  6. On the Style Book editor, select your Content Page from the Page Preview drop-down menu.

    Select the Content Page you want to modify from the Page Preview drop-down menu in the Style Book editor.

  7. Select the Layout option on the right-hand side drop-down menu, and set a maximum width value (in pixels) for the fixed width elements in the Extra Large option.

    Change the Extra Large option under the Style Book Layout setting to update the Container Fragment maximum width.

  8. Click Publish to update your Style Book with the new configuration.

Creating Advanced Compositions with the Container Fragment

Available: Liferay DXP 7.4+.

When you configure one or more Containers inside another Container Fragment, you can define advanced display options using a Flex display.

  1. Under the Site Menu, go to Site BuilderPages.

  2. Create a new Content Page or open an existing page with a Container-based composition. You can use this example to create a basic composition using the Container Fragment.

  3. Click the Selection (Selection) panel.

  4. Select the Container Fragment that groups the elements where you want to apply the advanced composition. For example, if you have a Container with Fragments in it, select the outer Container.

  5. Under the Styles section, click the Content Display drop-down menu and select one of the available Flex options.

    Select the Container grouping the page elements you want to style using the Flex display options.

  6. Set the Align Items and Justify Content settings to your preference.

    Set the Align Items and Justify Content settings to your preference.