Blogs

Layout and composition are the foundation of effective page design. They make your pages easier to read, navigate, and maintain—resulting in a richer and more consistent user experience.

With Liferay, you can use Container and Grid fragments to create flexible page structures. Once built, these layouts can be saved as Fragment Compositions. A saved composition can then be reused in other pages and templates, saving time and ensuring consistency across your site.

Why Use Fragment Compositions?

• Reusability: Save complex layouts once and reuse them anywhere.

• Consistency: Maintain uniform design across pages and templates.

• Efficiency: Reduce repetitive work for developers and content authors.

Saving a Fragment Composition

Follow these steps to save a fragment composition in Liferay:

1. Edit the page or template that contains the composition you want to save.

2. Select the Container or Grid fragment:

   • Click directly on the page, or

   • Open the Browser panel from the sidebar and select the fragment.

3. Open the Options (⋮) menu for the fragment and select Save Composition.

4. In the dialog that appears:

   • Enter a name for the fragment.

   • (Optional) Add a thumbnail image and description.

   • Decide whether to save:

     • Inline content (text, links, images).

     • Mapping configuration.

   • Select a Fragment Set.

     • If no set is available, it will be saved under Saved Fragments automatically.

5. Click Save.

Your composition now appears in the Fragments panel under the chosen set and can be added to any page or template.

Managing Saved Compositions

You can manage saved compositions at any time:

• Liferay DXP 7.3+: Go to Site Menu → Design → Fragments

• Liferay DXP 7.1 / 7.2: Go to Product Menu → Site → Site Builder → Page Fragments

Here you can:

• Rename compositions

• Update thumbnails

• Move them between sets

• Export as .zip

• Delete unused ones

Example: Creating a Card Composition

This example demonstrates how to create a card-style layout using nested containers and then save it as a reusable composition.

Step 1: Create a New Content Page

1. Go to Site Menu → Site Builder → Pages.

2. Click Add Page and choose a template (e.g., Blank).

3. Enter a page name and save.

Step 2: Configure the Container Fragment

1. From the sidebar, drag and drop a Container fragment onto the default drop zone.

2. Open the Configuration → Styles tab:

   • Set Padding = 5 on all sides.

   • Set Background color = Gray 200

3. Drag another Container fragment inside the first one (nested structure).

4. Inside the inner container:

   • Add a Heading fragment.

   • Add a Paragraph fragment below it → set Margin Top = 3.

   • Add a Button fragment → set Margin Top = 3, configure as a Link.

5. (Optional) From the General tab of the inner container, add a target URL for redirection.

Step 3: Save the Composition

1. Open the Options (⋮) menu of the outer container.

2. Select Save Composition.

3. Provide a name, description, and thumbnail.

4. Click Save.

Conclusion

Fragment Compositions make it easy to design once and reuse everywhere. By combining containers, grids, and advanced composition options, you can create flexible layouts that accelerate page design, improve consistency, and empower content teams to deliver better user experiences.