/
Structure

Structure

Description

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.

This article describes the following structure types:


Single-Column Structure

Drag a single column into the content area to display your content.

Two-Column Structure

Drag the two-column structure into the content area to display your content.

Two evenly-spaced columns

Two columns with a smaller column on the left

Two columns with a smaller column on the right

Three-Column Structure

Drag the three-column structure into the content area to display your content.

Four-Column Structure

Drag the four-column structure into the content area to display your content.


Understanding the Structure Options

Structure options refer to elements or components used to organize and lay out content within an email template. Users can create visually appealing and well-organized email templates with a horizontal layout.

  • Flexibility
    Insellerate provides a flexible drag-and-drop interface that allows users to easily add, remove, rearrange, and resize content blocks within each stripe. Users can adjust the width and height of the blocks to achieve the desired layout.

  • Responsive Design
    Insellerate is designed to be responsive, meaning the email templates created using this structure will adapt and display properly on different devices and screen sizes. Insellerate manages the responsive coding behind the scenes, making it easier for users to create mobile-friendly email designs.

Stripes

A stripe structure divides the email template or section into multiple horizontal segments or "stripes." Each stripe represents a row in the layout. Within each stripe, users can add different content blocks such as text, images, buttons, dividers, or other elements. These blocks are arranged horizontally within the stripe and can be customized individually.

Structures

A structure refers to the overall layout or arrangement of content within an email template. It defines the high-level organization of different blocks of content.

Containers

A container is a specific component within a structure that holds and encapsulates content. It acts as a placeholder or wrapper for blocks, such as text, images, buttons, or additional nested structures. Containers provide a way to group related content together, define their positioning, and apply styling properties. They are often used to create visually coherent sections or blocks within email templates.


Structure Options

The Insellerate email editor provides extensive options for structuring the appearance of email templates. It offers various data options to populate templates with personalized and dynamic content, including content blocks, personalization features, data binding, and dynamic variables. These features empower users to create visually appealing, personalized, and data-driven email campaigns.

Stripes - Content

Appearance

Insellerate offers a variety of styling options to customize the appearance of your email templates. You can modify colors, fonts, text sizes, backgrounds, borders, and more.

  • Message Area: Selecting the Message Area ensures that the appearance of the message area aligns with the customized settings in the selected areas (header, content, footer, and info area), providing a cohesive and visually consistent email template.

  • Stripe Background Color: The Stripe background color for the Stripe section in an email is the color that fills the area behind the Stripe content, such as the logo or banner, and can be customized to match the brand colors or overall design of the email template. The default setting is transparent but can be changed to a hex code of the color users want to use.

  • Background color of content: Easily customize the background color of the content within your email templates, allowing you to create visually appealing and cohesive designs.

  • Background Image

    This allows users to apply an image as the background of an email message. It's the image that will fill the entire area behind the email content.

    • The default Background Image toggle is OFF.

       

    •  Turning the Background Image toggle to ON opens the options to add a background image.

       

      The options include the following:

      • Upload an image.

         

      • Add a link to an image.

         

        • Tiles: The option to tile an image as a background allows you to repeat the image seamlessly across the element, creating a pattern-like effect.

        • Accept the Link by selecting the check mark.

        • Image Storage Options

          • Download to the gallery will store the image in the gallery for use in other communications.

          • Leave it as an external link. It will reference the link when used. 

      • Access stock images using the search feature to find images through keyword searches.

         

    • Modify Background Image - Users can modify the appearance and layout of images once they have been selected.

      • Change selected images.

      •  Edit a selected image.

      • Set the Repeat Image toggle.

        • Turning the Repeat Image Toggle ON centers one image and replicates additional images as necessary on both sides of the image based on screen size.

           

        • Turning the Repeat Image Toggle OFF makes the image the background and adds the background color for any space remaining on both sides of the image based on the screen size.

           

      • Adjusting the Position X and Y options allows users to determine the background image's exact horizontal and vertical placement.

         

Some email clients (Windows 10 Mail, Android 4.4, Gmail app on iOS, and Android with non-Gmail account) won't support a background image. As a backup, it is recommended that users select a background color similar to the image one.

  • Border of Content gives users the ability to apply borders to the content within your email templates, enhancing the visual appeal and creating a defined structure for your email design.

  • Hide Element options 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 the mobile device icon to hide the text on the mobile application.

