Link Styling

Go Back to Main Knowledgebase

This is how you make your links LOOK the way you want on your live site. Linkilo gives you separate control over internal links, external links, and a hover-preview card.

These settings all live in the Front-end Display group in your Linkilo Settings sidebar.

In your Linkilo Settings sidebar, click Internal Link Styling.

You’ll see a banner at the top: “Front-end only. Affects how internal links render on your public site. Doesn’t change which links Linkilo suggests — that’s controlled in General + Content Filters.”

The page has three cards.

Behavior (not appearance) of internal links.

  • Open in a new tab — when ON, internal links open in a new tab when readers click. Most sites leave this OFF for internal links.
  • Tell Google not to follow — adds rel="nofollow". Most sites leave OFF for internal links (you usually WANT to pass ranking).
  • Extra link tags — checkboxes:
    • noopener (safer new-tab opens) — recommended if links open in new tabs
    • noreferrer (hides where the click came from) — privacy option
  • Leave both off if you don’t need them.

Colors and text style.

  • Use my theme’s link style — when ON, Linkilo doesn’t change how internal links look (color/text style below are ignored). Your theme decides. Useful if you have custom theme CSS you want to keep.
  • Link colour — pick with the color picker.
  • Text style — checkboxes for Bold, Underline, Italic.
  • Custom CSS class — appended to every internal link Linkilo manages. Useful for targeting via your theme’s CSS.

A small icon next to each internal link. Requires Font Awesome to be loaded by your theme.

  • Icon style — dropdown: No icon (default) / Arrow icon / Verified (check) icon.
  • Position — before or after the link text.
  • Colour — color picker.
  • Hide icon when link wraps an image — hide on links whose anchor is an image (so the icon doesn’t appear inside thumbnails).
  • Hide icon on these domains — comma-separated list of domains that should skip the icon.

Click Save Settings at the bottom.

Grow Rankings with Better Internal Links

Help search engines understand your content structure—and boost SEO without extra tools.

Start Free Trial

In the Settings sidebar, click External Link Styling.

Banner: “Affects how outbound links render on your public site. Doesn’t affect AI vs legacy suggestion behaviour — those settings live in General.”

The page has three cards (parallel structure to Internal Link Styling).

  • Open in a new tab — recommended ON for external links. Keeps your site open in the original tab.
  • Tell Google not to follow — adds rel="nofollow". Common for affiliate links and links inside user-submitted content.
  • Extra link tags — checkboxes:
    • noopener (safer new-tab opens)
    • noreferrer (hides where the click came from)
    • sponsored (paid or affiliate) — Google requires for paid links
    • ugc (user-generated content) — for comments and guest posts
  • Trusted sites (skip nofollow) — textarea, one domain per line. Links to these domains will NOT get nofollow. Use for trusted partner sites or your own external properties.

Same structure as internal:

  • Style external links — master toggle. When ON, Linkilo applies the color and text style below. When OFF, your theme handles it.
  • Link colour — color picker.
  • Text style — Bold / Underline / Italic.
  • Custom CSS class — appended to every external link.

Same as Internal, with the external-link variations:

  • Icon style — No icon / Arrow icon / Verified (check) icon.
  • Position — before or after.
  • Colour — color picker.
  • Hide icon when link wraps an image
  • Hide icon on these domains

Click Save Settings.

In the Settings sidebar, click Link Preview.

Banner: “On-hover preview card shown to your visitors. Completely independent of which suggestion engine you use.”

This is the fancy hover-card feature. When a reader hovers over a link on your site, a small card pops up showing a preview.

There are nine cards on this page — way more options than the others. Here’s what each covers.

  • Preview cards — master toggle for the entire feature.
  • Apply to — checkboxes:
    • Internal links
    • External links
  • Domain exclusions — textarea. One domain per line. Links to these will not show a preview.

Card 2: Behaviour

  • Position — where the card appears relative to the link (above, below, left, right).
  • Offset — pixels of breathing room.
  • Animation — fade, slide, none.
  • Hover delay — how long the reader hovers before the card appears. 0 = instant.
  • Close button — small “✕” button so readers can dismiss the card.
  • Click anywhere to open — clicking the preview card itself opens the link.

Card 3: Card container

The card’s overall look:

  • Background colour
  • Max width — in pixels.
  • Padding — inside the card.
  • Font family

Card 4: Border & shadow

  • Border — width, color, radius.
  • Drop shadow toggle.
  • Shadow colour — hex or rgba().
  • Shadow offset & blur — control how prominent the shadow is.
  • Spread.

Card 5: Card content

Which pieces of the destination show up:

  • Featured image toggle.
  • Image layout — Max height, Position (above/left/right), Radius.
  • Hide if no image — when ON, the image area collapses when no image exists.
  • Placeholder colour — when an image is missing but you don’t want to hide the area.
  • Show title — toggle.
  • Title style — Color, Weight, font size.
  • Title layout — Transform (uppercase/lowercase), Max length.
  • Description — toggle and styling.
  • More cards below for excerpt, date, author, etc.

Live demo

At the bottom of the Link Preview page, there’s a Live demo card. It shows how the current settings will look in real time. Change a color, and the demo updates without saving.

Click Save Settings to commit your changes.

Common questions

It changes how the links LOOK on the live site. The HTML and URLs themselves don’t change. If you turn off styling, links revert to your theme’s default style.

Some themes have very specific CSS rules. Try:

  1. Adding a Custom CSS class in the styling card, then targeting that class in your theme’s custom CSS.
  2. Toggling Use my theme’s link style ON and styling internal links entirely from your theme.

It depends on your site type:

  • Editorial blog — generally yes, plus use Trusted sites (skip nofollow) for partner sites you vouch for.
  • Niche site with lots of affiliate links — add the sponsored tag instead of (or in addition to) nofollow.
  • Forum or comment-heavy site — turn on ugc for the user-content sections.

What’s the difference between nofollow, sponsored, and ugc?

All three tell Google “don’t pass my ranking through this link” — but for different reasons:

  • nofollow — generic. “I’m not vouching for this link.”
  • sponsored — paid links. Required by Google for affiliate/sponsored content.
  • ugc — user-generated content. Used for comments, forum posts, guest posts.

You can have multiple on the same link: rel="nofollow sponsored" for a paid affiliate link.

The card is positioned absolutely on top of your content. Themes with overflow: hidden on the article container can clip it.

Quick fixes:

  • In Link Preview → Behaviour → Position, try a different side.
  • In Behaviour → Offset, increase the offset.

If clipping persists, contact your theme support and ask them to remove overflow: hidden from post-content wrappers.

I want previews only on certain post types

The Preview cards toggle is sitewide. For per-post control, exclude domains via Domain exclusions or add the class linkilo-no-preview to specific <a> tags inside your post content — Linkilo skips them.

Mobile devices don’t support hover. The Link Preview is desktop-first. If you want a tap-to-preview behavior, Click anywhere to open combined with a short tap-delay can work on tablets, but most mobile users just tap and navigate normally.

Where are the Custom CSS classes useful?

If you want to target Linkilo-managed links from your theme’s custom CSS:

.your-custom-internal-class {
    font-weight: 600;
    border-bottom: 1px dashed;
}

The classes you put in the Custom CSS class field get appended to every link Linkilo manages, giving your theme a stable hook.

0
1

Related Knowledgebase

Go Back to Main Knowledgebase

Request a Feature

Contact Support

See What Others Are Reading