Saving Fragment Compositions¶
Layout and composition are the foundation of your Page design. When you get this right, your Pages are easier to read and navigate, resulting in a richer and more consistent user experience. Using the Container and Grid layout elements, you can define drop zones, create a complex composition, and then save your composition as a new Fragment. It can then be reused in other Pages and Templates that support Fragments.
Tip
When designing compositions, start with the Container Fragment. Add other elements into this Container for maximum flexibility and layout control.
Follow these steps to save a Fragment composition:
Begin editing the Page or Template that includes the composition you want to save.
Click the desired Container or Grid.
Alternatively, open the Browser panel (
) in the sidebar menu and select the desired Container or Grid.
Click the Fragment’s Options button (
) and select Save Composition.
Enter a Name for the Fragment.
(Optional) Add a thumbnail and description for the new Fragment.
Determine whether to save the composition’s inline content (e.g., links, text, images)
Determine whether to save the composition’s mapping configuration.
Select the desired Fragment Set for the new Fragment.
If no available Fragment Set exists, the composition is saved automatically to a new Set called Saved Fragments.
Click Save.
The saved Fragment composition is listed in the Fragments and Widgets panel () under the selected Fragment Set. You can add it to a Page or Template like other Fragments.
To view and manage saved compositions, open the Site Menu and go to Design → Fragments.
Note
In Liferay DXP 7.1 and 7.2, open the Product Menu, and go to Site → Site Builder → Page Fragments.
From here, you can rename saved compositions, change their thumbnail image, or export them as a .zip
file, move them between Sets, or delete them. See Managing Fragments for more information.
Note
The latest version of the Liferay Fragments Toolkit supports creation, export/import, and preview of Fragment compositions.
Creating Advanced Compositions with the Container Fragment¶
Available: Liferay DXP/Portal 7.4+.
When you configure one or more Containers inside another Container Fragment, you can define advanced display options using a Flex display.
Under the Site Menu, go to Site Builder → Pages.
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.
Click the Selection (
) panel.
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.
Under the Styles section, click the Content Display drop-down menu and select one of the available Flex options.
Set the Align Items and Justify Content settings to your preference.