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 Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Posted on March 18, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post
Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack that’ll help you get your next Art Therapist...

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.

👋 It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today