Icon Menu Element

Use an Icon Menu Element to easily create links to all of your social media channels and contact information in one Email.


In this article

For a run-down of the most common options in the Design Panel, click on one of the options below to head to a guide:


How to Set up the Icon Menu Element

The first Icon Menu Element you add will have a Facebook icon by default. Take a look at the Design Panel on the right to customise your Element.

iconMenuElement2.jpg

How to Add Content Options

Expand the Services drop-down menu and select a service from the list.

APSIS One Icon Menu currently supports Facebook, LinkedIn, Instagram, Twitter, YouTube, Email, Phone Number, and a Custom icon.

icon10.jpg

If you choose Custom, you must select a link type:

linktype.jpg

Enter the URL, Phone Number or Email Address for the icon.

icon12.jpg

To ensure that web addresses are resolved correctly and that the collection of Profiles' Response Data and Website Interactions work as expected, the general rule of thumb is to make sure that your links will not be redirected. For example, if your website supports multiple languages via URL parameters, the language parameter must be present in your URL along with the rest of the path.

The URL must be entered with https:// (HyperText Transfer Protocol Secure). If your website has a redirection from http to https, the parameters added to the link in order to identify the Profile and their event can be lost. Other cases and methods, like meta refresh, and a redirection to the home page for when a temporary link has expired, will cause the same effect and we advise you to avoid entirely.


Add links to your icons, record response data from Profiles who clicked on the link, and set up Google Analytics tracking in specific links.

1. Add an Icon Menu Element.

2. In the Icon Menu options, expand the drop-down menu of the icon you wish to add a link to.

To read more about adding a link, head over here.


How to Edit the Alt Text

The alt text is the text that will be used for any accessibility features APSIS One profiles might have in their email clients, or shown in the case that the image doesn't load.

You can choose to display or hide this text for all recipients under Display, on the Design options.


How to Edit the Icon Style

Choose an Icon Style that fits your Email's design. All alternatives are compliant with each brand's specifications. However, be mindful that changes made in the branding of any of the services might not be reflected immediately in the Email Editor.

icon19.jpg

If you chose a custom icon, click Upload icon to select an image file.

icon20.jpg

We suggest that you use icons with a height that is between 35px and 50px.

We support PNG, JPG, JPEG and GIF image file types.

About image file size

Whereas the average image file size tends to be around 2MB and 2.5MB, we recommend that you keep the file size at 1MB or under.

Consider that your recipients will have to load all the content of your email in order to view it, and those with slower connections as well as restricted data plans on their mobile devices may be affected.

To add another icon, click Add item and follow the same steps as described before.

iconMenuElement3.jpg

How to Change the Display

Expand the Display drop-down menu and choose between Icon and text, and Only icon.

If you choose Icon and text, the text displayed will be what you entered on Alt text in the Icon Menu Element.

icon45.jpg

If you would like to keep the Alt text for accessibility purposes, but hide it in the email, simply choose Only icon.


How to Change the Text Alignment

Choose whether you want the alt text to be displayed underneath or to the right of the Icon Menu Element.

icon46.jpg

How to Change the Layout

You can choose to organise the icons horizontally or stack them vertically depending on when the email is shown on desktop or mobile. Click on the option that suits your preferences under Desktop layout and Mobile layout.


How to Adjust the Spacing

Adjust the spacing between the icons of your Icon Menu Element by writing a measurement in pixels under Spacing (px). You may also click on the Spacing icon, hold, and drag to the left to reduce and right to increase the measurement.

Note that there is no minimum spacing limit, so please consult your brand's design guidelines to make sure that the spacing is correct.

icon51.jpg

How to Adjust the Icon size

Adjust the size of the icons of your Icon Menu Element by writing a measurement in pixels under Icon size. You may also click on the Icon size icon, hold, and drag to the left to reduce and right to increase the size.

icon50.jpg

Element Sizes

To design the perfect email, you'll need balance. Some of the most common questions when working with Elements in the Email Editor are about how you can resize Elements and how far the limits go when it comes to margins, line height, width, etc.

To read more about how to resize your Icon Menu Element and design your Email, head over to this article to learn more.

Did this answer your question?