Documentation

Using Layout Elements

Available: Liferay Portal 7.3 GA2+; previously called Layouts with panels and rows.

Layout Elements define drop zones that you can use to design Page and Template layouts. By Default, Liferay includes two Layout Elements: Containers and Grids. Once added, you can drag and drop widgets or other Fragments into these drop zones, including additional containers or grids to create even more complex layouts. After designing a layout, you can save layout compositions to reuse them in other Pages and Templates. See Saving Fragment Compositions for more information.

When you create a new Page or Template that supports Fragments, 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 Page design, including Flex Display Properties for advanced compositions (Liferay DXP 7.4+)

  • Ability to quickly save and reuse compositions in other Pages and Templates

  • Ability to add a URL or Page redirect to a Fragment composition

  • Ability to leverage Style Books to standardize your Site appearance

Once you’ve added a Container, you can then use the Grid Fragment to customize content layout for the different viewports. See Building Responsive Layouts with the Grid Fragment to learn more.

Containers

The Container Fragment adds a configurable drop zone to a Content Page. Each Container includes standard General and Styles options. You can also configure its width and add a link to it. See Container Options for more information.

Grids

The Grid Fragment adds multiple drop zone modules to a Page or Template. These modules can be arranged horizontally and vertically.

In addition to standard General and Styles options, you can determine the number of modules for each Grid, the number of modules per row, and the vertical alignment of each module’s content. You can also manually adjust the width of each module and add or remove padding between them. See Grid Options for more information.