Facing trouble designing anchor links on your website in a systematic way? Take a look at Happy Addons new ‘Animated Link‘ widget. With this handy widget, you can now add several animations to your anchor links.
Pre-requisites
To use that stunning Animated Link Widget, you need the following things on your site:
- Elementor
- Happy Addons (Free)
How To Use Animated Link Widget
Let’s get into deep and exploring the following steps:
Step: 1
First, find the ‘Animated Link‘ widget in the left side menu. Then drag and drop it onto the selected area.
![Animated Link 1 Add Animated Link Widget 1](https://happyaddons.com/wp-content/uploads/2021/04/Add-Animated-Link-Widget-1-1024x549.png)
Step: 2
In the Content section, you will get Link Content and Wrapper Link.
![Animated Link 2 Content of Animated Link](https://happyaddons.com/wp-content/uploads/2021/04/Content-Animated-Link-1.png)
In Content–>Link Content, you’ll find different options to add Animated Links such as Animation Style, Title, and Link.
Here are the 15 Animation Styles,
- Carpo
- Carme
- Dia
- Eirene
- Elara
- Ersa
- Helike
- Herse
- Io
- Iocaste
- Kale
- Leda
- Metis
- Mneme
- Thebe
![Animated Link 3 Link Content](https://happyaddons.com/wp-content/uploads/2021/04/Link-Content-1.png)
Let’s see how to add and use Animated Links.
![Animated Link 4 Add & Design Animated Link](https://happyaddons.com/wp-content/uploads/2021/04/Design-Link-Content-1.gif)
Following the above way, we also have added all the Animation Styles one by one for you.
Step: 3
In the “Style” section, you will find the Link Content styling option. Here, you can change the Content Box Padding, Link Color, Link Hover Color, and Typography of the Link Content.
![Animated Link 5 Style options of Animated Link](https://happyaddons.com/wp-content/uploads/2021/04/Style-Animated-Link.png)
Step: 4
If you want to add motion effects, happy effects, background, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.
Give a read to this Document to know more about advanced features & functions.
![Animated Link 6 Advanced Animated Link 1](https://happyaddons.com/wp-content/uploads/2021/04/Advanced-Animated-Link-1-1024x552.png)
Check out the final preview of Animated Link widget.
![Animated Link 7 Final Preview of Animated Link](https://happyaddons.com/wp-content/uploads/2021/04/Final-Preview-of-Animated-Link-1.gif)
That’s it.