How to Add Floating Social Icons in Elementor

In this tutorial I’ll show you how to add floating social icons in elementor. You’ll do this by simply adding floating icons into the elementor editor, styling them and finally floating the icons on the page. No need for any extra plugin.


Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

floating social icons in elementor

These icons remain floating when someone is scrolling though the page. And when they click on any icon it takes them to that particular social media platform in a new tab. They will also be responsive on mobile and tablet devices.

To Read: Zoom Image on Hover Effect with CSS in Elementor [PRO]

Adding the Floating Social Icons in Elementor

Open up your Elementor editor and go to your dashboard. Select the first section, go to the widgets area on the left (00:54)

bVH3SHFHvl8wHtV5kCk0CYKE4pKBsRxeH2H oZiK6kkOQ7yxStd1JDOVs8Q b5xpOBP98BEg ck XwFdfEHCLdSkWfMs5ABbxW9uVZL5 lIAEYHHmx0fZmS52Nf5xpd Qcbr8jwE

In the widgets area search for Social Icons widget then drag it into the editor. Now select the social icons widget and in the Edit Social Icons area on the left (01:08)

gz yEPJKINFZt2npC1LKgecGvRGFFLzfvPPLV6fxa32sKGZfBNmA8W2yokSoPsiOvnWAqoHdZTdrzi2fV7NoPiVXrn9SKg0jxvQzr6lpYdpTsLdo zqhfDUkeZtPu6eStdgHLNKe

You are able to add or remove icons. To add for example your blog you just go to the Add Item button, then go to the icons library, choose a link icon, insert it then you can paste the link to your website or blog. On the settings icon beside the link you can choose to open your blog URL in a new window

You can also edit the other icons the same way and add links to your social media platforms, you can even delete the icons you don’t want.

After adding your social media icons go down to shape and set it to Circle, under Column choose 1, then under Align choose left.

Under Style choose Custom on color, then make Primary color transparent and Secondary color white.

But if you want to use the colors in your theme then just select the item with the color you want to use, go to Style and copy its color code, go back to your social icons and under style paste the color code under secondary color.

Next under style is size, set it to 30, then set the Padding to 0.3.

You can also add a different color on hover if you want to.

Also Read: How to Create a Sticky Transparent Header, Change Logo & Background Color on Scroll in Elementor [PRO]

Next, select the icons widget and go to Advanced, and under Z-Index set it to 99. This is to make sure the icons are on top and aren’t hidden behind any sections or elements.

Under Motion Effects add an Entrance Animation of fade in down.

Now, still under Advanced go to Positioning change width to inline auto, Position to fixed, and Horizontal orientation left and offset 16 pixels. This will move the icons to 16 pixels inside the page. For Vertical orientation align to the top and give offset 43%. 

When you Update and Preview, now the icons are 16 pixels horizontally from the edge of the page and 43% from the top of the page.

Floating Social Icons Responsive Settings

Here is where you make sure your icons will be visible on all devices.

Go to the Responsive mode at the bottom left (05:46)

FTy5bcBU8sDOCS8kom0Ypme2UB118F7b8R nM3CH6K0 4jBi qgYchND6IxYhbI

First select the tablet device and see how it looks, if it looks good and doesn’t need changes move mo to the mobile device and here make some changes.

Select the icons and go to Style, under size change to 14px to make them a bit smaller so they aren’t covered by any element of sections.

In Closing

That’s how you can add floating icons to your website using elementor without any extra plugin. And when you click on any icon it opens up that particular platform in the URL in a new tab. And they are fully responsive on all devices.

Remember to subscribe to my YouTube channel and to my newsletter. And in case you have any questions or comments let me know in the section below.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users