The DIVI theme for WordPress offers a powerful visual builder, but sometimes, you might want to customize the footer using CSS for more control and creativity. This guide provides some simple yet effective CSS tweaks to help you personalize your DIVI footer.

1. Change Footer Background Color

To set a custom background color for your footer:

#main-footer {
    background-color: #333333; /* Replace with your desired color */
}

2. Customize Footer Text Color

To change the text color in the footer:

#main-footer,
#main-footer a {
    color: #ffffff; /* Replace with your desired text color */
}

3. Add Padding to Footer Widgets

To add spacing around the footer widgets:

#footer-widgets .et_pb_widget {
    padding: 20px;
}

4. Align Footer Text to Center

To center-align the footer text:

#footer-info {
    text-align: center;
}

5. Remove Footer Credits

To hide the default footer credits:

#footer-info {
    display: none;
}

6. Add a Custom Font to Footer

To apply a custom font to the footer:

#main-footer {
    font-family: 'Roboto', sans-serif; /* Replace with your desired font */
}

7. Adjust Footer Link Hover Effect

To add a hover effect to links in the footer:

#main-footer a:hover {
    color: #ff6600; /* Replace with your hover color */
    text-decoration: underline;
}

8. Add a Border to the Footer

To give the footer a border:

#main-footer {
    border-top: 2px solid #ff6600; /* Replace with your desired border color */
}

9. Change Footer Widget Backgrounds

To style individual footer widgets:

#footer-widgets .et_pb_widget {
    background-color: #f4f4f4; /* Replace with your desired widget background color */
    border-radius: 5px;
    padding: 15px;
}

10. Create a Sticky Footer

To ensure the footer stays at the bottom of the page:

#main-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

How to Apply These CSS Customizations

  1. Log in to your WordPress Dashboard.
  2. Go to Appearance > Customize.
  3. Navigate to Additional CSS.
  4. Paste the desired CSS snippets into the text box.
  5. Save your changes.

Tips for Customizing the DIVI Footer

  1. Use Browser Inspect Tools: Right-click on the footer and select "Inspect" to identify specific classes or IDs for customization.
  2. Test Changes on Different Devices: Use DIVI’s responsive preview or browser developer tools to ensure your footer looks great on mobile, tablet, and desktop.
  3. Backup Your CSS: Save a copy of your custom CSS in case you need to revert changes.

With these CSS snippets, you can easily enhance the look and feel of your DIVI footer and align it with your website's branding.