In this guide, we will show you how to add a “Social Share Buttons widget” to your Elementor website. The Social Share Buttons widget makes it easy for visitors to share your content across multiple social platforms, boosting visibility and interaction. Perfect for enhancing your reach and encouraging engagement, this powerful widget allows you to match the share buttons to your site’s style effortlessly with customizable designs and seamless integration.
Let’s explore the customization options available in the “Social Share Buttons widget” for Elementor below.
Add a Free Social Share Buttons to Elementor
Go to Unlimited Elements and click "Widgets".
Search for “Social Share Buttons" in the widget library.
Hover over the widget and click Install.
Add a Free Social Share Buttons Widget to an Elementor Page
Click "Add Element" in Elementor
Search for “Social Share Buttons" in the widget panel.
Drag and drop the “Social Share Buttons” into the container.
Elementor Social Share Buttons Widget General Settings
Target URL
Specify the URL to be shared when the social share buttons are clicked. Options include:
Current Page: Share the URL of the page where the buttons are displayed.
Custom Page: Enter a specific URL to share instead.
Layout Type
Determine how the social share buttons are arranged. Options include:
Inline: Displays buttons side by side.
Grid: Arranges buttons in a grid layout.
Dropdown: Presents buttons within a dropdown menu.
Show Title
Toggle to display or hide the button title.
Show Icon
Toggle to display or hide the button icon.
Custom Title
Set a custom display title for the share button.
Network
Selects the social media platform or sharing action for the button. Options include:
X (formerly Twitter)
Copy Link
Telegram
Icon
Display the icon for the selected network.
Regular Tab
Style options for the button’s default state.
Hover Tab
Style options for the button’s hover state.
Background Color
Set the background color of the button.
Color
Set the color of the text or primary element.
Icon Color
Set the color of the social media icon.
Add Item
Add more social share buttons.
Elementor Social Share Buttons Widget Style Settings
Columns Gap
Control the horizontal spacing between social share buttons in a row.
Row Gap
Control the vertical spacing between rows of social share buttons.
Icon Position
Determine where the icon appears relative to the text. Options include:
Icon First: The icon appears before the text.
Icon Last: The icon appears after the text.
Icon Size
Adjust the size of the icon.
Icon Spacing
Set the space between the icon and the text.
Typography
Control the font, size, weight, and other text properties.
Padding
Adjust the internal space around the button’s content (Top, Right, Bottom, Left).
Color
Set the color of the button’s text or primary element.
Icon Color
Set the color of the social media icon.
Background Color
Set the background color of the button.
Border Type
Select the border style of the button. Options include:
None
Solid
Double
Dotted
Dashed
Groove
Border Width
Control the border thickness on each side.
Border Color
Set the color of the button’s border.
Border Radius
Control the roundness of the button’s corners.
Box Shadow
Add and customize a shadow effect for the button.
Social Share Buttons Widget Design Examples For Elementor
Here are some live use cases for the Social Share Buttons widget.
Social Share Button for Black Friday Sale.
Social Share Button for Products
Thank you for using the Social Share Buttons widget for Elementor! This powerful tool lets visitors easily share your content across multiple platforms, boosting visibility and engagement. With customizable designs and seamless integration, it fits perfectly into your site’s style. For questions or inspiration, feel free to reach out or explore our demo.
