WordPress Social Icons – Elementor Widget

WordPress Social Icons - Elementor Widget

Learn how to add social media icons to WordPress with Elementor. You can easily add social media icons in just a few seconds!

Adding social media icons to your WordPress site using Elementor is a great way to enhance the visibility of your social media presence and encourage visitors to connect with you on various platforms.

Table of Contents

Install Elementor Plugin

Before you begin, make sure you have Elementor installed and activated on your WordPress site. You can find Elementor in the WordPress plugin overview and install it like any other plugin.

With the free version you will have the option to add the social icons and there is also a pro version that has many more benefits to offer as I have explained many times in other videos. If you’re not familiar with that yet, it’s definitely worth checking out.

So for now, make sure you have the free version of Elementor installed and activated.

Install and activate Elementor plugin for WordPress

Select a WordPress Page or Post

The next step is to select a page or post to which you want to add the social media icons.
For this example, I will just use the homepage.

Add Elementor Social Icons widget

After the page has loaded, you can click on the icon with the 9 dots on the left to view the overview of all widgets.

The widgets are organized by category and here you can also see that there are many useful widgets that you can use if you have the Pro version of Elementor.

The category below contains the General widgets, and these are also available with the free version of Elementor.

Here you can select the Social Icons widget and place it on the canvas simply by dragging it there.

Select elementor social icons widget

Now the widget is added to the page.

Drag Elementor Social Icons widget

Select and design Social Icons

By default, you will see that the icons of Facebook, Twitter and YouTube are shown.

If you want to remove an icon you can select the widget by clicking on it and then in the left menu you will see the icons in the Content tab. If you click on the cross you can remove a logo.

Remove social icon

There are also many other icons available that you can add.

Go to an icon and click on it, now hover over the logo and you will see the Icon Library option. If you click on it you will see an overview of all the icons that are included as standard. 

Social icons library

 You can also search via the search bar at the top of the overview.

Icon Library overview

In the Content Tab you can also set the Alignment.

Alignment settings

If you go to the Style tab you can find even more useful options. Here you can set things such as the size and color of the icons. You can also manage things such as the padding and spacing settings over here.

Style tab settings

Another cool option can be set in the Icon Hover settings.

By default, no Hover Animation is set, so nothing visual happens when a visitor hovers over the icons with his mouse. If you select Shrink here you will see that the icons will shrink, making it more noticeable.

Icon hover settings

Add links to social icons with Elementor

It is very easy to add links to your social media channels.

Make sure you have copied the link and then go to the Content Tab and select the Icon you want to add the link to. Then go to the Link field and paste the link there.

Add link to social icon widget

Save settings

After you have set everything as you want, you can click on the button at the bottom left of the page to save all settings.

Save Settings

Now you have added the social icons to your page or post, It can be that simple!

Thanks for watching this tutorial and I hope it was helpful, you can also watch it as a video on YouTube via this link.

Support the channel by subscribing and liking the video and if you want to stay informed of more useful tutorials click on the notification bell.

See you in the next tutorial!