Adding Pages to Clarity’s Site

Pages are the fundamental building blocks of website structures. Each page is a canvas for designing engaging layouts with content (e.g., text, images, videos) and interactive elements (e.g., forms, widgets). Liferay’s WYSIWYG editor, drag-and-drop elements, and multiple page types provide intuitive and user-friendly experiences empowering you to implement your vision without writing code. For advanced use cases, you can also create custom page elements using HTML, CSS, and JavaScript.

In this lesson, you’ll use different page types to finish implementing Clarity’s site map:

This site structure includes content pages, display pages, and utility pages.

Content Pages

Content pages are used to create content-rich, visually engaging experiences. With an intuitive visual editor and drag-and-drop elements, you can quickly design page layouts, display content, and integrate functionality. Personalize content for specific audiences, manage localized translations, and optimize for all devices with the responsive layout editor. When integrated with Analytics Cloud, you can track content performance metrics, conduct A/B testing with page variants, and analyze visitor data (e.g., bounce rate, clicks) to continuously improve engagement. Together, these features make content pages ideal for landing pages, marketing campaigns, and any scenario where presentation and user engagement are crucial.

Display Pages

Display page templates define structures for displaying content at a dedicated URL. When you create or upload content items, Liferay generates a unique friendly URL for accessing it. However, you can only use this URL to view the content if you create one of these templates to display it. Display pages are built using the same UI and features as content pages. With these templates, you can establish a consistent visual style for different types of content.

Utility Pages

Utility pages handle specific functions within a site, such as signing in, showing cookie policies, or displaying errors (e.g., 404, 500), and more. You can use Liferay’s utility pages to customize default experiences using the same tools and features as content pages. With them, you can ensure that even the errors returned to users maintain corporate branding while being easily maintained. Each site includes out-of-the-box utility pages which you can use or modify as needed.

Exercise: Adding Content Pages

Content pages are essential for creating beautiful pages that facilitate user engagement. As previously mentioned, Clarity wants to implement this page hierarchy for their enterprise website:

Some parts of this structure should be implemented as content pages, while others should be display pages or utility pages. The course workspace includes most of these pages, though it is missing the FAQ content page and Leadership Profile display page.

Here, you’ll add the missing content page as Clarity’s web developer, Walter Douglas.

1. Sign in using these credentials:

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

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

3. In the Static Pages tab, click New and select the Primary Master Page template.

   

   NOTE
   The Primary Master Page is an incomplete master page template provided in the course workspace. You’ll learn more about these later in this course.

4. For name, enter FAQ and click Add.
   This creates a blank content page and directs you to Liferay’s page editor UI. Here, you can access page building tools and configuration options.

5. For now, leave the page blank and click Publish.
   This is the final content page that Clarity needs for their site structure. But, they still need to reorganize pages to create their desired hierarchy.

6. Drag and drop Product Detail onto Product List; then, drag and drop Product List onto Products.
   This creates a hierarchical relationship between these pages.
   

7. Drag and drop Open Positions onto Careers.

Well done! You’ve created Clarity’s FAQ content page and reorganized existing pages. Next, you’ll create the final part of Clarity’s site structure: a display page for their leadership profiles.

Exercise: Adding Display Page Templates

Display page templates define structures for displaying content at a dedicated URL. This course’s workspace includes all necessary display pages except for Clarity’s Leadership Profile template. 

Here, you’ll add this missing template as Walter Douglas.

1. Open the Site Menu (), expand Design, and click Page Templates.

2. Go to the Display Page Templates tab.

3. Click New and select Display Page Template.

4. Select Blank.

5. For Name, enter Leadership Profile.

6. For Content Type, select Web Content Article.

7. For Subtype, select Leadership Profile.

   NOTE
   The Leadership Profile subtype is provided through your course workspace. You’ll learn more about web content types in a later lesson.
   

    

8. Click Save.
   This creates a blank display page template that’s linked to the selected content type. Each template has the same page building tools and configuration options as content pages.

9. For now, leave the template blank and click Publish.
   You’ll revisit designing this template in a future exercise.

10. Click Actions () for the Leadership Profile template and select Mark as Default.
    This ensures leadership profile articles use this template.
    

Great! You’ve completed Clarity’s page structure by creating a new page template.

Conclusion

Pages are fundamental building blocks of digital sites. By strategically leveraging templates along with content, display, and utility pages, you can construct comprehensive and highly organized site hierarchies. Next, you’ll learn the basics of designing pages in Liferay.

Additional Resources

See official documentation to learn more about site pages:

• Understanding Pages
• Using Content Pages
• Managing Page Hierarchies
• Using Display Page Templates