< All Topics
Widget Used
Social Sharing
Tutorial Videos
Official Video

If an author wants to add customize social media icons like Facebook, Twitter, LinkedIn, Pinterest, and many more in an article or any template or sign up and sign-in page on his/her Website/Product. So we have done a custom and well-designed widget, which will help the user to use the various types of social media icons.

Pro tip
Why not add this widget to your website/product? Because This widget will make the icons design of your article or template or sign-up and sign-in page more engaging to your site.

How to use the Social Sharing Widget of The Plus Addons For Elementor

The Social Sharing widget comes with three different Layouts(Horizontal, Vertical, Toggle) and each layout has a different style. We have set the default layout as Horizontal. You can create a good layout using a style option. You can also use the view type and column option.

General Steps

Search for the Social Sharing element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Social Sharing widget. First, click on the Content tab.

1. Content

Social Sharing

Select Layout

The Social Sharing widget First step is an you can choose one Layout Option out of three from the drop-down menu.

Horizontal Layout

This option allows you to set the horizontal layout on the screen with the style.

Vertical Layout

This option allows you to set the vertical layout on the screen with the style.

Toggle Layout

This option allows you to set the Toggle Button with an icon on the screen with the style.

Horizontal Style

We have made Five Style for horizontal layout. You can pick any one of these styles one by one.

Style 1

Using this style you can create manageable layouts and also use more options view type and column.

Credit : Gutenberg, WordPress

Style 2

Using this style you can create manageable layouts and also use more options view type and column.

Credit : Gutenberg, WordPress

Style 3

In this style, you will see the count number and count label on the hover of the social box.

Credit : Gutenberg, WordPress

Style 4

In this style, you will be able to add a space between the count number, count label, and the social icon.

Style 5

In this style, you will be able to set the count number, count label and icon together.

Vertical Style

We have made Three Style for vertical layout. You can pick any one of these styles one by one.

Style 1

Using this style you can create manageable layouts and also use more options view type and column.

Style 2

Using this style all the content will be set vertically in one column.

Style 3

In this style, you will see the count number and count label on the hover of the social box.

Toggle Style

We have made Two Style for Toggle layout. You can pick any one of these styles one by one.

Style 1

In this style, when you click on the toggle button, you will see a social icon under the toggle button.

Style 2

In this style, when you click on the toggle button, you can see the social icon in that direction we set and you can also change that direction with the hover direction option.

View Type

This option lets you set which option you want to display in the social box. Example: Text, Text Count, Icon, Icon Count, Icon Text, Icon Text Count.

Column

With this option, you can set a column for your layout.

Alignment

Set the Social Box alignment and also Set the Toggle alignment here.

Content Alignment

Set the Social Box Content alignment here.

Display Counter

By enabling this option, you can set the value of the Total Share and Share Label options.

Hover Direction

In the Toggle layout for Style two, you can see the social icon in that direction we set and you can also change that direction with this option.

Common Setting

Social Network

With this option, you can choose the link as a name of social media.

Title

With this option, you can write the name of the sucked social media.

Count Number

You can set the Count Number In your social media box with this option.

Count Label

You can set the Count label In your social media box with this option.

Social Button

You can set the Social button In your social media box with this option.

Custom URL Link

With this option, you can set the Custom URL for your social media when the Custom URL switcher is enabled.

Title Color

With this option, you can set a Title Color for the social media box.

Count Number Color

With this option, you can set a Count Number Color for the social media box.

Count Label Color

With this option, you can set a Count label Color for the social media box.

Icon Color

With this option, you can set a Icon Color for the social media box.

Icon Background

With this option, you can set a Icon Background for the social media box.

Border Color

With this option, you can set Border color for the social media box.

Background

With this option, you can set Background for the social media box.

Toggle Button

Toggle Icon

This option allows you to select the appropriate icon for the toggle icon.

2. Style

The Style tab is used to customize all the Social Sharing widget components such as Title, Counter, Icon, Toggle, Total Counter, and Box Background. 

Title Style

Set Typography and Margin for the Title here.

Counter Style

Set Number Typography, Number Spacing (Margin), Label Typography, Label Spacing (Margin), Social Button Typography, Social Button Spacing (Margin), Social Button Border, Social Button Border Radius, and Social Button Background for the Counter here.

Icon Style

Set Size, Width, Icon Between Gap and for the Icon here.

Toggle Style

Set Toggle Width, Icon Width, Icon Size, Title color, Icon color, Icon Background Color, Button Background for the Toggle here.

Total Counter Style

Set Number Typography, Number Color, Label Typography, Label Color and Space Between (Margin-Top) for the Total Counter here.

Box Background Style

Set Width, Height, Icon Space Between (Padding), Border and Border Radius for the Social Box here.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?