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.
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:
- Download the child theme i created for Divi which includes all the custom code from this post.
- 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:
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.
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!!
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
Hi There
Do you know how its possible to have an 3 column footer insteat a 4 column footer?
Thanks for feedbacks
Hi brad..
having issues resizing the dimension of the full width slider.
In Divi?
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!
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.
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!
Something like:
Hi Brad, would you mind if I shared a plugin that can do this as well? I use it for about 12 sites now.
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.
Is there any way that I can add additional social icons like linkedin for the updated version of divi 2.0?
Sure can Arlene.
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?
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.
Thats great Brad. Thanks a lot.
Yep, I definitely need to set some time aside for CSS homework!
Thanks for posting this guide Brad. It was very helpful.
PS – I used a plugin called “chip theme Configurator” to create my child theme
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.
http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme
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.
Hi Brad
The footer.php contains Designed by and Powered with corresponding links.
What would I add for a third link say Managed by?
Updated the post with an example of a 3rd link.
Appreciate that Brad
I’ll give you a couple of shout outs over on Facebook.
#topman
Nice one Brad
I’ll compare the two Gists – thanks.