Creating the banner page component | HCL Digital Experience

This roadmap highlights how to create the banner page component of the design from an HTML component. The banner page component is used on the Home, Product, and Events page.

Who should use this roadmap

You are a developer on the technical team that is tasked with creating home and landing page templates for content authors to use on the site. You are responsible only for creating page components and design templates. Other developers are responsible for developing other pieces of the design. Learn the basics of developing the banner. You might refer to the banner as a hero image that spans full width across the one-column layout.

HTML prototype of the home page with the banner page component highlighted. Content authors customize the image and text in the banner page component after they add it to a page, so the same banner page component can be used in all of the pages of a website.

Creating your banner page component

Before you begin

Ensure that your design library exists, for example, Greenwheels Design. If the library does not exist, more topic information about creating a design library can be found in our product base documentation here.


  1. Click the Applications menu icon. Then, click Content > Web Content Authoring.
  2. Go to your design library.
  3. Click Generate > Page Component.
    1. Select Banner as the template type.
    2. Enter a page component name for your teaser.
      For example, type Banner.
    3. Ensure that your design library is selected.
    4. Click OK.
  4. You can edit the authoring template, presentation template, or the styles component to customize your banner page component. If you edit the authoring template, you must click Apply Author Template to update the content associated with this authoring template.
Get a preview of your banner page component.
  1. Click the Web Content Preview tab.
  2. Turn on edit mode.
  3. Click the Display portlet menu icon on the title bar of a web content viewer. Click Edit Shared Settings.
  4. From the Content section, click Edit and select default content to display in the web content viewer.
  5. From Appearance, select Component. A Component section appears after you make this selection.
  6. From the Component, click Edit. Select the Banner Page Component that you created.
  7. Click OK.