Template Requirements

Stripo Markup in HTML

Each email template must include Stripo-specific classes in the HTML to enable the drag-and-drop feature. These classes allow users to customize templates easily using the Stripo editor. Templates without these classes will only support basic editing options like image replacement, text changes, and link management. This ensures that the templates are fully compatible with Stripo's advanced editing capabilities. For detailed information, refer to the Reference Article.

Below are examples of required classes and their uses:
Examples:

• Stripe:

  • <div class="esd-stripe">...</div>: This class defines a major section or row in the template, allowing users to manage large segments of content.

• Structure:

  • <table class="esd-structure">...</table>: Used to create columns within a stripe, providing a framework for organizing content.

• Container:

  • <td class="esd-container-frame">...</td>: This class holds content blocks within a structure, ensuring proper alignment and spacing.

• Basic Blocks:

  • Image Block: <div class="esd-block-image">...</div>: Enables users to add and customize images.
  • Text Block: <div class="esd-block-text">...</div>: For adding and editing text content.
  • Button Block: <div class="esd-block-button">...</div>: Used for call-to-action buttons.
  • Spacer Block: <div class="esd-block-spacer">...</div>: Adds space between elements.
  • Social Block: <div class="esd-block-social">...</div>: Includes social media icons and links.
  • HTML Block: <div class="esd-block-html">...</div>: Allows for the insertion of custom HTML code.
  • Menu Block: <div class="esd-block-menu">...</div>: Creates navigation menus.
  • Banner Block: <div class="esd-block-banner">...</div>: Used for adding a banner image.
  • Timer Block: <div class="esd-block-timer">...</div>: Used to display a countdown timer.
  • Video Block: <div class="esd-block-video">...</div>: Used for embedding videos.
  • AMP Carousel Block: <div class="esd-block-amp-carousel">...</div>: Used for adding an AMP carousel..
  • AMP Accordion Block: <div class="esd-amp-accordion">...</div>: Used to create an AMP accordion.
  • AMP Form Block: <div class="esd-amp-form">...</div>: Used for embedding an AMP form.

Usage Notes:

• Stripe: Defines a horizontal section that spans the width of the email, helping to segment the email into distinct areas.
• Structure: Creates columns within a stripe, facilitating organized content placement.
• Container: Holds the actual content blocks within each structure, maintaining the layout and design integrity.
• Basic Blocks: Different types of content that can be dragged and dropped into containers, enabling a modular approach to email design.

Migration from Old Plugin

Previously, HTML and CSS were stored and passed separately during plugin initialization.

For migration to the new editor, HTML and CSS can still be passed separately the first time the template is opened. Subsequent initializations will ignore these separate parameters, relying instead on the referenced email according to the Email Storage and Synchronization section.

Access to Stripo Templates

Plugin customers can retrieve Stripo templates for use within their applications. For detailed information, refer to the Access to Stripo Templates section.