Social Icon

Social Icon

Social Media is a definitely the biggest part of any individual’s life, the fact that can not be ignored. Social media has made easy to make friends, speeds up communication, makes world seems small and countless other facts.

Here Social Icon allows you to add as much social media profiles you want to add for your portfolio at a single place. People don’t need to find you on each and every social media individually. We have provided a lots of options to creatively display the social icons on any page of your website you want.

Pro tip
The internet has 4.45 billion users and among them 3.725 billion people are active on social media including my dad.

Configuration for Social Icon

Find all your social media profile links, list them out and place them here using creative UI, easy peasy.

How to use the Social Icon Block of The Plus Addons For Gutenberg

The social icon block comes in many different styles. We have set the custom style option too. You can create a standard layout using a style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Social Icons 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 Icons after “/” sign, eg.“/Social Icons”, 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

Content

Style

Select your preferred layout for social icons here.

Icon Type (Custom)

Select Icon/ Image for the custom option selected in previous select box.

Select Hover Style

Select your preferred hover style for style 15 here.

Social Networks

A repeater field to add the social media profiles in a list.

Select Network

Select a social media platform, for which you want an icon. Or select custom if you don’t find one in the list.

Link

Your social media profile URL.

Title

A suitable title for social media profile.

Icon Color

A color picker to assign suitable color to the icon.

Background Color

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

Border Color

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

Tool-tip

A help text to show on icon hover.

Content

Help text content.

Typography

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

Color

A color picker to assign suitable color to the help text.

Extra Options

Alignment

Alignment of icons into left, center or right direction.

2. Style

The Style tab is used for customizing the appearance of all the Social Icon 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

General

Icons Gap

Put-in some gap between icons.

Height

Set the height of the social icon box.

Icon Size

Set size of icon from here.

Image Width

Set width of custom image from here.

Icon Width

Set width of icon from here.

Icon Height

Set the height of the social icon.

Border

Draw a border around the icon/image and give width and color to it.

Border Radius

Set the radius curve of the icon/image’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the icon/image.

Tool-tip Options

Interactive

make tool-tip interactive.

Position

Set tool-tip box around the icon anywhere by selecting here.

Theme

A font & background color mixture for tool-tip theme.

Width

Set Tool-tip width.

Offset & Distance

Set the tool-tip’s position by combining these two parameters.

Arrow

Want arrow pointing to the target or not.

Triggers

Want tool-tip on hover or on click.

Animation

Select animation type for tool-tip.

Duration In

Select amount of time from blank to tool-tip animation. Tool-tip will be Visible.

Duration Out

Select amount of time from tool-tip to blank animation. Tool-tip will be Hidden.

Arrow Color

A color picker to assign suitable color to the arrow.

Tool-tip Padding

Put-in some inner space to an element.

Border

Draw a border around the tool-tip and give width and color to it.

Border Radius

Set the radius curve of the tool-tip’s corner.

Background

Apply suitable background like color/ gradient to the tool-tip.

Box Shadow

Give Box/Text/Drop shadow effect and color to the tool-tip.

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

Note : ⭐ Symbol as a suffix displays a Pro feature field.
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.