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.
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.
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.
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.
Under the Site Menu, go to Site Builder → Pages.
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.