3. Configuring page types Given the entities that shape the information to deliver, the page type definition is where editorial teams decide the flexibility they want to have when designing pages in the Page Builder.
At this stage, the website design is available (e.g., as a Figma project).
Starting the design, editorial teams define what templates , layouts , and modules best dissect the design.
3.1 Templates
What structures best cover many pages in the design?
One of the simplest templates answering the question above is the one that has:
A header
A main area
A footer
Follow instructions in the Defining templates article to craft that simple template as an example.
3.2 Layouts
What sub-structures best fill the crafted templates to build pages in the design?
Layouts like the 4-4-4 , which split an area into three equal slots, are likely to answer the question above. It's about organizing the space to host specific pieces of content.
Follow instructions in the Defining layouts article to craft layouts like the 4-4-4 one.
3.3 Modules
Once structures (templates) and sub-structures (layouts) are defined, the last type of page type element to define is the module. Modules are the information architecture of specific pieces of content.
Consider a hero image as a common element in a home page. A corresponding Hero module can be defined to stay in a slot of a 4-4-4 layout within the main area of the template. That Hero module may prescript to render a photo by referencing the photo's slug.
Follow instructions in the Defining modules article to craft a module like Hero or Promo (the next paragraph expands this example).
Like for most modules, a custom entity is the content-side of the module in the Content Manager. The Promo custom entity can look lke:
Expand All Collapse All Copy JSON
▼ "root" : {
"type" : "object"
▼ "properties" : {
▼ "headline" : {
"title" : "Headline"
"localized" : true
"type" : "string"
}
▼ "description" : {
"title" : "Description"
"localized" : true
"type" : "string"
"extended-type" : "rich-text"
}
▼ "backgroundImage" : {
"type" : "string"
"description" : "Background Promo Image"
"title" : "Background Promo Image"
"localized" : true
"extended-type" : "graphic-asset-dashboard"
"tagextradata" : true
}
▼ "frontImage" : {
"type" : "string"
"description" : "Promo Image above the background one"
"title" : "Front Promo Image"
"localized" : true
"extended-type" : "graphic-asset-dashboard"
"tagextradata" : true
}
▼ "mobileAppImage" : {
"type" : "string"
"description" : "Promo Image for Mobile App"
"title" : "Mobile App Promo Image"
"localized" : true
"extended-type" : "graphic-asset-dashboard"
"tagextradata" : true
}
▼ "url" : {
"title" : "Promo URL"
"type" : "object"
"extended-type" : "accessible-link"
"localized" : true
▼ "_properties" : {
▼ "displayText" : {
"type" : "string"
}
▼ "accessibleText" : {
"type" : "string"
}
▼ "url" : {
"type" : "string"
}
▼ "openInNewTab" : {
"type" : "boolean"
}
}
}
▼ "callToAction1Link" : {
"title" : "CTA link"
"type" : "object"
"extended-type" : "accessible-link"
"localized" : true
▼ "_properties" : {
▼ "displayText" : {
"type" : "string"
}
▼ "accessibleText" : {
"type" : "string"
}
▼ "url" : {
"type" : "string"
}
▼ "openInNewTab" : {
"type" : "boolean"
}
}
}
▼ "callToAction2Link" : {
"title" : "2nd CTA link"
"type" : "object"
"extended-type" : "accessible-link"
"localized" : true
▼ "_properties" : {
▼ "displayText" : {
"type" : "string"
}
▼ "accessibleText" : {
"type" : "string"
}
▼ "url" : {
"type" : "string"
}
▼ "openInNewTab" : {
"type" : "boolean"
}
}
}
▼ "trackingEventName" : {
"title" : "Tracking Event Name"
"type" : "string"
}
▼ "trackingExtendedField" : {
"title" : "Tracking Extended Field"
"type" : "string"
}
}
}
The module definition:
Expand All Collapse All Copy JSON
▼ "root" : {
▼ "key" : {
"id" : "Promo"
"namespace" : "react_Module"
}
"label" : "Promo"
"description" : "The module will render a Promo"
"iconType" : ""
"iconBytesBase64" : ""
▼ "properties" : [
▼ "0" : {
"name" : "hideModule"
"typeName" : "Boolean"
"category" : "Visual"
"description" : "Turn off the module temporarily"
"displayName" : "Hide module"
"isBrowsable" : true
}
▼ "1" : {
"name" : "isFullWidth"
"typeName" : "Boolean"
"category" : "Visual"
"description" : "Set true if you want a full screen view"
"displayName" : "Full screen view"
"isBrowsable" : true
}
▼ "2" : {
"name" : "colorSchema"
"typeName" : "String"
"category" : "Visual"
"description" : "Default value is light"
"displayName" : "Color Schema"
"isBrowsable" : true
▼ "pickList" : {
▼ "values" : [
▼ "0" : {
"value" : "light"
"description" : "Light"
}
▼ "1" : {
"value" : "dark"
"description" : "Dark"
}
]
}
}
▼ "3" : {
"name" : "removeSpacingTop"
"typeName" : "Boolean"
"category" : "Visual"
"description" : "Set true if you want to remove the top spacing"
"displayName" : "Remove top spacing"
"isBrowsable" : true
}
▼ "4" : {
"name" : "removeSpacingBottom"
"typeName" : "Boolean"
"category" : "Visual"
"description" : "Set true if you want to remove the bottom spacing"
"displayName" : "Remove bottom spacing"
"isBrowsable" : true
}
▼ "5" : {
"name" : "isAnimated"
"typeName" : "Boolean"
"category" : "Animation"
"description" : "Turn on the animation"
"displayName" : "Enable Animation"
"isBrowsable" : true
}
▼ "6" : {
"name" : "titleHeadingLevel"
"typeName" : "String"
"category" : "SEO"
"description" : "headline/title heading level to be used on FE, default value H2"
"displayName" : "Title Heading Level"
"isBrowsable" : true
▼ "pickList" : {
▼ "values" : [
▼ "0" : {
"value" : "h1"
"description" : "H1"
}
▼ "1" : {
"value" : "h2"
"description" : "H2"
}
▼ "2" : {
"value" : "h3"
"description" : "H3"
}
▼ "3" : {
"value" : "h4"
"description" : "H4"
}
▼ "4" : {
"value" : "h5"
"description" : "H5"
}
]
}
}
▼ "7" : {
"name" : "slug"
"typeName" : "String"
"category" : "Data"
"description" : "The promo slug"
"displayName" : "Promo Slug"
"isBrowsable" : true
▼ "contentPicker" : {
"searchFieldName" : "slug"
"typeOfSelectedContent" : "promo"
}
}
]
"typeFullName" : "Promo"
}
How the front-end renders the promo module can look like:
Ingestion
Once you have the definition of all the templates, layouts, and modules you need to cover the design, you must deliver those definitions to FORGE.
Follow the Ingesting page types article to build and run the service that delivers your page types to FORGE.
