Documentation
Help centerCommunityDevelopersAcademyStatus

Create landing pages

Suggest Edits

Landing pages are single web pages that can be used as promotional marketing campaigns. Landing pages need a content type that is mapped to layout templates similar to the website pages. As a developer, you can configure the templates to be used as landing page types, page types, or both. Landing page templates can be created only from content types that do not have any content that is associated with them. The following tutorial shows how to configure a content type to be a landing page type.

Before you begin

To get started, you need:

Create a content type for a landing page

Similar to other site pages, landing pages are created from content types as well.
To create a content type, go to Developer > Content types. The new content type is automatically saved. For more information about creating content types, see Content types: Define content structure.

📘

Note:

A landing page type cannot be created from the new content type until it is mapped to a layout.

Convert the content type to a landing page type

You can convert a content type to a landing page type either from your development environment by using the CLI or from the Content UI.

📘

Note:

You can create a new landing page type in the Content UI only from a content type that is mapped to layouts.

To convert the newly created content type to a landing page type by using the CLI, complete the following steps.

  1. From your development environment, run the following command wchtools pull -tv. The content types from your tenant are pulled into your local environment.

📘

Note:

You must re-enter your Content password for you to successfully run the command.

  1. Edit the JSON file for the new content type to add page and landing-page to the kind field and save the file. For example,
{
 "id": "00000000-0000-0000-0000-000000000000",
 "name": "Landing page",
 "classification": "content-type",
 "kind": [ "page", "landing-page" ],
 "description": "",
 "status": "ready",
 "tags": [],
 "elements": [{
 "elementType": "reference",
 "label": "Section",
 "key": "section"
 } ]
 }
  1. Run the command wchtools push -tfv to push the changes that are made to the new content type to your Content subscription.

📘

Note:

You must re-enter your Acoustic Content password for you to successfully run the command.

Create a layout for the new landing page content type

As with any other pages, the content type must be mapped to a layout before you can create a landing page using the content type.
To create a layout and map it to the new content type
Run the create-layout command from your development environment.

npm run create-layout -- --type <content type name>

Where is the name of the content type that you created in the previous step.

The command pulls all your site content types through wchtools and scans those content types for the name that is specified in the command. If the content type with the specified name is found, the appropriate layout, layout mapping, and angular component files that you can use with the new content type are generated.

Define properties for the layout

The angular component layout files that are generated are saved under src/app/layouts/layout-name. Similarly, the layout file is generated under src/wchLayouts/layouts and the layout mapping file is generated under src/wchLayouts/layout-mappings.

  • Data from your content type is accessed through the rendering context.
  • Access the elements from the rendering context that are individually bound from the abstract component file in src/app/components/content-type directory. You can define the properties for your layout by referencing these elements.
  • If you have a content type with multiple layouts, common variables and functions can be defined in the src/app/components/content-type-name type component file. These properties are inherited by each layout.
  • After you define the properties, you must build and deploy your changes to use the new layouts and components in your live site.

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";
  1. From your project folder, run: npm start
  2. 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.

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.

Convert the content type to a landing page type in the Content UI

If you did not convert the content type to a landing page type by using the CLI as described previously, you can do it from the Content UI.

  1. After you map the content type to a layout, from the Content UI, go to Developer > Content types.
  2. Find the new content type that you created and mapped, and select the Check this type can be used to create pages field in the content type.

Expected outcome

The new landing page type layout is now available in the Content and the content composer can select it from the layout options when they create a new landing page.

Updated almost 2 years ago