Creating Layout Templates

Layout Templates specify how content is arranged on your site pages, as shown in the 1-2-1 Columns layout below:

Figure 1: The 1-2-1 Columns page layout creates a nice flow for your content.

Figure 1: The *1-2-1 Columns* page layout creates a nice flow for your content.

The Liferay Theme Generator provides a Layouts sub-generator that helps automate layout template creation. This tutorial covers how to use this tool to create layout templates. Install the Liferay Theme Generator if it’s not already installed, then follow these steps to create a layout template:

  1. Open the Command Line and navigate to the folder you want to create your layout template in.

  2. Run The Layouts sub-generator and follow the prompts to create your layout:

    `yo liferay-theme:layout`
    

    Figure 2: The Layouts sub-generator automates the layout creation process.

    Figure 2: The Layouts sub-generator automates the layout creation process.

    Every row consists of 12 sections, so columns can range in size from 1 to 12. Once you’ve entered a value, the generator asks the size you want your row and column to be and presents you with the available width(s).

    Figure 3: You must specify the width for each column in the row.

    Figure 3: You must specify the width for each column in the row.

    Choose from the available option(s) with your arrow keys and press Enter to make your selection. Repeat this process for the remaining columns.

    The Layouts sub-generator provides the following options for layout templates:

    • Add a row: Adds a row below the last row.

    • Insert row: Displays a vi to insert your row. Use your arrow keys to choose where to insert your row, highlighted in blue, then press Enter to insert the row.

    Figure 4: Rows can be inserted using the layout vi.

    Figure 4: Rows can be inserted using the layout vi.

    • Remove row: Displays a vi to remove your row. Use your arrow keys to select the row you want to remove, highlighted in red, then press Enter to remove the row.

    Figure 5: Rows are removed using the layout vi.

    Figure 5: Rows are removed using the layout vi.

    Figure 6: Select the Finish layout option to complete your design.

    Figure 6: Select the *Finish layout* option to complete your design.

  3. Run gulp deploy to deploy your layout template to the server you specified. If the layout is bundled with your theme, deploy the theme to deploy the layout template.

Importing Resources with Your Themes

Creating Themes

« Layout TemplatesCreating Layout Templates Manually »
Was this article helpful?
0 out of 0 found this helpful