Having a robust social media presence is an important for the luck of any web page. Your target audience needs to connect to you on their favourite platforms. One technique to make it simple for them is to supply social media hyperlinks to your web page. Thankfully, that is simple to do with Divi. On this article, we’ll see easy methods to upload social icons to the Divi footer.

Let’s get began.

Preview of the Divi Footer with Social Icons

Right here’s a have a look at how my footer will glance on desktop and cellular.

Desktop Preview

Right here’s how the format will glance at the desktop with the brand new social icons within the Divi footer.

Cellular Preview

Right here’s how the format will glance on cellular with the brand new social icons within the Divi footer.

Obtain a Loose Footer Template

First, we’ll desire a footer template. Sublime Subject matters supplies a whole lot of unfastened header and footer templates that fit the templates which might be to be had in Divi. Those templates are pre-styled and are unfastened to obtain. You’ll to find unfastened footer templates within the Sublime Subject matters weblog. Seek for “unfastened footer”.

Lots of them already come with social icons within the footer. For this instructional, I’ve selected a footer that doesn’t come with them. I’m the use of the free footer template for Divi’s NGO Layout Pack.

Obtain your unfastened footer template and unzip it. You’ll simplest wish to add the JSON report.

Word – Social icons can also be added to any template you have already got. For this instructional, I can add a brand new template. The method of including the social icons is identical.

Use the Divi Theme Builder

For this instructional, we’re the use of the Divi Theme Builder. That is the most well liked technique to create customized Divi footers. You’ll create more than one designs and observe them to each and every web page or explicit pages. To get entry to the Divi Theme Builder, cross to Divi > Theme Builder within the WordPress dashboard.

Add the Footer Template

To add the footer template, make a selection the Portability icon within the higher proper nook. A modal will open. Selected Import and click on Make a selection Document. Navigate to the JSON report to your laptop and make a selection it. Click on Import Divi Theme Builder Templates on the backside of the modal. Watch for the add to finish.

You’ll now have an international header and footer template. Delete the header template in the event you don’t wish to use it. Click on Save Adjustments. You’re now able so as to add social icons in your Divi footer.

Upload Social Icons to the Footer

Subsequent, you’ll wish to open the template to make your edits. Both make a selection the edit icon at the left of the World Footer (the pencil icon) or click on the 3 dots at the proper and click on Edit throughout the choices.

Subsequent, select the place within the footer you need to put the social icons. I can upload them to the empty spot beneath Campaigns. I can additionally upload a identify and divider and magnificence the icons to check the format.

First, we’ll desire a identify that fits the remainder of the weather within the footer. Clone the identify within the house above it and drag it to the world you need to put the social icons.

Subsequent, open your new textual content module and alter the textual content from Campaigns to Practice Us.

Subsequent, clone the Divider module beneath the Campaigns identify and drag it beneath your new Practice Us identify.

Your footer template will now appear to be the only within the instance above. Now all you wish to have is so as to add a Social Media Practice module.

So as to add the module, click on at the plus icon within the location you need so as to add it. Scroll down or seek for Social Media Practice and click on at the module to insert it.

Including Extra Social Icons

Whenever you upload the module from the Divi Builder, it’ll open and display you the default icons. You’ll have two choices for transferring ahead.

The first choice – you’ll click on Upload New Social Community so as to add each and every icon. You want to then use their default styling or taste one icon after which replicate that styling to the remainder of the icons.

The 2d choice – you’ll delete the second one icon, taste the primary one, clone it for each and every icon you need so as to add and alter them to the community you need.

The process you select doesn’t topic. The paintings is largely the similar. I love to peer all of the icons in position, so I’ll use the primary choice.

Upload Your Social Networks

Clicking Upload New Social Community opens the Social Community Settings. Click on at the dropdown field beneath Community and select the community you need so as to add. Input the URL in your web page for the Account Hyperlink URL. Click on the inexperienced test icon to near the settings.

Proceed this procedure till you’ve added your whole social networks. Subsequent, we wish to taste them to check the remainder of the footer.

Taste Your Social Icons to Fit Your Format

This footer in my template has a whole lot of inexperienced and orange. The button is rounded at the edges and the opposite icons have a circle in the back of them. Textual content at the inexperienced backgrounds is white. I’ll use those as design queues when styling the social media icons.

First, open the settings for the identify. Move to the Design tab and upload 20px of best padding. Now we have now some area between Campaigns and Practice Us. Shut the module.

• Best Padding = 20px

Subsequent, open the Social Media Practice module. Make a choice the Design tab and make a selection Middle Align beneath Alignment.

• Module Alignment = Middle

Make a choice the Content material tab. Make a selection a social community to taste and click on the tools to open its settings.

Scroll all the way down to the Background choices and input the quantity #347362. This offers the icon a inexperienced background that fits the CTA within the footer and appears nice towards the tan background.

• Background = #347362

Make a choice the Design tab. Below Icon, allow Use Customized Icon Measurement. Set the Icon Font Measurement to 24px

• Icon Font Measurement = 24px

Subsequent, scroll all the way down to Border. Regulate the Rounded Corners to 24px. Click on the fairway test to near the settings and go back to the module’s settings.

• Rounded Corners = 24px

Proper-click at the social community you styled and make a selection Lengthen Merchandise Types.

Make a choice how some distance you need to increase the kinds to (this web page, this column, and many others.) and click on Lengthen.

The styling is now prolonged to the remainder of the social media icons. You’ll now save the web page and go out.

Divi Footer Social Icons Effects

Listed here are the consequences for each desktop and cellular.

Desktop Effects

Right here’s how the format seems at the desktop with the brand new social icons within the Divi footer.

Cellular Effects

Right here’s how the format seems on cellular with the brand new social icons within the Divi footer.

Finishing Ideas

That’s our have a look at easy methods to upload social icons to the Divi footer. Divi’s Social Media Practice module is excellent for this. The Divi Theme Builder’s world footer templates make it simple so as to add them in your footer. With only a few steps, you’ll upload social icons to the Divi footer comfortably and magnificence them to check your web page.

We wish to pay attention from you. Have you ever added social icons to the Divi footer with the Theme Builder? Tell us within the feedback underneath.

The put up How to Add Social Icons to the Divi Footer gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more