Md
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.
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
Flexible Columns
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
None
Padding Bottom
.pb-none
Padding Top
.pt-none
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
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
.green
Orange
.orange
Red
.red
Blue
.blue
Purple
.purple
Gray
.gray
White
.white
Dark
.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
class:
<div class="format"> <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!