Social Icons

Before setting up the Social Icons Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Social Icons Widget—completely free! You can also explore both free and pro widgets by using the filter options within the widget library.

Introduction

Social Icons in Elementor let you add customizable icons that link to your social media profiles, improving user engagement and connectivity across platforms like Facebook, Twitter, Instagram, and LinkedIn.

Key Use Cases for the Social Icons Widget in Elementor:

• Use the Social Icons widget to link your social media profiles, boosting brand visibility.
• Add icons to footers, headers, or sidebars to encourage followers and sharing.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Social Icons Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the Social Icons Widget in the list.
3. Toggle it on to enable the widget.
   

Now, the Social Icons Widget is ready to use!

How to Add the Social Icons Widget in Elementor?

• Open the page where you want to add the Social Icons Widget.
• Launch the Elementor editor.
  In the Elementor panel, search for “Social Icons Widget.”
• Drag the widget to your desired section.

The Social Icons Widget is now ready for customization!

How to Configure the Social Icons Widget in Animation Addons:

• In the Elementor panel, search for the “Social Icons Widget.
• Drag and drop the widget into your desired section.
• Customize the icon settings using the available options in the Elementor panel—such as icon style, link, layout, and alignment.

Your Social Icons Widget is now ready to use! Use the configuration interface to personalize your social links with different styling options and make them stand out on your website.

Configuring Social Icons Widget in Animation Addons: A Step-by-Step Guide.

The Social Icons Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to personalize your social icons display, including icon styles, size, alignment, and link settings.

Content Settings

In the Content section, you can add and manage the main text, paragraphs, and other content types for your page.

In the Social Icons widget, you can configure sections for platforms such as Facebook, Twitter, and YouTube.

• You can either select icons from the built-in library or upload your custom icons.

• Additionally, you can adjust the icon color, set a background color, and add the corresponding links for each social media platform. 

This customization allows you to tailor the social icons to match your site’s design and ensure seamless connectivity to your social profiles.

Alignment and Direction

• In the Social Icons widget, you can adjust the alignment (left, center, right) and set the direction (horizontal or vertical) of the icons to fit your design. 
• These options help integrate the icons smoothly into your website layout.

Style Settings

The Style section includes two sections: Icon and Icon Hover.

In the Style section of the Social Icons widget, you can customize the following icon settings:

Icon

• Icon Color: Set the color of the icon.
• Icon Background Color: Choose a background color for the icon.
• Icon Size: Adjust the size of the icon.
• Icon Padding: Control the padding around the icon.
• Icon Spacing: Set the spacing between multiple icons.
• Icon Border Type: Select the border style for the icon.
• Border Radius: Adjust the roundness of the icon’s corners.

These settings allow you to style the icons to match your site’s design and branding.

Icon Hover

In the Icon Hover section, you can customize the following settings:

• Hover Color: Change the icon color when the user hovers over it.
• Hover Background Color: Set a different background color when the icon is hovered.
• Hover Animation: Choose an animation effect (such as fade, zoom, or bounce) that activates when the user hovers over the icon.

These options enhance the interactivity of the social icons, providing a dynamic experience for users.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Social Icons Widget in Elementor to effectively customize and display images on your website.