There are a lot of tutorials about setting up footers using the Divi theme from Elegant Themes.  Unfortunately most of them are out of date and require child themes, plugins or other unfriendly ways to make a footer look the way you want.  Many people have asked Elegant Themes to make the footer editable within the theme.  With version 2.4 they did it (I’m using Divi 3.0.2 at the moment).  In this article I’ll explain how to  modify the footer within the Divi theme.

Three Parts

There are three parts to the footer – the Footer, the Footer Menu and the Footer Bottom Bar.  They can be styled differently if you want.  In my case, I want them all to look the same.  They are modified using the theme customizer found at:  Appearance > Customize > Footer via your WordPress administration menu.

Modifying the Footer

Layout

The first step in designing your footer is to decide how many columns you would like to have in it and how you would like them configured.  Divi offers ten options:

1. Four columns with 1/4 width each
2. Three Columns with 1/3 width each
3. Two columns with 1/2 width each
4. One column
5. Two columns with 1/4 and 3/4 widths
6. Two columns with 3/4 and 1/4 widths
7. Two columns with 1/3 and 2/3 widths
8. Two columns with 2/3 and 1/3 widths
9. Three columns with 1/4, 1/4 and 1/2 widths
10. Three columns with 1/2, 1/4 and 1/4 widths

There is a graphic dropdown menu so you can easily understand and select the one you want.

Next you select the background color for your footer.  There is a color picker dropdown so you can choose any color you wish.  If you are like me and have already developed the color palette for the website, you can just enter the hex code for the color of your choice.  In the case at hand I used a blue color (#0000cc).  When done, click “Save and Publish.”

Widgets

The really key thing about Divi footers is that the content of the columns you defined in the layout section are filled using widgets.  In my case I used three columns of 1/3 width each.  I will use widgets to fill them, but first,  we can use the customizer to provide the basic styles for our widgets.  The basic options are provided, and they work like other customizer options so I won’t describe them here.  Just remember that if you don’t think a particular footer will be styled the way you want,  each individual widget can be styled when it is created.  So,  complete the basic styling, “Save and Publish.”

Next,  let’s leave the customizer and go to Appearance > Widgets.  There, in the right hand column, you will find widget areas named  Footer Area #1 through #4.  In my case, with three footer column,  I’ll be using #1 through #3.  While you can use any widget you wish,  I am using a text widget for each column.  So,  drag the text widget from the left column over and drop it on Footer Area #1.

If you put plain text in the widget,  it will be styled  in accordance with the settings in the customizer.  The nice thing about text widgets is that you can use HTML.  Here is the text, with HTML I used in one of my text widgets:

OK,  I know the <p>&nbsp;</p> is tacky and would have been better done with styles, but the point is,  any HTML will work.  You can even change the background color, add padding and whatever you want to make your footer look unique.

Be sure you save each Footer Area widget and preview your page to see how the footer looks.

Footer Elements

Now, lets go back to Appearance > Customize > Footer and check out the Footer Elements.  This option lets you show your social media icons, or not.  The icons that are available to appear are set at Divi > Theme Options > General.  So, choose the icons you want to appear and provide the links there, then be sure the footer element is set to “Show Social Icons.”  The icons will appear in the Footer Bottom Bar, discussed below.

This is the only option under Footer Elements at the moment,  but it sure looks like the people at Elegant Themes have some others in mind.

Footer Menu

If you want to have a menu in your footer,  you first set it up at Appearance > Menus and attach it to the Footer.  It will appear under the widgets you used in the footer.  If you go to Appearance > Customize > Footer > Footer Menu, you will be able to style the menu using the options provided there.  Since the menu is in a separate <div>, it can even have a different background color if you wish. The menu is left justified by default, but you can center or right justifying by pasting the following CSS into the Custom CSS section at the bottom of Divi > Theme Options:

/* Center Bottom Menu */
.bottom-nav {
text-align: right;
}

Footer Bottom Bar

The Footer Bottom Bar is the very last element on your page, at the very bottom.  Divi is set up for it to contain two things,  your credits and the social media icons.  By default the credits reference Elegant Themes. Regardless of the outstanding help Divi and Elegant Themes provides in creating a website,  it’s still your design so you will normally want different credit information.

Go to Appearance > Customize > Footer > Bottom Bar.  There you will be able to style the bottom bar text and the social media icons.  To change the credit text, scan down to the bottom of the options and be sure “Disable Footer Credits” is unchecked.  Then enter whatever text you want in the box titled “Edit Footer Credits.” You might enter something like:

Note that in HTML you would put a semi-colon after &copy, but I left it off here so that you could see the code rather than © and, yes,  you can use HTML here. However,  if you want to center the bottom bar content, copy this CSS:

/* Center Bottom Bar */
#footer-info { width: 100%; margin:0 auto; text-align: center !important; }
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px; }
}

and paste it into the Custom CSS section at the bottom of Divi > Theme Options.

Conclusion

That sums up how to create a footer using Divi.  The provided options and especially the ability to use widgets in your footer columns offers a huge array of design possibilities.  Have  fun!