WP SITES

Log in

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

—

by

Brad Dalton

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

Comments

23 responses to “Divi by Elegant Themes: Change Footer Links & Style Social Icons”

  1. Kelly Servis Avatar
    Kelly Servis

    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. Meaghan Avatar
    Meaghan

    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

  3. Nicole Avatar
    Nicole

    Hi There

    Do you know how its possible to have an 3 column footer insteat a 4 column footer?
    Thanks for feedbacks

  4. mozzti Avatar
    mozzti

    Hi brad..
    having issues resizing the dimension of the full width slider.

    1. Brad Dalton Avatar
      Brad Dalton

      In Divi?

  5. Jen Ward Avatar
    Jen Ward

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Already included the CSS for the a:hover.

      This post relates to the footer links and has nothing to do with the nav menu’s.

  6. Vikram Jadhav Avatar
    Vikram Jadhav

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Something like:

      [code]
      #main-footer {
      background-image: url(‘images/footer.png’);
      }
      [/code]

  7. Richard Avatar
    Richard

    Hi Brad, would you mind if I shared a plugin that can do this as well? I use it for about 12 sites now.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  8. Arlene Avatar
    Arlene

    Is there any way that I can add additional social icons like linkedin for the updated version of divi 2.0?

    1. Brad Dalton Avatar
      Brad Dalton

      Sure can Arlene.

  9. Fran Avatar
    Fran

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Fran

      Code updated with samples for changing the hover color.

      Added a:hover http://www.w3schools.com/cssref/sel_hover.asp

      You will need to learn some basic CSS if you plan on customizing your theme on your own.

      Thanks for the question and hope you find the link useful.

      1. Fran Avatar
        Fran

        Thats great Brad. Thanks a lot.

        Yep, I definitely need to set some time aside for CSS homework!

  10. Fran Avatar
    Fran

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

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

    1. Brad Dalton Avatar
      Brad Dalton

      Here’s one which is popular http://wpsites.net/best-plugins/create-a-child-theme-in-one-click/

      Here’s what you need in a style.css file inside a folder. That’s all you need.
      [code]
      /*
      Theme Name: Divi Child Theme
      Template: Divi
      */

      @import url(“../divi/style.css”);
      [/code]

      http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

      1. Fran Avatar
        Fran

        My original post should have read “Child theme configurator”. Sorry, don’t know how I put chip and didn’t realize.

        I did try the one you mentioned first but got an error when creating the child theme. I quick Google search found quote a few others had a similar issue so I gave this other plugin a go and it worked first time.

  11. Keith Davis Avatar
    Keith Davis

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

    1. Brad Dalton Avatar
      Brad Dalton

      Updated the post with an example of a 3rd link.

      1. Keith Davis Avatar
        Keith Davis

        Appreciate that Brad
        I’ll give you a couple of shout outs over on Facebook.
        #topman

  12. Keith Davis Avatar
    Keith Davis

    Nice one Brad
    I’ll compare the two Gists – thanks.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.