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 and drag-and-drop elements provide an intuitive and user-friendly experience, so you can implement your vision without writing code. For advanced use cases, you can also create custom page elements using HTML, CSS, and JavaScript. To help you implement your solution, Liferay provides a variety of page types.

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 and conduct A/B testing, creating page variants and track 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.

!!! tip “Content Pages vs. Widget Pages” Liferay also provides widget pages, but this course focuses on building user experiences with content pages. Content pages provide superior flexibility and integration with Liferay’s latest content and personalization features, including fragments, collections, segmentation, and client extensions. Widget pages do not support these features. If you’re working on an existing site with widget pages, you can convert them to content pages. See Converting Widget Pages to Content Pages for more information.

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 for displaying 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. Currently, you can use them to create your site’s default 404 and 500 error pages. They are designed 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 error pages, which you can use or modify as needed.

Exercise: Adding Content Pages

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 training workspace includes most of these pages, though it is missing the FAQ content page and the Leadership Profile display page.

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

To add the FAQ content page,

1. Sign in as Walter Douglas.

   • Email: [e-mail]
   • Password: learn
   Note

   As a web developer, Walter Douglas has the site administrator role and perform most actions within the enterprise website.

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

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

   

4. Select the Primary Master Page template.

   Note

   This applies an incomplete template provided by the training workspace. You’ll complete this template in later exercises.

   

5. 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 all page building tools and configuration options.

6. For now, leave the page blank and click Publish.

   This is the final content page that Clarity needs for their site structure. But they need to reorganize some pages to create the desired hierarchy.

7. Drag and drop Product Detail onto Product List and then drag and drop Product List onto Products.

   This creates a hierarchical relationship between these pages.

   

8. Drag and drop Open Positions onto Careers.

With these pages in place, let’s 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. 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 for displaying it. Display pages are built using the same UI and features as content pages.

The training workspace includes all necessary display pages except for the Leadership Profile template. Here you’ll add this missing template as Walter Douglas.

To do this,

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

2. Go to the Display Page Templates tab.

3. Click New.

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 was provided by the training 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.

10. Click Actions () for the Leadership Profile template and select Mark as Default.

    This ensures leadership profile articles use this template.

    

For now, we’ll leave this template blank, but we’ll revisit it in a later exercise. With Clarity’s page structure complete, let’s finish designing the header for Clarity’s pages.

Conclusion

Congratulations! You’ve finished the foundational page structure for Clarity’s site. Next, you’ll take these blank pages and start designing their layout. But before that, let’s take a moment to review some core concepts for Liferay page design.

Next Up: Understanding Page Design

Additional Resources

See official documentation to learn more about site pages:

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