Social Sharing

Social Sharing

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 Block, which will help the user to use the various types of social media icons.

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

Configuration for Social Sharing

Social Sharing Block can have social media icon for content and dynamic layout. add some, find some link to redirect users from it, and put it in a work.

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

The Social Sharing Block 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.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Social Sharing into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Social Sharing after “/” sign, eg.“/ Social Sharing”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Social Sharing

Select Layout

The Social Sharing Block First step is and 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.

Credit : Gutenberg, WordPress

Style 5

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

Credit : Gutenberg, WordPress

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.

Credit : Gutenberg, WordPress

Style 2

Using this style all the content will be set vertically in one 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

Toggle Style

We have made Two Style for the 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.

Credit : Gutenberg, WordPress

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.

Credit : Gutenberg, WordPress

Content View

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.

Block Alignment

Set the Social Box alignment and also Set the Block 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.

Credit : Gutenberg, WordPress

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.

Repeater

Select Network

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

Title

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

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.

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.

Credit : Gutenberg, WordPress

Count Number Color

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

Credit : Gutenberg, WordPress

Count Label Color

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

Credit : Gutenberg, WordPress

Icon Color

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

Icon Border Color

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

Credit : Gutenberg, WordPress

Icon Background

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

Credit : Gutenberg, WordPress

Border Color

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

Credit : Gutenberg, WordPress

Background

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

Credit : Gutenberg, WordPress

Toggle Button

Icon Library

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

2. Style

The Style tab is used for customizing the appearance of all the Social Sharing Block components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Margin

Put in some outer space to an element.

Counter

Number Typography

Assign a size, weight, spacing, and much more to fonts.

Number Spacing

Put in some outer space to an element.

Label Typography

Assign a size, weight, spacing, and much more to fonts.

Label Spacing

Put in some outer space to an element.

Icon

Icon Width

Set the width of the icon from here.

Icon Size

Set the size of the icon from here.

Icon Between Gap

Put in some space between to an icon.

Above Space

Spacing from top edge for Icon.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Toggle Icon

Typography

Assign a size, weight, spacing, and much more to fonts.

Padding

Put in some inner space to an element.

Toggle Width

Set the width of the Toggle from here.

Icon Width

Set the width of the Icon from here.

Icon Size

Set the size of the Icon from here.

Title Color

A color picker to assign a suitable color to the titles.

Icon Color

A color picker to assign a suitable color to the icon.

Icon Background Color

A color picker to assign a suitable Background color to the icon.

Button Background Color

A color picker to assign a suitable Background color to the Button.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Total Counter

Number Typography

Assign a size, weight, spacing, and much more to fonts.

Number Color

A color picker to assign a suitable color to the Total Counter Number.

Label Typography

Assign a size, weight, spacing, and much more to fonts.

Label Color

A color picker to assign a suitable color to the Label.

Space Between

Spacing from top edge for Total Counter.

Box Background

Width

Set the width of the Box from here.

Height

Set the height of the Box from here.

Icon Space Between

Put in some inner space to an element.

Padding

Put in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

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

View The Advanced Tab Tutorial

Was this article helpful?
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?
Please submit the reason for your vote so that we can improve the article.