The Official Post Formatting and Helper Classes Cheatsheet

The Marketers Delight Style Guide

Use MD's built-in HTML helper classes to rapidly style custom layouts and tweak design elements on-the-fly. Mobile-responsive ready. Use this page as a reference for the most recent list of helper classes in each MD release.


Site Colors Typography Columns Blocks Spacers Alignments Buttons Formatting Email Forms

Site Colors

You can get the dynamic colors set in the MD Site Designer with these classes. If you ever change the color settings, these classes will always stay updated keeping your designs current.

Primary BG Color


Primary Text Color


Secondary BG Color


Secondary Text Color


Accent BG Color


Accent Text Color


White BG Color


White Color


Text Color


Secondary Text Color


Links Color


Button BG Color


Button Text Color


Button Sec. BG Color


Button Sec. Text Color



Use typography classes to adjust font sizes, add text decorations, and other kinds of box elements.


Small Title


Med Title


Large Title



Text Separator




Drop Cap


Intro Text


Intro + Drop Cap



List with Border


List with Checks


List Large



Note Box


Alert Box



Quickly lay out elements into columns with varied spacing, column rows, and are ready to fully breakdown on mobile. Mix the following column group classes to create versatile layouts and sorting.

Column Counts

2 Columns


3 Columns


4 Columns


5 Columns


6 Columns


Columns Spacing









2 Column Variations

Columns 80/20%


Columns 70/30%


Columns 65/35%


Columns 60/40%


Columns 55/45%


Columns 45/55%


Columns 40/60%


Columns 35/65%


Columns 30/70%


Columns 25/75%


Columns 20/80%


Flexible Columns

Flexible Columns


Column class


Align .col to right



Use .block classes to quickly add inside padding to HTML elements. Use these versatile classes to add padding around the entire box, or only to specific sides with simple keywords.

Single (x1)

Block Single










Mid (x1.5)

Block Mid










Double (x2)

Block Double












Triple (x3)

Block Triple










Triple Double


Quadruple (x4)

Block Quadruple













Block Full





Padding Bottom


Padding Top



Use the spacer classes to add margin (outside spacing) to add separation between custom HTML elements.

Half (x0.5)

Margin Bottom


Margin Top


Margin Right


Single (x1)

Margin Bottom


Margin Top


Margin Right


Mid (x1.5)

Margin Bottom


Margin Top


Double (x2)

Margin Bottom


Margin Top


Triple (x3)

Margin Bottom


Quadruple (x4)

Margin Bottom



Margin Top


Margin Right


Margin Bottom


Margin Left



Use alignment classes to position elements to the left, right, center, or break out of the surrounding content box.


Align Right


Align Left


Align Center



These classes will attach the element to the surrounding content box, useful for "breakout" or "attached" effects.

Align Right


Align Left


Align Center


Align Wide


Align Full



Quickly create buttons that standout and attach various design styles, icons, and colors with simple helper classes.


Button Outline


Button Small


Button Large


Button Secondary


Button Arrow


Button Badge



















Formatting Text

This section explains how MD formats your text and the various helper classes to enhance your typography.

The new Blocks Editor in WordPress 5.0 and MD's enhancements allow for a fairly code-free visual writing experience. Combined with MD helper classes, you can make quick adjustments on the fly by adding classes to the "Additional Classes" field in each Block.

If your site still uses the Classic Editor, switch to the Text editor to have full freedom to write HTML from the post screen. Regardless of your editor choice, these formatting classes can always be used in template files. Let's begin.

The font size, line height, and other typography adjustments set in the WP Admin > MD > Site Design > Typography panel dictate the various widths and spacings of your site. MD calculates these values from the font size and line height you set in those settings to keep your site's design proportional.

The font size and line height will be applied to the .format class:

<div class="format">
	<p>Paragraph text here.</p>

This master class adds all of MD's spacing adjustments to various HTML elements (paragraphs, lists, headings, etc.) that may only be suitable to longform text such as blog posts or sales page copy. Let's go through each element below:


Breaking apart different sections with headlines makes it easy to jump from one idea to the other. There are different sizes and different codes that should be used to create a proper hierarchy in your writing’s flow.

Wrap any headlines with the following headline tags:

  • <h1> - generally do not use in the post editor
  • <h2> - large titles
  • <h3> - medium titles
  • <h4> - small titles
  • <h5> - extra small titles
  • <h6> - nobody actually uses this one right?

Email Forms

There are many code-free ways to embed email forms throughout your site and this section focuses on the [md_email] shortcode and custom HTML email forms.

1.) Email Form Shortcode

You can use the [md_email] shortcode anywhere WordPress accepts shortcodes to output an email form as mirrored from WP Admin > MD > Email Forms. Using shortcode attributes you can completely customize your forms:

[md_email title="My Custom Title" desc="Some description text" bg_color="#ae2525" bg_image="" attached="1" text_color="white" classes="text-center"]

Shortcode Attributes:

  • title="" — Set the title attribute to adjust the headline that shows at the beginning of your form.
  • desc="" — Use this to describe more about your newsletter here.
  • bg_color="" — Set a background color using a color code.
  • bg_image="" Set a background image to any URL.
  • attached="" — If set to 1, the email fields and submit button will attach to each other. If set to 0, each field will show on its own line.
  • submit_text="" Change the submit button text.
  • text_color="" — Set to white for white text, set to dark for dark text. You can write your own CSS class for this as well if you want a custom text color. Any value you enter here will be prefixed as a CSS class like text-{text_color}.
  • classes="" — Add any custom classes to the email form for more customization.

2.) Custom Email Form Code

It turns out 95% of the code email service providers give you is simply not needed to make your signup form work in part thanks to MD's default styles. If you're even a little code-savvy you can strip out that excess and add a few helper classes to style your own email forms.

Generally, a form is structured like:

  • A surrounding <form> tag
  • Name + email fields, and submit button
  • Some hidden input fields required for validation

Below is a barebones example of what an email form with MD helper classes looks like and what you should model your own custom codes after (also adds those neat little icons to the name and email fields).

<form method="post" action="#formaction" class="email-form clear">
	<input type="name" name="name" class="form-input form-input-name" placeholder="Enter your name...">
	<input type="email" name="name" class="form-input form-input-email" placeholder="Enter your email…">
	<button class="email-form-submit form-submit">Join Now!</button>
	<!-- Hidden fields here -->

Different email service providers require different hidden fields, so be very carful not to remove any <input> tags that look important.

Note: Always be sure to perform a test email signup with your own email after formatting your code!

Use MD’s built-in HTML helper classes to quickly create custom website elements that match your design and are already fully mobile-responsive. Refer to this page as a reference for the most recent list of helper classes in each MD release.

November sale: Save 25% on all new licenses!