How to create a custom Divi footer

by | Mar 26, 2019 | Divi tutorials | 13 comments

How to create a custom Divi footer

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

Add new section in the Divi library

In the Layout Name field fill in a name for your footer section

In the Layout Type field choose for layout

Create a custom Divi footer section

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.

Footer ID

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:

Replace the ID with your own from step 3.

Replace footer ID number

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

Grow extended Divi footer example

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.

Visit website

Photelo

Photelo Divi footer example

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.

Visit website

Valliant

Valliant Divi footer example

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.

Visit website

If you like this tutorial then check also out my other Divi tutorials.

13 Comments

  1. Ariq

    Thank you for tutorial..
    btw how to make google maps (our store location) as background footer? i know there’re some sites using that footer.

    Reply
    • Mark

      Hi,

      You can use a fullwidth section (purple one) with the fullwidth map module.

      Reply
  2. Michael

    Love the tutorial and your products! One question…How can I hide the custom footer on a specific page? I’d like to remove it for landing pages. Thank you.

    Reply
    • Mark

      If you give the section of your custom footer a class then you can hide it with CSS. For example, give the section this class custom_footer.

      Every WordPress page has a unique class, you can find this in the source code in the body tag. With this class, you can only target that specific page. You can then hide the custom footer with CSS. You can use a snippet like this:

      .page-id-10 .custom_footer {
      display: none;
      }

      You need to change the page ID number with yours.

      Reply
      • Michael

        Perfect, thanks for the help!

        Reply
  3. wassy

    thanks for your post, it is normal that the visual builder cannot retrieve the styles of the injected divi layouts? in the visual builder they looks like missing css/unstylized. no problems in the frontend only visual builder.
    many many thanks

    Reply
    • Mark

      Hi,

      Yes that is normal.

      Unfortunately you can’t use the visual builder with injected layouts.

      Reply
  4. joe ault

    how did you get the email optin button on one line in the first design?

    Reply
  5. William Whitehurst

    I just get a white bar across the bottom of the website – It doesn’t drag in the section. I’m placing it as the first line of text after the opening <?php or does it need to go in a specific section of the functions file?

    Reply
    • Mark

      Hi William,

      You need to place the php code in your child theme function.php file. use an open tag < ?php then place the code and then the closing tag ?>

      Reply
  6. Anna M

    Thank you for this tutorial. I think I am so close, but it is not publishing my custom footer. Is this the correct snippet for the functions.php ?

    // CUSTOM FOOTER

    function custom_footer() {
    echo do_shortcode(‘[et_pb_section global_moule="8264"][/et_pb_section]‘);
    }
    add_action( ‘et_after_main_content’, ‘custom_footer’ );

    Reply
    • Mark

      Hi Anna,

      The code snippet was gone after an update I have replaced it back now and you can copt/paste it.

      you still have to replace the ID with yours.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

close
Lifetime access to all Divi child themes and plugins
78 Shares
Share76
Tweet
Pin2
Buffer