Peter
Adding the Floating Social Icons in Elementor
01
Open up your Elementor editor and go to your dashboard. Select the first section, go to the widgets area on the left
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
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
02
Here is where you make sure your icons will be visible on all devices.
Go to the Responsive mode at the bottom left 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.
Video: Add Floating Social Icons in Elementor
Check out more on this story on the link below.