With the introduction of Divi hooks, we can now create a custom Divi footer for our Divi websites. We are going to create a custom section which we are going to use for the footer and save it in our Divi library then we inject this section with a hook in the footer of our website.
For this, we need a little bit of PHP code and place it in our child theme functions.php file. If you don’t have a child theme yet then you can follow this tutorial “how to create a Divi child theme”.
Step 1 create the footer layout
Go to Divi > Divi Library
Click on Add New
In the Layout Name field fill in a name for your footer section
In the Layout Type field choose for layout
Step 2 populate your Divi footer layout
You can now create your footer with all the rows and modules of the Divi builder. Unfortunately, you can’t do this from the visual builder so you have to create your footer here. In case you need some inspiration for your footer design at the bottom of this post I have created some examples.
After creating the footer you need to write down the ID number of this section. You can find this in the URL. You will need this in the next step.
Step 3 creating the hook
For this step, you do need to have a Divi child theme.
Go to Appearance > Theme Editor
On the right under Theme Files click on your functions.php file.
Place this snippet in your file:
// CUSTOM FOOTER
function custom_footer() {
echo do_shortcode('[et_pb_section global_module="1380"][/et_pb_section]');
}
add_action( 'et_after_main_content', 'custom_footer' );
Replace the ID with your own from step 3.
And that’s it! You have now created a custom footer. In case you still see your footer widgets than you need to go to Appearance > Widgets and remove all of the footer widgets.
3 Divi footer examples
I have here 3 Divi footer examples that I have created for my child themes. With this technique, you can create some amazing footer designs.
Grow extended
In this design, I created a 3 column structure with a dark blue background. I used some slighter lighter blue dividers and for the first column a right border. In the first column, I placed the logo + contact info and social media icons. In the second and third column, I placed quick navigation and the services pages. At the top of this footer, I created a horizontal email opt-in.
Photelo
In this website’s footer, I used 2 rows. The top row is a 4 column structure, within each column an image module. The bottom row is a 1 column structure with 2 texts and 1 social media module. I place a background image in the section.
Valliant
This site’s footer uses a 4 column structure. In the first column, I used an image module for the logo and 3 blurb modules. In between each blurb modules I used a divider module for the thin line. The second and third column is created with text modules and I also used here a divider module for the line. In the fourth column, I placed a social media module and an email opt-in.
If you like this tutorial then check also out my other Divi tutorials.