Headings

Headings are essential for structuring your email content and guiding the reader's attention. This guide details how to add, style, and manage heading elements within your email templates.

Adding a Heading

  1. Navigate to Content Tab: Ensure the Content tab is selected in the right-hand sidebar.

  2. Drag and Drop: Locate the "Heading" element in the sidebar. Click and drag it onto an appropriate content area or column within your email canvas.

    Upon dropping, a default heading (e.g., "Heading") will appear on the canvas. Its specific properties will load in the right-hand sidebar under the "Content" tab, ready for customisation.

Customising Heading Properties

With the heading element selected, use the options in the right-hand sidebar to tailor its appearance and content.

Smart Headings (AI Text Generation)

Leverage AI to generate or refine your heading text.

  1. Access Smart Headings: At the top of the heading's content properties, you'll find the "Smart Headings" section.

  2. Enter Text Prompt: In the "Text Prompt" input field, type your initial idea or keywords for the heading (e.g., "Buy Now").

  3. Generate Suggestions: Click the arrow button (or a "Generate" button) next to the input field. The AI will process your prompt.

  4. Review Suggestions: A list of "Alternate suggestions against your text" will appear.

  5. Select a Tone (Optional): Use the "Select Tone" dropdown (e.g., "Friendly," "Luxury," "Professional") to refine the suggestions based on the desired voice. The suggestions will update dynamically.

  6. Apply Suggestion: Click on a preferred AI-generated heading from the list (e.g., "Don't Miss Out on This Limited-Time Offer," or "Exclusive Access Awaits: Claim Your Timeless Opportunity" after changing tone to Luxury). The text of the heading on the canvas will update instantly.

  7. Go Back: If you need to revise your prompt or see previous suggestions, click the "Back" button within the Smart Headings interface.

Text Editing

To edit the text of the heading, you can simple click on it. This will allow you to edit the heading as free text. You also then have a range of standard styling properties such as bold, italic, strike, through, references, links emojis etc.

Merge Tags

To personailse the heading text for the user you can select the merge tags. Clicking on the merge tags will display a drop down which allows you to select from the uers id or external id as well as a range of pre populated user properties.

Text Styling

Manually adjust the visual properties of your heading text. These options are typically found under a "Text" sub-section in the sidebar.

  • Heading Type: Select the semantic heading level (H1, H2, H3, H4). This affects the default styling and HTML tag used, which can be important for accessibility and SEO (though less critical in emails than on web pages). The font size may automatically adjust based on the selected type.

  • Font Family: Choose a font for the heading from the dropdown menu (e.g., "Book Antiqua").

  • Font Weight: Select the desired font weight (e.g., "Regular," "Bold") from the dropdown.

  • Font Size: Adjust the text size using the + / - buttons or by typing a pixel value (e.g., 16px, 19px).

  • Colour: Click the colour swatch to open the colour picker and select the heading text colour (e.g., a dark maroon #381212).

  • Text Align: Align the heading within its container:

    • Left

    • Center

    • Right

    • Justify (less common for headings) (e.g., "Center" selected in the video).

  • Line Height: Control the vertical spacing for lines of text within the heading, specified as a percentage or pixel value (e.g., 140%, changed to 220%).

  • Letter Spacing: Adjust the space between characters, specified in pixels or other units (e.g., 1.1px).

Links

If your heading needs to be a hyperlink, configure its properties here.

  • Inherit Body Styles:

    • On (toggle active): Link styling (colour, underline) will be inherited from the global settings defined in the "Body" tab of the email editor.

    • Off (toggle inactive): Allows you to set custom link styles specifically for this heading. (The video shows it being toggled off to reveal custom link colour options).

  • Colour: (Appears if "Inherit Body Styles" is off) Select the colour for the link text.

  • Hover Colour: (Appears if "Inherit Body Styles" is off) Select the colour for the link text when a user hovers over it.

  • Underline: (Appears if "Inherit Body Styles" is off) Toggle on/off to show or hide the underline for the link.

  • Hover Underline: (Appears if "Inherit Body Styles" is off) Toggle on/off to show or hide the underline for the link on hover.

    Note: To make the heading an actual link, you would typically select the text on the canvas and use an inline link creation tool, or there might be a separate URL field associated with the heading element if it's designed to be a link by default. This video segment focuses on styling potential links within the heading text.

General (Container Padding)

This controls the padding around the heading element, within its container block.

  • Container Padding:

    • All Sides: Enter a pixel value to apply equal padding to the top, right, bottom, and left of the heading's container (e.g., default 10px, changed to 20px).

    • More Options: Toggle the switch to set individual padding values for "Top," "Right," "Bottom," and "Left."

Responsive Design

Manage the heading's visibility on different screen sizes.

  • Hide on Desktop: Toggle on to hide the heading on desktop views.

PreviousDividersNextText

Last updated