UPDATE (5 March 2022) : This tutorial was written a while back when DIVI did not have a built in Option to center aligning text differently on desktop, tablet and mobile.
With the new version, if your text is left aligned and you want to align it center on mobile, all you have to do is to go to the Text Module Settings –> Design Tab and under Text Alignment – Choose Mobile and click on the Center align as shown in the image below. You could choose any combination for eg. Center on Desktop and left aligned on tablet and mobile if you want. 

The following tutorial applies to only very old versions of DIVI.

Sometimes we want to align text to the center only on mobile. DIVI gives you options for aligning your text in the settings. The alignment that you choose will be same for desktop and mobile. But if you wanted your text alignment to be centered only on tablet and mobile, you can add a class to your text module and we will write some CSS to target the text module to change alignment on mobile.

Left Aligned Header and Text on Desktop in DIVI

Lets assign a class to the text module in DIVI. To do so, we will open the text module settings in the DIVI Visual Builder as shown below.

Open Module Settings in DIVI Visual Builder

Next we will head over the Advanced Tab -> CSS Class and assign a class called center-text-on-mobile as shown below.

Save  changes to your text module and lets add our CSS to center the text on tablets and mobile.

CSS to Center align the text on DIVI Contact Form

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 align text only on tablet and mobile */
@media (max-width:980px) {
.center-text-on-mobile .et_pb_text_inner,
.center-text-on-mobile .heading
{
text-align: center!important;
}
}

We are writing a media query here, to target only devices that are less than 980px. You can reduce the max-width:980px in the CSS above to 767px, if you want the text centered only on mobile (and not on tablet).

Now when you view your page on mobile the text should be centered as shown below.

Center Aligned Text on Mobile

I hope you enjoyed this quick tip. For more DIVI TIPS and TRICKS do 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 –

• Center the DIVI Footer Menu and Bottom Bar Contents

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.

In this tip we will center the submit button on the DIVI contact form. By default the submit button is right aligned on the contact form in DIVI. We will use the CSS Flexible Box Layout for making it center aligned.

When you add a Contact Form using DIVI, the submit button is aligned to the right as shown below.

Right Aligned Submit Button – DIVI

CSS to Center align the Submit Button on DIVI Contact Form

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.

/* Align the submit button on contact form – center */
.et_contact_bottom_container{
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
}

Once you add the CSS, the submit button would be aligned to the center as shown below.

Center Aligned Submit Button – DIVI

CSS to Left Align the Submit Button on DIVI Contact Form

You can also align the button to the left, by changing the CSS to the following

.et_contact_bottom_container{
display: flex;
justify-content: flex-start;
width: 100% !important;
}

I hope this tip was helpful for you. 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 –

• Center the DIVI Footer Menu and Bottom Bar Contents

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.

The DIVI Primary menu and logo shrinks in size when you scroll down the page. In DIVI when you scroll down, the fixed header settings come into effect. In this quick tip we will see how to prevent the shrinking of the DIVI primary menu and logo and keep it the same size on scroll. 

You can make the Primary Menu and Fixed Menu (on scroll) height to exactly same so that your logo and menu items do not shrink. Lets see how to do that. 

Here’s how the Primary menu looks with the default settings. Notice how when you scroll the the primary menu and logo shrink.

Primary Menu Before Scrolling Down

DIVI Header/Primary Menu before Scroll

Primary Menu After Scrolling Down

DIVI Header/Primary Menu after Scroll

Steps for keeping DIVI Menu same size on scroll

Step 1) Find out what your primary menu height and the text size is is by navigating to 

DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> MENU HEIGHT

DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> TEXT SIZE

In my case this a a value of 67 and 14 as shown below . 

Primary Menu Height in DIVI

Step 2 ) Make the Fixed Menu height and text size same as the number you have in the primary menu (in my case 67 and 14)

Navigate to 

DIVI –> Theme Customizer –> Header & Navigation –> Fixed Navigation Settings –> FIXED MENU HEIGHT

DIVI –> Theme Customizer –> Header & Navigation –> Fixed Navigation Settings –> TEXT SIZE

