The right way to Add Menu in E mail with Stripo — Stripo.electronic mail

The right way to Add Menu in E mail with Stripo — Stripo.electronic mail sharing-on-social-media-can-assist-with-nervousness-if-achieved-proper

Many websites nonetheless debate whether or not we must always use menus in emails or not. I’ll show its necessity with a easy screenshot of a clickmap:


(Actual statistics, however the retailer’s identify is made up).

15% of those that opened an electronic mail clicked on the menu gadgets. Why not interact and encourage each seventh recipient to buy from you by merely together with a menu in electronic mail e-newsletter templates?

Our companions shared examples and gave me their consent to utilizing these statistics. I have to confess that I selected this instance on account of just one criterion – the variety of clicks on the menu.

The typical outcome reaches 10% for shops. Actually, the outcomes are the next — these on-line shops, which promote children stuff, get extra clicks on the menu. However, cosmetics shops can not boast about that good outcomes. Nonetheless, they get a excessive variety of clicks on banners — girls maintain in search of new product gadgets and gross sales.

I made a decision to divide electronic mail menu sorts into three teams:

  1. Common navigation menu bar;
  2. Common menu alternate options;
  3. Interactive menus.

1. Common navigation menu bar

The primary and the important benefit of this menu kind is that it’s completely websafe, and most often, totally responsive.

However sadly, solely few electronic mail editors and ESPs provide them of their instruments. Why so? It isn’t straightforward to make a menu that’s responsive on cell. Stripo allows you to cover some components on cell units.


What’s a menu meant for? For recipients’ comfort, to allow them to get to the correct touchdown web page in your web site sooner.

Our editor gives three sorts of menus:

Hyperlinks, icons, and hyperlinks with icons.

To create a menu in an electronic mail with our editor, drag-and-drop the fundamental “Menu” block. And select the menu kind you might be about to make use of on your electronic mail advertising marketing campaign.


a) the hyperlinks menu kind

Definitely, you might be supposed to offer these hyperlinks names. Then be certain that these hyperlinks will take prospects to the correct touchdown pages.

The way it works:

You select the “hyperlinks” menu kind. Then, work on the final settings:

out of the 20 fonts choose the one you want, decide the font dimension and font coloration, named “hyperlinks coloration”


This fashion you set preferable font coloration, its dimension, and font for your complete menu. However you may additionally set completely different fonts and even background colours for the separate menu gadgets.

I’ll set a clear background coloration for the stripe.


As a result of final function, I’ll apply varied colours to numerous menu cells.

Our editor gives three menu gadgets in a block, as a default. You might add as many as you would like.


However I examined plenty of electronic mail templates to search out out the maximal and acceptable variety of menu gadgets for an electronic mail, and here’s what I realized: chances are you’ll insert as much as 11 menu gadgets in a line. On this case, the font’s dimension needs to be sixteenth or much less, and your merchandise names are imagined to be not than 5 letters.

But, in an effort to maintain electronic mail design responsive, and make the menu notable and performing, follow the Rule of Three. The Rule says that the fourth one is all the time extreme, whereas two should not sufficient.

When you’ve acquired the whole lot carried out, chances are you’ll now lastly insert the hyperlinks.

Ensure that hyperlinks you employ for navigation menu in electronic mail take prospects to correct pages.

Be aware: you can’t examine your hyperlinks proper within the editor. You might want to ship a check electronic mail both to your electronic mail consumer account or to Mail-tester. This device will let you know which hyperlinks are damaged, and which of them work properly. But, electronic mail templates despatched to your inbox will enable testing every hyperlink individually to see its actual vacation spot.

And likewise preview your electronic mail earlier than sending it your method.

If the whole lot is finished correctly, you will notice:



There isn’t any horizontal scroll within the electronic mail!

b) the icons menu kind

Generally, it’s vital to incorporate this type of navigation menu in your emails. Photos/icons will be extra descriptive and interesting than phrases.

The way it works:

Upon getting the fundamental “Menu” block added in your electronic mail template, you’ll want to choose the “Icons” menu kind.

At first, set the dimensions for the photographs.

Be aware: technically, it’s unattainable to set completely different sizes for various photos. Right here is why, in an effort to make them complement each other, you might be about to be sure to are utilizing photos of the identical dimension and the identical orientation.


I deliberately utilized this icons’ dimension to keep away from horizontal scroll.

Then add photos or icons that replicate your menu tabs. I made a decision to stay to the identical electronic mail template, and simply changed the tabs names with photos.

Insert the hyperlinks to the correct touchdown pages.

On this GIF, I confirmed find out how to add photos from the library. Definitely, chances are you’ll use our financial institution, which comprises over 10,000 inventory photos.

This fashion, I uploaded the remaining two photos and hyperlinks. And that is what I acquired:


Be aware: when setting icons dimension, examine the cell preview to see whether or not a horizontal scroll seems or not.


c) the icons and hyperlinks menu kind

Unsure, in case your photos are notable and clear, however you need them to be in your newsletters? Then, this menu kind is for you.

The way it works:

You choose “icons and hyperlinks” menu kind. Place it in your electronic mail header. Add photos, give names to each menu merchandise, set dimension and examine electronic mail cell preview.

Now, my electronic mail menu appears this fashion:


See our video to study so as to add and edit menu with Stripo” very quickly.

2. Common menu alternate options

