Introduction #

This document is about the layout in Liferay and explains how to change the layout using the available templates. This document contains the following sections:

• Changing the Layout
• Layout Templates

Changing the Layout #

Layout is a template to display the portlets that are deployed on a portal. The arrangement of portlets and the look and feel of a portal is based on the layout template. In the Liferay portal, changing the default layout of your page is simple. Liferay provides templates using which you can arrange the portlets in the span of the page, according to your needs.

To Change the Page Layout#

1. Login to the Liferay portal as a user
2. Click the Layout Template link at the top of the page

The Layout window appears, where you can view the different available templates to choose.

1. Select a template and click Save

The page gets refreshed and the page layout changes according to the template that you have selected. The portlets on the page are also rearranged to the predefined order in the template.

Layout Templates #

Currently, Liferay provides ten page layout templates for you to choose from. Each template provides a unique rearranging methodology to display the portlets. The page layout templates available in Liferay and how they rearrange portlets are as follows:

• Freeform - Toggles each portlet on the page. You need to minimize the portlet that appears on your page to view the next portlet.
• 1 Column - Displays each portlet in the form of an individual column. Each column occupies 100 % of the browser size.
• 2 Columns (50/50) - Displays all the portlets in two columns. Each portlet occupies 50 % of the browser size.
• 2 Columns (30/70) - Displays all the portlets in two columns. In the first column, a portlet occupies 30 % of the browser size and in the second column the next portlet occupies 70 %.
• 2 Columns (70/30) - Displays all the portlets in two columns. In the first column, a portlet occupies 70 % of the browser size and in the second column the next portlet occupies 30 %.
• 3 Columns - Displays all the portlets in three columns. Each portlet occupies 1/3rd of the browser size.
• 1-2 Columns (30/70) - Displays all the portlets in the form of rows and columns. The first portlet appears horizontally, occupying 100 % of the browser size. All the other portlets appear vertically, where one portlet occupies 30 % of the browser size and the next portlet occupies 70 %.
• 1-2 Columns (70/30) - Displays all the portlets in the form of rows and columns. The first portlet appears horizontally, occupying 100 % of the browser size. All the other portlets appear vertically, where one portlet occupies 70 % of the browser size and the next portlet occupies 30 %.
• 1-2-1 Columns - Displays all the portlets in both horizontal and vertical forms. The first and the last portlet appears horizontally, occupying 100 % of the browser size. All the other portlets appear vertically, sharing the browser space equally.
• 2-2 Columns - Displays all the portlets in two columns. The first portlet occupies 70 % of the browser size and the second portlet occupies 30 %. Alternatively, in the second row, the first portlet occupies 30 % of the browser size and the second portlet occupies 70 %. This layout follows the alternative order depending on the number of portlets available on the page.