Write More Effective Sales Pages and Blog Posts with MD Blocks

Marketers Delight adds four new Gutenberg blocks that help you write more seamlessly in the editor and make your posts more engaging with specially designed Content Marketing Blocks.

The thing I have enjoyed most about using Gutenberg is the fact that my words look exactly as they appear from my fingers onto my websites.

This is in big part thanks to the editor, but also thanks to the work Marketers Delight does to style your fonts and text according to your MD design settings.

But what has really intrigued me about Gutenberg is the seamless image formatting and potential for adding using custom designed content blocks.

I’ve finally put the finishing touches on the new Gutenberg Blocks that are now exclusively available in Marketers Delight!

Let’s take a look at how Marketers Delight enhances the Gutenberg writing experience below.

Part 1: MD Design + Gutenberg Blocks Editor Adds A Live Preview Experience Like You’ve Never Seen Before

First, the color scheme options available in the MD Site Designer have been consolidated into the new Site Colors panel.

From here you can set your main branding colors, text and link colors, button colors, and other elements that will be used throughout your site.

It’s left up to your creativity to choose the colors that match the style of your site, and up to MD’s grit to style the subtle changes around your site’s design accordingly.

Remember these colors as they quite literally set the tone for your content’s future design decisions!

Once you fire up the Blocks Editor you will start to notice that different Blocks have different customization settings in the sidebar on the right hand side.

In the seemingly endless list of outcomes the Blocks Editor adds to your content creation process, MD adds some stability by putting your hand-picked colors right beneath your fingertips at all times.

By sticking to your site’s main color schemes you can design more unified pages and take a load of pressure off your mind by having already determined your color schemes prior to writing new content.

That’s why it will be valuable for you to put some thought into the colors you choose from the MD Site Designer—they will be your go-to choices from that point forward.

But don’t worry—even if you decide to redesign your site later or just want to update a few colors, MD will keep an open line of communication with the Blocks Editor and update any Blocks with your new color scheme—at no extra effort to you!

As shown from the screenshot, your color choices are:

Pretty easy to remember, right? These colors have been boiled down to the most important on your website and account for your most important branding, readability, and action colors.

Bring Custom Web Fonts, Content Widths, and Other Post Styles to the Blocks Editor For a Better Live Preview Experience

The MD Site Designer is more than just colors—it also designs your site with a calculated typography system that is now also available in your Blocks Editor.

What that means is the same custom fonts, font sizes, line heights, and content widths you choose from the MD Site Designer (or that MD all smartly calculates for you) will show exactly the same in the Blocks Editor as it does on your live website!

The benefit here is clear:

You can finally predict what your content will look like—down to the last character of each line—without interrupting your writing flow to jump between preview panels.

I can’t tell you how much of a joy it has been to write this post to you in the same custom web fonts you’re reading now on the MD website from my admin post editor.

…so far I’ve only clicked the Preview button to make sure I wasn’t dreaming, and revel in how cool it is to see my text come out exactly as I wrote it on the MD website.

While this sounds like such a small detail in the larger landscape of web design, any friction you can remove from the writing process means you will save time, frustration, and can churn out new posts faster than ever before

Not only will you save time and frustration but you will now be able to write for longer intervals without disruption and synchronize each word as it streams out of your mind into the minds of your audience.

For further clarity you can see whether your post has the full-width canvas enabled if the post headline at the top breaks out of the editor’s constraints. If the post headline is equal width, that means the page has a sidebar.

Of course, you can toggle a sidebar on/off from the MD Layout post meta box.

Part 2: Add Effective Inline Post Offers to Your Posts With Custom MD Gutenberg Blocks

1.) The Content Upgrade Block

A Content Upgrade is a popular marketing concept that allows you to subtly offer your readers a call-to-action throughout your post where they can download bonus content from a specially designed popup, usually in exchange for an email address.

I learned about the power of Content Upgrades while working with my friends over at StartupBros by watching their engagement and email signup numbers explode once they started sprinkling these specially made offers throughout their articles.

Apart from the obvious newsletter signups, the most powerful benefit of Content Upgrades comes from the perceived value they add to your posts.

Think about it: a post that comes with bonus content like a PDF or a worksheet your readers can use to follow along (especially on longer articles) adds a level of interaction and value that a post without simply can’t compete with.

Use Content Upgrades to offer this kind of bonus content to your most popular and information dense posts on your site, and I guarantee you will start to see higher rates of email signups and user engagement.

How to Add Content Upgrades to Your Posts

When you’re read to create a new Block in your post, simply click the Add New plus icon and either search for Content Upgrade, or scroll to the Marketers Delight Block category and add it from there.

You will now see the empty Content Upgrade Block in your post, and you can click inside it to begin typing out your message. You will also see as you click within the Block the editor sidebar will change over to the Content Upgrade settings.

This is where you can customize the design, connect a popup or link to the button, and make other simple decisions about the layout.

Of course, you can create and manage popups right from the Marketers Delight admin screen, and any popups you make will appear in the Block sidebar settings.

This Block was made to be pretty flexible, so have fun shaping each Content Upgrade to best fit the message you wish to convey to your readers and benefit from having a new lead generating tool right in your Blocks Editor!

2.) Highlight Key Points and Special Messages With the Callout Block

You already saw the Callout Block at the beginning of this post when I highlighted the key features of Marketers Delight 4.9.3. I created the Callout Block from my desire to show MD highlights in posts, and the result is something we can all benefit from.

Here are some ideas for how you too can use the Callout Block in your content:

Using the Callout is similar to the new Content Upgrade—simply select it from the Marketers Delight Blocks category and it will auto insert into your post.

You will see three placeholder text area to type from: the headline, description, and bulleted list. The Callout Block works best when all text fields are used and comes with simple design controls that really help you create unique themes in posts.

The Callout Block uses the new Font Icons Library also added in MD4.9.3 which adds a simple select box in the Block sidebar settings you can use to choose from a variety of font icons.

If you’d rather use an image at the top of your Callouts, you upload a small 100×100 image that will show in the icons place.

This is personally my favorite MD Block, and I know you will get a ton of usage out of it in your own posts!

3.) Design Inline Email Forms in Your Posts With the MD Email Block

You can now visually embed email forms throughout your sales copy and blog posts with the same level of preview quality as your typography and site colors.

Design your email forms on the fly with intuitive controls like color schemes, background image, spacing, custom form attributes, and more.

Move email forms around with Gutenberg’s simple Block controls and even save different offers as Reusable Blocks for use anywhere else around your site!

Of course what ties MD4.9 together so well so perfectly is that the Email Form Block synchronizes your email list data from the new Pro Integrations panel.

The MD Email Block is the first of many possible Blocks I have in store for visual content editing, and the easiest kind of Block I could think to introduce that will help you further get comfortable with the concepts of the new Blocks Editor.

4.) Add the Bouncing Arrow for Flow

The last new Block added in MD4.9.3 is is the Bouncing Arrow Block, which helps you add a subtle feeling of flow throughout your posts. You’ve certainly seen it in this very post, and you can use it to subtly break up sections in long posts.

There isn’t a whole lot to say about this Block as it comes with no customization options (talk about as simple as can be!). I had always added this arrow to my posts in the past with this bit of HTML code and various MD helper classes:

<p class="bounce text-center"><i class="md-icon-angle-down large-title"></p>

…but that can really be a mouth full to write! Now this same snippet is condensed into a new Gutenberg Block, and I hope you can appreciate the nice touch this simple element will add to your posts.

New Blocks + Gutenberg Styles Now Available in Marketers Delight

Marketers Delight is one of the most Gutenberg optimized themes available in the market, and that’s not just me screaming to you about some buzzword.

MD Blocks are designed to dazzle your readers with words, not trick them by dead aesthetics.

Use a Callout to create unique themes and structures within your posts; deliver bonus content with Content Upgrades and watch your engagement skyrocket.

The entire MD theme is built just like each Block—to get you results.

Marketers Delight is an entire design system specially built to add professional marketing features like share buttons, email form integrations, popups, and more in one place without slowing down your WordPress site.

Using the MD Site Designer you can add your own design touches through your site by choosing fonts from Google Fonts or Typekit, and setting your brands colors (all of which is integrated into your Gutenberg editor).

Make these decisions once and watch as MD styles your entire site—frontend and your admin panel—to make you feel more at home using WordPress.