Enhance your DIVI website's footer with an advanced, stylish design. This comprehensive CSS snippet will revamp your footer with a gradient background, custom fonts, responsive layout, and interactive link effects. Follow along for a detailed guide to give your footer a professional and engaging look.

#main-footer {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    padding: 40px 0;

    color: #ffffff;


#main-footer .footer-widget h4 {

    font-family: 'Montserrat', sans-serif;

    font-size: 18px;

    margin-bottom: 20px;


#main-footer a {

    color: #ffffff;

    transition: color 0.3s ease;


#main-footer a:hover {

    color: #ffd700;


Breaking Down the Code:

#main-footer: Styles the main footer area with a gradient background, custom padding, and text color.

background: linear-gradient: Creates a diagonal gradient from top left to bottom right with two vibrant colors for a dynamic look.

#main-footer .footer-widget h4: Customizes the footer widget headers with a specific font family, size, and margin.

#main-footer a: Sets the default color and transition for links in the footer for a smooth hover effect.

#main-footer a:hover: Changes the link color on hover to make them stand out and enhance interactivity.

Implementation Steps:

Accessing the DIVI Theme Options: In the WordPress dashboard, click on "Divi" then "Theme Options."

Accessing the Custom CSS Box: Under the "General" tab, find the "Custom CSS" box.

Adding the Code: Enter the CSS code snippet into the "Custom CSS" box.

Save Changes: Click "Save Changes" to implement the new, advanced footer design.

Your DIVI website's footer will now display a captivating gradient background with stylish font customization and responsive link effects. This complex CSS makeover adds a layer of sophistication and enhances the overall user experience of your website.

Enjoy experimenting with these advanced CSS techniques to create a unique and engaging footer for your DIVI site.