How To Use The Animated Link Widget By Atomic Addons

The Animated Link widget by Atomic Addons shows a single text link that comes alive when visitors point at it: a line draws in under the words, the text slides or a curve sketches itself beneath them. There are 15 effects to pick from. They also play when someone reaches the link with the keyboard. This guide covers adding the widget, choosing an effect and styling the link.

Enable the Animated Link Widget

Animated Link is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Animated Link. You can also open the Content category.

4. 4

   Turn the Animated Link widget on.

5. 5

   Click Save Settings.

Add the Animated Link Widget

Animated Link works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Animated Link. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Animated Link

Open the widget and go to Content → Animated Link:

1. 1

   Style: The hover effect, Carpo by default. The effects are described below.

2. 2

   Text: The words of the link, “Animated Link” by default. The text stays on one line.

3. 3

   Link: The address the link opens. Click the cog for Add nofollow and custom attributes. Leave it empty and the text still plays its effect but goes nowhere.

4. 4

   Alignment: Left, center or right. Use the device icon to set it per screen size.

The effects, as they play when the pointer moves onto the link:

• Carpo — the underline shrinks away to the right while a new one draws in from the left just above it.
• Carme — a hand-drawn scribble sketches itself under the text.
• Dia — two lines fade in and rise into place under the text, the lower one shorter.
• Eirene — the text drops onto a thick rounded bar, which flattens into a thin, wider line.
• Elara — the line under the text opens from the middle while the text lifts a little.
• Ersa — a line strikes through the middle of the text and the text grows slightly. This style adds a little space at the sides of the link.
• Helike — the text and a line glitch and flicker before settling.
• Herse — a curved stroke draws under the text, like a quick pen swoosh.
• Io — two lines draw in from opposite sides.
• Iocaste — the line under the text carries a small wave that slides along it.
• Kale — a block rises from the underline and drops back into it, leaving a line.
• Leda — the text slides out to the left and a copy slides in from the right, with an underline.
• Metis — a single underline draws in from the left and retracts to the right when the pointer leaves.
• Mneme — the underline fades while a block sweeps up over the text and ends as a line above it.
• Thebe — two lines draw in from the left one after the other, the upper one thicker.

The quickest way to choose is to try a few in the editor and point at the link in the preview.

Style the Animated Link

The Style → Animated Link section has the link's Color and Hover Color, Style Color for the lines and strokes of the effect, Padding and Typography. Without a Style Color, the lines take the color of the text.