Style links in html email

HTML Pro: How to style email signature links

Many email clients insert a default blue link around the email address and web link.

In Outlook, you will only see the blue link after you send the email.

If the blue links do not meet your corporate style, you can fix it using the built-in designer or your HTML source.

HTML Pro: How to style email links in the HTML source:

Here is the same link style without the underline:

HTML Pro: How to style web links in the HTML source:

Here is the same link style without the underline:

Did you find it helpful? Yes No

Related Articles

• How to add other Xink administrators and set roles
• How to enable multi-factor authentication using TOTP
• How to leave out blank fields in email signatures (NULL statement)
• How to change content (IFNULL. THEN. ELSE)
• How to build dynamic content using CASE Statement (WHEN. THEN. ELSE)
• How to make dynamic templates based on user requirements (using Field type)
• String manipulation functions (LEFT/RIGHT)
• Xink Admin App for iPhone
• How to select email signature synchronization interval
• How to find out if employees are updated
• Preserve Manual Edits feature
• Xink Security
• HTML Pro: How to removed underline in email link
• HTML Pro: How to use your preferred editor with Xink
• HTML Pro: How to valign in Outlook for Windows
• HTML Pro: Table snippet
• HTML Pro: Table row height snippet
• HTML Pro: Mailto: snippet
• HTML Pro: HR snippet
• HTML Pro: CAPITALS snippet
• HTML Pro: Table bgcolor snippet
• HTML Pro: How to Fix Blue Links in Gmail
• Liquid Pro: The Liquid template language
• Let’s scope an email signature project for a corporate entity!
• HTML Pro: How to autofill the email address of your recipient in Outlook
• HTML-Pro: How to prevent transparent images showing with white background in the black mode in Outlook on Windows
• HTML Pro: How to add a vertical line
• HTML Pro: How to a add a dynamic vertical line without an image
• A big spacing is showing between the lines in your signature

Источник

Adding & Styling Links

This exercise is excerpted from Noble Desktop’s HTML Email training materials and is compatible with updates through 2021. To continue learning HTML Email with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this HTML Email tutorial:

Coding links to open in a new tab or window, Styling links, The !important rule

Exercise Preview

Exercise Overview

In this exercise, we will add links to the Jive Factory website so email recipients can click through to get information about the venue and various events. We’ll also style the links using a technique that ensures cross email client support for our desired link styles.

1. We’ll be using a new folder of provided files for this exercise. It contains the same Jive Factory email you’ve been working on in previous exercises, except we’ve added more events. Close any files you may have open in your code editor to avoid confusion.
2. In your code editor, open events-issue21-summer.html from the Jive Factory Ready for Links folder. Be sure to go into the right folder!

Adding a Footer

1. Around line 143, find the for the last event listing.
2. Below that comment, add a new table (for the footer) as shown below in bold:

 
 
 
All content © The Jive Factory. | 580 Lispenard St. New York, NY 10012 | Open All Week 4pm–4am | Unsubscribe 
 
 
 

class="footer"> All content © The Jive Factory. | 580 Lispenard St. New York, NY 10012 | Open All Week 4pm–4am | Unsubscribe 

Adding Links to Images & Removing a Default Border

Almost all the content in the email, aside from the band biographies, will be links. We don’t want to miss a click opportunity!

Let’s start with the banner image. Locate the banner image (around line 55) and wrap it in the following link tag (in bold):

Creating Links in Event Tables

Let’s create links for an event. There are multiple appropriate pieces of content that an email recipient may want to click: the time and date of each event, the main heading, the band image, and the ticket price.

h1 and p tags are block elements that stack on top of each other, as opposed to span and a tags which inline elements that go next to each other in a line.

Some email services (such as MailChimp) do not allow block elements (like the p tag) inside inline elements (like the a tag), therefore we must place links inside those elements rather than wrapping them around the outside. This forces us to have multiple links (inside each block element), rather than one link wrapping multiple block elements.

We’ll start by adding a link around the date and time content of the first event. Find the td tag around line 72 and wrap its content in an anchor tag, as follows:

  
 Friday 
 
8:30–11:00pm 
  

  
 The Autumn Spirit Experiment 
 

  
