In this guide, we will show you how to add the “Animated Border Content Box widget” to your Elementor website. This widget lets you create stylish content boxes with animated borders that dynamically change on hover, enhancing your site’s visual appeal. With customizable border colors, thickness, and animation styles, it offers a unique way to engage visitors and elevate your design.
Let’s explore the customization options available in the “Animated Border Content Box widget” for Elementor below.
Add an Animated Border Content Box to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add an Animated Border Content Box Widget to an Elementor Page
Elementor Animated Border Content Box Widget General Settings
Image
Select or upload the main image for the content box.
Image Height
Sets a fixed height for the image, adjustable with a slider or numeric input.
Title
Enter the main heading for the content box.
Subtitle
Enter a secondary heading or description below the title.
Text Align
Controls the horizontal alignment of the title and subtitle.
Left
Center
Right
Inherit
Link
Sets a URL for the entire content box to link to when clicked.
Elementor Animated Border Content Box Widget Style Settings
Content Box Background
Sets a background color or gradient for the content area of the box.
Content Box Horizontal Spacing
Controls the horizontal space around the box content.
Content Box Vertical Spacing
Controls the vertical space around the box content; negative values pull content closer or overlap, positive values increase spacing.
Padding
Sets inner spacing between the content and the box’s border, adjustable per side or linked, with selectable units.
Animated Border Content Box Widget Design Examples For Elementor
Here are some live use cases for the Animated Border Content Box widget.
Animated Border Content Box for e-commerce website.
Animated Border Content Box for image Box.
Thank you for using the Animated Border Content Box widget for Elementor! This stylish tool adds dynamic, animated borders around your content boxes that reveal on hover, enhancing your site’s visual appeal. Fully customizable with options for border color, thickness, and animation styles, it helps you create engaging and modern designs effortlessly. For questions or inspiration, feel free to reach out or explore our demo.