Like most customers do it in different electronic mail editors and ESPs, as an alternative choice to an everyday menu, chances are you’ll use “Constructions”. Select the one with a vital variety of containers. Then fill them in with photos, icons, texts, and hyperlinks. However on cell units, this type of menu will seem like common containers with product snippets — photos will go one underneath one other. Consequently, it’ll take as many strains, as many menu gadgets you’ve gotten.

I can not strongly suggest avoiding utilizing this menu various. But, be ready for containers inversion.

Trick to implement with Stripo

Containers inversion can do an incredible favor. Wanna find your brand underneath the menu on cell units?


Do you know that Stripo permits selecting containers location and order when inverting them on cell screens?

Be aware: Please be suggested that this function works for two-container buildings solely.

The way it works:

Choose a two-container-structure and place it within the header (footer, or wherever you want the menu). Then, to the primary container, add firm’s brand icon. Into the second container, insert the menu block. Give names, set font colours and even background colours if wanted, insert hyperlinks. And click on the “containers inversion” button.


3. Interactive menus

Once you hear “interactive menus”, what comes first to your thoughts? Most likely, hamburger and accordion menus. What unites them each? They’re each the varieties of the Hybrid collapsible menu for emails. Why would so many firms like to make use of it, and those that don’t but, are most likely already fascinated with doing it?

As a result of they’re supposed to avoid wasting plenty of house in emails. Simply think about, 3 gadgets should not sufficient. And also you want 7 and even 9… As a substitute of inserting a navigation menu bar that comprises 7 gadgets, you add hamburger menu in an electronic mail that takes lower than an inch of the valuable room.

The one con of utilizing hamburger menu in emails is that solely two electronic mail shoppers help interactivity.

The right way to insert:

Firstly, get a hamburger menu code. Purchase one from EmailMonks or chances are you’ll search for one other web site. For those who select the primary possibility, the embed code will already include the hyperlinks you want and may have fascinating fonts and colours.

In our editor, put HTML block in your template. And insert the code. Achieved!

In this text, we described in particulars how we labored with interactive elementsincluding a hamburger menu in emails. We examined to see wherein electronic mail shoppers they labored.

Be aware: please, be suggested that collapsible menu embed code weighs loads. On account of this issue, your electronic mail could also be clipped by most electronic mail servers.

Stripo various to the collapsible menu

Our designer coded an accordion menu for certainly one of our interactive electronic mail templates, which code is de facto mild, btw. Accordion menus are meant for cell units.


Once you click on “plus”, you’re going to get the drop-down description, CTA buttons, and costs.

On a desktop, it gained’t be essential to click on any buttons:


This code was written significantly for our editor. Which is why chances are you’ll not copy after which use it exterior.

Be happy to make use of this electronic mail template as a base on your future electronic mail advertising campaigns.

All it’s a must to do is correct within the code editor, substitute copy in our buttons with yours, change colours and doubtless take away a block or two. Or do it within the common method.

Be aware: as you’ll be able to see within the screenshot, there are two methods to edit the menu — both visible components, or edit HTML code. You select which method you want extra.

Greatest electronic mail menu examples

Now that we all know why and find out how to embody navigation menu in emails, this can be the correct time to indicate the most effective methods to make use of it:


Its menu all the time has “retailer finder”. Good answer for the corporate that sells sneakers. Folks are inclined to strive them on earlier than shopping for.


The Hilton lodges

Who stated that menu essentially must be within the header? Proper, no person did. Which is why the Hilton Resorts put their menu typically proper above the footer. Actually, that is the most effective answer for event-triggered emails to place and even omit the menu so as to not distract the shoppers.

The Hilton lodges didn’t omit the menu on this case. They solely modified it to swimsuit specific functions. And changed the promo electronic mail menu with this one.



Not solely Elon Musk is an innovator, however his entrepreneurs too — they find the menu someplace within the center. Appears to be like good. As a result of with the primary display, they’re displaying us how cozy, homey and fancy it feels to park your Tesla close to the home. Feelings come up, you wish to possess that automobile. And now, they recommend that you just select one of many automobiles they provide: Mannequin S, Mannequin 3, and so on.


Tesla confirmed the identical fashions on their web site, and used separate buttons for every mannequin and created touchdown pages for all of them. Stripo-Menu-Tesla-Site


Sure, that is our made-up instance. However I dared to insert it right here solely as a result of a lot of our customers ask about the way in which to place a menu over a banner. However banners could include just one single hyperlink. And common menu requires the minimal of three of them. Which is why we provide the next answer:

you slice your banner picture into two components: 20/80% roughly. The smaller half is to be set as a background picture for the navigation menu. And the second will carry out the banner’s mission.

So, ultimately, you’ll have:


Be aware: so long as some electronic mail shoppers don’t show background photos, we strongly suggest setting a background coloration just like the banner. Background colours are all the time displayed by each electronic mail consumer.

By utilizing this methodology, your electronic mail will look seamless.


As we talked about firstly of the article, menus could improve CTR by 15%. This issue solely proves that navigation menus are an integral a part of all emails. If utilizing one in your electronic mail templates, you really do a favor for some customers by displaying the shorter method to your web site’s fascinating touchdown pages.

Might the navigation menus in emails enhance CTR, and complete ROI.

Any questions or considerations — please attain out to us on Fb.

Supply hyperlink