The Autumn Spirit Experiment is the avant-gaze-ers' attempt at soaring, shimmering, indie pocket rock. 

 
 $5 adv / $7 day of show 
  

Styling the Links

1. Let’s change the linked text to white so it’s easier to read. Back in your code editor, scroll up to the CSS toward the top of the document.
2. Add the following new rule below the img rule:

How to Learn HTML Email

Master HTML email with hands-on training. Boost your email marketing campaigns by learning how to code emails that look good on different-sized devices.

• HTML Email Certificate at Noble Desktop: live, instructor-led course available in NYC or live online
• Find Coding Classes Near You: Search & compare dozens of available courses in-person
• Attend a coding class live online (remote/virtual training) from anywhere
• Find & compare the best online coding classes (on-demand) from the top providers and platforms
• Train your staff with corporate and onsite coding training

Источник

All About Blue Links in Emails

Links in emails have become an integral part and their importance is difficult to underestimate. Links help recipients navigate email, they lead newsletter recipients to the right pages of a website, and to the right external links.

Blue links in email, an incredibly useful feature, cause a lot of difficulties and problems for email developers and marketers. Recently, there have been many simple and complex ways to handle blue links. In this topic, I will look at the most effective ways to prevent the destruction of blue links in HTML emails.

Blue Links

Let’s define the terminology. The blue link is the text in the email that becomes underlined and recolored in blue; in other words, it becomes a hyperlink. Usually, these links are created automatically by email clients. Usually within the category of blue links fall:

Blue links certainly help the user better navigate the email text, but this can be a big problem—the unified email style is broken, and elements that you did not plan to have appear. We want the end user to receive the email exactly as it was intended by the email designer, without changes made by email clients and applications. On the other hand, users are used to the system of blue links and expect them.

I recommend overriding styles. We should keep the functionality of these links but make it so that we can set the styles for the blue links as we see fit, and not as the mail client algorithm decides.

Working with Link Styles

The best way to redefine the style of your links is to use CSS. This method has a lot of advantages, such as:

• The ability to use different styles for different links—a designer’s paradise.
• The function of these links, which mail applications insist on, is still preserved.
• This method is quite simple.

The only obvious drawback of this method is that different email clients do the definition of blue links differently, so you need to follow certain rules.

I want to draw your attention to the fact that free Email2 email builder has unique features that will make it easier for you to work with CSS.

Apple Mail

When creating links around text, Apple Mail adds additional attributes to these links that go beyond the normal href. For example:

Do not despair. We can overcome this inconvenience. To do this, you need to focus on elements with certain attributes and simply redefine the style for these elements. In the description of our email styles, we simply add the target links that Apple Mail has generated and force this text to inherit the style from the parent element:

The functionality of these links will remain the same, but their style will be the same as we intended.

Gmail

In the case of link processing, Gmail behaves differently. When viewing the HTML code of your email, Gmail converts the doctype to an underscore (u) element. Knowing this, we can add a hook to our HTML so that we can define elements for Gmail. We do this by using the id to the body element.

After that, we set up targeting for all links that are intended for Gmail, redefining the styles:

In Gmail, we use the same CSS properties as in Apple Mail, only with the specifics of Gmail.

Headache

When it comes to email, there is always room for unforeseen situations. There are updates for mail clients—some mail applications hate email developers so much that they do not give the opportunity to implement the design that was conceived. If the methods I described above did not work, then I recommend using the following approach.

This involves wrapping autolink candidates with an element, which is then targeted via CSS in the email header. The container element has a class that is used for targeting. Before, designers realized they could use the x-apple-data-detectors hack, this trick was usually used for blue Apple Mail links, so you’ll usually see something like «applelinks» used for the class, but it could be anything.

For example, let’s use the «blueLinks» class:

Since we know that all mailers will do their best to make a blue link out of this element, we can use CSS to redefine the styles for it:

This solution is quite reliable and will help you avoid errors when creating emails for many email applications, but it requires more maintenance. The content of your newsletter can change, and you need to be more careful about where and what classes are used.

It is not superfluous to remind you that testing email templates is a guarantee that the recipients of your email will receive it in the form in which you want them to receive it.

Related Articles

All you have to know about HTML email in one article.

How to create surveys within HTML email.

How to use the correct fonts in your newsletters.

Источник