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.
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
Secondary Text 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.
Intro + Drop Cap
List with Border
List with Checks
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.
2 Column Variations
.col to right
.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.
Use the spacer classes to add margin (outside spacing) to add separation between custom HTML elements.
Use alignment classes to position elements to the left, right, center, or break out of the surrounding content box.
These classes will attach the element to the surrounding content box, useful for "breakout" or "attached" effects.
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
<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:
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"]
- 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
- 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
- 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!