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 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.
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.
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.
The Footer Customizer also comes with controls for the bottom footer bar, which contains the website credits and any social links you have enabled.
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!
Just bought this and found I have to jump through hoops to remove the footer credits.
Not good enough Elegant Themes, I’ve paid for this theme so you have no right to force your ads on my sites.
One refund request coming up.
Love the Divi theme and after spending alot of time learning it, building my Divi Library to use on the 30+ sites that I manage, I see that Elegant Themes has made it difficult to remove the credits in the footer. It doesn’t make sense to create a theme that you market in your training videos to developers in the ease of use of building libraries to use across sites if we have to go through the hassle of modifying the footer code on every site everytime there is an update. You have not made it easier, you’ve created frustration among those who want to love your themes making them unlovable! Please listen to your users and fix this issue! Every other theme I have ever used has an easy way to change the copyright info/footer text. If you want us to stick around and love your themes, you have to listen to what 100% of your users are saying about this!
On the basis of a wordpress divi demo at the weekend, I’ve made my way over from Joomla, purchased an elegant themes subscription and started playing around.
The first option I’m used to looking for is removing template branding. As a joomla user I’m used to plenty of css mods and occasionally digging into php files. But not to remove the branding from products I’ve paid good money for.
The fact is people can remove it in a number of different ways – as evidenced by this thread. But because it’s potentially a repetitive task it is a little annoying. So no one really gains – any brand awareness gain is cancelled out by the bad will it generates amongst existing customers. Leave labeling products to the fashion industry.
Folks, using a child theme is a site development best practice. Period. Not using a child theme is just not smart. Enough on that.
Yes, for someone who likes the ET products as much as I do, I am also disappointed in the lack of direct response to the numerous inquiries about modifying the default credits in the footer. If this is a corporate marketing decision, be transparent and say so. You owe your customers at least that much.
Sure, one can use the Divi Booster, and I can confirm that it works just fine. But that’s a $29 workaround, nothing less. And, of course, there’s the Divi Footer Editor being pushed. Again, just more money for something that should be fixed in the Divi product.
Of course this can be fixed in PHP. There are many comments in this thread showing just how to do that. But really isn’t the Divi theme being marketed as one that has the flexibility to support designs without coding?
So, Nick and the Elegant Themes Team, put something out on this now. Right now your silence speaks volumes and is very offputting to customers–like me– who are otherwise inclined to be very big fans of your products.
After successfully changing the content of the Footer in the Bottom Bar….how do I get it to center?
Sorry. Code got converted. Let me try again. Replace it with this:
<p id="footer-info">© <?php echo date( ‘Y’ ); ?> <?php bloginfo(); ?>, <?php bloginfo(‘description’); ?>. <?php _e( ‘All Rights Reserved.’); ?></p>