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.
Conclusion
The Advanced Social Icons Widget is a powerful tool for adding social media links to your website. With extensive customization options, you can ensure the icons match your site’s design perfectly, providing a seamless and professional look.