Structure - Content

Appearance

Insellerate offers a variety of styling options to customize the appearance of your email templates. You can modify colors, fonts, text sizes, backgrounds, borders, and more.

  • Split Columns effortlessly split columns by simply dragging and dropping elements or content blocks into the desired positions, allowing for easy customization and flexible column layouts within your email template.

    • Adjust the sizing of the columns.

    • Use the trash icon to delete the column.

Blocks can be added into any of the columns.

  • Background color of the structure is the color that fills the area behind the Stripe content, such as the logo or banner, and can be customized to match the brand colors or overall design of the email template. The default setting is transparent but can be changed to a hex code of the color users want to use.

  • Background Image

    This allows users to apply an image as the background of an email message. It's the image that will fill the entire area behind the email content.

    • The default Background Image toggle is OFF.

       

    •  Turning the Background Image toggle to ON opens the options to add a background image.

       

      The options include the following:

      • Upload an image.

         

      • Add a link to an image.

         

        • Tiles: The option to tile an image as a background allows you to repeat the image seamlessly across the element, creating a pattern-like effect.

        • Accept the Link by selecting the check mark.

        • Image Storage Options

          • Download to the gallery will store the image in the gallery for use in other communications.

          • Leave it as an external link. It will reference the link when used. 

      • Access stock images using the search feature to find images through keyword searches.

         

    • Modify Background Image - Users can modify the appearance and layout of images once they have been selected.

      • Change selected images.

      •  Edit a selected image.

      • Set the Repeat Image toggle.

        • Turning the Repeat Image Toggle ON centers one image and replicates additional images as necessary on both sides of the image based on screen size.

           

        • Turning the Repeat Image Toggle OFF makes the image the background and adds the background color for any space remaining on both sides of the image based on the screen size.

           

      • Adjusting the Position X and Y options allows users to determine the background image's exact horizontal and vertical placement.

         

Some email clients (Windows 10 Mail, Android 4.4, Gmail app on iOS, and Android with non-Gmail account) won't support a background image. As a backup, it is recommended that users select a background color similar to the image one.

 

  • Padding The Padding option sets the amount of space at the top and bottom of the link.

  • Padding between containers on mobile, this toggle adjusts the padding between containers on mobile devices, ensuring optimal spacing and layout consistency across different screen sizes, resulting in a seamless and visually pleasing email design.

    • Default option is ON (recommended to leave at default)

Padding between containters on mobile ensures that there is sufficient spacing and visual separation between different content blocks or containers on smaller screens. This default setting helps maintain readability and avoids any unintended overlap of content that can occur when containers are placed too closely together. By enabling padding between containers on mobile, Insellerate aims to provide a better user experience and optimize the layout for mobile devices, where screen space is often limited. However, users have the flexibility to customize and adjust this setting according to their specific design preferences and requirements.

  • Hide Element options 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 the mobile device icon to hide the text on the mobile application.


Data - Stripes and Structures

The "Data" section refers to a feature that allows you to bind data to your email templates or use dynamic variables within your design. It lets you dynamically populate your email content based on external data sources or subscriber attributes Using a Link to a website containing data, Jason, CSS.

Here are the key aspects of the Data section in Insellerate:

  1. Data Binding: Insellerate supports data binding, which means you can import data from external sources. This feature allows you to populate your email templates with dynamic content such as product information, pricing details, or personalized customer data.

    • Supports sites with OG Tags

  2. Variable Management: The Data section provides a way to manage dynamic variables within your email template. You can define variables, assign values to them, and use them within your content blocks or subject lines. Variables help create reusable templates and automate content updates.

  3. Dynamic Content: With the Data section, you can insert dynamic content into your email templates based on the data you've bound or the variables you've defined. This allows for personalization and customization, ensuring that each recipient receives relevant and targeted content.

  4. Data Sources: supports various data sources, including CSV files and API integrations. You can import and sync data to keep your email templates up to date with the latest information.

By leveraging the Data section in the structure section, users can enhance email templates with personalized and dynamic content, streamline content management, and ensure messages are tailored to the individual recipient's data.


More About the Content Library

Related content