In this guide, we will show you how to add an “Annotation widget” to your Elementor website. The Annotation widget enables you to add hand-drawn-style annotations that enhance visual storytelling and guide user attention with ease. Perfect for highlighting key content or adding context, this interactive widget brings a dynamic, personalized touch to your designs. With customizable options for style, animation duration, and delay, the Annotation widget offers both creative flexibility and functional clarity for a more engaging user experience.
Let’s explore the customization options available in the “Annotation widget” for Elementor below.
Add an Annotation to Elementor
This widget requires “Unlimited Elements Pro” version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Annotation widget" in the widget library
Hover over the widget and click Install.
Add an Annotation Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Annotation widget" in the widget panel.
Drag and drop the “Annotation widget” into the container.
Elementor Annotation Widget General Settings
Shape
Select the annotation shape.
Stroke Width
Adjust the thickness of the annotation line.
Annotation Color
Set the color of the annotation.
Annotation Padding
Control the spacing around the annotation.
Loop
Toggle whether the annotation animation repeats continuously.
Loop Interval (ms)
Set the delay time (in milliseconds) between animation loops.
Animate
Enable or disable the annotation animation.
Animation Duration (ms)
Adjust the length (in milliseconds) of the animation.
Trigger Effect When In Viewport
Choose whether the animation activates only when the annotation enters the viewport.
Reveal on Scroll
Enable or disable the option to replay the animation when the element enters the viewport during scrolling.
Text Before
Enter the text to display before the annotated (highlighted) text.
Annotated Text
Specify the main text that will be highlighted or annotated.
Text After
Enter the text to display after the annotated text.
URL
Add a hyperlink by typing or pasting the desired URL.
Elementor Annotation Widget Style Settings.
Typography
Customize the font family, size, weight, and other typography settings for the text.
Color
Set the text color for the "Before Text" section.
Text Shadow
Add and adjust shadow effects to enhance the text appearance.
Typography
Customize the font family, size, weight, and other typography settings for the text.
Color
Set the text color for the annotated text.
Text Shadow
Add and adjust shadow effects to enhance the text appearance.
Typography
Customize the font family, size, weight, and other typography settings for the text.
Color
Set the text color for the "After Text" section.
Text Shadow
Add and adjust shadow effects to enhance the text appearance.
Annotation Widget Design Examples For Elementor
Here are some live use cases for the Annotation widget.
Confetti Background with Elementor Annotation widget.
Audio Playlist with Elementor Annotation widget.
Thank you for using the Annotation widget for Elementor! Designed to bring hand-drawn style annotations to your website, this widget lets you highlight key content with eye-catching animations and interactive visuals. It’s perfect for guiding users, adding context, and drawing attention to important elements on the page. With customizable settings for style, animation duration, and delay, the Annotation widget gives you full creative control to enhance your site’s storytelling. If you have any questions or need assistance, feel free to reach out. For inspiration and live examples, be sure to check out the demo on our website.
