Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part four of this series, we will go through the new Footer Customizer controls and how you can choose the best settings based on your content.
The All New Footer Customizer
The Divi Theme Customizer got a huge makeover in 2.4, and one of the customizer sections is dedicated to your website footer. Now you can select a footer column layout, style the text of your widgets, and customize your footer menu styles if you’ve assigned a footer menu.
8 New Footer Column Layouts
Prior to Divi 2.4, you were stuck with a four column footer even if you didn’t have four widgets to fill those columns. Now, if you only have 2 or 3 widgets, or if you want to display all of your widgets in a 2 or 3 column layout, you can easily change your footer layout in the theme customizer. Below is a preview of the 9 footer layouts you can choose from. The Footer Layout tab also lets you define the background color of your footer.
Widget Text Styling
Your footer background color, website text styles, and overall color scheme of your site all influence how you should style your footer text styles. Since we have no control over what those colors and styles will be, we’ve put the control into your hands with a new set of widget text style settings.
Footer Menu Control
In your WordPress Menus tab, you can assign any menu to appear in your footer. This can be a nice alternative to adding a Pages Widget or back-to-top button.
Just like the widget typography settings shown above, you also have full control over the the text styling of your footer menu.
Footer Bottom Bar Styles
The Footer Customizer also comes with controls for the bottom footer bar, which contains the website credits and any social links you have enabled.
Combining These Options to Make Stunning Footers
All of these features are great on their own, but it’s all about how you combine them that makes a great footer. Being able to adjust text sizes, text colors, and background colors, you can create a footer that stands out from your site’s main content, but still has compatible colors and typography. Below are a few footers that you can create using the new footer controls.
1/4 :: 3/4 Layout
This layout is great for adding your logo into the first column of your footer if you have a more squared or portrait sized logo. The 3/4 column allows for a big block of text in the footer, which is way more appealing than squeezing a lot of text into another 1/4 column. Other common widgets that can take advantage of a 3/4 column are the Recent Blog Post widget, our Monarch Social Follow widget, or other third party widgets such as a recent tweets widget.
Because of the ability to choose transparent background colors for your footer menu and bottom footer bar, you are able to create a nice cohesive color palette based on your overall footer color.
1/3 :: 1/3 :: 1/3 Layout
The equal-thirds column layout is similar to the default equal-fourths layout, but is more convenient if you only have enough footer content to fill three widgets and/or want your widgets to be a little wider for more content. This layout is one of the most versatile options, in my opinion, because its 1/3 columns are generally a good width for any kind of widget whether it’s text heavy, an image, or a list of some sort.
1/2 :: 1/2 Layout
You will notice in this example that I chose a 2 column layout, but I have more than two widgets. No matter which column layout you choose, you can still display up to four widgets. This layout is good if you have more than 2 widgets that benefit from a wide column, such as text heavy widgets.
1/3 :: 2/3 Layout
This layout is very similar to the 1/4 : 3/4 layout, but gives you a little more width in your first column for something like an image/logo with a wider aspect ratio or a smaller chunk of text.
1/4 :: 1/4 :: 1/2 Layout
This layout supports the most versatility in terms of column widths in that it has two narrow columns, 1 medium sized column, and if you place a fourth widget, it will actually span the width of your footer below the first row of widgets.
These are just 5 examples of the 9 layouts you can choose from, and the color/typography combinations are endless. As described throughout this post, figure out what sort of column widths best fit the needs of your footer content, and base your layout decision on that. We hope that these options make it easier for you to achieve the best footer design for your content, and to make your Divi site more unique.
Don’t forget to check out our previous post on Global Modules to see how you can create an even more customized footer area by building it with the Divi Builder!