Understanding Page Components

Liferay offers several different features for creating visually appealing and functionally rich websites. Understanding these components and their appropriate use cases is essential for effective page design:

Fragments: Modular building blocks of Liferay pages that provide structure, content, and functionality.
Structured Web Content: Written content created and managed through Liferay’s content management system (CMS).
Widgets and Custom Element Client Extensions: Web applications registered and deployed within Liferay.

This module focuses primarily on fragments, a core component of Liferay’s design framework. While structured web content, widgets, and custom element client extensions are valuable, this course addresses them only within the context of design elements.

Using Fragments as Design Elements

Liferay fragments bridge the gap between development and content management. They are customizable, reusable elements that can be used to build dynamic, engaging pages. Fragments are made up of one or more of three code resources:

HTML: Defines the structure and layout of the fragment in a web page.
CSS: Configures the styling parameters necessary to match your brand and visual identity.
JavaScript: implements any interactive functionality or dynamic behavior that your solution requires.

Liferay provides both out-of-the-box fragments and a UI for creating your own. Once created, fragments empower non-technical users like designers and content authors to construct and modify pages without relying on development or IT teams. Fragments integrate seamlessly with design elements like themes and style books.

Clarity wants to leverage fragments to boost innovation and agility across their design, marketing, and business teams. By using a library of pre-built fragments that integrate with other platform features, companies like Clarity can better enforce consistency in their branding and visual identity without manual oversight. Using fragments, Clarity’s team can rapidly prototype new designs or features to stay ahead of a competitive marketplace.

Conclusion

Fragments serve as the primary tool for designers to build Liferay pages. Their modular, reusable, and customizable nature streamlines development. While other page components contribute to page design, you'll explore them later in the course.

Next, you'll learn best practices for displaying content on pages.