How to Easily Add Vertical Social Media Buttons to Your Web Page in Divi

Last Updated on September 20, 2022 by 9 Comments

How to Easily Add Vertical Social Media Buttons to Your Web Page in Divi
Blog / Divi Resources / How to Easily Add Vertical Social Media Buttons to Your Web Page in Divi
Play Button

Social media buttons have become a standard component of a website due to the huge rise of social media. And with Divi, you can easily add those social media buttons using the social media follow module. However, by default, the buttons will align horizontally. This is perfect for most sites. But if you are looking for a vertical layout of your icons, you can easily do this with a few simple adjustments to the module.

In this tutorial, I’m going to show you a quick and easy way to create vertical social media buttons to any part of your web page with Divi.

Let’s get started.

Sneak Peek

Here is a sneak peek of the design we will be building.

vertical social sharing buttons

vertical social sharing buttons

vertical social sharing buttons

Getting Started

Subscribe To Our Youtube Channel

To get things started, create a new page and give your page a title. Then deploy the Divi Builder and select β€œChoose a Premade Layout”. From the load from library popup, open the Wedding Planner Layout Pack and select to use the Wedding Planner Homepage Layout.

vertical social sharing buttons

Now you are ready to start building.

Adding Vertical Social Media Buttons to A Column

Examining the layout, you can see that the top section includes a fullwidth two column row. In the first column, there is an invisible divider module with a column background image. In the second column there is a text module and a button module in the right column. For this example we want to add vertical social media buttons to the top left of the row. To do this, add a Social Media Follow module under the divider in column 1.

vertical social sharing buttons

Then drag the social media follow module above the divider module so that it sits at the very top of column 1.

After that, open the social media follow settings. Add new social networks by clicking the plus icon under the content tab and then selecting a social network for the new button. You will eventually need to add the account link url for each button as well so that your links actually redirect to their respective social media pages.

vertical social sharing buttons

For this example, I added social networks for Facebook, Twitter, Pinterest, and Instagram.

vertical social sharing buttons

Styling the Social Media Follow Module

Now let’s jump over to the design tab and update the following:

Background Color: rgba(203,185,168,0.64)
Width: 64px (the sum of the width of an icon plus the left and right padding)
Custom Margin (desktop): -3vw top
Custom Margin (tablet): 30px
Custom Padding: 16px top, 16px bottom, 16px left, 16px right

vertical social sharing buttons

Adjusting the width of the module to stack the icons vertically

To make the social media buttons stack vertically, we adjusted the size of our social media follow module to force the buttons to stack on top of each other. In order to determine the width of your social media follow vertical display, you need to calculate the sum of the width of an icon (32px) and the left and right padding (16px + 16px = 32px). Therefore in this case, the total width of our social media follow module needs to be 64px.

vertical social sharing buttons

To finish off the design, update the background color of each individual social network button with the following:

Background Color: #333333

vertical social sharing buttons

Now let’s take a look at the final result.

vertical social sharing buttons

Positioning the Social Media Icons at the Top of Your Page

If you want to gain more control over the positioning of your vertical social media buttons at the top of your page, you can add a new row at the top of the section and add your social media follow module to the row. Then you can easily set the alignment of the module to left, center, or right.

Here is how to do it.

Create a new one-column row and drag it to the top of the section so that it sits at the very top of the page. Then drag your social media follow module into the new row.

vertical social sharing buttons

Open the settings for the new row and update the following:

Custom Width: 100%
Custom Padding: 0px top, 0px bottom

Then go to the advanced tab and enter the following custom CSS to the Main Element:

z-index: 10;

This css will allow the content of the column (the social media follow module) to remain visible once we set the negative margin to overlap the content below it.

vertical social sharing buttons

Now open the social media follow settings and update the following:

Custom Padding: -140px

With our β€œz-index: 10” css in place, the module is able to overlap the content of the row below it without being hidden.

With this setup, you can now adjust the alignment of the module to display your vertical social media buttons on the left, center, or right of the top of the page.

vertical social sharing buttons

Here is what the final design looks like with the module centered.

vertical social sharing buttons

vertical social sharing buttons

Here is what the final design looks like with the module right aligned.

vertical social sharing buttons

vertical social sharing buttons

Fixed or Static Positioning

If you are looking to give your vertical social media buttons a fixed (or static) position on your page, please check out of tutorial on how to make any Divi page element sticky.

Final Thoughts

Even though Divi’s Social Media Follow module displays buttons horizontally by default, all it takes is a simple adjustment of the width of the module to create a beautiful vertical display of your social media buttons. And, using the power of Divi’s built-in design options, you can style and position your vertical media buttons anywhere you want. I hope this helps you create a fresh new design element for your next project.

I look forward to hearing from you in the comments.

Cheers!

Divi Black-friday Sale

It's The Divi Black Friday Sale! Save Big For A Limited Time πŸ‘‡

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

Access The Sale
Divi Black-friday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 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

9 Comments

  1. Hi, thanks for this suggestions. But this is not clear:

    “Now open the social media follow settings and update the following:
    Custom Padding: -140px”

    Which parameter of custom padding should be changed? It looks like the automatic setting are zeroing this value whenever one is trying to set it to -140.

    Thanks
    John

  2. This is indeed a worth reading article.
    Thanks for sharing.

  3. Hello,
    Thanks for this tutorial.
    You put at the end of the article a link to another article
    “how to make any divi page element sticky.”
    Could you also give the link to the aricle that proposes
    sticky elements, but with code to put in the head of the site?
    I had this address on your blog but unfortunately it does not arrive
    more at the same places.
    Thank you
    Deepl translate

  4. I.m going to taste looking also wath John Pierre says. The vertical social is beatiful

  5. What do I miss here?
    This is a post to add ‘sociale sharing’ buttons.
    And you use the ‘social media follow’ module.

    Sharing requires a different link then a follow link to a social media profile. Is such link even possible? And how do you get that link?

    Thanks
    JP

    • John-Pierre,

      That was an error on my part. I was using the wrong terminology. I updated the post. Sorry for the confusion.

    • Hahah, you’re right.
      Just use the Monarch plugin, it’ll take care of what you need
      Cheers!

  6. Damn this is cool. Didn’t know you could do it with just the Social Module.

    I’ve been using the Bloom plugin.

    DOPE

    Thanks for everything fam. Divi changed my life

  7. Nicely done – thanks Jason!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Black Friday Sale!
Get The Deal
Before It's Gone!
Join To Download Today