In this guide, we will introduce the “Rotating Social Icons widget” for Elementor. This widget lets you add dynamic social media icons that rotate on hover, creating an engaging and interactive effect for your website. Perfect for enhancing the visual appeal of your social links, the Rotating Social Icons widget draws user attention with its smooth rotation animation. With easy customization options for icon style, size, and rotation speed, this widget adds a modern and lively touch to your Elementor designs.
Let’s explore how you can customize the “Rotating Social Icons widget” for Elementor below.
Add a Free Rotating Social Icons to Elementor
Go to Unlimited Elements and click "Widgets".
Search for “Rotating Social Icons" in the widget library.
Hover over the widget and click Install.
Add a Free Rotating Social Icons Widget to an Elementor Page
Click "Add Element" in Elementor
Search for “Rotating Social Icons" in the widget panel.
Drag and drop the “Rotating Social Icons” into the container.
Elementor Rotating Social Icons Widget General Settings
Alignment
Set the horizontal alignment of the social icons:
Center
Left
Right
Gap
Adjust the spacing between icons.
Rotate on Hover
Set the icon rotation on hover.
Hover Effect
Choose a hover effect:
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Vertical
Wobble Horizontal
Wobble To Bottom Right
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out
Content Tab
Contains the main settings for the item.
Overrides Tab
Provides additional settings to override global styles or behaviors for this specific item.
Title
Set the display title for this social icon.
Link
Specify the URL the icon will navigate to, with options for advanced settings and dynamic data.
Icon
Select the visual icon to display for this social link.
Add Item
Add more social media icons to the widget.
Elementor Rotating Social Icons Widget Style Settings
Size
Control the overall dimensions of the icon’s container or background shape.
Inner Size
Adjust the size of the social media symbol within its container.
Radius
Set the roundness of the icon’s corners, adjustable for each side.
Shadow
Add and customize a shadow effect for the icon.
Icon Color
Define the primary color of the social media symbol.
Icon Background
Set the background color of the icon’s container.
Icon Border Type
Specify the style of the icon’s border:
None
Solid
Double
Dotted
Dashed
Groove
Icon Border Width
Control the thickness of the border on each side.
Icon Border Color
Set the color of the icon’s border.
Radius Hover
Control the roundness of the icon’s corners on hover (Top, Right, Bottom, Left).
Border Hover Type
Specify the border style when the icon is hovered:
None
Solid
Double
Dotted
Dashed
Groove
Shadow Hover
Add and customize a shadow effect on hover.
Background Hover
Set the background color of the icon’s container on hover.
Icon Color Hover
Define the color of the social media symbol on hover.
Rotating Social Icons Widget Design Examples For Elementor
Here are some live use cases for the Rotating Social Icons widget.
Number Box with Rotating Social Icons widget.
Image Tooltip for Food Images with Rotating Social Icons widget.
Thank you for using the Rotating Social Icons widget for Elementor! This widget enables you to add dynamic, rotating social media icons with links to your profiles, thereby enhancing your website’s interactive appeal. Perfect for making your social media buttons more engaging, it draws attention with smooth rotation effects on hover. With customizable icon styles and rotation settings, the Rotating Social Icons widget helps your social links stand out. If you have any questions or need assistance, feel free to reach out. Don’t forget to check out the live demo on our website for inspiration.
