Key Features

• 170+ Pre-built Blocks - Organized across 20 categories
• Custom Block Creator - Save any selection as a reusable block
• Multi-column Layouts - 1-4 column responsive grids
• Undo/Redo History - Full action history tracking
• Real-time Preview - Desktop, tablet, and mobile preview modes
• Dark Mode Templates - Optimized for dark mode email clients
• Brand Color System - Company-wide color management
• Border/Separator Options - Customizable styling options

Requirements

• Odoo 17.0
• Required modules: mail, mass_mailing, web_editor

Installation Steps

1. Copy the dev_email_template_design folder to your Odoo addons directory
2. Update the apps list: Settings > Apps > Update Apps List
3. Search for "Email Template Visual Designer"
4. Click Install

Brand Colors

Configure your company's brand colors for consistent email styling:

1. Navigate to: Settings > Technical > Email > Email Design > Configuration > Brand Colors
2. Default colors are pre-configured:
   • Primary (#875A7B)
   • Secondary (#17a2b8)
   • Accent (#ffc107)
   • Success (#28a745)
   • Danger (#dc3545)
   • Text colors, backgrounds, borders
3. Add custom colors by clicking "Create"
4. Each color has:
   • Name: Display name (e.g., "Primary Blue")
   • Code: Internal reference (e.g., "primary")
   • Color Value: HEX code (e.g., "#875A7B")
   • Color Type: Category (primary, secondary, accent, etc.)

Block Categories

Manage block categories at: Settings > Technical > Email > Email Design > Block Library > Categories

Default categories include:

• Headers, Footers, Content, CTA, Media
• Testimonials, Pricing, Products, Social
• Layouts, Dividers, Banners, Blog
• Events, Team, Services, Offers
• Jobs, Courses, Counters

Accessing the Visual Builder

1. Go to Settings > Technical > Email > Templates
2. Open any email template
3. Click the "Open Visual Builder" button
4. The visual editor opens with the snippet sidebar

Using Snippets (Blocks)

Creating Custom Blocks

Save frequently used designs as reusable blocks:

1. Select content in the email editor
2. Click "Save as Block" in the toolbar
3. Enter a name and select a category
4. The block appears in your custom blocks library

Access custom blocks at: Email Design > Block Library > My Custom Blocks

Preview Modes

Test your email across devices:

1. In the visual builder toolbar, find the preview icons
2. Toggle between:
   • Desktop (100% width)
   • Tablet (768px)
   • Mobile (375px)
3. Use "Full Preview" for a popup preview

Undo/Redo

• Undo: Ctrl/Cmd + Z
• Redo: Ctrl/Cmd + Y
• History is maintained per session
• Up to 100 actions stored

Module Structure

dev_email_template_design/
├── __init__.py
├── __manifest__.py
├── models/
│   ├── __init__.py
│   ├── mail_template.py          # mail.template extension
│   ├── email_block.py            # Custom block storage
│   ├── email_block_category.py   # Block categories
│   ├── email_brand_color.py      # Brand color management
│   └── email_design_history.py   # Undo/redo history
├── views/
│   ├── mail_template_views.xml
│   ├── email_block_views.xml
│   ├── email_block_category_views.xml
│   ├── email_brand_color_views.xml
│   ├── menu_views.xml
│   └── snippets/
│       ├── snippets_menu.xml     # Snippet panel configuration
│       ├── snippet_options.xml   # Customization options
│       ├── headers/              # 12 header snippets
│       ├── footers/              # 10 footer snippets
│       ├── content/              # 15+ content snippets
│       ├── cta/                  # 10 CTA snippets
│       ├── media/                # 12 media snippets
│       ├── testimonials/         # 8 testimonial snippets
│       ├── pricing/              # 8 pricing snippets
│       ├── products/             # 10 product snippets
│       ├── social/               # 6 social snippets
│       ├── layouts/              # 8 layout snippets
│       ├── dividers/             # 6 divider snippets
│       ├── banners/              # 10 banner snippets
│       ├── blog/                 # 8 blog snippets
│       ├── events/               # 8 event snippets
│       ├── team/                 # 7 team snippets
│       ├── services/             # 8 service snippets
│       ├── offers/               # 8 offer snippets
│       ├── jobs/                 # 6 job snippets
│       └── courses/              # 6 course snippets
├── wizards/
│   └── save_custom_block_wizard.py
├── data/
│   ├── block_category_data.xml
│   └── brand_color_data.xml
├── security/
│   ├── email_template_design_security.xml
│   └── ir.model.access.csv
├── static/
│   └── src/
│       ├── js/                   # OWL components
│       ├── xml/                  # Component templates
│       ├── css/                  # Styling
│       └── img/snippets_thumbs/  # 170+ SVG thumbnails
└── doc/
    └── index.rst                 # This documentation

Models

Email Compatibility

All snippets are designed for maximum email client compatibility:

• Table-based layouts - Works in Outlook and older clients
• Inline CSS - Styles applied directly to elements
• MSO conditional comments - Outlook-specific fixes
• Max-width containers - Responsive design
• Web-safe fonts - Arial, sans-serif fallbacks

Example snippet structure:

<div class="o_mail_snippet_general" data-name="Snippet Name">
    <!--[if mso]><table width="100%"><tr><td><![endif]-->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" style="padding: 40px 20px;">
                <table width="600" style="max-width: 600px;">
                    <!-- Content here -->
                </table>
            </td>
        </tr>
    </table>
    <!--[if mso]></td></tr></table><![endif]-->
</div>

Security

Access Groups:

• Email Template Designer (group_email_template_designer)
  • Read/write blocks
  • Create custom blocks
  • Use visual builder
• Email Template Manager (group_email_template_manager)
  • Full access to all features
  • Manage categories
  • Configure brand colors

Snippets Not Appearing

1. Ensure the module is properly installed
2. Check browser console for JavaScript errors
3. Clear browser cache and reload
4. Verify mass_mailing module is installed

Visual Builder Not Loading

1. Check that web_editor dependencies are met
2. Look for Python errors in Odoo logs
3. Try upgrading the module

Custom Blocks Missing

1. Verify blocks were saved successfully
2. Check user permissions
3. Ensure correct category is selected

Email Rendering Issues

1. Test in multiple email clients
2. Use inline styles only
3. Avoid CSS properties not supported in email
4. Test with Litmus or Email on Acid

Version 17.0.2.0.0

• Added 65 new snippets across 9 categories
• Added Brand Color System
• Added Border/Separator customization options
• Enhanced snippet options panel
• Total snippets: 170+

Version 17.0.1.0.0

• Initial release
• 105 snippets across 11 categories
• Visual builder integration
• Custom block creator
• Undo/redo history
• Preview modes