Liferay Layout Template Generator

Visually build Liferay layout templates with rows and column widths. Exports a Velocity .tpl and liferay-layout-templates.xml for Liferay 6.x and 7.x/DXP.

Template Settings

Template Name

ID: my_custom_layout · file: my_custom_layout.tpl

Liferay Version

7.x / DXP (Bootstrap, col-md-*)

6.x (span*, row-fluid)

Live Preview

Liferay 7.x / DXP · col-md-*

col-1 · 8/12col-md-8

col-2 · 4/12col-md-4

Row 1: 12/12

Rows & Columns

Row 1

Col 1 width

Col 2 width

Add a row

my_custom_layout.tpl

<div class="row">
	<div class="col-md-8 portlet-column portlet-column-first" id="column-1">
		$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
	</div>
	<div class="col-md-4 portlet-column portlet-column-last" id="column-2">
		$processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
	</div>
</div>

liferay-layout-templates.xml

<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 7.4.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_7_4_0.dtd">

<layout-templates>
	<custom>
		<layout-template id="my_custom_layout">
			<name>My Custom Layout</name>
			<template-path>/layouttpl/custom/my_custom_layout.tpl</template-path>
			<thumbnail-path>/layouttpl/custom/my_custom_layout.png</thumbnail-path>
		</layout-template>
	</custom>
</layout-templates>

About the Liferay Layout Template Generator

A Liferay layout template defines the column structure of a page — the rows and the widths of the portlet columns that content authors drop widgets into. Hand-writing the Velocity .tpl file and its liferay-layout-templates.xml descriptor is fiddly and easy to get wrong. This tool lets you design the grid visually and exports both files, ready to drop into a Liferay module or theme.

Features

Visual builder: Add rows and set each column's width on Liferay's 12-column grid (e.g. 8/12 + 4/12), with a live preview that updates as you type.
Two export targets: Generate the Velocity .tpl template plus the liferay-layout-templates.xml descriptor.
6.x and 7.x/DXP formats: Switch between the Liferay 6.x grid (span* with row-fluid) and the modern 7.x/DXP grid (col-md-* with row), including the matching DTD.
Correct column wiring: Columns are numbered sequentially (column-1, column-2, …) with the right portlet-column-first / -last / -only classes and $processor.processColumn(...) calls.
Client-side & private: Everything is generated in your browser — nothing is uploaded.

How to use

Set a Template Name — the tool derives the id and .tpl filename automatically.
Pick your Liferay version (7.x/DXP or 6.x).
Add rows from the presets (e.g. 8 / 4) and fine-tune each column's width. Each row should add up to 12.
Copy or download {id}.tpl and liferay-layout-templates.xml.
Place the .tpl under /layouttpl/custom/, reference it from the XML, and deploy. Add a matching {id}.png thumbnail if you want a custom preview in Liferay.