Having a strong social media presence is the most important for the nice fortune of any website. Your target market needs to connect with you on their favorite platforms. One method to make it easy for them is to provide social media links on your website. Fortunately, this is easy to do with Divi. In this article, we’ll see how you can add social icons to the Divi footer.

Let’s get started.

Preview of the Divi Footer with Social Icons

Proper right here’s a check out how my footer will look on desktop and cellular.

Desktop Preview

Proper right here’s how the layout will look on the desktop with the new social icons throughout the Divi footer.

Mobile Preview

Proper right here’s how the layout will look on cellular with the new social icons throughout the Divi footer.

Download a Free Footer Template

First, we’ll want a footer template. Elegant Subjects provides a large number of loose header and footer templates that are compatible the templates which may well be available in Divi. The ones templates are pre-styled and are loose to acquire. You’ll to seek out loose footer templates throughout the Elegant Subjects blog. Search for “loose footer”.

Loads of them already include social icons throughout the footer. For this instructional, I’ve decided on a footer that doesn’t include them. I’m the use of the free footer template for Divi’s NGO Layout Pack.

Download your loose footer template and unzip it. You’ll most effective need to upload the JSON document.

Realize – Social icons may also be added to any template you already have. For this instructional, I will upload a brand spanking new template. The process of together with the social icons is the same.

Use the Divi Theme Builder

For this instructional, we’re the use of the Divi Theme Builder. This is the most well liked method to create custom designed Divi footers. You’ll create a few designs and observe them to every internet web page or specific pages. To get right to use the Divi Theme Builder, go to Divi > Theme Builder throughout the WordPress dashboard.

Upload the Footer Template

So as to add the footer template, make a choice the Portability icon throughout the upper right kind corner. A modal will open. Decided on Import and click on on Select File. Navigate to the JSON document on your computer and make a choice it. Click on on Import Divi Theme Builder Templates at the bottom of the modal. Stay up for the upload to complete.

You’ll now have a global header and footer template. Delete the header template in the event you don’t need to use it. Click on on Save Changes. You’re now ready so to upload social icons on your Divi footer.

Add Social Icons to the Footer

Next, you’ll need to open the template to make your edits. Each make a choice the edit icon on the left of the International Footer (the pencil icon) or click on at the 3 dots at the right kind and click on on Edit all the way through the selections.

Next, make a selection where throughout the footer you need to place the social icons. I will add them to the empty spot underneath Campaigns. I will moreover add a reputation and divider and magnificence the icons to check the layout.

First, we’ll want a title that matches the rest of the elements throughout the footer. Clone the title inside of the home above it and drag it to the world you need to place the social icons.

Next, open your new text module and change the text from Campaigns to Practice Us.

Next, clone the Divider module underneath the Campaigns title and drag it underneath your new Practice Us title.

Your footer template will now seem to be the one throughout the example above. Now all you need is so to upload a Social Media Practice module.

With the intention to upload the module, click on on on the plus icon throughout the location you need so to upload it. Scroll down or search for Social Media Practice and click on on on the module to insert it.

Together with Further Social Icons

Whilst you add the module from the Divi Builder, it’s going to open and show you the default icons. You’ll have two possible choices for moving forward.

The first selection – you’ll be capable of click on on Add New Social Group so to upload every icon. That you simply should then use their default styling or style one icon and then reflect that styling to the rest of the icons.

The 2nd selection – you’ll be capable of delete the second icon, style the main one, clone it for every icon you need so to upload and change them to the neighborhood you need.

The method you choose doesn’t matter. The art work is in large part the identical. I like to see all of the icons in place, so I’ll use the main selection.

Add Your Social Networks

Clicking Add New Social Group opens the Social Group Settings. Click on on on the dropdown box underneath Group and make a selection the neighborhood you need so to upload. Enter the URL on your internet web page for the Account Link URL. Click on at the green check out icon to close the settings.

Continue this process until you’ve added all your social networks. Next, we need to style them to check the rest of the footer.

Style Your Social Icons to Are compatible Your Construction

This footer in my template has a large number of green and orange. The button is rounded on the edges and the other icons have a circle at the back of them. Text on the green backgrounds is white. I’ll use the ones as design queues when styling the social media icons.

First, open the settings for the title. Transfer to the Design tab and add 20px of top padding. Now we’ve were given some area between Campaigns and Practice Us. Close the module.

• Highest Padding = 20px

Next, open the Social Media Practice module. Select the Design tab and make a choice Middle Align underneath Alignment.

• Module Alignment = Middle

Select the Content material subject matter tab. Select a social neighborhood to style and click on at the gear to open its settings.

Scroll all of the method right down to the Background possible choices and enter the amount #347362. This provides the icon a green background that matches the CTA throughout the footer and looks great in opposition to the tan background.

• Background = #347362

Select the Design tab. Beneath Icon, permit Use Custom designed Icon Dimension. Set the Icon Font Dimension to 24px

• Icon Font Dimension = 24px

Next, scroll all of the method right down to Border. Adjust the Rounded Corners to 24px. Click on at the golfing inexperienced check out to close the settings and return to the module’s settings.

• Rounded Corners = 24px

Correct-click on the social neighborhood you styled and make a choice Lengthen Products Sorts.

Select how far you need to extend the kinds to (this internet web page, this column, and plenty of others.) and click on on Lengthen.

The styling is now extended to the rest of the social media icons. You’ll now save the internet web page and pass out.

Divi Footer Social Icons Results

Listed here are the results for every desktop and cellular.

Desktop Results

Proper right here’s how the layout turns out on the desktop with the new social icons throughout the Divi footer.

Mobile Results

Proper right here’s how the layout turns out on cellular with the new social icons throughout the Divi footer.

Completing Concepts

That’s our check out how you can add social icons to the Divi footer. Divi’s Social Media Practice module is excellent for this. The Divi Theme Builder’s international footer templates make it easy so to upload them on your footer. With only a few steps, you’ll be capable of add social icons to the Divi footer with ease and magnificence them to check your website.

We need to concentrate from you. Have you ever ever added social icons to the Divi footer with the Theme Builder? Let us know throughout the comments beneath.

The post How to Add Social Icons to the Divi Footer appeared first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more