Make the fixed menu height and the text size exactly same as the primary menu and now your logo and menu items won’t shrink on scrolling down.

Fixed Menu Height in DIVI

Now, when you scroll both the menu will not shrink any more and both of them will have the same height and text size.

I hope you enjoyed this quick tip. 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 –

• Hide DIVI Top Header/Secondary Menu on Scroll

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.

In this quick tip we will learn how to open the DIVI social icons in a new window/tab. By default the social icons will open on the same browser page, and that will take away the user from your website. To prevent that we will add a little bit of jQuery in DIVI to make sure that our social icons open in a new tab.

Social Icons are found in two places, depending on what options you choose in DIVI. 

Which Social Icons will Show Up?

This depends on which social icons you choose in your DIVI Theme Options. as shown below. To select which social icons show up, navigate to your DIVI –> Theme Options  –> General Tab and pick the social icons you want to display. 

Which Social Icons to Display – DIVI

Where to Display the Social Icons?

There are two locations you can choose to display your social icons: The Secondary Menu/Top Header or Bottom Bar/Footer.

Display Social Icons on Secondary Menu/Top Header

To display social icons on your Secondary Menu/Top Header, make sure you have the “SHOW SOCIAL ICONS” checked in your Header elements. You can do this by navigating to 

DIVI –> Theme Customizer –-> Header & Navigation –-> Header Elements –> SHOW SOCIAL ICONS

Display Social Icons on Secondary Menu – DIVI

Display Social icons on DIVI Bottom Bar/Footer

To display social icons on your Bottom Bar in your footer, make sure you have the “SHOW SOCIAL ICONS” checked in your Footer elements. You can do this by navigating to 

DIVI – Theme Customizer – > Footer –> Footer Elements –> SHOW SOCIAL ICONS

Display Social Icons on Bottom Bar – DIVI

Open Social Icons in a New Tab using jQuery

To add the jQuery, go to DIVI- Theme Options – Integration Tab and look for “Add code to the < head > of your blog” as shown below. Add the following jQuery in that box.

Add jQuery to Open Social Icons in New Tab – DIVI

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
});
</script>

Save your changes. This will open your social icons – both on secondary menu and footer in a new tab. 

I hope this is helpful and you get a chance to use it on your site. Do leave me a comment if you use this tip on your DIVI website. For more such tips on WordPress and DIVI, check out 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 – 

• Show Social Media Icons on Mobile in 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.

In this post, we will see how to add a background image to the DIVI secondary menu area also know as the top header. You can change the colors of the DIVI Secondary Menu using the Theme Customizer Options, but cannot add an image as a background using the Theme Customizer.

Settings in the DIVI THEME CUSTOMIZER

Before I change the background to an image, my background for the secondary menu was set to a black color.  This was set in the DIVI Customizer by going to
DIVI –> Theme Customizer –-> Header & Navigation –-> Secondary Menu Bar –> BACKGROUND COLOR

I have chosen a color of Orange for the text color. This can be selected by navigating to
DIVI –> Theme Customizer –-> Header & Navigation –-> Secondary Menu Bar –> TEXT COLOR

This is what my the top header/secondary menu looks like with the black background and orange text setting for the secondary menu.

Background Color Secondary Menu – DIVI

Things To Do Before You Add the CSS

Choose the color for your text, so that it contrasts well with the background image that you are going to be using. Use a dark color text if the background image is light in color. I have chosen orange as my text color for this example. Make sure you adjust the colors for the social icons to match your background image.

The social icons color cannot be changed from the DIVI Theme Customizer. You can check out my post : Change the color for email, phone and social media icons in DIVI to change the color of the social icons with a few lines of CSS.

Next, 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 this

Secondary Menu Background Image

The URL was https://wpportfolio.com/wp-content/uploads/2019/10/secondarymenu-background.jpg

CSS to add Background Image on DIVI Secondary Menu

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.

