In today’s tip we will see, how we can center align both the Footer Menu and the contents of the DIVI Bottom Bar. The footer menu will only be visible if you have assigned a menu in the display location of “Footer Menu” in your WordPress dashboard . This is done by navigating to Appearance –> Menus as shown below.

Assign Footer Menu in DIVI

Once you have your footer menu assigned, you can change the background and text color by navigating to
DIVI –> Theme Customizer –-> Footer –-> Footer Menu

Editing the Bottom Bar :

You can add credits to the bottom bar like copyright info, company name etc by navigating to
DIVI –> Theme Customizer –-> Footer –-> Bottom Bar –> EDIT FOOTER CREDITS

You can also adjust the color for your social icons here.

Footer Content in DIVI

My Footer menu and bottom bar looks like the following without the CSS.

Footer Menu and Bottom Bar in DIVI

Center the Footer Menu and Bottom Bar Contents in DIVI using CSS

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Center the Footer Menu in DIVI */
.bottom-nav {
float: none!important;
text-align: center!important;
}

/* Center the Bottom Bar in DIVI */
#footer-info {
width: 100%;
margin:0 auto;
text-align: center!important;
}

/* Adjust the margin of the social links DIVI */
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px;
}
}

Once you have applied the CSS the footer menu and the bottom bar content should be both center aligned as shown below.

Footer Menu and Bottom Bar centered in DIVI

I hope you enjoyed this quick tip and were able to center your Footer and Bottom Bar in your DIVI Theme. If you do not have a Footer Menu then only use the relevant CSS. For More DIVI TIPS and TRICKS make sure you visit my DIVI BLOG. If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts –

• Add Background Image to the DIVI Footer/Bottom Bar
• How to Remove the Bottom Bar/Footer from DIVI
• Remove Social Icons from Bottom Bar/Footer on Mobile in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Today we will see how to add a background image to the DIVI footer bar or bottom bar. You can change the colors of the DIVI Bottom Bar using the Theme Customizer Options, but cannot add an image using the Theme Customizer.

Settings in the DIVI THEME CUSTOMIZER

Make sure you have the background color set to default before adding the CSS. To do this navigate to
DIVI –-> Theme Customizer –-> Footer –-> Bottom Bar –> BACKGROUND COLOR and pick “default”

I have chosen a color of WHITE for the text color. This can be selected by navigating to 
DIVI –> Theme Customizer –-> Footer –-> Bottom Bar –> TEXT COLOR

Choose the color for your text, so that it contrasts well with the background image. Use a dark color text if the background image is light in color. I have chosen white as my background image is dark in this example. Make sure you adjust the colors for the social icons also in the Theme Customizer. 

The SOCIAL ICONS colors can be adjusted by navigating to 
DIVI –> Theme Customizer –-> Footer –-> Bottom Bar –> SOCIAL ICON COLOR

Default setting for bottom bar

Here is what the current bottom bar looks like with these settings. 

Footer color set to default DIVI

CSS to add the Background Image on DIVI footer

First of all make sure you upload the image you want for your background in your media library. I have used an attribution free picture from the site pixabay. I have also sized the image to a 1920px by 108px using photoshop. 

Once the image is uploaded to the media library, find the URL of the image. You will need that in the CSS that we write.

My background image looks like thisThe URL was https://wpportfolio.com/staging/wp-content/uploads/2019/10/footer-background.jpg

CSS
To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Add background image to the bottom footer */
#main-footer {
background: url(“https://wpportfolio.com/staging/wp-content/uploads/2019/10/footer-background.jpg”) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

Make sure you replace the background URL to the url of your image.

Here is what the footer looks like after applying the above CSS.

Background changed to image in footer – DIVI

I hope you like this tip and if you do use it on your website, do leave me a comment. Also for more such tips make sure you check out my DIVI TIPS on my blog.

Picture courtesy – Pixabay.
Image used for background.: https://pixabay.com/illustrations/banner-header-logo-header-1631295/

Related Posts –

• Add Background Image to your DIVI Mobile Menu
• How to Remove the Bottom Bar/Footer from DIVI
• Remove Social Icons from Bottom Bar / Footer on Mobile in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Let’s remove the social icons from DIVIs footer/bottom bar only for mobile using CSS. There are many option you can have for your social icons in the footer. You can enable or disable it on both desktop and mobile, or using this tutorial you can enable it on desktop but hide it on mobile.

Show Social Icons on Desktop and Mobile

For the desktop, there is an option in the DIVI – Theme Customizer – > Footer –> Footer Elements –> “SHOW SOCIAL ICONS” that you can check (or uncheck) to enable or disable it. Checking the option “SHOW SOCIAL ICONS”  will enable it on the desktop and mobile as shown below.

Social Icons enabled in DIVI

Social Icons enabled – DIVI – Mobile

Remove Social Icons from Desktop and Mobile

To remove the social icons from both desktop and mobile, make sure you uncheck the “SHOW SOCIAL ICONS” box in the DIVI Theme customizer as shown below.

Social icons disabled on desktop and mobile

Keep Social Icons on Desktop and Remove it only on Tablets and Mobile

If you wanted to keep the social icons on the desktop and disable/remove it only on mobile from DIVI’s bottom bar/footer, we can use a little bit of CSS. First make sure you have checked the “SHOW SOCIAL ICONS” in the Theme Customizer–> Footer –> Footer Elements as shown in the image above.

To add the CSS, head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Disable Social Icons on Bottom bar on tablets and smaller devices */
@media all and (max-width: 980px) {
#footer-bottom .et-social-icons {display: none;}
}

This will show the icons on the desktop but will remove it from the tablet and mobile devices as shown below.

Social Icons removed on Mobile – DIVI

I hope this tip was useful and you get a chance to use it on your website. If you do, please leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• How to Remove the Bottom Bar/Footer from DIVI
• Add Background Image to the DIVI Footer/Bottom Bar

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Lets remove the bottom bar/ bottom footer in DIVI with a few lines of CSS. There have been times when I have created my own bottom bar using DIVI’s text (and other) module and making it global. Then I include that on all the pages I want to. It just gives me a little bit more flexibility and options on what I want to add in the footer. 

In the image below I have added my own footer with the elements that I want for the footer. The image also shows the bottom bar/ bottom footer that is standard in all DIVI themes. 

Bottom Bar/Bottom Footer in DIVI

CSS to Remove the Bottom Bar/Bottom Footer in DIVI

/* Remove bottom footer from divi */
#footer-bottom {
display:none;
}

This will remove the bottom footer as shown below. 

Bottom Bar/Bottom Footer removed in DIVI

I hope you like this easy tip. If you do use it on your website, leave me a comment. For more such tips and tricks on WordPress and DIVI, do check out my DIVI Blog.

Related Posts –

• Remove Social Icons from Bottom Bar / Footer on Mobile in DIVI
• Add Background Image to the DIVI footer/bottom bar

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.