Search Tips   |   Advanced Search

Creating the promotional text page

This roadmap describes how to generate the promotional text page component of the design from an HTML prototype. The promotional text page component is used to briefly describe something on the site.

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 generating the promotional text page component. The promotional text component is used for short summaries about a web document.

Create the promotional text page component

Ensure that the 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...

      Applications menu > Content > Web Content Authoring > design library > Generate > Page Component

    1. Select Teaser as the template type.

    2. Enter a page component name for your teaser. For example, type Promotional Text.

    3. Ensure that the design library is selected.

    4. Click OK.

  2. Click the following link in the Information dialog box to customize the page component:

      your_design_library > Authoring Templates > your_page_component

    For example, click Greenwheels Design > Authoring Templates > Promotional Text.

    Note: If you close the Information dialog box, you can follow the path in the design library.

  3. Click Edit.

  4. Click Manage Elements.

  5. Delete all of the listed default elements before you create a customized element for the page component.

  6. Create a text element:

    1. Select Text as the Element type.

    2. Enter a name for your element. For example, type promotional_text.

    3. Click Add.

    4. Click OK.

    5. Click the drop-down menu on the Save and Close button. Then, select Save and Read.

  7. Click Apply Author Template to update the content associated with this authoring template.

  8. Select the Add new elements and Remove existing elements check boxes.

  9. Click OK.

  10. Click Close to close the authoring template.

  11. Click the following link to customize the page component: your_design_library > Presentation Templates > your_page_component. For example, click Greenwheels Design > Presentation Templates > Promotional Text.

  12. Click Edit.

  13. Delete the existing presentation template markup and replace it with the following information:

      .promotional-text {
      text-align: center;
      margin: 10px;
      font-style: italic;
      font-weight: 800;
      font-size: 1.5rem;
      line-height: 1.2;
      <div class="promotional-text">
      [EditableElement:promotional_text placeholder="Enter promotional text"]

    If you already have a defined CSS style for the promotional text in the theme, we can use the CSS, rather than defining the styles here. The advantage of putting the styles in the theme is that these styles are sent to the browser once, which improves the site performance. Adding the style to the presentation template causes the style to be sent to the browser for each promotional text page component on the page.

  14. Click Save and Close.

  15. If you do not plan to translate your promotional text, delete the localization page component: your_design_library > Localizations > your_page_component. For example, click Greenwheels Design > Localizations > Promotional Text.

    If you plan to translate your promotional text, we can add the translations to the page component.

  16. In this simple Greenwheels example, we can delete styles page component: your_design_library > Components > your_page_component > Styles. For example, click Greenwheels Design > Components > Promotional Text > Styles.

  17. Click Save and Close.

  18. Click Close.
The content author can now add the promotional text page component to the home page. Then, the author can enter the promotional text.