In this tutorial we learn how to add social icons to your website to drive more traffic on your social media accounts through your website, and increase the engagement between your visitors and your business.
The tutorial will cover:
✔︎ How to add social icons on your website
✔︎ How to link social media icons to social accounts
✔︎ How to align and style social icons
✔︎ And much more!
See Also:
Custom Icons
Dynamic Contact URL
Hey there, it’s Aviva from Elementor. In this video we’ll learn how to use the Social Icons Widget to connect website visitors to our social media accounts.
Social media platforms have become a major hub for businesses and brands to update and communicate with their audiences. Social icons are an effective and straightforward way for websites to direct traffic to their social accounts.
Note that the Social Icons widget differs from the Share Buttons widget. They are sometimes confused, as they do look similar, however they have very different functions.
Social icons direct website visitors to a social media account page, whereas clicking a share button prompts visitors to share a page, post or product on their own social media accounts. The social icons widget is a free widget, available for all Elementor plans, and the social share buttons are available exclusively on Pro plans.
We’ve designed this “Follow Us” landing page for a ceramics store about to launch its brand, inviting visitors to follow the company’s social media accounts.
Let’s go ahead and see how to add and customize Social Icons on our website, by recreating these social icons.
From the widget panel, we’ll search for… and select the social icons widget. Then we’ll drag…and drop it into our page. The blue line indicates where it will be positioned when we let go.
Great. Now let’s take a look at how to manage icons. As you can see, the social icons widget starts us off with several default icons.
We can duplicate any icon by clicking, copy, and delete unneeded icons by clicking the X. To add a new icon, click the “Add Item” button. We can add as many social icons as desired.
And we can rearrange the order of the social icons simply by dragging them up or down.
Click any item to expand its individual content settings.
We have several options for selecting a social icon. We can upload our own SVG file, or choose one from the Icon library. Inside the Library we can use the filter to quickly find what we need. Elementor Pro subscribers also have the option to upload a Custom Icon Set. We’ll select this icon from the library, and Insert it.
Next, we have the link options. We’ll add our social media account link here. Pro subscribers also have the option to use Dynamic tags to add a dynamic link, such as a Contact URL, which is used to create a smart link to various actions, including sending a direct message to a Whatsapp account or calling a phone number . To learn more about Contact URLs, check out the link in the description.
Click the gear icon for more link options, such as to open in a new window or to add a nofollow tag.
Next we have an option to change the individual icon’s color. This is a great option for when we would like to use the official brand colors, but in a modified manner, such as inverted. Since all the icons in our design use the same colors, we’ll control color from the Style tab, and leave this one as is.
Great, this icon’s content is all set; let’s update the next one as well. … or Let’s update the others, as well.
The following Content settings will affect all the icons. For Shape, we have several options to choose from. We’ll select Circle.
By default, whenever there is enough space, social icons are Auto arranged to display each icon in its own Column, but we can change the number of columns from the dropdown. We’ll select one column. We can also change the icons’ Alignment options. We’ll leave ours in the Center.
Ok, the Content is ready, so let’s go ahead and Style the icons.
In the Style tab we have options for the Icon normal and hover states.
We’ll begin with the normal state. First are the color options. We can leave them set to their default colors, as they are now…You know, blue for Facebook, red for Youtube, etc, or… select Custom colors so we can choose colors to match the look and feel of our website.
For the Primary color, we’ll click the Color Picker and drag the opacity slider all the way to the left, for complete transparency. Cool!
And for the secondary color we’ll select white.
We have settings for the icon sizing and spacing immediately below, but we’ll go ahead and style the icon border first, to get a better understanding of how each of these settings affects the icons.
The Border Type is set to None by default. Click the dropdown to select another border type. We’ll select solid.
Now, type in a value for the width… and select a border color. Great. Below that is Border Radius, which is used to round the corners. We’ve selected Circle for our icon shape, so we’ll leave the border radius on its default.
Okay now that the border is set, we can go back and adjust the size and spacing settings.
We can set the icon size by dragging the slider…or by typing in a precise value.
Use the padding settings to adjust the spacing between the icon and its border.
Spacing allows us to change the amount of space between columns, but since we only have one column in our example, we’ll leave it as is.
We’ll adjust the Rows Gap to increase the space between the rows of icons.
All right, our icons are looking great! Let’s add a hover effect to encourage visitor engagement.
First are the color options. We also have an option to change the border color on hover. Finally, we’ll add a hover animation for even more interactivity. We have a whole bunch to choose from, and I encourage you to experiment with all of them. We’ll select Shrink. Fantastic.
We’re all done with the Desktop design. Now let’s see how it displays on other devices. Click the responsive icon on the bottom panel, or use the keyboard shortcut COMMAND or CONTROL SHIFT M to enter responsive mode.
We’ll begin in Tablet mode, so first let’s check the top bar to make sure we’re in the correct device. If not, just click the Tablet icon, here.
The Social Icons are a little large for tablet so let’s adjust their size. The viewport icon here, tells us that this setting can be adjusted for individual devices. So let’s change the icon size for tablet. Nice!
Now let’s switch to mobile. We’ll set the Social Icons to display in one row. To do this, we’ll go back to the Content tab and set the Columns to the number of icons being used, which in our case, is 4. Cool. And now in the Style tab, decrease increase the spacing a little. Perfect!
Ok, let’s Update and Preview. Looks great! Who wouldn’t want to click those buttons!?
And that’s it. Now you know how to add engaging social icons to your website, to help drive traffic to your social accounts. How do you use social icons in your web designs? Let us know in the comments below.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to ring that notification bell.
