抖阴

Skip to main content

Process of Editing HTML Email Template

抖阴Cloud Portal 鈫� 4-Dot Menu 鈫� Data Management 鈫� Ordering Settings 鈫� Settings 鈫� Digital Notifications 鈫� Notification Templates

For details about general configuration of email templates, see Notification Templates.

To edit an HTML email template:

  1. From the聽Notification Template List homepage, select聽the template.

  2. From the Edit page, locate the HTML section.

  3. From the HTML section, copy the HTML code and paste it into to the HTML area on the .

    • The rendering of the HTML code in the right area of allows for real-time previewing of the HTML email template as it is being modified in the HTML area.

  4. In the HTML area on the , use the search function (usually Ctrl + F or Command + F) within the text editor to find and modify the specific elements.

    Nota

    Be careful not to disrupt HTML tags when making changes, as it may result in abnormal page display or rendering errors.

    Key elements that might require adjustments include:

    • Company logo area

      <div style='position: relative; width: 100%'>
              <div
                style='
                  display: block;
                  overflow: hidden;
                  position: relative;
                  width: 100%;
                  height: 115px;
                  line-height: 110px;
                  background: #ffffff;
                  border-bottom: 5px solid #9bc769;
                  box-sizing: border-box;
                  text-align: center;
                '
              >

      • display: Determines how the element is displayed in the document. It can be set to values like block, inline, none, etc.

      • overflow: Specifies how the content should behave if it overflows the box. Values include visible, hidden, scroll, auto, etc.

      • position: Establishes the positioning method for the element. It can be static, relative, absolute, fixed, or sticky.

      • width: Sets the width of the element.

      • height: Determines the height of the element.

      • line-height: Defines the height of each line of text within the element.

      • background: Specifies the background color for the element. The color is represented using a hexadecimal code.

      • border-bottom: Determines the style, width, and color of the bottom border of the element.

      • box-sizing: Defines how the width and height of the element are calculated, including padding and borders.

      • text-align: Aligns the text content within the element. It can be left, right, center, or justify.

      Nota

      For information about how to change the company logo, see Company Logo at Company Preferences or Company Logo at Site Preferences. The company logo set at the site preferences overrides that set at the company preferences.

    • Division between the company logo area and the actual content of the email template

      &濒迟;诲颈惫听蝉迟测濒别='丑别颈驳丑迟:听30辫虫;听飞颈诲迟丑:听100%;听产补肠办驳谤辞耻苍诲:听#00467蹿'&驳迟;&濒迟;/诲颈惫&驳迟;

      • height: Specifies the height of the element.

      • width: Defines the width of the element.

      • background: Sets the background color for the element. The color is represented using a hexadecimal code.

    • Button and text displayed on the button

      <span
                    style='
                      display: block;
                      background: #027dc1;
                      line-height: 50px;
                      text-align: center;
                    '
                    >Text displayed on the button</span
                  >

      • display: Determines how the element is displayed in the document. It can be set to values like block, inline, none, etc.

      • background: Specifies the background color for the element. The color is represented using a hexadecimal code.

      • line-height: Defines the height of each line of text within the element.

      • text-align: Aligns the text content within the element. It can be left, right, center, or justify.

    • Text

      <span style='color: #000000'>
                  Text content
                </span>

      The text content is outside the <> brackets. The 'color' attribute preceding this text determines its color. The color is represented using a hexadecimal code.

    • Variable

      &濒迟;产&驳迟;顿别补谤听调调耻蝉别谤冲苍补尘别皑皑,&濒迟;/产&驳迟;

      The content within the double curly braces represents a variable, in this case, "user_name". When the page is rendered, this variable will dynamically display the actual username.

    • Link

      <a
                  style='
                    font-size: 16px;
                    color: #027dc1;
                    text-decoration: underline;
                    cursor: pointer;
                  '
                  href='mailto:{{representative_emails}}'
                  >{{representative_email}}</a
                >

      • "<a></a>" is the anchor tag used to create a hyperlink.

      • "font-size" sets the text size.

      • "color" defines the color of the text.

      • "text-decoration: underline" underlines the text to indicate it's a link.

      • "cursor: pointer" sets the cursor to change into a pointer when hovering over the link.

      • "href='mailto:{{representative_emails}}'" specifies the destination URL. In this case, it uses the mailto: protocol. The actual email address should be placed directly after the mailto: protocol.

      • ">{{representative_email}}</a>" contains the text displayed for the hyperlink.

  5. Save the edited HTML email template within Postdrop once satisfied with the modifications

  6. Copy the modified HTML email template to HTML section on the Edit page.

    Sugerencia

    厂别濒别肠迟听Use Default Template聽to undo all changes and revert the email template to its default values.

Ver tambi茅n: