Creating a Landing Page Design with Mailchimp: A Step-By-Step Guide.

This article would detail the step-by-step process of creating a landing page design with Mailchimp.
Mailchimp is the most-used tool for landing pages and e-mail marketing among affiliate marketers. According to Ubersuggest, Mailchimp has over 823,000 search volume for its keyword in the United States alone, to prove how popular the functionality of this tool is for online entrepreneurs.

Before we detail the step-by-step process of how to create a landing page design, let’s just refresh our minds about what a landing page is and also include some examples.

What are Landing Pages?

A landing page is simply a webpage containing significant information about a particular product or service, with the aim of promotion and conversion. To further clarify any confusion, even though a  landing page is a webpage with a usable link, a landing page is not the same as owning a standard website, it can only be substituted for a website or a blog when trying to market a product or service.

The main objective of a landing page is simply to convert prospects to customers, which is an implication of the “MOFU” stage of a sales funnel, that is why it is necessary for a typical landing page to have an opt-in, or a newsletter, where prospects can provide their contact information in exchange for purchasing a product or service.

Landing Page Examples

Landing pages can be categorized into basic and complex.

A basic landing page can be seen below:

Landing page originally designed by the Shadebizness team.

A basic landing page content can be known as a “quick conversion” design tactic, it simply provides a brief guide of how a prospect can acquire a product or a brief introduction to the product itself and its importance. Most affiliate marketers prefer this category because, it is a simple lead magnet that transitions to either a review blog-post or video about the product, or a sales page with payment options for prospects to instantly take an action towards a purchase. In most cases, a basic landing page is designed if it is just one product that is being promoted.

Secondly, the complex landing page is mostly used by product vendors and eCommerce marketers to promote two or more products. When there are two or more products with similar characteristics to promote, a complex landing page like the illustration below is needed to properly capture attention to the different products available for sale.

Landing page original design by the Shadebizness team

From the image above we can see that:

1) Is the header picture and introduction of the landing page.

2) Shows a sub-header to tell prospects more about your product line and services.

3)  Shows the body of the landing page that carries information about the featured products, price tags, and descriptions.

4) Shows the space for inserting social-proofs and testimonials about your products, a contact form, and social media follow icons.

Landing Page MailChimp: How to create one
#Step 1: Get Started
Go to to register an account, verify the account through your email address, choose a plan whether a free plan or paid plan (a Mailchimp free plan works very well), and finally,  add your personal details and information to complete registration, as shown in the illustrations below:
Start your registration process by providing your personal information.

Check your E-mail for a verification link
E-mail verification

Human verification.

Choose a preferred plan, whether free or paid.

Set up your profile properly.

Add your business details.

Add your address information.

If you have existing e-mail leads or contacts, you can easily upload them to your new Mailchimp account.

Select your business intentions and services (Optional)

Registration complete.
#Step 2: Creating a Campaign
On the overview, or dashboard of your new account click the hamburger icon on the top left corner of the page to open the menu bar, see the image below:

Click create on the menu tab, to bring out another subcategory.
On the subcategory menu tab, simply click “Landing page” to start creating your marketing page.
#Step 3: Choosing a Landing Page Templates
The next page presents you with an option to write your preferred landing page name, and create an audience to be able to organize leads that sign up to your e-mail newsletter through your landing page.
The next page presents you with the option of choosing a landing page template of your choice.
Choose your preferred template (It can be basic or complex)
As discussed earlier, you can choose a basic landing page template (if you simply need a quick conversion,  with a  brief and good introduction of the product) or you can choose a complex landing page template.
For the sake of this demo, we would be using a complex template for our illustrations, but please note that the design patterns are still the same with a basic template.
Quick Tip: designing a landing page with MailChimp is better done with a desktop than a mobile device. The MailChimp design interface is too sensitive and sometimes leads to frustrating errors when using a mobile device.
#Step 4: Understanding the Task Tab.
Designing a landing page on MailChimp works by simply highlighting and dragging a preferred “block” from the task tab to your landing page template.
The task tab is divided into “block and style”. You would find a lot of blocks to make your landing page aesthetic and marketable, these blocks include:
* Text: Block for writing.
* Divider: a divider block helps to separate and arrange other blocks properly.
* Boxed Texts (text with a background)
* Image: block for uploading pictures
* Image + Text: An Image with a text (or caption)
* Image group: Is a block that allows you to upload two or more photos grouped together.
* Button: a call to action block, e.g, ‘Order now’, ‘Buy now’, etc.
See illustration below:

The second category of the task tab which is the “style” provides different options for adding more features and column to your landing page, like:
* About us
* Testimonials
* Header
* Details, etc
#Step 5: Importance of the Header
The header is the crucial part of your landing page, because it announces your product immediately to a prospect or a customer.
As seen in the picture above, you can simply highlight the header background to change the already existing photo, or use a custom color instead. You can also adjust the size of your header to either ‘fill’ or ‘fit’ the entire header space.
You can add a text and a “call to action” button on your header from the task tab. The call to action button can be edited to suit your preferred button text, e.g., Buy now, Order now, Learn more, etc. Your call to action button can be linked to a web address, e-mail address, anchor link, or file
See illustrations below:

Add a call to action by simply dragging the “Button” block to the template.

You can change the button text, and embed a URL
Choose between an E-mail address, Anchor link, or File.
#Step 6: Adding and Editing Texts
To add a text to your template, you can drag a “text block” from the taskbar as explained earlier, in order to write content. 
To edit a text, highlight and change the content, style, and settings as shown in the illustrations below:
Change and edit the content of a text on the task tab.

Change the style of your text, by editing the font, color, or size.

Set the number of columns you want your text to occupy.
#Step 7: Uploading and Replacing Images
You can drag an “image block” from the task tab to upload an image directly from your file, or you can simply highlight an existing photo for replacement.
 An “image + text” can be edited together in the task tab. If the images are in groups, then it would display “column 1 & column 2”. You can easily navigate both columns for editing both images or texts that are grouped together.
#Step 8: Adding Social Media Follows and Signup
Since the objective of a landing page is to get leads and conversions, your design must have a sign-up form and a “contact us” block.
Inserting this should be towards the end part of your landing page. Simply drag and drop the sign-up form block and social follow block on your landing page to show an e-mail subscription bar, and social media icons respectively.
After designing your landing page to your taste, you can just click the  “Save” button.
It will then take you to the “Ready to Publish” page, where you can do some last-minute changes to your design title and content.  This page also makes the option of tracking your content with Google Analytics or Facebook Pixel available.
These are the basic illustrations behind designing a landing page with MailChimp, the best way to keep improving on your design relies on your level of creativity, however, the illustrations here provide an excellent guide to aid you towards unleashing your creativity in your marketing campaigns.

Leave a Reply

Your email address will not be published. Required fields are marked *