/* CSS to Add Background Image to the DIVI Secondary Menu */
#top-header{
background:url(https://wpportfolio.com/wp-content/uploads/2019/10/secondarymenu-background.jpg)
no-repeat center;
background-size: cover;
}

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

Here is what the Secondary menu looks like after applying the above CSS.

Secondary Menu with Background Image – DIVI

I hope you like this tip and if you do use it on your website, do leave me a comment. 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.

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

Related Posts –

• Background Image on your DIVI Mobile Menu
• Add Background Image to the DIVI Footer/Bottom Bar
• Background Image on the DIVI Primary Menu/Main Header

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.

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 primary menu also know as the main header. You can change the colors of the DIVI Primary Menu using the Theme Customizer Options, but cannot add an image using the Theme Customizer.

Settings in the DIVI THEME CUSTOMIZER

Before I change the background to an image, my background for the primary menu was set to a black color.  This was set in the DIVI Customizer by going to 
DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> BACKGROUND COLOR

I have chosen a color of WHITE for the text color. This can be selected by navigating to 
DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> TEXT COLOR

This is what my the main header looks like with the black background and white text setting for the primary menu. 

Background Color Primary Menu – DIVI

Things To Do Before You Add the CSS

Choose the color for your text, so that it contrasts well with the background image that you are going to be using. 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 to match your background image.

The social icons color cannot be changed from the DIVI Theme Customizer. You can check out my post : Change the color for email, phone and social media icons in DIVI to change the color of the social icons with a few lines of CSS.

Next, 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 this

Primary Menu Background Image

The URL was https://wpportfolio.com/wp-content/uploads/2019/10/primarymenu-background.jpg

CSS to add Background Image on DIVI Primary Menu 

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 a Background Image to the DIVI Primary Menu */
#main-header{
background: url(“https://wpportfolio.com/wp-content/uploads/2019/10/primarymenu-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 Primary menu looks like after applying the above CSS. 

Primary Menu with Background Image – 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
• 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.

If you are using the DIVI Theme, you have an option of adding the Back TO Top Button on your website. It is highly recommended for pages that have a lot of content. Not sure, Change Color of Back to Top Button in DIVI for it ? you can read it here. In this tutorial we will learn how to remove or hide the Back To Top Button on mobile devices, with a few lines of CSS. 

Once you add the back to top button it will show up on your desktop and mobile devices as shown below. 

Desktop:

Back to Top Button on Desktop – DIVI

Mobile:

Back to Top Button on Mobile – DIVI

CSS to Remove or Hide the Back To Top Button on Mobile.

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.

/*  CSS to hide the Back To Top Button on mobile*/
@media only screen and ( max-width: 786px ) {
.et_pb_scroll_top{
display:none !important;
}
}

This will remove the Back To Top Button from your Mobile View as shown below. The CSS will hide the Back To Top button when you are on a device which has a screen size smaller than the media query value.(786px)

Remove Back to Top Button on Mobile

Liked this tip? Do leave me a comment and make sure you read my other TIP’s on my DIVI BLOG.

Related Posts –

• Change Color of Back to Top Button 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.

Styling the Back to Top button can be done with a few lines of CSS. Let’s change the color for the Back to Top button in DIVI. The theme allows you to enable a back to top button, in the DIVI –> Theme Options

Why Use a Back To Top Button

This is a little button that allows the user to scroll back, right to the top of the page on click of a button. This is particularly useful on single page websites, or if you have a long page with a lot of content . Once the user scrolls down, the Back To Top button becomes visible and helps the usability of your website. I recommend it for long pages. 

How to Enable Back To Top Button

By default the Back To Top is not enabled when you install DIVI. Hence, you have to turn it on using the theme options. Head over to your DIVI –> Theme Options and enable the Back To Top Button as shown below.

Enable the Back to Top Button in DIVI Theme Options

Here is what the Back to Top Button Looks like in DIVI.

Back to Top Button in DIVI

CSS to Change the Color of Back To Top Button

Color Changed of Back To Top Button

If you found this DIVI TIP helpful,do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• Remove/Hide Back to Top Button on Mobile – DIVI Theme

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.