Divi custom footer design

To achieve a custom footer design in Divi, you can use the Divi Builder and custom CSS. The Divi Builder allows you to create custom layouts for your footer, while custom CSS can be used to style and customize the design further.

Here’s an example of how you can create a custom footer design using the Divi Builder and custom CSS:

1. Create a new page in WordPress and enable the Divi Builder for that page.
2. Add a new section to the page and choose the number of columns you want for your footer design.
3. Add modules to each column to display the desired content in your footer. For example, you can add a Text module to display copyright information, a Menu module to display a navigation menu, and a Social Media Follow module to display social media icons.
4. Customize the content and design of each module using the options available in the Divi Builder.
5. Once you’re satisfied with the layout and content of your footer, save the changes and exit the Divi Builder.
6. Go to the WordPress Customizer (Appearance -> Customize) and open the Additional CSS section.
7. Add custom CSS code to style and customize the design of your footer. For example, you can change the background color, font size, and spacing.

/* Example custom CSS for footer design */
#footer {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

#footer .et_pb_text {
  color: #333;
  font-size: 14px;
}

#footer .et_pb_menu {
  text-align: center;
}

#footer .et_pb_menu li {
  display: inline-block;
  margin-right: 10px;
}

#footer .et_pb_menu li:last-child {
  margin-right: 0;
}

8. Preview the changes in the Customizer and make any necessary adjustments to the CSS code until you achieve the desired footer design.
9. Once you’re satisfied with the custom footer design, click the “Publish” button in the Customizer to save the changes.

This code example demonstrates how you can use the Divi Builder to create a custom footer layout and then apply custom CSS to style and customize the design. The CSS code targets specific elements within the footer, such as the footer container, text module, and menu module, allowing you to modify their appearance according to your needs.

Examples

Example 1: Creating a Custom Footer Design with Divi Theme Builder

This use case demonstrates how to create a custom footer design using the Divi Theme Builder. The code example shows how to add a custom footer template to your Divi theme.

function wpsnippets_custom_footer_design() {
    if ( function_exists( 'et_builder_add_layout' ) ) {
        et_builder_add_layout( 'footer', 'custom_footer' );
    }
}
add_action( 'wp', 'wpsnippets_custom_footer_design' );

This code example uses the et_builder_add_layout() function to add a custom footer template to the Divi Theme Builder. The function is hooked to the wp action, ensuring that the custom footer design is added to the theme. The template file should be named custom_footer.php and placed in the Divi child theme’s directory.

Example 2: Customizing the Footer Design with Divi Theme Builder

This use case demonstrates how to customize the design of the custom footer created with Divi Theme Builder. The code example shows how to modify the footer layout and add custom CSS styles.

function wpsnippets_customize_footer_design() {
    if ( function_exists( 'et_builder_get_footer_layout' ) ) {
        $footer_layout = et_builder_get_footer_layout();

        // Modify the footer layout here

        $custom_css = "
            /* Add custom CSS styles here */
        ";

        echo '<style>' . $custom_css . '</style>';
    }
}
add_action( 'wp_footer', 'wpsnippets_customize_footer_design' );

This code example uses the et_builder_get_footer_layout() function to retrieve the footer layout created with Divi Theme Builder. You can modify the footer layout by manipulating the $footer_layout variable. Additionally, you can add custom CSS styles by appending them to the $custom_css variable. The custom CSS is then echoed within the wp_footer action.

Example 3: Adding Dynamic Content to the Custom Footer Design

This use case demonstrates how to add dynamic content to the custom footer design created with Divi Theme Builder. The code example shows how to display the current year in the footer.

function wpsnippets_add_dynamic_content_to_footer() {
    if ( function_exists( 'et_builder_get_footer_layout' ) ) {
        $footer_layout = et_builder_get_footer_layout();

        // Add dynamic content to the footer layout here
        $current_year = date( 'Y' );
        $footer_layout = str_replace( '[current_year]', $current_year, $footer_layout );

        echo $footer_layout;
    }
}
add_action( 'wp_footer', 'wpsnippets_add_dynamic_content_to_footer' );

This code example uses the et_builder_get_footer_layout() function to retrieve the footer layout created with Divi Theme Builder. You can add dynamic content to the footer layout by manipulating the $footer_layout variable. In this example, the current year is added to the footer by replacing the [current_year] placeholder with the actual year using the str_replace() function. The modified footer layout is then echoed within the wp_footer action.