Topol Documentation

Appearance

Default Template Settings ​

The defaultTemplateSettings configuration allows you to define global defaults for new email templates created in the Topol Plugin editor. This ensures visual consistency, saves time for your users, and helps align email content with your brand or design system from the start.

INFO

These settings apply only when a new template is created (i.e., not loaded from a saved draft or external JSON).

Available Default Settings ​

Define your settings under the defaultTemplateSettings property within the TOPOL_OPTIONS object:

Email Width ​

Sets the default width of the email canvas.

ts
defaultTemplateSettings: {
  "emailWidth": 660,
  // other default settings
},

Email Background Color ​

Sets the background color of the entire email body (outside the content area).

ts
defaultTemplateSettings: {
  "emailBackgroundColor": "#000000",
  // other default settings
},

Block Background Color ​

Sets the default background color for new content blocks (e.g., text, images).

ts
defaultTemplateSettings: {
  "blockBackgroundColor": "#000000",
  // other default settings
},

Buttons Background Color ​

Defines the background color used for buttons by default.

ts
defaultTemplateSettings: {
  "buttonsBackgroundColor": "#000000",
  // other default settings
},

Sets the default color for hyperlinks inside content blocks.

ts
defaultTemplateSettings: {
  "hyperlinkColor": "#000000",
  // other default settings
},

Line height ​

Controls default spacing between lines of text.

ts
defaultTemplateSettings: {
  "line-height": "22px",
  // other default settings
},

Headings and Texts ​

Configurable for h1, h2, h3, p and button.

Each of these accepts a full set of CSS-like styling properties, such as:

ts
  defaultTemplateSettings: {
    "h1": {
      "font-family": "Arial, sans-serif",
      "font-size": "24px",
      "font-weight": "700",
      "font-style": "normal",
      "letter-spacing": "1px",
      "text-transform": "uppercase",
      "text-decoration": "underline",
      "background-color": "#000000",
      "color": "#ffffff"
    },
    "p": {
      "font-size": "16px",
      "color": "#333333"
    },
    "button": {
      "font-size": "14px",
      "color": "#ffffff",
      "background-color": "#007BFF"
    }
  },

Structure Margins ​

Defines spacing between different structures (rows/sections) in the email.

ts
defaultTemplateSettings: {
  "structure-margin": "15px",
  // other default settings
},