WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Divi by Elegant Themes: Change Footer Links & Style Social Icons

If you didn’t already know, Divi is a new parent theme created by Elegant themes which is apparently their most flexible theme.

I hear its been selling like hotcakes and i’ve been told there’s an updated version about to be released shortly.

I was asked for instructions on how to change the footer links which i’ll show you how to do in this post.

Divi theme footer links

You’ll also find some sample CSS code which you can paste in your child themes style.css file and modify to change the styling of the footer links and social icons in the footer.

Step 1. Create Child Theme

The first step is to create a child theme to store all your custom coding, copies of modified files, new CSS and modified CSS.

You have 2 choices:

  1. Download the child theme i created for Divi which includes all the custom code from this post.
  2. Or create your own child theme using a step by step tutorial created by Elegant Themes.

If you’ve chosen to create your own child theme, here’s step 2.

Step 2. Copy footer.php to Child Theme

Simply copy the footer.php file from the root directory of the Divi parent theme and paste the copy into the root directory of your child theme.

Here’s what your child theme folder will now look like:

child theme folder

Step 3. Modify Footer Links & Text

Once you have copied your parent themes footer.php file to your child theme, you can then open the file using your favorite text editor and modify the footer text and footer links.

You’ll find both the text and links on Line 35.

As an example of what you can modify in the code, here’s the default footer code in the first Gist and the footer code which i have modified in the 2nd Gist.

If you accidentally modify or remove the wrong code and get errors, simply delete the entire file and copy over the footer.php file from your parent theme so you can start again.

Add 3rd Footer Link

Here’s the code which includes a 3rd footer link.

Style Footer Links & Social Icons

Here’s some sample CSS you can paste into your child themes style.css file to change the styling of the footer links and footer social icons.

Demo Divi Parent Theme

Reader Interactions

Comments

  1. Great post, thank you for the info! How would I change the colors? When I try to substitute color codes (for example: 29AAE2), the text and links turn gray.

    Secondly, how can I add additional social networks that aren’t listed like Pinterest for example?

    Thanks again!!

  2. Hi, I am trying to do some modifications to a Divi theme and am having a hard time with it. I need to modify it so when you are using a custom background on the builder for the whole page that there is a secondary background behind the text so we don’t loose it in the background picture as well as the widgets, etc. Can you email me about your rates for this?

    Thanks,
    Meg

  5. Two questions for you….

    How do you change the link colors on a hover or rollover? I need to have any link that is hovered over to switch to a different color so they stand out. I cannot find this feature in Divi.

    I also need the dropdown menus on my navigation bar to have a change in color when they are hovered on also. Can’t find any options to do this either.

    Any help would be wonderful! Thanks!

  6. Hi Brad, do you know how to change the footer background so I can use an image instead of the grey bar? Any help is greatly appreciated!

    • Hello Richard.

      No need for a plugin to do this as its very simple.

      A plugin would only make it harder to customize your footer links.

  9. But now I have a question. The divi theme social icons have a rollover effect but when I use the code you have pasted as an example above they become static single colour. i.e. no rollover effect. How would I set the rollover to “white” for example?

  10. Thanks for posting this guide Brad. It was very helpful.

    PS – I used a plugin called “chip theme Configurator” to create my child theme

  11. Hi Brad
    The footer.php contains Designed by and Powered with corresponding links.
    What would I add for a third link say Managed by?

Leave a Reply