MailChimp Modify Line Spacing

On emails sent from MailChimp the line spacing and the gap between paragraphs may be too large.

Can the spacing be easily configured?

The line spacing, the height of each line of text, can be set within the template editing. However, the option to configure the spacing between paragraphs is not given.

Login to your MailChimp account and click on Templates in the menu at the top left of the screen.

The view changes to show your list of templates which have been created.

Its assumed that you wish to modify an existing email template. To avoid making uncorrectable changes to one of your templates – take a copy. From the list of templates click on the Edit drop down list at the right hand side. Select Replicate.

Rename the template appropriately.

Now click on Edit at the right hand end of the line.

Shown on the page on the right hand side are content features to be included (these can be dragged into the template and used). The second tab Design provides a number of options affecting the look of your Mailchimp email.

The image below shows the expanded Body Design section, with the line height set to 1 1/2 spacing.

MailChimp modify line spacing: body design

Your selection is reflected in the template view, on the left of the page.

Similarly the spacing for the headings can be set within the Page section.

For individual content blocks added to thetemplate further customisation of the spacing may be included. The text block includes a Line Height setting under the Style tab.

If the spacing options given above are not enough and you wish to edit your template to a finer degree the option is to edit the themes HTML.

Further Options

If you wish to modify other aspects of the email styling, for example the spacing after a paragraph, a different approach is required.

Paragraph Margins – Individual Approach

As an example, to modify the spacing after the paragraphs in a text block

Click on the text block in the template view to show its Content; Style; and Settings on the right hand pane.

Select the Content view.

MailChimp modify line spacing: text block

Within the editor click on the icon highlighted above, to show the HTML code view.

<h1>Designing Your Email</h1>

<h3>Creating an elegant email is simple</h3>

<p>Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>

<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>

Note in the updated code, below, I’ve modified the second paragraph to add a setting (style) for the bottom margin:

<p style=”margin-bottom:10px”>

<h1>Designing Your Email</h1>

<h3>Creating an elegant email is simple</h3>

<p style="margin-bottom:10px">Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>

<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>

Change the number of pixels set to suit your presentation.

A Global Approach

MailChimp doesn’t offer the global paragraph and line spacing settings as global settings

To make the changes globally will require editing of the HTML code of the template.

To edit the template’s HTML the theme is first exported, edited, and then once more imported for use.

On the list view of the templates this is offered as an entry in the dropdown list along with edit at the right hand side.

Select Export as HTML.

MailChimp presents this as an option with a warning that the imported template doesn’t allow visual blocks to be added, edited or moved.

Save the template.

You may find that copying the HTML view of the email template locally and making the edits a better way.

Open the file with an HTML editor such as Geany.

MailChimp modify line: HTML export

Within the MailChimp template there is styling at the top. This is used to set the appearance of the email. Covering elements such as the font colour; page background colour; and the font size.

Its within this styling section <style type=”text/css”> that the line-height and the margins will be edited.

As shown above its the section, below which is the base configuration for paragraphs.

p{
  margin:1em 0;
  padding:0;
}

In the above margin:1em 0; sets the margin above and below the paragraph to the default value. If you wish to make it greater or smaller modify this value to, for example,

p{
  margin:1em 0;
  padding:0;
  margin-bottom:20px;
}

The line-height for the content body is configured in the section:

.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p

observe the content below:

/*
@tab Body
@section body text
@tip Set the styling for your email's body text. Choose a size and color that is easy to read.
*/
.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{
  /*@editable*/color:#606060;
  /*@editable*/font-family:Helvetica;
  /*@editable*/font-size:15px;
  /*@editable*/line-height:200%;
  /*@editable*/text-align:left;
}

Within the above modify line-height to a smaller percentage to bring the liens of text closer together. You may also add the paragraph top and bottom margins here.

Once the edits are completed theHTML cotnent can be added back as a template.

On the MailChimp Templates view click on the button Create Template, top right corner.

The new template will be created using code, click on the tab Code your own. within this tab click on Import HTML. Follow the instructions to upload your saved template HTML file.

Don’t forget to click on Save.

Unfortunately as already highlighted when exporting the HTML the visual block editing is now missing on the right hand side of the page.

References

MailChimp templates HTML email basics

W3Schools: HTML paragraphs

W3Schools: CSS line-height property

W3Schools: CSS margin property