Guide to Designing MailMunch Landing page

MailMunch landing pages can serve a variety of purposes such as

  • A destination for your Facebook or Google ads
  • Sharing it on your social media channels
  • Emailing it to your subscribers for a specific campaign
  • ... and more

Here are few quick and simple tips to design a landing page with MailMunch to serve any of these purposes.

MailMunch offers a variety of templates which can be modified further to set up a landing page that fits your requirement to the letter. Here are few tips to make sure that your landing page performs optimally.

Content placement

While each landing page is unique to the purpose it serves, it is generally a good idea to broadly follow established industry practices which have been tried and tested, rather than reinventing the wheel altogether. Check out our Blog post to learn more about best practices for content placement on your MailMunch landing page. 

Block Creation

You can create content blocks which will be available to you on all your MailMunch landing pages. Generally, you will be following a similar design on all your landing pages which reflects your brand language. Things like the top navigation bar, hero banner, social media links, and CTA design will not vary much between your different pages. Simply create a block and drag-n-drop it on all your landing pages as shown in the video below, instead of creating the same content over and over.

Image Library

Make use of the powerful MailMunch image library to build a repository of image assets that you use on a regular basis. This will eliminate the need to upload images every time.

Mobile Optimization

  • Make sure that you have not added excessive right or left padding to any of the rows on your landing page. Padding should only be used to fine-tune your content placement. All major design changes should be made using the controllers available inside the editor. For example, rather than adding a padding of 200px to the left to make your text appear center-aligned, use the text alignment controller instead.

  • A smaller width form might appear fine on desktop view of the landing page, but the form width is set in percentage of the window, so 20% of the div on smaller display devices will end up compressing the form. You can open your landing page on mobile view and play around with form width and button width to find the optimal setting. If you are using Chrome browser, simply open your landing page in a new window, right click on the screen, click on Inspect Element and then toggle to mobile view.

  • Be clever with the type of images you use on your landing pages. Refer to our support article regarding adding images on your landing pages for more on this.

  • Make use of Do Not Stack on Mobile and Hide on Mobile feature to further optimize your landing page display on mobile devices.

  • When Do Not Stack on Mobile is enabled, it will keep all columns inline within a single row, instead of cascading each column one after the other. This setting only applies to mobile view.

  • When Hide on Mobile option is enabled, it will simply hide that row on mobile devices. 

MailMunch.png

 

Other Hacks

  • Using the Duplicate option will allow you to easily create variations of your existing templates instead of having to re-create the same content again.1.png

  • Use MailMunch Analytics to measure your Landing page performance by keeping track of your conversion rate or use popular tracking pixels like Google Analytics to keep track of your landing page impressions and conversions.

  • Publish your landing page on your custom domain. This will lend more credibility to your landing page, and as an added bonus it will show your custom favicon instead of MailMunch favicon.

  • If you have a row selected and open the main editor pane on the right instead, deselect this row by clicking on the white space in the editor available on the right or left side of the window.


  • Rows can be added by clicking on + sign shown above and below each row. Once a row is added, change the layout of that row by selecting the number of columns you wish to add to this row and then drag dropping the content within the column from the right.


  • You can delete and entire row or only the content added within each row as well. 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.