Overview

Welcome to the Design Settings documentation for the Divi Social Sharing Buttons module. In this guide, you will learn everything you need to know about the many design settings in the module and how they work.

We made it a goal to provide every design setting we could think of for you to easily customize and style the social sharing buttons. These settings include things like writing your own custom text, changing the icon and button size, colors, spacing, borders, box shadows, layout, columns, alignment, and so much more. These settings are mostly found in the module’s Design tab, but some are located throughout the other tabs. One thing to keep in mind is that the module contains main content and design tabs that affect all the buttons globally in the module, but then each individual network also contains those inner tabs as well, which can be used to override any of the global settings for each button.

As you set up and use the module, I highly recommend you also reference our document, which lists all the settings and features included in this module. You should also check out the demos to get some inspiration on the different layouts and styling options!

Global Design Options

The global design options are those you see in the main Design tab of the Divi Social Sharing Buttons module. We are referring to these as “global”  because they affect the design of all the buttons at once. There are also settings within each of the individual networks, which can be used to override the global design settings.

Layout

The layout settings are in the Design tab, but it’s difficult to classify those. They are certainly related to design, but we have a separate document about the Layout Settings that you should review. They are very important, and it would be great to be familiar with them.

Icon

There are many settings you can use to customize the social media network icon. You can change the color, increase or decrease the size, change the background color, add a border, adjust the border styles, width, color, and border radius, or add a box shadow.

Title Text

You can customize and style the module title text with all the normal font and text settings that you come to expect from Divi modules. This includes things like changing the font, font weight, font style, text color, text size, letter spacing, line height, and text shadow.

Button Text

The share text on the buttons can also be styled and customized with all the normal font and text settings that you come to expect from Divi modules. This includes things like changing the font, font weight, font style, text color, text size, letter spacing, line height, and text shadow.

Borders

There are plenty of settings to customize the social sharing button borders. This includes settings you would normally expect from a Divi module such as changing the border radius, border width, border color, and border styles.

Spacing

We have added several custom settings related to spacing around the icons and buttons. These settings include spacing around the icon, between the buttons, below the buttons, etc. 

Other Settings

There are also all the standard Divi module settings that are not custom to our module, but that still applies. This includes all the other settings in the Design and Advanced tabs. 

Individual Network Design Options

Individual network design options are those that you see when you click to open the settings of one of the individual networks inside the main Content tab. Opening up a network is like a “child” module with its own Content, Design, and Advanced tabs.

These design options are known as individual network options because making any change here essentially overrides any global design choice that you make in the main module design settings. So this is a way to customize each button uniquely.

We will not list all the settings here again because they are the same as the main global settings.