Page Types and Page Components
An introduction to the different types of pages that exist in a hub front end, and the components they are constructed from
What are Page Types and Page Components?
When a hub is created, only the hub home page exists by default. All other pages in a hub front end are generated from user actions in the backend: for example, creating a new stream (content collection) in the hub backend automatically generates a corresponding stream page in the hub front end.
The pages that Uberflip generates for a hub front end all have a page type, each of which is built from particular page components.
Page Types
Uberflip generates hub front end pages using a set of templates. Every page falls into a category based on its function within a hub front end. These categories are called page types.
Every page type has a corresponding template, and all pages of a given page type are generated using this template. As a result, all pages with the same page type share a layout, as well as an id value in their body element that acts as a unique identifier. This identifier makes it easy to scope customizations to a particular page type, applying them to all pages of that page type in the hub front end.
Some page types require variations to account for different use cases or types of content. These page types have sub-types called page type levels. Each additional page type level has its own identifier class in the page's body element. This allows for customizations to be scoped with different levels of granularity: for example, "all video stream pages" or "only YouTube video stream pages".
For a list of all existing page types (and their secondary/tertiary page types, as applicable), see the Page Types Overview.
Page Components
The template for each page type specifies which page components appear (or can appear) on all pages of that page type. Page components are the visual building blocks of hub front end pages: they include everything visible on a hub front end page, including functional elements (e.g. "load more" buttons), structural elements (e.g. headings), and elements that are just purely visual (e.g. banners).
Some page components are unique to a particular page type, while others are shared between multiple page types. Some components, such as the hub navigation menu, are universal and appear on every page type (with some exceptions).
You can find information about the page components that appear on each page type (and how to target them for customization) in the page layout diagrams in the Reference Guide: Hub front end pages section. Some page components are more complex and have multiple parts: these have their own separate page component diagrams, also in that section.
Updated about 4 years ago
Next, find out more about the specific page types that a hub front end uses: