How to
Designing emails with Outbound Email node

Outbound email node

In Pendula, there are two primary methods for designing emails within the Outbound Email Node: building from scratch using an email builder with a drag-and-drop interface or utilising custom HTML code. While custom HTML offers flexibility, it may cause visual discrepancies across different email clients. For instance, background images in custom HTML may not render correctly in Outlook, which defaults to a white background unless otherwise configured. To ensure visual consistency, we recommend using Pendula's email builder.

In this article, we focus on the process of building emails from scratch using the email builder.

Understanding the Interface

The design panel is organised into several sections: Content, Blocks, Body, Images, and Upload. Each section allows you to add and customise different elements to create a visually appealing and functional email.

To move content or a row, hover over the item to reveal the pan icon. Click and drag the item to its new desired location.

To redo or undo an action, or to preview the email on different screen resolutions, use the icons located at the bottom right corner of the interface.

You can also utilise merge fields to dynamically insert personalised data, such as the recipient's first name, based on the nodes in the flow. This is ideal for personalising emails to increase engagement and relevance.

Once you are satisfied with your email design, click on the Save icon to save your changes.

You need to save the node itself to make sure that the design is saved. Further, you also need to save the Flow to make sure the template is saved.

To delete a content block, select the item on the canvas and click the bin icon to remove it.

Depending on the content block, additional actions may be available. For example, text blocks might include options for bold, italics, and other text formatting features.

Choose your styles

When designing your email in Pendula, the Body settings allow you to customise the overall appearance of your email.

• Text Color and Background Color: Adjust the colours to match your brand’s aesthetic.
• Content Width: Set the width of the email content, with the default being 500px.
• Content Alignment: Align your content to the Centre or Left as per your design preference.
• Font Family: Choose from a set list of fonts, with Arial being the default. Note that some fonts may not be supported by all email providers or browsers. If your chosen font isn’t supported, the closest web-safe font is displayed as a fallback.
• Font Weight: Select between Regular and Bold font weights.
• Preheader Text: Under email settings, you can set the Preheader Text, which is the short summary text that follows the subject line when viewing an email from the inbox. Ensure the preheader text is concise and engaging, typically around 40-50 characters.
• Links: Under links, customise the appearance, including their Color and whether they are Underlined.

By configuring these settings, you can ensure that your email design is visually consistent and aligns with your brand identity.

Adding Blocks

Blocks allows the addition of pre-made columns or rows, enabling you to structure your email layout efficiently. Here’s how you can use and customize blocks:

1. Select a Pre-made Block:
   • Choose from a variety of pre-made blocks that best suit your layout needs.
2. Customise Row and Column Properties:
   • Upon selecting a block, you can further customise its properties.
   • Under Columns, you can determine the number of columns to include in a row and its layout.
3. Column Properties:
   • Background Color: Set a specific background color for each column.
   • Padding: Adjust the padding to control the spacing within each column. You can toggle More options to add unique values to each side.
   • Border: Customise the border settings for each column. You can toggle More options to add unique values to each side.
     • Border Type
     • Border Color
     • Border Width
4. Row Properties:
   • Background Color: Set the overall background color for the row.
   • Content Background Color: Specify a background color for the content within the row.
   • Background Image: Choose a background image via stock options, upload your own, or provide a URL.
   • Padding: Adjust the padding to control the spacing around the row’s content. You can toggle More options to add unique values to each side.
   • Responsive Design:
     • Hide on Desktop: Toggle whether a row should be hidden on desktop devices.
     • Mobile Settings: Choose whether the row should be hidden on mobile or if the columns should not stack (stacking is the default behaviour).

Switch between the desktop and mobile tabs to make respective changes for each device type.

Adding Content

Content allows the addition of columns, HTML, and other visual elements such as text, buttons, dividers, and images. Here’s how you can add and customise content in your email:

• • Similar to blocks, columns can be added with customisable properties.
  • Smart Headings: AI-powered suggestions for headings. Type your text and click Get suggestions to receive around five suggestions. Adjust the tone to friendly, luxury, relaxed, professional, bold, or witty. Your text must be at least two words. To get new suggestions, you can click on refresh. To change your prompt, you should exit out of the content panel.
  • Heading Types: Choose from H1 to H4.
  • Color: Customise the text color.
  • Font Family: Use the global font set in the body or choose a different font.
  • Font Weight: Set the font weight (regular, bold, etc.).
  • Font Size: Default size is 14px, but it can be adjusted.
  • Text Alignment: Align the text to the centre, left, right, or justify.
  • Line Height: Default is 140%, adjustable.
  • Container Padding: Adjust the padding around the heading, with a default setting of 10px. Toggle More options for unique padding values for each side.
  • Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.
  • Similar customisation options as headings.
  • You will not find smart text on the content panel, but you can select the text and use tools that appear on top of the text. These tools support AI functionality like spelling and grammar checks, text expansion, summarisation, rephrasing, tone adjustments and general text formatting options.
    
    
