Floating social icon bars make it easy for users to share your content with their friends or connect with you on their favorite social networks. A floating social icon bar fixes social icons to the side, top, or bottom of your page or post and floats along as your visitors scroll so they can connect or share no matter where they are on your website.

It is an extremely popular feature for every site from blogs and news to eCommerce shops and portfolios. But did you know with Divi you don’t need a plugin to create a floating social bar? In this tutorial, I’ll show you how to add a floating social media icon bar to your Divi site with the built-in tools. Then I’ll show you how to expand your available social icon options with Divi Icon Party.

By default, Divi has limited social media icons. Divi Icon Party expands the available social icon in Divi and lets you use them anywhere on your website including the header, footer, and anywhere you use the social media module in Divi.

With a little bit of design flair and imagination, you can turn these social icons into traffic-generating machines.

How to Add More Social Media Icons to Divi

If all you need are Facebook, Twitter, and Instagram icons, the default Divi icons will work just fine. Adding Divi Icon party gives you 50 additional social channels you can add throughout your site and they integrate seamlessly with the Divi social media module. Once the plugin has successfully downloaded, head to the Plugins > Add New menu and install the plugin as per normal. Make sure to click Activate or else the plugin will not install fully.

As soon as the plugin installs, it’ll add a new menu item called Divi Icon Party into the Divi menu. Here, you’ll need to enter your license from the Divi Space website for the plugin to begin working. With your license key activated, you’re ready to go!

Before you can begin customizing Divi to add floating social icons, you’ll need to set the URL for each icon. To do so, head to the Divi Theme Options menu and click on the General tab. Here you’ll find an extensive list of over 50 new social media networks that you can link to. Now you can add icons and external links to your TikTok, Medium, Reddit and Etsy pages, and much, much more.

Now you have access to over fifty new social media icons

Begin by entering the URLs of the respective networks and click save. To see the Divi Icon Party plugin in action, create a new page, post or project, add a section, then a row and add the social media follow module. Previously, you would have only seen a handful of icons, now, you’ll find an extensive list to choose from.

Select the social media icon

Here’s an example of a Contact page complete with a contact form and social media icons for Facebook, Twitter, Instagram, Houzz, TikTok, Amazon, WhatsApp, Spotify and Patreon.

Add an extensive social media follow module

Now that you have a plethora of new social media icons at your fingertips let’s put them to use in adding floating social media icons to your Divi web design.

How to Add Floating Social Media Icons to Divi

To begin, head to the Divi Theme Options menu and open up the Divi Theme Builder. Navigate to the Default Website Template, hover over the Add Global Header option and click Build Global Header.

Click Build Global Header

The Divi Builder will load, click Build From Scratch.

Click Build from Scratch

Once you’ve added a section and row, add the Social Media Follow module.

Add the Social Media Follow module

Facebook and Twitter will load by default, but now, with Divi Icon Party, you can add just about any social media network. In this example, I’ve added Facebook, Instagram, Houzz, TikTok and Amazon.

Select the social media network

If you’d like to change the color of the icons to match your brand or website design, use the controls in the Design tab to do so. Within The Design tab, I’ve selected to use a custom icon size, and have set each to be 30px.

Set the custom icon size

In our demonstration, we’d like the social media icons to float on the right-hand side of the page. To achieve this look, click on the Advanced tab, scroll down until you see the Position option, click on the drop-down menu and select Fixed.

Select Fixed

Selecting this orientation will automatically set the position to the top left-hand corner. You’ll see a grid with a few alternate options. Click on the center right-hand grid.

Set the location

This will fix the social media follow module to this position. Regardless of who you scroll through the site, these icons will stay put in this location.

Set the location to center right

If you save the layout changes, and then also click the Save Changes button within the Divi Theme Options, once you return to the front-end of your site, you’ll see the social icon buttons fixed in place. No matter where you scroll on the page, the social media icons will float, and stay in place.

Here’s what the front-end of the site will look like

Next up, we need to stack these floating social media icons in a vertical orientation. To do so, return to the Divi Theme Builder and reopen the global header editor. Click on the Design tab and select the Spacing option. Set the width to 80px and immediately, the container will resize, stacking the icons in vertical alignment.

Set the width

If you decide to set your icon sizes as higher or lower than our suggestion of 30px, the stacking may not display correctly with a width size of 80px. If you need to, play around with these two variables until you are happy with the result.

Once all changes are saved, the Divi social media icons will float in vertical alignment across your site.

Here’s what the front-end looks like with vertical floating social icons

If you want to refine the placement of the module, head back into Divi Theme Builder, edit the module in the Advanced tab, open the Positioning option and play around with the Horizontal Offset values.

Adjust the horizontal offset

If you wanted to place the icons at the bottom of the screen, not the center, you could select the bottom right-hand grid in the Location option. If you find that this is too low, you can then adjust the horizontal and vertical offsets to play around with the placement of the module.

Adjust the vertical and horizontal offset

This will produce the following effect on the front-end:

Here’s what the front-end looks like with an adjusted vertical and horizontal offset

In our example, we’ve set the floating social media follow module to display site-wide. This is due to the global header settings being set in the Default Website Template. If you only want this to display on select pages, use the Divi Theme Builder settings to refine this display.

For example, if you only wanted the floating social icons to display on blog posts, you’d set the module to display only on blog posts. To do so, head back inside the Divi Theme Builder and click Add New Template.

Click Add New Template

From the drop-down list, check ‘All Posts’ under the Posts menu, then click Create Template.

Select All Posts and click Create Template

The new template will automatically carry over the global header, but since we don’t want the social media follow icons to display global or site-wide, delete the global header from the Default Website Template by clicking the trash can icon.

Delete the global header

Once the global header is deleted, it’ll display as a Custom Header in the template assigned to All Posts.

Now you’re left with the custom header set to display on all posts

Now, whenever you publish a blog post, your site will display a beautiful floating social media icon bar.

An example of a floating social media icon bar on a blog post

And that’s it! In just a few minutes you would have created a stylish, attractive and irresistibly clickable floating bar for the social media icons in your Divi site.

Ending thoughts

Now that you’ve set up a floating social media icons section for your Divi site, get ready for your social follow counts to soar. Site visitors will be delighted to see such an interesting and engaging web element, they’ll be clicking through to your pages in no time! This is just one of the many ways that you can use Divi Icon Party – this nifty plugin is a serious powerhouse!

How do you use social media icons in your WordPress and Divi site? Tell us in the comments section below!