Designing Clarity’s Master Pages

The first step in designing pages is to determine their fundamental structure. In Liferay, this means designing master page templates. Built with the same tools and elements as pages, these templates establish the fundamental layout inherited by all pages that use them. This includes a header, footer, and central content area. The content area determines the body of the page that users can edit when building pages from the template, while anything outside this central area cannot be edited, ensuring consistency across the site. Furthermore, edits made to the master template automatically propagate to connected pages, streamlining maintenance.

Given their site designs, Clarity needs two master page templates: a primary template that includes a detailed header and footer, and a secondary template with a simplified header and footer. Before proceeding, you'll review Clarity’s designs.

Primary Master Page

Clarity’s primary header and footer include navigation, branding, and search elements. Most pages in Clarity’s site map should use this master page.

Primary Header

The primary header consists of two rows, with the second row divided into three columns.

Primary Footer

The primary footer consists of three rows, with the second row divided into four columns.

Secondary Master Page

Clarity needs a simplified header and footer for unique pages where they don’t want to display their announcement banner or footer navigation, like their sign in page and error pages.

Secondary Header

The secondary header is the same as the second row of the primary header and does not include the announcement bar.

Secondary Footer

The secondary footer is the same as the third row of the primary footer and does not include the first or second rows.

Page Building Elements

To build these designs, you’ll primarily use fragments. Liferay fragments are reusable building blocks for constructing pages. They are essentially flexible page elements made of HTML, CSS, and JavaScript that you can drag and drop into pages.

Some fragments are layout elements that define drop zones within pages and templates. These include Containers, which define a single <div>, and Grids, which can define any number of <div>s in rows and columns. Other fragments are components that add text, images, buttons, menus, forms, and more to your page. You can go to Default Fragments Reference for a complete list of Liferay’s out-of-the-box fragments.

Once added to a page, you can configure each fragment’s styling and behavior. For example, when you add a container to a page, you can determine the container’s display behavior (block, flex), spacing (margin, padding), dimensions (width, height), background, and more. See Configuring Fragments for a list of available configuration options.

You’ll revisit these configurations later in this module. For now, you’ll use these page elements to finish wireframing Clarity’s primary and secondary master page templates.

Exercise: Designing Clarity’s Master Pages

In Liferay, designing page headers and footers involves creating master page templates. These templates are designed using the same tools and elements as pages.

The course workspace provides the Primary Master Page template. While this template includes the footer, it does not include a header. Here you’ll add the header as Walter Douglas.

To do this,

1. Sign in using these credentials:

   • Email: walter.douglas@clarityvisionsolutions.com
   • Password: learn

2. On the Clarity Public Enterprise Website, open the Site Menu (), expand Design, and click Page Templates.

3. On the Masters tab, click Primary Master Page to begin editing that template.

4. Open the Components tab () in the left side panel.

5. Drag and drop a Container fragment to the top of the template, above the drop zone. This container is for the page header.
   

   NOTE
   When designing a page, it’s recommended to always put elements into their own containers. This can help provide more control over styling.

6. Go to the Browser tab in the side panel, double-click the name of the container and rename it Page Header.

   NOTE
   Naming fragments adds a custom data-name attribute to the <div> that you can use in your JavaScript and CSS. This helps organize complex page structures and provides precise control over layouts.

7. Add two additional containers within the Page Header container and name them Header Announcement Bar and Header Navigation Bar.
   The Header Announcement Bar will display announcements, while the Header Navigation Bar will host essential elements including Clarity’s logo, main navigation menu, search bar, and user menu.

   TIP
   To duplicate a page element while editing, press CTRL + D.
   

8. Select the Header Announcement Bar and configure these settings in the right side panel:

   Tab	Setting	Value
   General	Content Display	Flex Row
   General	Align Items	Center
   General	Justify Content	Center
   Styles	Spacing > Padding (top and bottom)	Spacer 2

   
   
   NOTE
   The green spacing boxes add padding, which adds intentional space between the container and its contents. The rem unit represents the font size of the root html element.
   In a later exercise, you’ll see these settings take effect when you add page elements to the container. For now, leave this container empty and toggle its visibility.

9. Select the Header Navigation Bar container and configure these settings:

   Tab	Setting	Value
   General	Container Width	Fixed Width
   Styles	Spacing > Padding (top and bottom)	Spacer 3
   Styles	Spacing > Padding (left and right)	Spacer 6

10. Add a Grid element to the Header Navigation Bar container.

