How to Create Floating Social Media Icons on Elementor

Last updated on
Feb 11, 2024

Adding social media icons is the common practice adopted by WordPress users to integrate their website with their social media channels. This practice makes it easy for visitors to find the social media accounts of the website they are visiting.

If you use Elementor on your WordPress site, you can add Social Icons element to display social media icons on the template you are working on. If you want, you can also set the social media icons to be floating so they will keep visible no matter how far your visitors scroll the page.

In this post, we will show you how to create floating social media icons on WordPress with Elementor.

Social Icons itself is one of the free elements of Elementor. There is no option to set its orientation to vertical yet. If you want to create a vertical social media icons, you can outsmart it by adding multiple Social Icons elements with each element contains only a single item of social media icon.

Creating Floating Social Media Icons on Elementor

  • First, create a new post/page and edit it with Elementor by clicking the Edit with Elementor button. Or, you can also an existing Elementor template if you already have one.
  • Set the page layout by clicking the gear icon on the Elements panel (a panel on the left side). You can set the page layout on the Page Layout option under the Settings tab.
  • Add a section to display the heading of your page by clicking the plus button on the Elementor editor.
  • You can add the heading element by dragging the Heading element from the left panel to editor. If you want, you can also add a background to this section to make it more attractive.
  • Once you are done with the first section, create a new section. This is the section you are going to use to place the social icons. Click the plus button on the Elementor editor and select the two-column structure option. Set the width of the columns with a comparison of about 18%:82%.
  • If you want to create a complex page with multiple sections, you can rename this section to ease your job in finding it. Double-click the section on the Navigator to rename it.
  • Drag the Social Icons element to the first column (the left one).
  • Remove the social icon items and leave only one item.
  • Customize the look of the social icon. You can play around on the left panel to customize the look of the social icon.
  • Once you are done customizing the look of the social media icon, duplicate according to the number of social media accounts you want to display on your page.
  • Now, go to every of the duplicated element to change its social media icon.
  • Once done changing the social media icons, activate/click the section that hosts the social media icons.
  • Go to the Advanced tab on the left panel and set the top margin to about -400
  • Still on the Advanced tab, switch to the Motion Effects section. On the Sticky option, select Top or Bottom.

That’s it. Your social media icons will keep visible no matter how far your visitors scroll the page.

Final Words

In case you still use the free version of Elementor, consider to use the pro version since the pro version of Elementor has a Theme Builder that allows you to create a WordPress theme without coding.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Editorial Staff

Turn Your WP Knowledge into revenue ♻️

With the right, algorithm-proof blogging approach.

learn more

Want to turn your WordPress knowledge into sustainable revenue?

Where should we send the template?

Thanks! Please check your inbox to confirm.