Want to add social media icons to your website pages? The Advanced Social Icons widget in aThemes Addons for Elementor lets you display social links with customizable icons, text labels, hover effects, and full styling controls.
In this guide, we’ll walk you through how to use the Advanced Social Icons widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
The Advanced Social Icons Widget allows you to display customizable social media icons on your website. This widget supports various display modes, including icons, text, or both, and provides numerous styling options to match your site’s design.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Social Icons section
- Display Mode: Choose between “Icons”, “Text”, or “Icons & Text” to define how the social icons will appear.
- Social Icons: Add, reorder, or delete social icons using the repeater field. For each icon, you can set:
- Icon: Choose an icon from the library.
- Label: Enter the text label for the icon.
- Link: Provide the URL the icon should link to.
- Tooltip: Optionally enable and set text for a tooltip that appears on hover.
- Color: Choose between the official color or set custom colors for the icon and its background.
- Columns: Set the number of columns for the icon layout, ranging from auto to six columns.
- Full Width: Toggle this option to make the icons span the full width of their container when set to one column.
- Alignment: Align the icons to the left, center, or right within their container.
- Icon Position: Choose whether the icon appears before or after the text label.
Element Style section
In the Style section, you can customize various aspects of the widget to match your site’s design:
- Colors: Set primary and secondary colors for the icons, including hover states.
- Size: Adjust the size and padding of the icons.
- Spacing: Control the spacing between icons and the row gap.
- Border: Customize the border, including color, width, and radius, as well as add a box shadow.
- Hover Effects: Apply hover animations and customize hover colors and shadow effects.
That’s it! You’ve successfully set up the Advanced Social Icons widget on your site.
Next, would you like to organize content into tabs? Check out our guide on using the Advanced Tabs widget to learn more.
