Design landing pages using existing HTML template

From version 12.1.5, you can design landing pages using existing HTML templates.

To design landing pages using existing HTML templates, complete the following steps:

  1. See the topic Create a folder and Add Content for details on creating folder, importing a ZIP file containing the HTML template, and how to import a ZIP file.
  2. See the section Accessing the uploaded template to access the uploaded HTML template.
  3. Under Communication tab, in the New list, select Landing page.
  4. Within Select Imported Content, click Select Content. The Content Picker panel opens.
  5. Although the Content Picker panel looks the same as the preview panel, the Content Picker panel only displays content if the selected folder has HTML files. Files of all other formats do not appear in the right panel. Access the relevant folder and select the required HTML file.
  6. The landing page template appears in the New Landing Page page.
  7. From 12.1.6 onwards, the template is displayed in two panels; the left panel is the code view and the right panel is the quick view. You can make the required modifications in Quick Builder and save it and publishing it. You do not have to access Message Editor to make changes.
  8. If required, you can switch the view to modify the template. The available views are:
    • Edit in quick view - A single panel viewwhere you can directly make changes in the template.
    • Edit in code view - The two panel view where you can make changes to the code and simultaneously see the changes getting applied in the right panel.
  9. Some features of convenience are as follows:

    Code View

    • In code view, you can resize the panels for better view of either panels, but the resize has a limit. You cannot completely overlap another panel.
    • You can expand and collapse tags for better access to specific tags and viewing only what is required.
    • The code view also points out errors in the code, if any, to help you fix errors in your template. Errors like missing closing tag or missing opening tag, etc. If your code has an error, you cannot switch to quick view until you fix the error. This only applies to errors and not to warnings. The system validates only HTML errors. If your HTML template has CSS code, Style Scripts, etc, errors in such parts of the code are not validated.
    • Add <UAEPF></UAEPF> tags to insert personalization field. Insert existing personalization fields or add a new personalization field which will be available for access after you Save and publish it.
      Note: You must add the <UAEPF></UAEPF> tags within the <BODY> tag.

    Quick View

    • In textual content, add personalization field by typing # and selecting the required personalization field.
    • Click an image and you will see a tool bar with the following options:
      • Add/Edit Link: Clicking Add/Edit Link opens the Add Link panel with the following fields:
        • URL Link - Provide a URL or a mailto link.
        • Landing Page - Select a Landing Page.
      • Replace Image: Clicking Replcae Image opens the Replace Image panel with the following fields:
        • From Content - Replace image with an image from the linked CMS.
        • From Computer - Replace image by selecting an image from your system.
        • From URL - Replace image by providing the URL of an image.
      • Delete: Delete an existing image. A confirmation box appears. Press Confirm to delete the image.
    • Add formatted text or add formatting to existing text. The formatting options are:
      • Bold, Italics, Underline, and Strikethrough
      • Font Family, Font Size, and Font Color
      • Hyperlink

        To add a hyperlink, select the required text and click the Hyperlink icon in the toolbar. The Add Link panel opens with the following fields:

        • URL Link - Provide a URL or a mailto link.
        • Landing Page - Select a Landing Page.
        After adding a link, when you hover over the hyperlinked content, you will only see the following formatting options (the formatting options that are available for hyperlink are the same ones that will be available for a button as well):
        • Bold, Italics, and Underline
        • Font Family, Font Size, and Font Color
        • Edit Hyperlink - Click Edit Hyperlink to modify the hyperlink.
        • Delete - Click Delete to remove the hyperlink from the text.
      • Clear formatting - Clears all formatting from the selected object.
    • Automated adding of View as webpage and Unsubscribe links as header and footer
      You can automatically add the View in webpage hyperlink as the header and the Unsubscribe link as the footer. Click the Manage Header and Footer icon next to the Edit in code icon.
      1. Select the Manage Header and Footer icon, the Manage Header and Footer panel opens.
      2. In 25.1.1, we have introduced a new configuration called Accessibility where you can set the language attribute for mailing template. This helps the browser to identify the language of the communication. If the imported web page already has a lang attribute, the value appears in Document Language field. If you enter an incorrect format, you will see an error. Example: Correct format: en-US, English. Incorrect format: EN_US.
      3. To add View as webpage as the header, check View Online.

        The View as webpage link is same as other hyperlinks but it does not contain the option to edit the hyperlink. Instead it provides the option to clear formatting and delete the option. Use the View as Webpage option only if you have used Deliver server for mailer pages.

      4. To add Unsubscribe as the footer, check Unsubscribe. Unsubscribe provides all the formatting options available for a hyperlink. In case of Unsubscribe, it is mandatory for you to configure a hyperlink as a URL or a Landing Page, because by default it has the value #.
  10. Click Save and Preview for a preview and Save and Publish to publish the landing page.