How to Design a Pop Out Social Media Follow Buttons Bar to your Page Template in Divi

Last Updated on September 16, 2022 by 7 Comments

How to Design a Pop Out Social Media Follow Buttons Bar to your Page Template in Divi
Blog / Divi Resources / How to Design a Pop Out Social Media Follow Buttons Bar to your Page Template in Divi

Social Media Follow buttons continue to be a popular addition to any website. Companies and individuals use these links to redirect users to their social media pages in hopes that visitors will follow them or subscribe to their channel. Normally, you see these buttons in a contact page, sidebar or at the footer of a website.

In this tutorial, we are going to show you how to design a pop out social media follow buttons bar to a page template in Divi. This will give those social media follow buttons greater visibility on your site without being a distraction. Plus, with Divi’s Theme Builder, you create a page template that includes these buttons for any (or all) pages through your site with ease.

Let’s jump in and get started!

Sneak Peek

Here is a quick look at the social media follow buttons create in this tutorial.

social media follow buttons bar

social media follow buttons bar

social media follow buttons bar

Download the Pop Out Social Media Follow Buttons Bar Page Template for FREE

To lay your hands on the Social Media Follow Buttons Bar Page Template from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youíre already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the layout to your page, simply extract the zip file and add one of the json files into the Divi Theme Builder using the Theme Builder Portability option.

Let’s get to the tutorial shall we?

What You Need to Get Started

To get started, you will need to install and activate the Divi Theme. Make sure you have the latest version of Divi.

You will also need at least one page created with the Divi Builder for testing purposes in order to assign the new template to that page to show the result.

After that, you are ready to go.

Creating a Pop Out Social Media Follow Buttons Bar for a Page Template in Divi

Creating a New Template

From the WordPress Dashboard, navigate to Divi > Theme Builder. Then click the “Add New Template” box to create a new template.

social media follow buttons bar

Assign the template to the page(s) you want the promo bar to be displayed.

social media follow buttons bar

On the new template, click the “Add Custom Body” area then select “Build Custom Body”.

social media follow buttons bar

Then select the option “Build From Scratch”.

social media follow buttons bar

Creating the Social Media Follow Buttons Bar

Create New Row

For starters, let’s add a one-column row to the template.

social media follow buttons bar

Add Social Media Follow Buttons Module

In the one-column row, add a social media follow module.

social media follow buttons bar

Add Social Networks

Under the social media follow settings, add all the social networks  you would like displayed. To add a new network, click the Add New Social Network gray plus icon then select the network from the list.

social media follow buttons bar

social media follow buttons bar

You will also need to add the link URL for the social media page you want to redirect the visitors to. To do this, click the settings icon on the social media network and update the Account Link URL.

social media follow buttons bar

Add Button Module

After you finished the social media follow module networks, we are ready to add a button module. This button will be what the user hovers over in order reveal the pop out bar. Go ahead and add the button module then drag it above the social media follow module.

social media follow buttons bar

Button Content

Next update the Button content as follows:

  • Button Text: Follow
  • Button Link URL: #

social media follow buttons bar

Button Styles and Positioning

Then update the button design settings as follows:

  • Button Text Size: 16px
  • Button Text Color:
  • Button Border Width: 0px
  • Button Letter Spacing: 1px
  • Button Font: Montserrat
  • Button font Weight: Bold
  • Button Icon: right arrow (see screenshot)
  • Margin: 100% left
  • Padding: 100px bottom

Then add the following Custom CSS to the Main Element:

position: absolute;

social media follow buttons bar

Row Settings

Once the button is styled and ready to go, update the row settings as follows:

  • Background Color: #ffffff
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 64px
  • Padding: 24px top, 16px bottom, 16px left

social media follow buttons bar

Row Box Shadow
  • Box Shadow: see screenshot
  • Box Shadow Blur Strength: 0px
  • Box Shadow Blur Strength: 30px
  • Shadow Color (desktop): transparent
  • Shadow Color (hover): rgba(0,0,0,0.2)

social media follow buttons bar

Row Positioning

Then add the following custom CSS to the row Main Element:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

This will position the row in a fixed position one third of the way down from the top of the browser.

social media follow buttons bar

Pop Out on Hover Effect With Custom Margins

Now add the following margin values to add the pop out on hover functionality.

  • Margin (desktop): -64px left
  • Margin (hover): 0px left

social media follow buttons bar

social media follow buttons bar

That takes care of the social media follow buttons bar. But we still need to finish the template by creating the necessary post content module.

Adding the Post Content Module to the Template

At this point the social media follow buttons bar is ready to go. But since this is a template, we need to make sure and add the post content module to display the content of the page(s) using this template.

Add New Row with Post Content Module

Under the row containing your social media follow buttons bar, add a new one-column row.

social media follow buttons bar

Then add the Post Content Module to the Row.

social media follow buttons bar

Currently, the post content module will be limited to the default width of the parent row. We need to change the row’s width and padding so that it will span the full width of the browser without any gaps. This is important because the post content module determines the area you have to build a page using the Divi Builder.

Update the following:

  • Width: 100%
  • Max Width: 100%
  • Padding: 0px top, 0px bottom

social media follow buttons bar

Now update the Section settings as follows:

  • Padding: 0px top, 0px bottom

social media follow buttons bar

That about does it. Now make sure and save the layout before exiting the editor. Then save the changes for the theme builder too.

social media follow buttons bar

Final Result

To see the final results, visit the page that has the template assigned to it. Here is what the pop out social media follow buttons bar will look like.

social media follow buttons bar

social media follow buttons bar

social media follow buttons bar

Final Thoughts

This social media follow buttons bar will definitely help bring those important social networks to the forefront. The pop out functionality will make sure the icons won’t be a distraction for users.  And you can add the bar to any page template using the Theme Builder. Hope this will be a great addition to your next project!

I look forward to hearing from you in the comments.

Cheers!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Construction (Quick Install)

New Starter Site for Construction (Quick Install)

Posted on October 29, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 2

Divi 5 Update: Public Alpha Version 2

Posted on October 28, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 2 today. We have...

View Full Post
Divi Plugin Highlight: DiviFlash

Divi Plugin Highlight: DiviFlash

Posted on October 27, 2024 in Divi Resources

DiviFlash, a powerful premium plugin, offers a suite of tools to help you easily create beautiful, professional Divi websites. From advanced modules and layout packs to customizable sections and more, DiviFlash lets you design websites that captivate and engage your audience. In this post,...

View Full Post

7 Comments

  1. this article helps to create a pop out buttons…its very useful and informative

  2. Thank you for your clear article. This is very informative and interesting.

  3. All the contents are very interesting and helpful. Thumbs up

  4. Nice tips, I never knew of some of these before. Thanks

  5. Great guide, it’s important to maximise each landing page and this plugin certainly helps.

  6. Thanks for sharing nice article it’s really helpful to me to design popup social media icons, i am paid customer of Divi Theme it’s amazing theme in wordpress it saves my time and energy to code in HTML it’s very easy to customize…

    with divi theme i made almost 30+ website now in live….

    I thanks to Divi Team…

    • That’s awesome!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today