Social Share

Before setting up the Social Share Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Social Share Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Social Share Widget adds share buttons to your site, making it easy for users to share content and increase engagement.

Key Use Cases for the Social Share Widget in Elementor:

• Use the Social Share widget to add social media sharing buttons to your site, enabling visitors to share content. 
• Customize the design to match your site’s style, enhancing engagement and expanding reach.

Prerequisite

• Elementor
• Animation Addons for Elementor

To activate the Social Share Widget, follow these steps:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Social Share Widget in the list.
• Toggle it on to enable the widget.

This will activate the Social Share widget for you to use!

Here’s how you can add the Social Share Widget in Elementor:

1. Open the page where you want to add the Social Share Widget.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Social Share Widget.“
4. Drag the Social Share Widget to your desired section.
5. The Social Share Widget will now be available for customization.

How to Configure Social Share Widget

• Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish the page.
• Adjust page settings as needed.
• In the Elementor panel, search for the “Social Share Widget.”
• Drag and drop the widget into your desired section.
• Social media share buttons will be displayed automatically.

You can customize the layout, icon style, alignment, and colors to match your site’s design and encourage content sharing.

Configuring Social Share Widget : A Step-by-Step Guide

Once the Social Share Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

Once the Social Share Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Layout Options

• Alignment: Choose from Left, Center, or Right to position the social icons within the section.
• Direction: Select Row or Column to define the orientation of the icons.

Social Platforms

Facebook

• Icon: Customize or change the Facebook icon.
• Link: Add your Facebook share or profile link.
  Color: Set the icon color.
• Background Color: Define the background behind the icon.

Twitter

• Icon: Customize the Twitter icon.
• Link: Insert your Twitter share or profile link.
• Color: Choose the icon color.
• Background Color: Set the background color.

YouTube

• Icon: Modify the YouTube icon.
• Link: Enter your YouTube channel or video link.
  Color: Adjust the icon color.
• Background Color: Define the background color.

Effect on Display: These settings allow you to control both the appearance and functionality of each social button, ensuring consistency with your brand and encouraging user interaction.

Style Settings

The Style section of the Social Share Widget includes two panels: Icon and Icon Hover, allowing you to customize the appearance and hover effects of your social icons.

1. Icon

• Color: Sets the default icon color.
• Background Color: Defines the background behind each icon.
• Size: Adjusts the overall size of the icons.
• Padding: Adds internal spacing within the icon container.

• Spacing: Controls the distance between multiple icons.
• Border Type: Choose from styles like None, Solid, Dotted, Dashed, etc.
• Border Radius: Rounds the corners of the icon container for a softer or sharper look.

Effect on Display: These settings help match the icon design with your site’s branding, enhancing visual consistency and user engagement.

2. Icon Hover

• Color: Changes the icon color on hover.
• Background Color: Sets a different background color when hovered.
• Hover Animation: Select from various animation effects to create interactive transitions when users hover over the icons.

Effect on Display: These options enhance interactivity by adding engaging visual feedback, making the icons more dynamic and user-friendly.

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 Words

The Social Share widget in Elementor allows you to easily add social media sharing buttons to your posts. With customizable layout and styling options, it enhances user engagement and helps expand your content’s reach on social platforms.