The Official Post Formatting and Helper Classes Cheatsheet

The Marketers Delight Style Guide

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.

Sections:

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

.has-primary-background-color

Primary Text Color

.has-primary-color

Secondary BG Color

.has-secondary-background-color

Secondary Text Color

.has-secondary-color

Accent BG Color

.has-accent-background-color

Accent Text Color

.has-accent-color

White BG Color

.has-white-background-color

White Color

.has-white-color

Text Color

.has-text-color

Secondary Text Color

.has-text-sec-color

Links Color

.has-links-color

Button BG Color

.has-button-background-color

Button Text Color

.has-button-color

Button Sec. BG Color

.has-button-sec-background-color

Button Sec. Text Color

.has-button-sec-color

Typography

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

Titles

Small Title

.small-title

Med Title

.med-title

Large Title

.large-title

Text

Text Separator

.text-sep

Badge

.badge

Drop Cap

.drop

Intro Text

.intro

Intro + Drop Cap

.text-intro

Lists

List with Border

.list

List with Checks

.list-check

List Large

.list-large

Boxes

Note Box

.note

Alert Box

.alert

Columns

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

.columns-2

3 Columns

.columns-3

4 Columns

.columns-4

5 Columns

.columns-5

6 Columns

.columns-6

Columns Spacing

Half

.columns-half

Single

.columns-single

Mid

.columns-mid

Double

.columns-double

2 Column Variations

Columns 80/20%

.columns-80-20

Columns 70/30%

.columns-70-30

Columns 65/35%

.columns-65-35

Columns 60/40%

.columns-60-40

Columns 55/45%

.columns-55-45

Columns 45/55%

.columns-45-55

Columns 40/60%

.columns-40-60

Columns 35/65%

.columns-35-65

Columns 30/70%

.columns-30-70

Columns 25/75%

.columns-25-75

Columns 20/80%

.columns-20-80

Utility Classes

Flexible Columns

.columns-flex

Column class

.col

Align .col to right

.col-right

Blocks

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

.block-single

Top/Bottom

.block-single-tb

Left/Right

.block-single-lr

Top

.block-single-top

Bottom

.block-single-bot

Mid (x1.5)

Block Mid

.block-mid

Top/Bottom

.block-mid-tb

Left/Right

.block-mid-lr

Top

.block-mid-top

Bottom

.block-mid-bot

Double (x2)

Block Double

.block-double

Top/Bottom

.block-double-tb

Left/Right

.block-double-lr

Top

.block-double-top

Bottom

.block-double-bot

Content

.block-double-content

Triple (x3)

Block Triple

.block-triple

Top/Bottom

.block-triple-tb

Left/Right

.block-triple-lr

Top

.block-triple-top

Bottom

.block-triple-bot

Triple Double

.block-triple-double

Quadruple (x4)

Block Quadruple

.block-quad

Top/Bottom

.block-quad-tb

Left/Right

.block-quad-lr

Top

.block-quad-top

Bottom

.block-quad-bot

Full/Quadruple

.block-full-quad

Full

Block Full

.block-full

Left/Right

.block-full-lr

Spacers

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

Half (x0.5)

Margin Bottom

.mb-half

Margin Top

.mt-half

Margin Right

.mr-half

Single (x1)

Margin Bottom

.mb-single

Margin Top

.mt-single

Margin Right

.mr-single

Mid (x1.5)

Margin Bottom

.mb-mid

Margin Top

.mt-mid

Double (x2)

Margin Bottom

.mb-double

Margin Top

.mt-double

Triple (x3)

Margin Bottom

.mb-triple

Quadruple (x4)

Margin Bottom

.mb-quad

None

Margin Top

.mt-none

Margin Right

.mr-none

Margin Bottom

.mb-none

Margin Left

.ml-none

Alignments

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

Standard

Align Right

.alignright

Align Left

.alignleft

Align Center

.aligncenter

Wraps

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

Align Right

.alignright.wrap

Align Left

.alignleft.wrap

Align Center

.aligncenter.wrap

Align Wide

.alignwide

Align Full

.alignfull

Buttons

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

Styles

Button Outline

.button-outline

Button Small

.button-small

Button Large

.button-large

Button Secondary

.button-sec

Button Arrow

.button-arrow

Button Badge

.button-badge

Colors

Green

.button.green

Orange

.button.orange

Red

.button.red

Blue

.button.blue

Purple

.button.purple

Gray

.button.gray

White

.button.white

Dark

.button.dark

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-text-main class:

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

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:

Headings

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="https://domain.com/img.png" 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 -->
</form>

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!