How To Use The Module

Video

Welcome to the overview video for the Divi Social Sharing Buttons module. In this video I’m going to walk you through how to add the module to your layout, show you the many layouts, settings, and features that it has, and talk about some tips on how to use it and ways you can set it up on your pages, posts, and templates.

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!

1. Decide Where To Put The Module

The best part about the Divi Social Sharing Buttons is the versatility. You can place it anywhere just like any other Divi module, and style it however you want. Where you place the module depends on what type of website structure you have and what content needs to be shared. Here are two ideas for where you could use the module on your Divi website.

Add Directly To The Page Or Post

One option is to add the Divi Social Sharing Buttons module directly to a page or post. This would be fine if you only want the sharing buttons to be shown on a few pages at a specific location. Obviously this is totally up to you, but we suggest considering the Divi Theme Builder option below.

Add To A Theme Builder Template

Adding the Divi Social Sharing Buttons module to a Divi Theme Builder template makes a lot of sense. This allows you to set the module up once, and then have it apply globally all at once to any footer, page, post, or post type. This allows you to set up and design the buttons once, saving you time and effort.

• A good example of when to use the sharing buttons with the Divi Theme Builder is on blog post template. You could place the module at the top or bottom of the template, allowing the user to share the post at the beginning or after reading the post.
• This would also work very well for WooCommerce products, adding the module on the produt page template.
• Or you could place this on single event pages using our Divi Events Calendar plugin! Of course we think this is a great idea 😉
• And don’t forget you can place the Divi Social Sharing Buttons module on any other page or post type as well!
• You could put this in the website footer template as well to encourage users to share your website. It is totally up to you, and we hope you enjoy the versatily that our module offers.

2. Add The Module To Your Layout

Now that you have decided where to place the module, you can add it to your Divi Builder layout. Within the Divi Visual Builder layout, click the grey plus button to add a new module. The quickest way to find the module is to use the search bar and type “social.” You will then see our custom module which is named “Social Sharing Buttons.” Click on the module to add it to your layout.

3. Choose Which Networks To Show

The first thing you need to do when you add the module to your layout is to add the social networks that you want to show. There are several considerations to keep in mind when you do this. Try to think about which networks your website visitors use. Also consider where you want your content to be shared. Obviously you can’t control either of those, but it is worth giving it some thought as you choose which networks to use.

Inside the Content tab of the module, you will see a plus button to add new networks. As you add new networks, they will appear here, and you could rearrange them as needed.

Once you click to add a new network or whenver you click the settings cog on an existing network, you can select a network from the dropdown menu.

4. Choose A Layout Option

After you configure the networks, the next important step is choosing which layout option you want to use to display the buttons. The module comes with four different button layout options.

5. Adjust The Design Settings

At this point, you can adjust any design setting in the module. This is all totally up to you, and there are hundreds of possibilities. We will go over some of the main things you may want to adjust to your design style.

Icon

• Set a color for the social network icon.
• Set a custom size for the social network icon.
• Set the background color for the social network icon.
• Add and customize the icon border with all the standard border settings.
• Add and customize the icon box shadow with all the standard box shadow settings.

Share Text

• Enter custom text for each share button.
• Customize and style the button share text with all the standard font and text settings.

Borders

•  Customize and style the buttons with all the standard border settings.

Spacing

• Adjust the inner spacing of the icons.
• Adjust the spacing between the individual buttons.
• Adjust the spacing below the individual buttons.
• Adjust the inner spacing of the buttons.