Templating Site Pages

Site page templates provide predefined, reusable structures and elements for your pages. This enables you to save time designing solutions and ensures your site content has a cohesive visual identity. To support this, Liferay offers various types of site page templates, each serving a distinct purpose. Here you’ll explore how master pages define the fundamental structure for your pages. You’ll also learn how you can use page templates to help standardize layouts, content, and other elements.

Understanding Master Page Templates

Master page templates (or “master pages”) define shared elements that appear on multiple pages, such as headers and footers. When creating a page, you must associate it with a master page, which determines the page’s fundamental structure. Leveraging these templates effectively is essential for establishing a consistent visual identity across your site.

Your master pages can include a wide range of page components and sections. Common usages include:

• Headers and footers that contain navigation, global actions, copyright notices, and links.
• Sidebars, menus, widgets, or fragments that should be present everywhere on the site, such as notifications or messages.
• Branding elements like logos and other images.

Out of the box, Liferay provides a blank master page. However, you can create your own master pages using the same design tools and elements as site pages (e.g., fragments, widgets). While editing the template, you can also add custom CSS and JavaScript. Any page using the template inherits its structural elements, styling, and scripting. Additionally, changes made to master pages cascade to their associated pages, streamlining maintenance.

Each master page includes a drop-zone, which is the editable area where page builders can drag and drop fragments and widgets during page creation. You cannot edit this drop-zone within the template itself. You can only edit the areas outside the drop zone and determine its placement within your page layout. When creating pages with the template, users can only add or modify elements within the drop zone; all elements outside this area are locked.

Restricting Elements

As previously mentioned, any elements added to a master page can only be edited in the template itself. When you use the template to create a page, those elements are locked down. In addition to this restriction, master pages enable designers to restrict which elements users can add to the drop zone during page creation. For example, Clarity could prevent users from adding commerce components to any page outside of the products section of their site.

This ability to restrict elements is a key feature of master pages that sets them apart from page templates. When used together, these restrictions provide an additional layer of control, ensuring that each page serves its intended purpose.

Best Practices

Consider these key recommendations for using master pages effectively:

• Define a Primary Master Page Template: Establish a main page layout that aligns with your website’s branding guidelines. It can serve as the default baseline for the majority of site pages.
• Create Additional Variants: Design multiple master pages with varying structures and configurations. You can use these variants for different sections or alternate versions of your website. You may also provide different experiences to different user segments.
• Use the Principle of Least Privilege (PoLP): Leverage the restriction capability to ensure that only approved elements can be added to your site pages. This practice simplifies workflows for content creators and secures your brand identity.

Adhering to these best practices helps ensure your site is visually consistent, while simplifying content management and enhancing control over your digital experience.

Understanding Page Templates

While master pages provide the overall framework for your site pages, they cannot add anything to the page’s central content area. By contrast, page templates populate the page’s content body. They are reusable structures that define the initial layout and content of new pages within Liferay. Also, unlike master pages, these page templates are not fixed or restrictive, and they are entirely optional. You can use a page template to stamp a page with an initial state, and then modify the template elements within the page itself.

You should use page templates in scenarios where you have more than one page using the same layout for the content body, even if the content itself varies from page to page. Examples include landing pages for a series of marketing campaigns, event registration microsites, and enterprise websites with several regional variations. At this stage in their website development, Clarity doesn’t have a business use case that warrants page templates. Because Clarity first needs to establish the overall structure and common elements for their site, they plan to only use master pages for now.

Exploring Clarity’s Master Pages

After reviewing their website designs, Clarity has identified a primary page layout with a detailed header and footer, along with a secondary page layout with a simplified header and footer. Clarity can implement these structures with master pages.

Primary Master Page

The primary master page template includes a header with navigation, branding, search, and an announcement banner. Clarity plans to use this template for most pages in their site.

The primary master page also includes a footer with additional branding and navigation, along with links to supplementary legal resources.

Secondary Master Page

The secondary master page template is a simplified version of the primary layout. Clarity intends to use this template for unique pages where the user’s attention should be focused mainly on the content body.

Here, the header removes the announcement bar while preserving essential branding and navigation elements.

Meanwhile, the secondary footer removes the branding and navigation elements, keeping only the links to legal resources.

Conclusion

Master page templates and page templates are powerful tools for building consistent and efficient Liferay sites. By leveraging master pages for foundational structure and page templates for reusable content layouts, organizations can streamline design, accelerate page creation, and ensure a cohesive visual identity across their digital experiences.