Getting Started Tips

Marketers Delight comes with an Visual Editor style but I prefer to disable it (Edit profile in your WP dashboard) and use the Text editor which gives you complete control over the formatting of your posts and won’t get the extra spacing the Visual Editor leaves in posts.

a drawback of using some code in the post editor (not all code) is that it needs to be written on one line

…all you need to do is swap out the image URL and text. Pretty easy to figure out.

Look, I get it, that’s not the prettiest thing in the world to look at. But if you give it a chance you’ll actually like what you can achieve with little blocks of code like this.

If you find yourself confused and intrigued, browse through this post to learn more.

By the end of it you’ll have a better understanding of the different classes you can use to not only remake things like the Content Spotlight in posts, but create custom anywhere on your site.

Email Forms (and other forms)

One of the best features of Marketers Delight is the way it handles email forms, meaning you can place email forms all throughout your site without touching a line of code.

If you’ve ever used a service like MailChimp, ActiveCampaign, or AWeber then you know how horrid the codes they give you to work with are. Unfortunately if your service isn’t yet built into Marketers Delight you’ll have to stick with their form codes for now.

Email Form Shortcode

If you use the Marketers Delight Email Forms system all you have to do to place email forms in your posts is to use the convenient email form shortcode!

This is convenient whether you’re connected to an email service or use a custom code — any email form you create in Tools > Email Forms can be output with this simple shortcode:

[md_email]

There are even some extremely useful attributes you can apply to override values and customize your email forms further:

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.

Here’s a working example:

Thanks for reading!

Get the best of Md

There's always something new in the works. Join the email list to get the newest updates, snippets, and videos sent right to your inbox.*

* I only email you the good stuff.

Custom Email Form Code

It turns out some 95% of the code email service providers give you is simply not needed to make your signup form work. If you’re even a little code-savvy you can strip out that excess and add a few helper classes into MD 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). Are you in shock how little that code can actually be?

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

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

Email Form Helper Classes

If you take note of some of the email forms around Kolakube, you’ll notice some forms display each field on their own line, and some forms (like in the footer) condense all fields into one vertical line. For example:

Apply any of these classes to the <form> tag to manipulate the fields in your email form:

form-full – Ensures all fields (inputs, buttons) are 100% full width are on their own line.

form-attached – If you only have one input field, like forms that only ask for email, use this class to attach the input field and button together.

form-attached-2 – If you have 2 fields, such as the name and email field, use this class to attach the input fields and button together.

Gravity Forms

Columns

You can create columns of content with a very basic and easily maintainable HTML structure. MD supports upto 5 columns and each column width is calculated based on the available space in the parent container using the columns-x class (x = 3 for 3 columns, etc.).

Column 1

A 3 column, responsive block right within my posts. No shortcodes!

Column 2

A 3 column, responsive block right within my posts. No shortcodes!

Column 3

A 3 column, responsive block right within my posts. No shortcodes!

Each column will align itself directly next to each other with no spacing by default. You can adjust the spacing that shows between each column by also applying a columns spacer class, such as columns-single or columns-double. See example below.

Formatting Text

Marketers Delight has 2 different classes you can use for formatting text:

format-text-main

format-text-sec

For more wider-width elements like the content box in MD or any Page Lead, you’ll want to use format-text-main for larger font size and spacing.

format-text-sec is good for lesser-width content areas like a sidebar where you want smaller text for best readability.

Headlines

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 blog posts

<h2> – large titles

<h3> – medium titles

<h4> – small titles

<h5> – extra small titles

<h6> – nobody actually uses this one right?

You can get a sense for different headline sizes around this post.

Lists

You’re probably familiar with making lists in your posts. The HTML goes like this:

You can also add the list-large class to add more spacing in between each list item. Yes, you can combine all of these classes together.

Note + Alert Boxes

This is what an alert box looks like in MD. You can use it in posts to highlight an important message.

Alert Box Code: <p class="alert">Alert Text Here...</p>

This is a note box. You can use it to highlight aside text, such as instructional messages or any side thoughts you have.

Note Box Code: <p class="note">Note Text Here...</p>

Intro Text and Drop Caps

As you see in this paragraph, the first letter has a nice style that makes your opening statements look more profound.

With the new drop class, you can make any letter or word a drop cap—just wrap your text with the new class. Here’s the above paragraph as it looks in the post editor:

<span class="drop">A</span>s you saw a few times throughout this post (and this very paragraph), the first letter had a nice style that makes your opening statements look more profound.

In addition to the drop cap, you may have also noticed the above paragraph has a larger font size than the rest of the text. This is another typographical improvement that can make your opening statement more bold, and all it takes is wrapping your paragraph of choice with the new intro class:

<p class="intro">In addition to the drop cap, you may have also noticed the above paragraph has a larger font size than the rest of the text.</p>

…now, these classes are useful on their own but chances are you’ll want to combine them in the same paragraph. Instead of writing separate markup to give a paragraph a drop cap and larger intro text, you can simply wrap a paragraph in the new text-intro class to apply both styles in one shot!

<p class="text-intro">Instead of writing separate markup to give a paragraph a drop cap and larger intro text, you can simply wrap a paragraph in the new text-intro class to apply both styles in one shot!</p>

Nothing takes somebody’s breath away more in a design than stunning text. Combine your stellar content with these new helper classes and you’re sure to make your text as beautiful as it is informative.

Blockquotes

Using quotes in blog posts can enhance a point you’re trying to make and are commonly seen when listing customer testimonials. MD adds some basic styling to quoted text to make it obvious the text is quotes. If you have a block of text you want to quote, simply wrap it with the <blockquote> tag:

<blockquote>
My quoted text here.
</blockquote>

Example:

MD is absolutely fantastic, it seems like you’ve understood what small business owners need and how we want to work. – Cole Dano

…sometimes you may not want to disrupt the flow of your writing by giving up a few lines to a quote and would rather just have the quote float alongside your text.

A pullquote looks something like this and is formatted by MD right out of the box.

By creating a pullquote you can align quotes to the left or right of any paragraph text without disrupting your main text.

You may see these style of quotes used in magazines where the author pulls a more profound piece of text from their writing to really highlight the message they’re trying to get across. To make a pullquote, either align your <blockquote> to the left or right:

<blockquote class="alignright">
My quoted text here.
</blockquote>

…and Marketers Delight will take care of the rest (to align it left, use alignleft).

Code Blocks

Throughout this post, I’ve placed any references to code in those nicely formatted yellow boxes. This is to distinguish the text as code. If you’re sharing some kind of embed codes, you may want to consider wrapping it with the <pre> tag to signify it’s a piece of code like so:

…keep in mind that for any code you want people to be able to copy and paste, you must convert the bracket tags to a proper HTML entity to prevent the code from executing. Simply pasting a code into the <pre> tag isn’t enough.

< = &lt;

> = &gt;

(I usually cheat and only convert the opening bracket to &lt;)

Also, if you also want to highlight a few words within your paragraphs, as I did in the paragraph above, just wrap the word(s) with the <code> tag:

…This is all normal text and this is <code>code</code>.

Acronyms

My favorite HTML tag, the acronym tag is for those who care about the smaller details of their writing.

Simply put, wrap any acronym you use in your posts with the <acronym> tag to convey the full meaning of it to your readers. MD adds a small underline to the text, and when you hover your mouse over it, your cursor changes to a question mark.

Move your mouse over "HTML" in the above paragraph and see how to use the tag below:

<acronym title="HyperText Markup Language">HTML</acronym>

Alignments

As per, WordPress coding standards, Marketers Delight includes a variety of useful classes you can use to align text, images, and any kind of media:

alignright

alignleft

aligncenter

The class names should be self-explanatory as to what they do, here's how you'd use one to align an image to the right:

Wraps

In conjunction with alignment classes you can also wrap content to the edges of the content box. This creates a neat design effect and looks particularly great when using the full-width display mode in MD (like this post).

block-triple-double(adds 26x3 px of space to top/bottom, 26x2 to right/left)

Note: there are other available block combinations not listed here

Based on the measurements, the spacing values will be adjusted with media queries depending on the size of the screen. Generally, each measurement halves itself at a certain screen size, so the value of block-double would change to the range of block-single or block-mid to account for less screen real estate on phones and tablets.

This rule isn't universal as I've noticed simply halving a value doesn't always produce ideal spacing in all contexts. The best way to see how the spacing degrades is to search the style.css file for each instance and see when the spacing change takes place.

While 26px is a static value, the naming conventions of these classes will make sense for any value you change it to. Until I build a smarter spacing system into MD, you'd have to manually change the values in these classes to match the new baseline, if you care about that kind of detail:

Spacers

Just like Blocks, Spacers follow similar rules. Spacers are units of margin that add whitespace to the elements you apply them to to separate them from each other.

To keep the Spacers system simple and a consistent rhythm between the elements on your page, spacers add margin to the bottom of the element you apply them to. Spacer classes flow like this:

mb = margin-bottom

mb-double

mb-mid

mb-single

mb-half

mb-none

A useful thing to know about each Spacer is that if the element you apply it to is the last element in the parent container (see Example usage below), no spacing will be applied to the element, thus avoiding an extra gap on the bottom.

Each Spacer class is written with the :not() pseudo-selector to ensure the last child doesn't receive additional spacing:

Links

There's not much to styling links. By default, link colors in MD are red (#ae2525) with no underline. The various link classes in MD add different colors, hovers, and underlines where necessary. Here are the current link classes in MD:

These classes may or not be useful to you but can serve as good starting points for styling your own links. Most of the class names are generic, so you can change the color codes without devaluing the name of the class.

How to center headlines & other text

Secondary text color

One of my favorite little typographical tricks I use a lot around Kolakube (and in this guide) is styling secondary text to show as a gray color. It's a nice way to create small aside text.

You can make any text gray, like this, with the simple text-sec class.

<span class="text-sec">Secondary text</span>

…or instead of using a <span> tag, replace it with <small> to shrink the text just a little bit.

A Final Note on Formatting

I'm always experimenting with new styles to integrate into the Marketers Delight stylesheet for you to use. I'm currently playing around with pure CSS popups and refining the existing styles.

This guide is by no means comprehensive and only skims the surface of what can be done with the built-in styles. Get creative and mix, match, and see how to combine different classes to do different things.

For the more adventurous out there, I highly encourage you to browse through the style.css file in Marketers Delight to see a more complete list of available styles.

Again, the benefit to using classes built-in to Marketers Delight is that you don't need to rewrite your own CSS (which can add bloat to your child themes) and your content will stay consistent across all devices and not break, showing that ugly horizontal scrollbar on mobile.

As MD matures I'll be updating this guide with more references so be sure to check back here if you're ever curious about some of the hidden features of Marketers Delight!

If this guide was helpful, you'll love these

See What Else You Can Create With Marketers Delight

The key features you love about MD wouldn't be possible without the small details working behind the scenes. The more you know MD, the better your site will be:

They certainly make your posts look and flow a whole lot better if you have en eye for it. And thanks, the Page Leads were my favorite part of formatting the whole page – I’m still amazed at how versatile they are.

Alex, great work here young man. Love the formatting guide. Was itching to get it without pouring through and testing ever line in style.css. Two questions about text formatting:

1. golden ratio typography? I know this is an old Thesis thing but curious your take on it and if you’ve built in something similar to MD.

2. The landscape view on mobile devices magnifies the text. Wondering if that’s on purpose and if there can be something built in to preclude that. The Pearsonified skin had a fix for this. No idea what tiny detail it was but made a world of difference when reading in landscape on mobile devices.

Keep up the good stuff my man. The better it gets the more people I tell about MD.

Thanks so much Seth! I tried to make style.css as readable as possible, but there’s only so much you can do to make a file with 2,000+ lines of code interesting. This was the next best thing, really hope it helps!

1) This is actually something writing this style guide got me thinking of. Thesis’ GRT absolutely smokes anything that’s out there because it’s dynamic and any font change adjusts everything else about the page (MD, and probably 99.9% of themes out there are also static).

Right now if you were to change some of the default measurements in MD, the majority of the spacing would be “off”, even if it doesn’t look bad. This is something I want to address later down the line because these are the exact kind of problems I like to solve myself and I see an opportunity for some really powerful stuff.

For now it’s good ol’ fashioned hand-coded CSS.

2) Good call, never realized that was a bug. I looked around and found the code you’re talking about, though it doesn’t seem to take when I apply it. I’ll have to look more into this because this is definitely something I want to fix. Thanks for bringing it up!

I appreciate any referrals you send my way! MD is always getting better so I hope you have plenty of friends to tell it to. 😉

Hey Alex, what about
– items that are the entire width of the content box
– you’ve used images that are offset from the post content box, i.e sit half in the grey background on a post like this and half in the white background post content section. I’ve seen that in your sales pages.
– I would love to see the layout for THIS page:https://marketersdelight.net/
Tim

I really love all of the features of this theme – especially the page speeds. How much code would a person need to know in order to implement this theme? I work with a few customers that aren’t technically savvy, but they could really benefit from what this theme has to offer. How hard is it for someone to start?

Thanks Jen! In the next update, MD4.7, page speed will increase even more. Very exciting stuff!

It all depends what you’re trying to accomplish with MD. The best way I’d explain this theme now is for people who want to write long form copy and add call-to-actions around that page. MD comes with writing tools like Footnotes, Page Leads, and point-and-click layout options that let you strip away unnecessary elements you may not need on a page-by-page basis.

As MD continues to evolve, more design options and easier ways to build advanced content elements will be added. As of now, you will need to write code to change some of the design elements around, but I’m always around the support forums to assist with that (and oftentimes give you the code needed to copy and paste into your theme).