11. Widen the center module by dragging the dividers outward one space on each side.
    

12. Select the grid and configure these settings:

    Tab	Setting	Value
    General	Vertical Alignment	Middle
    General	Overflow	Visible

    
    

13. Add a container to each grid area and name them Header Branding, Header Navigation, and Header User Actions.

    The Header Branding container will contain Clarity’s logo, while Header Navigation will contain the main page navigation menu. The third Header User Actions container will host the search bar and user login icon and menu.

14. Select the Header Branding container and configure these settings:

    Tab	Setting	Value
    General	Content Display	Flex Row
    General	Align Items	Center
    General	Justify Content	Start

15. Select the Header Navigation container and configure these settings:

    Tab	Setting	Value
    General	Content Display	Flex Row
    General	Align Items	Center
    General	Justify Content	Center

16. Select the Header User Actions container and configure these settings:

    Tab	Setting	Value
    General	Content Display	Flex Row
    General	Align Items	Center
    General	Justify Content	End

17. Add these fragments to the containers:

    Container	Fragment
    Header Branding	Image
    Header Navigation	Menu Display
    Header User Actions	Login and User Menu

     
    NOTE
    The “Login and User Menu” fragment is a custom fragment provided in the Clarity Components fragment set. Later, you’ll create a custom fragment for the header’s search button.

Well done! You’ve completed the necessary wireframing for the primary master page. You’ll revisit this page template in later exercises to update its menus and add the search bar and login button. Next, you’ll configure the template’s allowed fragments.

Exercise: Configuring Allowed Fragments

When editing a master page template, you can configure which fragments are allowed in pages that use the template. This helps ensure consistent design and prevents users from adding incorrect elements to pages that use the template.

To ensure users only add the appropriate fragments to pages with the Primary Master Page template, Clarity wants to limit the available fragments. Here you’ll configure the allowed fragments for the Primary Master Page template as Walter Douglas.

1. While editing the Primary Master Page template, click Configure Allowed Fragments in the Page Body container.
   

2. Deselect the checkboxes for the following fragments to prevent users from adding them to pages using this template:

   • Account
   • Cart
   • Footers
   • Navigation Bars
   • Product > Add to Cart
   • Menu Display > Knowledge Base Navigation
   
   

3. Click Save.

4. Click Publish Master.

5. Click Ok in the popup stating “Changes made to this master are going to be propagated to all page templates, display page templates, and pages using it. Are you sure you want to proceed?”

Great! When this template is applied to a page, users can now only add the allowed fragments to the page. Before you apply the template to any pages, you’ll create the secondary master page that Clarity wants to use for their sign in and utility pages.

Exercise: Creating a Secondary Master Page

Clarity needs a simplified master page for pages that shouldn’t include the announcement banner and detailed footer. Here, you’ll create that template as Walter Douglas.

1. While in the Masters tab of the Page Templates application, click Actions () for the Primary Master Page and select Make a Copy → Master Page.
   

2. Click Actions () for the copy and select Rename.

3. Enter Secondary Master Page and click Save.

4. Begin editing the template and delete these three containers: Header Announcement Bar, Footer Branding, and Footer Navigation.

   
5. Click Publish Master.

Great! Clarity now has both a primary and secondary master page template. You can now apply both templates to their respective pages.

Exercise: Applying the Master Pages

When you create a content page or display page template, you must select a master page. While most pages in your course workspace already use the correct master page, several pages do not.

Here, you’ll configure these pages by assigning them the correct master page as Walter Douglas.

1. Open the Site Menu (), expand Design, click Page Templates and go to the Display Page Templates tab.

2. Click Leadership Profile to edit it.

3. Click the Page Design Options tab () in the left side panel.

4. Select the Secondary Master Page.

   

5. Click Publish.

6. Open the Site Menu (), expand Site Builder, and click Pages.

7. Repeat steps 2-5 to edit the Home and Sign In content pages' master templates. Set the Home page’s master to Primary Master Page, and the Sign In page’s master to Secondary Master Page.

Well done! Each page should now be linked to the correct master page template. Changes made to the templates are automatically applied to each page using it.

Conclusion

Master pages provide the structural foundation for site’s pages. By standardizing headers, footers, and allowed fragments, you ensure consistent user experiences across all content.

Next, you’ll create custom navigation menus and apply them to these templates to direct users exactly where they need to go.

Additional Resources

See official documentation to learn more about designing and building page templates:

• Master Page Templates
• Content Page Editor UI Reference
• Using Fragments