• Pendula supports multiple methods for adding images to your email:
  
  • Upload your own: Drag and drop your files into the upload zone or select Upload image.
  • Previously uploaded images: When you upload an image, we save that file in Pendula. Access previously uploaded images by selecting More images > Uploads.
  • Image URL: Replace the placeholder image URL with your desired image URL.
  • Stock Images: Choose from millions of stock images licensed under Creative Commons Zero by selecting More images > Stock images.
  • Magic Image (AI): Use AI to create images tailored to your content needs.
  Customising option includes:
  
  • Auto-Width toggle: Automatically adjusts the width of the image to fit the content area.
  • Alignment: Set the image alignment to left, right, center, or justify.
  • Alternate text: Provide alternate text for accessibility.
  • Under Actions
    • Link Settings: Add a URL to make the image clickable.
    • Target Settings: Specify how the link should open (e.g., in a new tab).
    • Action Options: Choose actions like opening a website, sending an email, or calling a phone number.
  • Container Padding: Adjust the padding around the image, with a default setting of 10px. Toggle More options for unique padding values for each side.
  • Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

  Outside of the content pane, you can also insert images by Clicking on Upload (Allows importing your own images via upload or URL.) Clicking on Images (Allows choosing images from a library of free-to-use images under Creative Commons Zero. Additionally, you can use AI to create images as well.)

• Smart Button: Works similarly to headings, allowing text formatting such as bold, italicize, underline, or subscript via the toolbar.
  Under Actions:
  
  • Set a link for the button and choose the target.
  • Select actions such as opening a website, sending an email, or calling a phone number.
  Under Button Options:
  
  • Text Color: Customise the button text color.
  • Background Color: Set the button background color.
  • Auto-Width Toggle: Enable or disable auto-width for the button.
  • Font Family: Use the global font set in the body or choose a different font.
  • Font Weight: Set the font weight (regular, bold, etc.).
  • Font Size: Default size is 14px, but it can be adjusted.
  • Alignment: Align the button left, right, centre, or justify.
  Under Spacing:
  
  • Line Height: Default is 120%, adjustable.
  • Padding: Customise padding with more options toggle for unique values on each side.
  • Border Settings: Adjust border type (solid, dashed, dotted), color, and width, with more options toggle for custom values.
  • Rounded Border Size: Default is 4px, adjustable with more options toggle for unique values.
  Container Padding: Default is 10px, with options to set unique values for each side.
  Visibility: Choose to hide the button on desktop or mobile by switching between the respective tabs
• The Divider element helps you create visual separation between sections of your email.
  
  • Line Width: Adjust using a slider.
  • Line Type: Choose between solid, dotted, or dashed lines.
  • Line Width: Default is 1px, but adjustable.
  • Line Color: Customise the color of the divider line.
  • Alignment: Align the divider left, right, centre, or justify.
• The HTML element allows you to insert custom HTML code directly into your email.
  
  • Custom HTML Code: Enter your custom HTML code in the provided code box.
  • Container Padding: Default is 10px, with options to set unique values for each side.
  • Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.
• The Menu element lets you create navigational menus within your email, providing a structured way for recipients to access different sections or links.
  Adding Menu Items:
  
  • Click Add a new item to include a new menu item.
  • Customise each item with text, URL, target, and action (e.g., open website, call, or email).
  Customisation Options:
  
  • Font Family: Use the global font set in the body or choose a different font.
  • Font Weight: Adjust the font weight.
  • Font Size: Customise the size of the menu text.
  • Text Color: Set the color for menu text.
  • Link Color: Customise the color of the links.
  • Alignment: Align the menu items left, right, centre, or justify.
  • Layout: Choose between a horizontal or vertical layout.
  • Separator: Add a separator text between menu items.
  • Padding: Adjust padding with more options toggled on by default.
  Container Padding: Default is 10px, with options to set unique values for each side.
  Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

Saving Blocks for re-use

Saved blocks allow you to save any block that you create and populate with content for re-use across flows. Here’s how you can save a block:

1. Select a Block (Row) that you have configured.
2. Select the 'Save' icon:
3. Give the block a name, and any tags (optional, tags are used for finding Saved blocks later via search. Multiple tags can be separated by a comma.)

Using Saved Blocks

You can find all of your Saved blocks under the Blocks tab, beneath the layout options.

Known bugs

The paragraph spacing is not correctly rendering between the email builder and the email sent. In the email builder, adding a new paragraph by pressing enter shows no paragraph spacing, whilst the email sent will correctly render the space between the two paragraphs.

Email builder preview	Email sent