What's inside this article:
- Basic information
- Title graphic: Overview
- Background images
- Configure a Title graphic
- Preview the Title graphic
- Publish the Title graphic
Basic information
This article explains how to create a Title graphic to display on a Section page. A Title graphic is a full-width graphic that appears directly beneath the site header. It includes the main page title displayed over a background image.
If a page has a Title graphic, this replaces the standard text-only title. This means that for every Section page, you can choose one of the following title options:
- (A): Standard title
- (B): Title graphic
NOTE: You can add a Title graphic to any standalone Section page, except the homepage. Title graphics are not currently supported on Category pages, or on Sections that are merged with Categories.
Title graphic: Overview
Every Title graphic includes the following elements:
- (A): Background image: A specially prepared image.
- (B): Title: The main page title, as set in Pangea CMS.
A Title graphic might also include the following optional elements:
- (C): Date and time stamp: The date and time of the last update. This information is automatically displayed if enabled across your site.
- (D): Subtitle: A subtitle with further details about the topic of the page. This can be added in Pangea CMS.
Background images
Each Title graphic requires a specially prepared background image. Services can prepare background images independently, or contact the Pangea Design team for assistance. Review the sections below for details:
Contact Pangea Design
The Pangea Design team are happy to prepare background images for Title graphics on request. To make a request, click the link below:
In your request, please include the photo or artwork that will form the basis for the graphic. If you do not have this available, please share your vision for the graphic.
Prepare and upload a background image
You can prepare the background image for a Title graphic independently, and then upload it to the Pangea The Graphic Database (GDB) is the centralized image library in Pangea CMS. All images on Pangea websites come from the GDB. From Pangea CMS, users can browse the existing images or upload new ones. Learn more..
We recommend using a resolution of 3000 x 500 pixels for these images. This should ensure good visual quality across different devices (mobile, tablet, and desktop).
You should prepare just a plain image. Please do not include the following elements:
- The title / subtitle. (Pangea will add these texts automatically.)
- A colored overlay or opacity layer. (Pangea will automatically apply an opacity layer over your image to ensure that the title text is readable.)
Find further guidance below:
On the published Title graphic, the background image will be cropped. Different parts of the image may be visible, depending on the screen size.
To ensure the key details are always visible, follow the guidelines below:
- Place key details in the central vertical area, as the image may be cropped from the top and bottom. This is essential, as you cannot control the vertical cropping.
- You can control the horizontal cropping using the Image focal point setting in Pangea CMS. Because of this, you do not need to place key details in the center horizontally.
The visualizations below show cropping for a 3000 x 500 pixel image on mobile and desktop. The horizontal cropping in these visualizations is set according to the default Image focal point value in Pangea CMS (65%).
Mobile: Cropping:
Desktop: Cropping:
Colleagues with Adobe Express access can use our template to create background images. To download the .psdt file for the template (for use in in Adobe Express), click the link below:
- Download: graphic title background
You might prepare an image with a clear focal point (such as a face). To ensure the focal point is not covered by text, place it as follows:
- Toward the right side on LTR (Left-To-Right) sites.
- Toward the left side on RTL (Right-To-Left) sites.
The image does not need to have a clear focal point. You might also prepare an image with details along the full width (such as a crowd).
After preparing the background image, you need to upload it to the Pangea Graphic Database. For detailed instructions, visit the following article:
During upload, it is required to add a Source for the image. The Source will be used for internal organization and won't be visible on the published graphic.
We recommend using the same Source for all Title graphics. You might use an existing Source (for example, 'RFE/RL Graphics'). If your entity will require a new Source for this purpose, contact Pangea Customer Care.
Configure a Title graphic
You can add a Title graphic to a standalone Section page.
Title graphics are not currently supported on:
- The homepage
- Category pages
- Sections that are merged with Categories
To get started:
- Go to Build > Sections.
- Select the Section where you want to add a Title graphic.
- Select General. Then, enable Title graphic.
The following settings become available:
Title
A Title graphic always shows the main page title. This is set under Title. In most cases, you should not need to change the title.
Subtitle
Under Subtitle, optionally enter a subtitle. This will be displayed below the title in a smaller font. The subtitle builds on the title by offering visitors more details about the topic of the page. We recommend keeping the subtitle as short as possible. (A few words should be sufficient in most cases.)
Background image
Under Background image, select Add image. You can then search for and select the correct background image that was prepared specially for this Title graphic.
Text width
Under Text width, set the width of the text box. This controls what % of the image can be covered by text (60% by default). After this point, any additional text will be pushed onto a new line.
The current text width is marked by the blue box on the preview. Change the width by dragging the slider backwards and forwards. You might make the following adjustments:
- Decrease the width if you do not want the text to appear over key visual details at the end of the image.
- Increase the width to prevent the text from occupying two lines. This is useful if the text is longer and the image has no clear focal point.
TIP: Check the preview before and after making changes to the text width.
Image focal point
Under Image focal point, specify the focal point of the image (if the image has a clear focal point). The focal point is the most meaningful part of the image. When the page is viewed on a device with a smaller screen, the focal point has priority and will remain visible. Other parts of the image may be cropped to fit the smaller screen.
The current focal point is marked by the blue dot on the preview. Change the focal point by dragging the slider backwards and forwards. If the image has no clear focal point, you can leave the default setting (65%).
TIP: Check the preview before and after making changes to the focal point.
Preview the Title graphic
You can preview how the Title graphic will look on the published page. A preview for each device type (mobile, tablet, and desktop) is conveniently displayed at the bottom of the Title graphic settings. Before you publish a new Title graphic, we recommend closely checking the preview for each device.
The previews will update continuously as you adjust the Title graphic settings. You do not need to save your changes before checking them in the preview.
Publish the Title graphic
When you are ready to publish the Title graphic, hit Publish or Publish & close.
The Title graphic is now published. Because of the caching rules that are configured for all Pangea websites, it might take up to 5 minutes before the change appears in your web browser. For more details, visit the following article:
