Content Editor Content Section

An email content editor equipped with tools to create structure and columns and customizable content blocks, such as images, videos, text, buttons, and menus, that seamlessly integrates personalization data from Insellerate-like Names, providing users with a flexible and powerful platform for creating engaging and targeted email campaigns.

Structure

The structure options for an email editor include the ability to create rows and columns, allowing users to divide their email content into visually appealing and organized sections that can be easily customized and optimized for different devices and screen sizes.

Blocks

The blocks feature in an email content editor provides users with a wide range of customizable content options, such as images, text, buttons, spacers, videos, social sharing icons, banners, timers, menus, and HTML code, enabling them to create engaging and dynamic email campaigns tailored to their specific needs and goals.

Image Block

Incorporating images into emails offers several advantages, including enhanced readability and perception, increased brand awareness, and improved customer engagement. It is worth noting that there are three primary image formats to choose from, including JPEG, GIF, and PNG.

See image options

Image

An image block in an email content editor allows users to upload and customize images.
- Drag and drop the image block into one of the structured containers.
  - Image Gallery
    - Upload
    - Upload Options:
      - When selecting an image format for your email, consider the following:
        JPEG format is ideal for preserving colors but may result in significant quality reduction;
        GIF format is helpful for adding action to your email but may render colors less brightly than JPEG;
        PNG format is recommended for images with sharp edges, logos, or transparent backgrounds and preserves quality regardless of size and color saturation.
        Keep in mind that large PNG images can slow down email loading times, and the maximum image size for upload is 3MB with a resolution of 4000 x 4000 pixels.
    - Add Link to Image
      To determine how to handle an image, follow these guidelines:
      - If you only plan to use the image once, select "Leave as external link" from the dropdown menu and click the checkmark.
      - If you intend to use the image for multiple email campaigns, go to the "Project" tab and insert the link. Then select "Download to the gallery" and click the checkmark to save the image for future use.
    - Access Stock images use the search feature to find images through keyword searches.
  - Change selected images:
  - Edit the selected image:
    - A new pop-up window will open, and your image will be opened with the image editor;
      - You can apply filters, resize and crop images, draw over them, put any text over them, add stickers and frames, and apply backgrounds;
      - Click "save" in the image editor when you have completed your edits.
After selecting an image, other options will be displayed
- Rollover Effect Toggle
  - It will display an image over the current image when the mouse hovers over the image.
    - Turn the Rollover Effect Toggle to ON
      - Use and upload images or URL for an image path
        Important to note: The image rollover effect works on desktop devices. Other users will see the primary image only.
        This feature works in a limited number of email services: Yahoo! Mail, AOL, Gmail, iCloud Mail, Outlook 2003, and macOS Apple Mail.
    - Change or Edit images.
- Link
  - Add a link for Site, Mailto, Call, or Share directly from the image.
- Alternate Text
  - Add a description for the image
- Alignment
  - Set the alignment of the picture to on the page or left or right align.
- The size will allow you to adjust the overall size of the image.
- Adjust to Width will make the image the size of the width of the screen.
- Responsive Image
  - Adjust the image to the width of the screen of the mobile device. We recommend you leave this toggle ON.
- Email Content Margin
  - The default option is OFF for the More option.
  - Click More to open up the margin options to increase the margins around the email content.

Text

A text block is a designated area within an email template where users can input and format text content, such as a message, introduction, or body text, before sending the email to its intended recipients.

Text Block Options

The Text block in an email content editor allows users to upload and customize images.
- Drag and drop the Text block into one of the structured containers.
- Access the text editor menu to add formatting to the text
- Side Bar Options: Adjustments made from the sidebar will update the settings for the entire Text block.
  - Text Color
    - Select a color with the color picker or input a HEX Code
  - Background Color
    - Default is transparent
    - Select a color with the color picker or input a HEX Code
  - Alignment
    - This will set the alignment for the entire block.
      - Right | Center | Left
      - Option to set for mobile
  - Line spacing: Adjust the spacing between rows of text.
  - Padding
    - The default option is OFF for the More option.
    - Click More to open up the margin options to increase the margins around the text.
    - Hide Element
      - Option to hide the text on either the desktop or the mobile application
      - Click the desktop icon to hide the text on the desktop application
      - Click on a mobile device

Buttons

The presence of a button plays a crucial role in determining your CTOR (click-to-open rate) as it enables customers to make purchases or register with your website. Without a button, these actions would not be possible.

There are several ways to create a button, including using the "Button" block, an image button, or an animated GIF button.

To create a CTA button using the "Button" block, add the block to your template and place it next to the relevant element.

See Button Options

The Button block in an email content editor allows users to add buttons to email.
- Drag and drop the Button block into one of the structured containers.
- Link the button to a URL:
- Create your Button label:
- Text Style:
  - Font
  - Text Size
  - Bold | Italic Toggle
- Button Color
  - Select a color with the color picker or input a HEX Code.
- Text Color
  - Default is white
  - Select a color with the color picker or input a HEX Code
- Background Color
  - Default is Transparent
  - Selecting a color will fill the section with the button
- Border Radius
  - The border-radius around a button is the degree to which the corners of the button are rounded.
- Alignment
  - Alignment
    - This will set the alignment for the entire block.
      - Right | Center | Left
      - Option to set for mobile
- Button with Icon
  - Add an icon to the button Toggle
  - The default is OFF
  - To add an icon, turn Toggle ON
    - Select the alignment to be left or right
    - Icon
      - Select the Icon to upload, link, or select a stock image
      - Change | Edit
      - Link to Image
      - Icon Indent
        Adjust the space around the icon
      - Adjust to Width
        Adjusting the width will increase the button size to the container width
      - Border
        Adjust the border of the button
      - Internal Padding
        Adjusts the distance between the borders of the button and the text
      - External Padding
        Adjusts the distance between the borders of the button and the section
      - Hide Element
        Option to hide the text on either the desktop or the mobile application
        Click the desktop icon to hide the text on the desktop application
        Click on a mobile device

Spacer

The spacer feature in email builders allows users to insert blank spaces or gaps of various sizes and dimensions within an email layout, helping to improve the overall spacing and alignment of different content blocks or sections.

See Spacer Options

The Spacer block in an email content editor allows users to space between sections.
- Drag and drop the Spacer block into one of the structured containers.
- Dynamic Spacer Toggle
  - Default Toggle is OFF
  - Turning the Dynamic Spacer Toggle to ON
    - Allows you to drag the spacer to your desired width
- Background color of a block
  - Default is transparent
  - Select a color with the color picker or input a HEX Code
  - Line
    - Spacer will have a divider line
    - Set the style of the line
    - Set the thickness of the line
    - Set the color of the line
      - Select a color with the color picker or input a HEX Code
  - Width:
    - Set the width of the line in the spacer
  - Alignment
    - This will set the alignment for the entire block.
      - Right | Center | Left
      - Option to set for mobile
  - Responsive Spacer
    - Adjust the spacer to the width of the screen of the mobile device. We recommend you leave this toggle ON.
  - Padding
    - The default option is OFF for the More option.
    - Click More to open up the margin options to increase the margins around the text.
    - Hide Element
      - Option to hide the text on either the desktop or the mobile application
      - Click the desktop icon to hide the text on the desktop application
      - Click on a mobile device

Video

Including a video in your email can capture the interest of your subscribers and benefit your campaign in multiple ways, such as demonstrating how to utilize your product or presenting a detailed product description to your recipients.

Videos from Youtube or Vimeo can be embedded into an email.

See Video options

The Video block in an email content editor allows users to link to videos.
- Drag and drop the Spacer block into one of the structured containers.
- Link to Video
  - Add the link to either a Youtube or Vimeo video
  - Check the link is working using the link checker
- Custom Thumbnail
  - A custom thumbnail is a unique image selected to represent a video clip intended to entice viewers to click and watch the video.
    - Default the Custom Thumbnail is OFF
    - Customer Thumbnail ON
      - Opens the image OptionsUpload
      - Upload Options:
        When selecting an image format for your email, consider the following:
        JPEG format is ideal for preserving colors but may result in significant quality reduction;
        GIF format is useful for adding action to your email but may render colors less brightly than JPEG;
        PNG format is recommended for images with sharp edges, logos, or transparent backgrounds and preserves quality regardless of size and color saturation.
        Keep in mind that large PNG images can slow down email loading times, and the maximum image size for upload is 3MB with a resolution of 4000 x 4000 pixels.
      - Add Link to Image
        To determine how to handle an image, follow these guidelines:
        If you only plan to use the image once, select "Leave as external link" from the dropdown menu and click the checkmark.
        If you intend to use the image for multiple email campaigns, go to the "Project" tab and insert the link. Then select "Download to the gallery" and click the checkmark to save the image for future use.
      - Access Stock images use the search feature to find images through keyword searches.
    - Change selected images:
    - Edit the selected image:
      - A new pop-up window will open, your image will be opened with the image editor;
        You can apply filters, resize and crop images, draw over them, put any text over them, add stickers and frames, and apply backgrounds;
        Click "save" in the image editor when you have completed your edits.
- Play Button
  - Select the color and style of the play button that will display on the video.
- Alignment
  - This will set the alignment for the entire block.
    - Right | Center | Left
    - Option to set for mobile
- Size
  - Increase or Decrease the size of the button height or width
- Adjust to Width will make the image the size of the width of the screen.
- Responsive Image Toggle
  - The responsive image toggle is a web design and development approach that allows websites and applications to adapt and optimize their layout and functionality based on the device and screen size used to view them. We recommend leaving this toggle on to ensure visibility on mobile and tablets.
- Padding
  - The default option is OFF for the More option.
  - Click More to open up the margin options to increase the margins around the video content.
- Hide Element
  - Option to hide the text on either the desktop or the mobile application
  - Click the desktop icon to hide the text on the desktop application
  - Click on a mobile device

Emails can feature and connect to your social media accounts. Use the Social block, consisting of social media icons with links, which can be added to your email template by dragging and dropping the "Social" block.

more Social options

The Social block in an email content editor allows users to insert links and icons to social media accounts in an email.
- Drag and drop the Social block into one of the structured containers.
- Background Color
  - The background color for a Social section is the color that fills the area behind the social content.
  - The default setting is transparent but can be changed to a Hex Code of the color you want to use.
- Circle and Color Logos
  - Select the design style and colors for the social icons to use
  - Select the size of the icons
  - + Add additional social icons
- Add Social Links
  - Enter the Url into the link section
  - Validate the link
  - Default More is OFF
  - Turn the More Toggle to ON
    - Update the title or Alt Text
  - Remove the icon and link from the Social Section
- Alignment
  - This will set the alignment for the entire block.
    - Right | Center | Left
    - Option to set for mobile
- Indent between icons
  - Increase or decrease the spacing between the social icons
  - Padding
    - The default option is OFF for the More option.
    - Click More to open up the margin options to increase the margins around the video content.
  - Hide Element
    - Option to hide the text on either the desktop or the mobile application
    - Click the desktop icon to hide the text on the desktop application
    - Click on a mobile device

Banner

A banner block in an email editor typically allows users to add an eye-catching image or graphic prominently displayed at the top of an email, often featuring the main message or offer.

more Banner options

Drag and drop the Banner block into one of the structured containers.
Image Gallery
- Upload
- Upload Options:
  - When selecting an image format for your email, consider the following:
    - JPEG format is ideal for preserving colors but may result in significant quality reduction;
    - GIF format is useful for adding action to your email but may render colors less brightly than JPEG;
    - PNG format is recommended for images with sharp edges, logos, or transparent backgrounds and preserves quality regardless of size and color saturation.
    Keep in mind that large PNG images can slow down email loading times, and the maximum image size for upload is 3MB with a resolution of 4000 x 4000 pixels.
- Add Link to Image
  To determine how to handle an image, follow these guidelines:
  - If you only plan to use the image once, select "Leave as external link" from the dropdown menu and click the checkmark.
  - If you intend to use the image for multiple email campaigns, go to the "Project" tab and insert the link. Then select "Download to the gallery" and click the checkmark to save the image for future use.
- Access Stock images use the search feature to find images through keyword searches.
- Change selected images:
- Edit the selected image:
  - A new pop-up window will open, and your image will be opened with the image editor;
    - You can apply filters, resize and crop images, draw over them, put any text over them, add stickers and frames, and apply backgrounds;
    - Click "save" in the image editor when you have completed your edits.
  - Orientation
    - Set the banner image to horizontal, verticle or square crop
  - Filter
    - A photo filter in an email editor banner refers to an image processing tool that enables users to apply different visual effects to their images to enhance their appearance and convey a specific mood or style.
  - Link the Banner to a URL
    - Enter the Url into the link section
    - Validate the link
  - Alternate Text
    - Alternate text (alt text) in an email editor is a description of an image that appears in place of the image if it fails to load or cannot be displayed and is also used by screen readers for accessibility purposes.
  - Additional Picture
    - Add an additional picture to the banner image. You can layer a logo or another image over the top of the picture.
    - Aspect Ratio
      - Changing the aspect ratio of an image involves adjusting the proportional relationship between its width and height.
      - The default setting is ON.
    - Hide Element
      - Option to hide the text on either the desktop or the mobile application
      - Click the desktop icon to hide the text on the desktop application
      - Click on a mobile device

Timer

A timer in an email is a useful tool for creating a sense of urgency and encouraging the recipient to take action before time runs out. By using a countdown timer, you can create a deadline for an offer or promotion, increasing the chances of conversion. The timer can be customized to display the remaining time in hours, minutes, or seconds and can be set to start automatically when the email is opened or triggered by a specific action, such as clicking a button. Additionally, the timer can be styled to match the email's design and placed in a prominent location to maximize its impact.

more Timer options

Drag and drop the timer block into one of the structured containers.
End Date and Time
- Select the End Date for the timer to expire.
- Using a 24-hour clock, choose the Hour for the timer to expire
- Choose the Seconds for the timer to expire
Select the Time Zone for the timer
Select the Style of the Timer
- Font
- Size
- Color
  1. Select a color from the grid or enter a HEX Code
Timer background color
- Select a color from the grid or enter a HEX Code
- The default is set to white
Display Days Toggle
- Will show the number of days remaining on the timer
- The default is set to ON
Separator
- Will is what will show between the Days, Hours, Minutes, and Seconds
- The default separator is :
Number of labels
- Will show the labels for the Days, Hours, Minutes, and Seconds
- The default is ON
Label Language
- Sets the language display for the labels for the Days, Hours, Minutes, and Seconds
- The default is English.
Label Font
- Select the style of the label font.
  - Font
  - Size
  - Color
- Expired Timer Image Toggle
  - You can display and image after the timer expires
  - The default is OFF
    - Turning on the Image Toggle will open up all of the image options
- Link
  - Link the Timer to a URL
    - Enter the Url into the link section
    - Validate the link
- Alternate Text
  - Alternate text (alt text) in an email editor is a description of an image that appears in place of the image if it fails to load or cannot be displayed and is also used by screen readers for accessibility purposes.
- Alignment
  - This will set the alignment for the entire block.
    - Right | Center | Left
    - Option to set for mobile
- Size
  - Increase or Decrease the size of the button height or width
- Adjust to Width will make the image the size of the width of the screen.
- Responsive ImageResponsive Image Toggle
  - The responsive image toggle is a web design and development approach that allows websites and applications to adapt and optimize their layout and functionality based on the device and screen size used to view them. We recommend leaving this toggle on to ensure visibility on mobile and tablets.
  - The default for the Toggle is ON
- Advanced Settings
  - This toggle default is set to OFF
  - Retina Display Support
    - Retina displays support options for a timer in an email editor means that the timer graphic is optimized to look sharp and clear on high-resolution screens.
    - This toggle default is set to ON.
  - Labels Letter Case
    - The labels letter case option allows you to control the appearance of text labels by specifying whether they should appear in upper and lower case, all lower case, or all caps. This option affects the text labels used throughout your email campaign, helping to ensure a consistent and professional look.
      - Upper and lower case
      - All CAPS
      - All lower case
    - Color settings for Digits on the timer
      - Digits color Days
      - Digits color Hours
      - Digits color Minutes
      - Digits color Seconds
        Select a color code from the grid or enter a Hex Code
      - Separator font
        Select the font, size, and color for the separator between the days, minutes, hours, and seconds.
      - Set the color for the Label text on the timer
        Labels color Days
        Labels color Hours
        Labels color Minutes
        Labels color Second
        Select a color code from the grid or enter a Hex Code
- Padding
  - The default option is OFF for the More option.
  - Click More to open up the margin options to increase the margins around the video content.
  - Hide Element
    - Option to hide the text on either the desktop or the mobile application
    - Click the desktop icon to hide the text on the desktop application
    - Click on a mobile device

A menu is a graphical element that can be added to an email to visually drive users to website links. Menus can use a combination of icons and links that allow users to access information directly without navigating through different pages. Menus in emails are particularly useful for highlighting key products, services, or information to recipients. Organizing links into a compact menu saves space and adds an aesthetic element to the email. Also, menus can help increase user engagement and encourage clicks to a website.

more Menu Options

Drag and drop the Menu block into one of the structured containers.
Menu Type
- The options for a menu include links only, icons only, or a combination of links and icons.
  - Links
    - A link is a clickable element that directs to another webpage or resource.
  - Icon
    - An icon used as a link is a small graphic image that, when clicked, directs the user to a specific webpage or resource.
  - Icon and Links
    - Displays a combination of icons or small graphics and a clickable link to direct to another webpage or resource

The menu type drives the options available for the rest of the menu. We will review each menu type separately.

Links Menu Type

Separator
- The divider that can be used to separate the links
  - Style
  - Thickness
  - Color
- Text Style
  - Set the look of the text for your links
    - Font- Set the font type
    - Size- set the text size
    - Bold- set the font to bold
    - Italic- set the font to italiac
- Link Color
  - Select the color of the link from the grid of colors or enter a HEX Code
- Padding
  - Space on top of the link and at the bottom of the link
- Item 1, Item 2, and Item 3
  - Delete icon will remove the link
  - Item 1 Text Box
    - Enter the Link Name
  - Link
    - Link theMenu Item to a URL
      - Enter the Url into the link section
    - Validate the link
  - Links Color
    - Select the color for the link text from the grid or enter a # Hex Code
  - Background color of the item
    - Select the color background behind the text from the grid or enter a #Hex Code.
    - The default is set to transparent
  - Hide Element
    - Option to hide the text on either the desktop or the mobile application
    - Click the desktop icon to hide the text on the desktop application
    - Click on a mobile device
- Add Menu Item
  - Add an item section to the menu with all the functionality.
    Icons Menu Type
Size
- Increase or Decrease the size of the icon height or width
- Padding
  - Space on top of the link and at the bottom of the image
    Application Panel (1920 × 880 px).mp4
- Item 1, Item 2, and Item 3