Social Icons

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 Icons 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 Icons

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

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 widgets panel.

After placing the widget 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.

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.

Icon Type (Custom)

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

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, centre or right direction.

2. Style

The Style tab is used for customising the appearance of all the Social Icons widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. 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.

Icon Size

Set size of icon from here.

Icon Width

Set width of icon from here.

Height

Set height of social icon bar from here.

Border Radius

Set the radius curve of the icon’s corner.

Typography

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

Border Radius

Set the radius curve of the icon’s corner.

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

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 widgets. 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?