(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

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 Divi Daily email list 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.

Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

 

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!

The post How to Design a Pop Out Social Media Follow Buttons Bar to your Page Template in Divi appeared first on Elegant Themes Blog.

Recent Posts

  • Busting the Biggest WordPress Myths

    Busting the Biggest WordPress Myths

  • You’re Not Too Small for a Great Website

    You’re Not Too Small for a Great Website

  • Top Web Design Trends to Watch in 2025

    Top Web Design Trends to Watch in 2025

  • Lock Down Your Site: WordPress Security Made Easy

    Lock Down Your Site: WordPress Security Made Easy

  • Is It Time to Redesign Your Website?

    Is It Time to Redesign Your Website?

  • Don’t Ignore These Website Pages

    Don’t Ignore These Website Pages

  • AI Tools in Web Design: Hype vs. Real Help

    AI Tools in Web Design: Hype vs. Real Help

  • How to Make Your Website Feel Brand New Again

    How to Make Your Website Feel Brand New Again

  • No Leads? Here’s Why (And How to Fix It)

    No Leads? Here’s Why (And How to Fix It)

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.