It’s nearly not possible to run a a hit web site with no need a devoted social media presence. Whether or not you select that to be Instagram, Twitter, TikTok, Fb, or any mixture of the ones and anything, other people need to interact with you and your emblem at once. Ensuring that you’ve social icons in Divi’s number one menu is an effective way to funnel visitors out of your web site to the community of your selection. It’s rapid and simple, and we’re going to stroll you thru each step.

Let’s get began!



desktop version


mobile version

Use the Divi Theme Builder to Add a World Header Freebie

For this text, we’re going to be the use of the Tennis Membership structure pack and header/footer freebie. You’ll be able to obtain the structure pack from inside of your Divi builder, and the header/footer pack from our blog. Whilst you obtain it, the information shall be as a .zip archive. Just be sure you extract them so that you’ve a .json record to add into Divi.

Divi Social Icons JSON

Now, pass into your WordPress dashboard and in finding the Divi Theme Builder below Divi – Theme Builder. Click on at the up-and-down arrow icon within the upper-right nook of the web page. This opens the Portability modal, choose the Import tab, in finding the .json record for the header/footer you downloaded, and click on Import Divi Theme Builder Templates.

social icons portability

Then you need to pass into the header phase of your web site. As it’s social icons, we’re going to be hanging them within the World Header as a result of we determine they must be on all pages on  your web site (except specified in a different way).

theme builder

You must be throughout the builder now. In case you adopted the instructions above, the brand new header you uploaded must seem already in position.


Chances are you’ll understand there are already are social icons right here. The ones social icons aren’t within the Divi Number one Menu which is what we’re running towards these days, on the other hand. So let’s get into the weeds of it, lets?

Upload Social Icons to the Number one Menu Bar

Very first thing’s first, let’s alternate the row/column construction. We need to in finding the row in phase #2 (the ground one with the House/Touch hyperlinks).

row column structure

We’re settling on the two-column construction for this instructional, but it surely’s no matter works perfect in your web site. Whenever you’ve selected that, pass into the Row settings and navigate to the Design tab. To find the Sizing menu, and toggle Use Customized Gutter Width on. Set the Gutter Width price to one. You’ll be able to input the quantity or use the slider to try this.

row settings

Click on the golf green checkmark to save lots of your settings. Then pass again into the Row settings. This time, choose the settings tools for the highest/first/left column.

column settings

Subsequent, navigate to the Complicated tab. To find the Customized CSS space and click on into the Major Component box. Inside of this box, it would be best to upload the next CSS.




You could have so as to add the !important tag to taste this part. That’s ok. It shouldn’t create efficiency problems or spaghetti code to take care of as it’s a unmarried part.

css to the column

Then, pass into the Responsiveness settings and use the similar code to modify the width for the column again to 100% for cellular units.

mobile width

Subsequent, repeat this step for the second one column. Simplest this time, set the default price at 20% and also have the cellular price at 100%.

With that performed, save your adjustments and get able so as to add and elegance your social media icons.

Upload Social Media Practice Module

Click on the black + icon in Column 2 so as to add a brand new module and scroll till you in finding Social Media Practice. Insert it.

social media follow module

Irrespective of the header that you’re the use of, the default social media icons will perhaps no longer fit your taste. Nor will they situated appropriately. Your next step shall be to taste and house them appropriately. Within the Social Media Practice module settings, pass to Design after which Alignment. Select to the place you need the module positioned.

We’re opting for right-justified for desktop after which going into the Responsiveness choices and centering it.


Subsequent up is scrolling down into the Icon menu. Select the colour of the icon you need. That is the for Fb, the chicken for Twitter, the digicam for Instagram. This isn’t the blue background, for example.

icon color

Subsequent up is spacing. In reality the principle factor that wishes adjusted is the highest margin. We’re going to use a 1.5vw best margin in order that it facilities with the menu textual content. If you need it roughly for cellular, you’ll be able to alter that, too.

top margin

Now, click on at the Content material tab and pass into the person social community icon you need to customise. You’re going to repeat those steps for each and every icon you select in your web site.

social settings

Scroll right down to Background and choose the colour you need that fits your web site’s design. Once more, take note this will likely simplest alternate this actual icon’s background.

background icon

You may also need to alternate this actual icon’s colour. You’ll be able to achieve this below the Design tab and Icon phase, similar to within the general module itself. This surroundings will override the overall one, so that you don’t have to fret about interfering with others if you need one-off colours.

icon color

Then, scroll right down to the Border access below the Design tab and inside of it, you’ll in finding the Border Width. Set this price to 3px, after which choose a Border Colour that stands proud from the Divi Number one Menu’s background.

icon border

At this level, you’ll return to the Content material tab and repeat those steps for each and every social community icon you want to show. If you need each and every of the icons on this module to percentage the similar design, you’ll be able to merely right-click the only you designed and choose Reproduction Merchandise Types.

copy item styles

Subsequent, right-click the opposite networks you want to taste and choose Paste Merchandise Types.

paste item styles

And that’s it!  Make sure you click on the Save button within the lower-right nook of the display screen to save lots of the entire structure. Then, you’re secure to X out of the edit display screen within the upper-right nook.

save your work

Make certain that the Divi Theme Builder web page displays All Adjustments Stored within the upper-left. If no longer, click on Save Adjustments. As soon as performed, your web site shall be are living showing the social media icons on your Divi Number one Menu!

Ultimate Effects

And that is what your ultimate effects must resemble.


desktop version


mobile version

Wrapping Up

Ensuring that your target market can all the time in finding your number one social networks is a work of cake with Divi. In only a few steps, you’ll be able to alter one among our freebie header/footer packs to incorporate your social media icons into the main menu (or anywhere else it’s your decision them). Excellent good fortune!

What do you take into accounts social media icons in the main menu? The place do you have a tendency to position them?

The submit How to Add Social Icons to Divi’s Primary Menu seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]