Customize site banner

This tutorial shows the steps to customize the banner section on 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.

Before you begin

To get started, you need:

• Your Acoustic Content trial or standard edition. To get a free trial version or to upgrade to standard, go to Acoustic Content.
• Install a Node environment with a recent stable version greater than Node >= 8.
• Access to the site application code. To access the code download Acoustic Content Sites single page application. For more information about working with the source files, see wch-site-application/README.md.
• For more information about setting up your development environment, see Setting up your development environment. For more information about developing sites with Acoustic Content, see Acoustic Content Sites Customization Programming Model.

Edit text and link in the banner section

You can start customizing the banner section with simple text and image changes in the Content 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 the 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 the banner content image profile. 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.

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 elements 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 Developer > Content types > Hero image.
2. Open the Design tab and drag and drop the Link element.
3. On the Link element Basic tab, provide a label. For example, Demo. And select the This element is required field and click Apply.
4. The link element is added to the Content-type and is saved automatically.

Update the layout for the 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.

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 ID. You can obtain the Domain name and the Content ID from Content UI > Developer >URL 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 localhost at http://localhost:4200/. The changes that you make to the code are automatically updated on the local site.
   The modern textures banner content item now includes the new link element.

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 Acoustic Content password for you to successfully run the commands.

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 Content > All content > 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 on the live website.