• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

Divi Theme

Reader Interactions

Comments

  1. Kelly Servis says

    November 13, 2014 at 7:22 am

    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!!

    Log in to Reply
  2. Meaghan says

    October 22, 2014 at 4:45 am

    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

    Log in to Reply
  3. Nicole says

    September 25, 2014 at 7:34 pm

    Hi There

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

    Log in to Reply
  4. mozzti says

    August 22, 2014 at 4:50 pm

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

    Log in to Reply
    • Brad Dalton says

      August 22, 2014 at 4:51 pm

      In Divi?

      Log in to Reply
  5. Jen Ward says

    July 6, 2014 at 12:49 pm

    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!

    Log in to Reply
    • Brad Dalton says

      July 6, 2014 at 1:42 pm

      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.

      Log in to Reply
  6. Vikram Jadhav says

    June 23, 2014 at 8:43 pm

    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!

    Log in to Reply
    • Brad Dalton says

      June 24, 2014 at 1:52 am

      Something like:

      #main-footer {
      background-image: url('images/footer.png');
      }
      Log in to Reply
  7. Richard says

    June 4, 2014 at 8:05 am

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

    Log in to Reply
    • Brad Dalton says

      June 4, 2014 at 8:33 am

      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.

      Log in to Reply
  8. Arlene says

    June 4, 2014 at 3:42 am

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

    Log in to Reply
    • Brad Dalton says

      June 4, 2014 at 7:59 am

      Sure can Arlene.

      Log in to Reply
  9. Fran says

    May 25, 2014 at 9:34 pm

    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?

    Log in to Reply
    • Brad Dalton says

      May 26, 2014 at 4:33 am

      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.

      Log in to Reply
      • Fran says

        May 26, 2014 at 11:30 pm

        Thats great Brad. Thanks a lot.

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

        Log in to Reply
  10. Fran says

    May 25, 2014 at 9:17 pm

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

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

    Log in to Reply
    • Brad Dalton says

      May 26, 2014 at 6:32 am

      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.

      /*
      Theme Name: Divi Child Theme
      Template: Divi
      */
      
      @import url("../divi/style.css");

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

      Log in to Reply
      • Fran says

        May 26, 2014 at 11:29 pm

        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.

        Log in to Reply
  11. Keith Davis says

    May 25, 2014 at 6:19 pm

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

    Log in to Reply
    • Brad Dalton says

      May 25, 2014 at 6:37 pm

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

      Log in to Reply
      • Keith Davis says

        May 25, 2014 at 6:39 pm

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

        Log in to Reply
  12. Keith Davis says

    May 25, 2014 at 5:40 pm

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

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.