Welcome to Day 19 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


From content modules and advanced design settings, to pre-made layouts and powerful customization options with live previews, Divi is an incredibly versatile theme. You can design your site to look as unique as you want when you’re using Divi, right down to the nitty gritty details – including your social sharing and following icons.

In fact, there’s no need to install any of the other popular social plugins gracing the thousands of other WordPress sites. Divi has you covered; especially if you don’t mind getting your hands a little dirty with some simple code.

Below, you’ll discover how you can enable extra social media icons in Divi’s theme options, how to use the Divi Builder to insert social media icons anywhere on a page or post, and lastly, how to add more social icons to Divi using a little PHP.

Let’s dive right into it!

How to Easily Enable Extra Social Media Icons in Divi’s Footer

The simplest way to add more social media icons to your Divi site involves accessing the Theme Options panel, enabling the options for Facebook, Twitter, Google+, and RSS, then entering your profile URLs into the fields. When you do this, you’ll see them show up as icon links in the footer of your site:

Divi footer social buttons

In your WordPress dashboard menu, hover your cursor over the Divi option, then click on Theme Options. Scroll down just past the AWeber Authorization field to the social icon icons.

You’ll see several buttons that are enabled or disabled already. The last four buttons can be used to enable the Facebook, Twitter, Google+, or RSS icons in your site’s footer. You have the flexibility to enable just one, two, three, or all four of them:

Divi social media theme options.

If you decide to enable these social media icons, remember to scroll down and put your profile URLs in the appropriate fields. If you forget this step, the icons will show up in your footer, but links won’t open if clicked:

Divi social media link theme options.

Scroll all the way down to the end of your theme options and click Save. Now you can check out your site’s footer and click on the social icons to test them out!

How to Use the Divi Builder to Add Social Media Follow Modules in Page or Post Content

Sometimes, putting extra social media icons between blocks of text, images, or other content in the body of pages or posts can make a lot of sense. Your About Us page, for example, would be a good page for adding extra social icons to help inform visitors about how to connect with you, and they’ll certainly stand out more than simply linking to your social profiles using regular text.

The amazing Divi Builder tool makes it easy for you to insert social media icons into your pages or posts. It enables you to build your page or post using over 40 drag-and-drop modules – one of which is the Social Media Follow module.

Any time you create or open up an existing page or post in your WordPress dashboard while using Divi, you’ll see a large purple button beneath the title field labeled Use The Divi Builder:

Use the Divi Builder button

If you have any existing content in the default WordPress editor, you’ll have to transfer it to the Divi Builder to keep using it. However, if you’re creating a new page or post for the first time, you can simply click Use The Divi Builder to start building your page or post from scratch.

You can use the tool to design your page or post however you like using rows, columns, and any of the 40 available modules. If this is your first time using the Divi Builder, you may want to check out this overview first to get a clear understanding of how it works.

When you’re ready to add social media icons to your page, click on Insert Module(s) in the section you’d like your social media icons to show up:

Divi Builder Insert Modules

A list of module options will display; you can scroll down toward the bottom to select the Social Media Follow module:

Divi social media follow module.

You’ll be asked to choose the social networks you want before you can start customizing them, so click Add New Social Network to select one from the drop-down list, add your profile URL, and optionally, select a specific color for its icon:

Divi add new social network

Divi select a network

Once you’ve added your first social network, you can continue to add further networks by following the same instructions. They’ll all be listed under your General Settings, which you can edit, copy, or rearrange by dragging them around and dropping them in place:

Divi social Facebook Twitter LinkedIn

Once you’ve added your social networks, continue onto the General Settings tab to play around with some further customization options. You can change the link shape, text color, the way the page opens, and the option to include a Follow button for all of your icons:

Divi social icon customization

When you’re all done, click Save & Add To Library, or Save & Exit. You can then save and preview your page or post to see how your new social following icons look on your site.

Adding More Social Media Icons to Divi

So, now we know how to use the default Divi settings to add social media icons to our footer, and how to use the Social Media Follow module to place them anywhere else on our pages. However, what if you wish to mix things up and include some options not available in the Divi Theme Options panel to your footer? If you’ve explored the Social Media Follow module, you’ll be aware that Divi ships with 15 social media icons, and with a little bit of code, you can include any of these into your footer.

Divi’s style.css file, located in its top level folder, shows us exactly how many social media icon possibilities the theme includes by default:

.et-social-facebook a.icon:before { content: 'e093'; }
.et-social-twitter a.icon:before { content: 'e094'; }
.et-social-google-plus a.icon:before { content: 'e096'; }
.et-social-pinterest a.icon:before { content: 'e095'; }
.et-social-linkedin a.icon:before { content: 'e09d'; }
.et-social-tumblr a.icon:before { content: 'e097'; }
.et-social-instagram a.icon:before { content: 'e09a'; }
.et-social-skype a.icon:before { content: 'e0a2'; }
.et-social-flikr a.icon:before { content: 'e0a6'; }
.et-social-myspace a.icon:before { content: 'e0a1'; }
.et-social-dribbble a.icon:before { content: 'e09b'; }
.et-social-youtube a.icon:before { content: 'e0a3'; }
.et-social-vimeo a.icon:before { content: 'e09c'; }
.et-social-rss a.icon:before { content: 'e09e'; }

The Divi Theme Options panel only includes options for Facebook, Twitter, Google+, and RSS in order not to clutter things up. However, depending on the focus of your site, you might use an entirely different set of social media platforms. Your content strategy may focus around videos, in which case you’d naturally want to include a link to your YouTube channel in your site’s footer, for example. There’s even a Myspace icon thrown into the mix.

In order to make this happen, all you need to do is head over to your Divi theme’s folder and into the includes folder, where you’ll find a file named social_icons.php. Open it up, and you’ll be greeted by an unordered list class named et-social-icons. Within, you’ll find the code for the four existing social media icons. The code for each looks like this:

    

In order to include a new social media icon into this group, we need to create a new item within this list. The code looks like this:

  • There are three key elements that need to be set properly in order for this code to work. The first is the et-social-icon et-social-myspace class, where we replace myspace with one of the social media icons from the full list found above. Secondly, we replace the…

    <a href="" class="icon">

    …section included in the Facebook example shown earlier. This line of code is used to fetch a URL typed in its corresponding section on the Divi Theme Options panel. In our case we’ll simply type the URL into the code overselves, since there isn’t a section in the panel for additional social media platforms. Finally, we state the name of the social media platform we’re adding within the span tags…

    …and save the changes to social_icons.php. If you check out your website now, your brand new Myspace icon will greet you from your footer:

    Divi's footer modified to add a MySpace icon.

    Conclusion

    When you have Divi’s default footer options, the Divi Builder tool, and a little easily implemented code, there’s no reason you’ll need to install a plugin to add social media icons to your Divi-powered website. Divi gives you full control over how your social icons look and where they show up. To recap:

    1. Access the Theme Options panel to enable any default social media icons on your site.
    2. Use the Divi Builder to add the Social Media Follow module to your posts or pages.
    3. Delve into your Divi PHP files to add further social media icons to your website.

    Do you see benefits by having a multitude of social media options available on your site? Let us know by subscribing and becoming part of the conversation via the comments section below!

    Article thumbnail image by VKA / shutterstock.com

    divi-2-6-logo

    Divi 100 Day 19

    The Countdown To Divi 3.0

    This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
    Let the countdown begin.

    jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

    .section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

    The post How to Add More Social Media Icons to Divi appeared first on Elegant Themes Blog.

    View @ ElegantThemes

    Leave a Reply