Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/emmanueljarquin-sys/GrupoMecsaCMS/llms.txt

Use this file to discover all available pages before exploring further.

What is the Email Builder?

The Email Builder is a visual drag-and-drop tool for creating professional email templates directly in the Grupo Mecsa CMS. It generates HTML code that is fully compatible with major email clients including MailChimp and Gmail.
All generated HTML uses table-based layouts and inline styles to ensure maximum compatibility across email clients.

Key Features

Drag & Drop Interface

Intuitive visual builder with draggable components for easy email design

MailChimp Compatible

Generated HTML works seamlessly with MailChimp, Gmail, and other major email platforms

Reusable Components

Create custom components with variables that can be reused across multiple templates

Theme Management

Define primary and secondary colors that automatically apply throughout your email

Responsive Layout

Built with 600px table-based layouts that adapt to different screen sizes

Template Library

Save and manage email templates for quick reuse and organization

Email Compatibility

The Email Builder generates email-safe HTML that follows best practices for email rendering:
  • Table-based layouts - Uses <table> elements with 600px width for maximum compatibility
  • Inline styles - All CSS is applied inline to avoid stripping by email clients
  • Color tokens - Primary and secondary colors are replaced throughout the template
  • Safe HTML - Avoids complex CSS, JavaScript, and unsupported HTML5 elements

Components System

The builder includes two types of components:

Structure Blocks

Define the layout of your email:
  • 1 Column - Single full-width column
  • 2 Columns - Split content into two equal sections
  • 3 Columns - Three-column layout for complex designs

Content Blocks

Add content to your email:
  • Title - Headings with primary color styling
  • Text - Paragraph content with rich text editing
  • List - Bulleted or numbered lists
  • Image - Upload and display images from Supabase storage
  • Button - Call-to-action buttons with customizable colors
  • Separator - Horizontal dividers
  • Social - Social media icons with links
  • Custom - Reusable components from your library

Theme Configuration

Each email template supports customizable theme colors:
  • Primary Color - Used for buttons, titles, and main CTAs (default: #1a237e)
  • Secondary Color - Used for links, accents, and secondary elements (default: #e53935)
  • Text Color - Body text and paragraph content (default: #222222)
  • Title Color - Headings and subtitles (default: #222222)
Color changes apply globally to all matching elements in your template. Test thoroughly before sending.

Workflow

1

Create Template

Start by giving your email template a name and setting its status (Draft/Published)
2

Add Rows

Drag row structures (1, 2, or 3 columns) onto the canvas
3

Add Content

Drop content blocks into columns and customize with your content
4

Configure Theme

Set your brand colors in the sidebar configuration panel
5

Preview & Export

Preview your email and export the HTML for use in MailChimp or other platforms

Next Steps

Using the Builder

Learn how to create emails with the visual builder

Available Components

Explore all available email components

Template Management

Manage and organize your email templates

Build docs developers (and LLMs) love