Links
Responsive-ready anchor tags with built-in tagging and tracking
Inkcite’s built-in {a} helper streamlines working with links in your email
by keeping your code DRY and tagging hrefs if desired.
Every link requires the id attribute. The first time you declare the ID,
Inkcite remembers the corresponding href. Subsequent links that use the
same ID will automatically inherit the original href. This keeps your email
code DRY (don’t repeat yourself) and, if the link ever needs to be changed,
you can change it in one spot and it updates everywhere.
Alternatively, you can define links in your project’s links.tsv file where
the first field is the unique ID of the link and the second field (delimited
by a tab) is the href. This givens you a central file to manage all of the
links in this email project and further cleans up your email code - you only
need to add {a id=...} in your code.
Link IDs and hrefs are shared with the {button} Helper.
Styling
By default, Inkcite will look for a #link color declaration in your
helpers.tsv file. By defining this, you are setting the default color for
all of the links in your email.
You can control the color of all links inside of a table cell by adding
the #link attribute to the {td}. All links that are direct descendants
of that table cell will default to the color you specified. This is helpful
if you have a section of your email with an alternate background color that
your default link color doesn’t display clearly against.
The {a} Helper also supports the full array of font-related attributes
such as font or the individual attributes such as font-family and
font-size allowing you to fully customize the appearance of any link.
Tagging
Inkcite can be configured to automatically tag every link in your email with
custom query data. This makes it easy to pull performance data from your
website’s logs or analytics package. Link tagging is enabled in the config.yml
file using the tag-links configuration field.
If defined, when Inkcite builds or previews your email, every href is automatically
tagged with the query string you specified. If you’d like to track exactly which
links are being clicked, include {id} somewhere in the tag-links declaration
and during the build process, Inkcite will include the link’s ID in the string.
For example, if tag-links was declared as source=fall14_newsletter_{id} and
the link had an ID of primary-cta, the resulting destination for that link
would be http://company.com/order/?fall14_newsletter_primary-cta
Usage
Example Inkcite markup:
{a id="cta" href="http://company.com/order/"}ORDER NOW!{/a}
...
{a id="cta"}ORDER TODAY!{/a}
An example of the resulting email HTML output:
<a href="http://company.com/order/" style="color:#0099cc;text-decoration:none" target=_blank>ORDER NOW!</a>
...
<a href="http://company.com/order/" style="color:#0099cc;text-decoration:none" target=_blank>ORDER TODAY!</a>
Inkcite’s markup is 58% shorter than conventional HTML.
Attributes
Attributes in bold are required.
- align
- Specifies the alignment of the text within this element. Set alignment to
justify to enable justified text within this element.
- background-gradient
- The background gradient color for this element or
none to disable an inherited gradient
- background-gradient-position
- Controls the position of the background gradient - accepts standard CSS background positions such as
top left, bottom and center. The default depends on the shape of the gradient. radial gradients default to center whereas linear gradients default to the bottom.
- background-gradient-shape
- Controls the shape of the background gradient - either
liner or radial.
- bgcolor
- The background color for this element
- border
- Specifies a CSS border that appears on all sides of this element - e.g.
2px solid #445566. You can also the border for a specific direction on the element using a direction like border-top.
- border-radius
- When a
border is enabled for this element this attribute applies a radius to the border corners, in pixels.
- color
- The color for this link. If not specified, Inkcite will look to the parent td, table or default
#link declaration in your project’s configuration file. You can also define the link color for a named font style by using the [name]-link declaration. When declared like this, all links within a contain with font=[name] will be colored consistently.
- color
- Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g.
#345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
- display
- Specifies the CSS display attribute for this container.
- font
- Specifies the named font style corresponding to one or more values set in the
helpers.tsv file describing the font.
- font-family
- Specifies one or more font familes for this element in the order they will be used per CSS standards.
- font-size
- Specifies the size of the font in pixels for text on or inside of this element.
- font-weight
- Specifies the font weight for this element’s text either as a weight (e.g.
400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
- force
- This boolean attribute allows you to override Inkcite’s automatic link validation. This is useful when hrefs include ESP-specific characters that trigger Inkcite’s link validation errors.
- href
- If this is the first time this link ID is defined, and the ID is not already present in your
links.tsv file, this href is required and becomes the destination of the link any time the corresponding ID is encountered on other links or buttons.
- id
- The unique identity to associate with this href and which will appear in the tagging code, if specified. Inkcite will look in
links.tsv to see if this ID corresponds to a predefined href for convenience.
- letter-spacing
- Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
- line-height
- Specifies the line height in pixels by default, or if units are provided (e.g.
1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
- margin
- Specifies margin (in pixels) around this element. Supports directional margin (e.g.
margin-left).
- mobile
- Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
- mobile
- Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
- mobile-border
- Specifies the border for this element when it appears on mobile devices. You may also specify side-specific border such as
mobile-border-top.
- mobile-display
- Allows you to override the CSS
display attribute for this element on mobile devices.
- mobile-display
- Allows you to override the CSS
display attribute for this element on mobile devices.
- mobile-no-wrap
- This boolean attribute indicates that, when viewed on a mobile device, the contents of this container element should not wrap.
- mobile-wrap
- This boolean attribute indicates that, if
nowrap is also present, when viewed on a mobile device the contents of this container element will wrap normally.
- no-tag
- If this boolean attribute is present and link tagging is enabled for this project, this link will not be tagged. This is useful when the tagging interferes with behavior on dynamic pages.
- nowrap
- This boolean attribute indicates text within the container element should not wrap.
- padding
- Specifies the padding in pixels of the container element as either a single value applied to all sides (e.g.
10) or any of the standard CSS formats for directional padding (e.g. 10px 20px). Note! Outlook compatibility is not guaranteed if the latter format is used.
- shadow
- Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
- shadow-blur
- When
shadow is enabled, overrides the CSS blur default value in pixels.
- shadow-offset
- When
shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
- valign
- Specifies the vertical alignment of content within the container -
top, middle or bottom
Project Config
Set the default values for all {Links} Helpers by setting these attributes in helpers.tsv:
outlook-text-shadows
When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.
|
