Overview

Skill Level: Any

This tutorial shows the steps to customize the banner section in the home page by editing content, adding new content and updating the layout. The home page is created from the Standard page type. The banner section is an element of the Standard page type.

Prerequisites

To get started, you need:

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Edit text and link in the banner section

    You can start customizing the banner section with simple text and image changes in  the WCH UI. Simple changes such as replacing the text can be done directly on the preview window by turning on the Edit mode. The image in the banner section can be edited in the Content Editor.

    1. Open Site Manager tab.
    2. For the Home page, open the Actions menu > Edit content.
    3. Click Open Modern textures banner  edit icon. The Modern Textures banner content item opens in the Content editor.
    4. Click Create draft to start editing the content item.
    5. The Modern textures banner content item has a banner image with two renditions, headline text, and a link element.
    6. Click Edit how the image looks on the background image to scale the current image.
    7. To replace the current banner image, click Search or Upload image. The current background image references the Profile for banner content image profile. For more information about the renditions and dimensions set for this image profile, see How the sample site is built- Content model. The changes are saved automatically and the preview window updates the changes as you edit. 
    8. Click Publish to publish your changes to the Live site.
  2. Add an element to the banner section

    In addition to the existing banner image, headline text, and a call to action link element, you can add your own element such as another call to action link. Adding an element requires editing the content type for the Modern textures banner content item and the corresponding layout files in the source code.

    1. Go to Primary navigation menu > content model > Content types > Hero image.
    2. Open the Element palette. Click the Link element.
    3. On the Link element Properties tab, provide a Label. For example, Demo. And select the Element is required  field and click Apply.
    4. The Link element is added to the Content type and is saved automatically.
  3. Update the layout for banner section

    You must update the layout that is mapped to the Hero image content type to see the element added to the banner section of your website.

    1.  From your development environment, run the following command.

      npm run create-layout -- --type .
      For example, to update the banner section layout run the command as follows npm run create-layout -- --type hero-image .

      This command updates the AbstractHeroImageComponent.ts file in the  src/app/components/Hero-image/ folder with all the updated element bindings for the rendering context.

      Note: You must run the command only once per updated content type, since all layouts of a certain content type inherit from the same Abstract<ContentType>Component.ts file.

    2. Update all the layout files under src/app/layouts/hero-image/* with the new element added to the banner content type.
  4. Preview your code changes locally

    When you change the SPA code, you can preview the new changes locally before you publish them to your site. After you change your code, run the SPA locally.

    1. Open src/app/Constants.ts file.
    2. Add the following lines to the top of the Class and provide your Domain name and Content hub ID. You can obtain the Domain name and the Content hub ID from WCH UI > Hub information.
      static readonly DOMAIN_NAME = "change.this.to.your.domainname"; 
      static readonly CONTENT_HUB_ID = "change-this-to-the-id-for-tenant-that-you-want-to-test-content-on";
    3. From your project folder, run:
      npm start
    4. The site application runs on your local host at http://localhost:4200/. The changes that you make to the code is automatically updated in the local site.

    The Modern textures banner content item now includes the new Link element.

  5. Publish the code changes to your site

    After you verify your changes locally, you must publish these changes to your site.

      • Run the following command to build your new site.
        npm run build
      • Run the following command to deploy your updated local site to the remote site.
        npm run deploy

    Note: You must reenter your Watson Content Hub password for you to successfully run the commands.

  6. Update content for the new element.

    The new link element added to the hero-image content type is added to the Modern textures banner content item. Now that the element is added to the layout, you can add content to the element and publish it to appear on the live site.

    1.  GO to Primary navigation menu > Content > All content and assets  > Modern textures banner.
    2.  Click Create draft.
    3.  Add a link to the new Link element.
    4.  Publish the draft content item.

    After you publish, the new Call to action link is visible in the banner in the live website.

    Next step ‚Äď Adding custom components

    Parent topic – Customizing the sample site

     

Expected outcome

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Join The Discussion

Your email address will not be published. Required fields are marked *