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.
Video
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.
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)
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)
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.
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)
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.
