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.
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.
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.
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.
A repeater field to add the social media profiles in a list.
Select a social media platform, for which you want an icon. Or select custom if you don’t find one in the list.
Your social media profile URL.
A suitable title for social media profile.
A color picker to assign suitable color to the icon.
A color picker to assign suitable color to the icon background.
A color picker to assign suitable color to the icon border.
A help text to show on icon hover.
Help text content.
Assign size, weight, spacing and much more to fonts.
A color picker to assign suitable color to the help text.
Alignment of icons into left, center or right direction.
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
Put-in some gap between icons.
Set the height of the social icon box.
Set size of icon from here.
Set width of custom image from here.
Set width of icon from here.
Set the height of the social icon.
Draw a border around the icon/image and give width and color to it.
Set the radius curve of the icon/image’s corner.
Give Box/Text/Drop shadow effect and color to the icon/image.
Tool-tip Options ⭐
make tool-tip interactive.
Set tool-tip box around the icon anywhere by selecting here.
A font & background color mixture for tool-tip theme.
Set Tool-tip width.
Offset & Distance
Set the tool-tip’s position by combining these two parameters.
Want arrow pointing to the target or not.
Want tool-tip on hover or on click.
Select animation type for tool-tip.
Select amount of time from blank to tool-tip animation. Tool-tip will be Visible.
Select amount of time from tool-tip to blank animation. Tool-tip will be Hidden.
A color picker to assign suitable color to the arrow.
Put-in some inner space to an element.
Draw a border around the tool-tip and give width and color to it.
Set the radius curve of the tool-tip’s corner.
Apply suitable background like color/ gradient to the tool-tip.
Give Box/Text/Drop shadow effect and color to the tool-tip.