This is the ultimate No.1 Divi theme logo guide.
YES. It is! And we claim this for a reason.
See, we have covered every single thing you need to know about the logo for your Divi website.
This isn’t just a logo size guide for your Divi website or not a Divi logo uploading & hiding tutorial only.
And this isn’t even an average tutorial on how to customize the logo using the Divi theme customizer.
Yes, all these are included in our Divi theme guide.
But what’s more here?
To make our Divi theme guide more comprehensive, we have applied our full team experience with Divi.
Some of the best Divi experts from our team share their every possible logo familiar working knowledge. Any issues with uploading the logo on the Divi website or fulfilling a unique requirement from clients?
We were truly overwhelmed by their vast experience while preparing this logo guide for Divi users.
So, you will find unique queries like how to make an overlapping logo or use a different logo for mobile on the Divi theme. Even a few related questions, like how to add a favicon on the Divi theme.
Apart from your present query, this guide can help you in the future as well. So bookmark it on your browser.
For now, let’s get started with some common logo queries for the Divi theme.
Hide & Upload Divi Logo
After installing the Divi theme in your WordPress, you will see the Divi logo on the website header. So, you will replace the Divi logo with your own logo image. See the easy uploading method below.
How to Upload Your Own Logo on Divi Website?
Moving forward, you first need to log in to your WordPress dashboard and go to the theme option. For this, go to your WordPress Dashboard> Divi> Theme Option. Here, the logo option stands first in the general tab list.
Next, click the “UPLOAD” button on the right, which will automatically open your website media library. You then want to click on “Upload Files” and hit “Select Files” to upload a logo image. Finally, select the “Save Changes” button at the top left.
Now, check the result on the live site. Following the same way, you can also change the logo on the Divi theme. Or, on some occasions, you may want to remove the logo from the Divi website header’s area. Let’s learn to hide it.
How to Remove Logo from Divi Header Navigation?
Go to the Theme customizer from your WordPress dashboard. Then, you need to go to Header & Navigation> Primary Menu Bar> and click “HIDE LOGO IMAGE.” Also, hit the “Publish” button on the top of the sidebar.
However, this process won’t hide your logo from the fixed header setting. So, when you scroll down, the logo will appear again.
How to Hide Logo Before or After Scroll?
For this, click the “Fixed Navigation Settings” or, like before, from your Theme Customizer: follow Header & Navigation> Fixed Navigation Settings> and check the “HIDE LOGO IMAGE.”
Once done, don’t forget to hit the “Publish” button. And you have successfully removed the Divi logo from the header. Check this guide to learn how to hide the logo on a single page.
Important Note: It’s a good practice to reset the logo from the Theme Options to avoid further issues. You can do this by following: WordPress Dashboard> Divi> Theme Option> General Tab> Logo. Here, click the Reset button. And hit the “Save Changes” button.
Well, now we know how to add and remove the logo from the Divi website. But, in addition to this knowledge, you’ll also likely need a logo size guide for the Divi website.
Divi Logo Size Guide
What is your primary attention while designing the logo? It must be unique and versatile. But, there is another vital consideration: which is scalability. A professionally designed logo contributes to optimal user experience, regardless of screen or context.
But how much emphasis should you give on sizes while using a page builder like Divi?
We will cover a comprehensive logo size guide for the Divi theme to get you on the right track.
Follow the answers to some essential questions below affiliated with the Divi theme logo sizing; you will figure out the perfect dimension of the logo of your Divi website.
What is the Default Divi Logo Size?
Let’s find out the best logo dimension for the Divi website. Best of all, know the standard logo dimensions for different layouts before designing the logo on the photo editor. It will help you to shape the logo with a suitable dimension for further adjustment with Divi’s theme customizer.
The default Divi logo PNG dimensions are 93 pixels in width by 43 pixels in height. In your Divi theme customizer, the logo height setting ranges from 30 to 100 pixels.
How to Choose the Best Adjustment Between the Size and Height of the Logo for the Divi Website?
For better visual clarity, we recommend 45-55 pixels. Especially having a wider logo which usually has a landscape or horizontal shape. The benefit here is, there will be much white space around the logo.
In the case of a two words logo, make it 250 pixels wide. So, there will be the utmost focus on logo showcasing. And, consequently brings an impressive look.
Logo usage isn’t limited to your website header only. Apart from that, it needs to look great on bags, business cards, and other promotional stationery items or products. And a (100 X 133) portrait logo serves best in these cases.
However, it is not the ideal shape for the website logo as it leaves unnecessary vertical space in the header area.
The best suggestion: Make two separate versions of your logo. One will have the landscape shape for use on your website. And for other physical applications, choose the portrait layout. Further, the standard logo size for a website is 250 x 45. But, we suggest making a larger version which is helpful for any future re-adjustment with keeping a proper resolution.
How Do I Make My Logo Size Bigger in Divi Theme?
To make your logo size bigger in the Divi theme, go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Logo Max Height. Here, you can increase the logo height.But do remember, you need to adjust it according to the menu height.
Divi Logo Placements Guide
Now we will show you the Divi logo placements method using the theme customizer. Five core header styles bring a brand new look within one click only. You will also learn how to center the logo in the Divi theme. Let’s find the best spot.
How to Change the Location of Logo in the Divi Theme?
Simply go to the WordPress dashboard, and follow the following file steps: Divi > Theme Customizer > Header & Navigation > Header Format > Header Style. From the dropdown, choose any of the five options. See the outcome below with different styles.
- Default: Logo placement on the left-hand side of the main header is the default position.
- Centered: This style displays the logo in the center and above the header’s menu items.
- Centered Inline Logo: This way, your logo remains the same line as the menu items and stands out at the center.
- Slide In and Fullscreen: The last two header styles display a similar logo position in the header. You will find the logo on the left-hand side.
Next, we will learn some other functionalities to play with the logo.
Useful Divi Logo Guideline
You have placed your logo. But don’t stop here. There are some exciting ways to be unique with your logo presentation. Our team has successfully implemented these logo techniques with our own and client projects.
Ready to get inside our designers’ heads? Then let’s begin.
How Do You Make a Divi Overlapping Logo?
You can break the traditional way of showing the logo within the header menu bar and lean it down below the header area. This exercise helps make your logo more attractive and increase brand value. For a Divi theme user, it is also fine to make an overlapping logo.
You just need to add a code snippet to the custom CSS. For this, from your WordPress dashboard, go to: Divi > Theme Option > General > Custom CSS. Here, write the code below and hit the “Save Changes” button.
/* Overlapping logo for desktop*/
@media (min-width: 981px) {
#logo {
position: absolute;
max-height: 350%;
margin-top: 15px;
}}
/* Overlapping logo for tablet & mobile*/
@media (max-width: 980px) {
#logo {
position: absolute;
max-height: 200%;
margin-top: 15px;
}}That’s it. In this simple way, you can make an overlapping logo on your Divi website.
How to Stop Logo Shrinking After Scroll?
Don’t you like the logo shrinking after scrolling on your Divi website? No worries! There is an easy solution to it.
Divi header, by default, shrinks as you scroll and show a thinner version. Consequently, the logo also gets compact in size. To stop this, use the Divi theme customizer as follows:
All you need to do here is; choose the same height for the primary header menu and the fixed header menu.
For example, if your primary menu header size is 54 pixels, then make your fixed header menu also 54. Like below:
Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Menu Height.
Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings > Fixed Menu Height.
Here, make the menu height 54 (or as your wish) for both settings. And after completing each setting, don’t forget to click the “Publish” button.
How to Change the Divi Logo on Scroll?
You may have noticed some of your favorite websites show a different logo on their fixed header. This swapping of the logo may attract you. And you want to have this kind of effect on your Divi website as well.
Here are the simple two steps to follow:
Step 1: Upload the logo image you want to show on the fixed header. Click on the image, and you will see the “File URL.” Copy it.
Step 2: Head to the Custom CSS by this file path: WordPress Dashboard > Divi > Theme Options > General > Custom CSS. Add your copied URL (Logo image “File URL”) in the “url” part of the following code.
.et-fixed-header img#logo {
content: url(File_URL_HERE);
}After that, copy and paste the code into the “Custom CSS” box. Finally, hit the “Save Changes” button. You are done.
How to add a site description under your logo?
A tagline of your business that appears under the logo is much more memorable than any other spot on the website. So, if you want to add a site description under your logo in the Divi theme, follow the steps below:
Step 1: You have to access the header.php file of the Divi theme. So, from your WordPress dashboard, go to: Appearance > Theme File Editor. Then, under Theme Files, scroll down to header.php and click it.
Step 2: Now, from your header.php file, search for this line:
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />Step 3: Once you find the line, add the code below in the following line:
<p class="cu-sub-title"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?>
Next, click on the “Update File” button. Well, you are done! There is a subheading under your website logo.
And to add your preferred text, follow: WordPress Dashboard> Divi> Theme Customizer > General Setting> Site Identity > TAGLINE. Just add your text in the tagline box. Lastly, click on the “Published” button.
Pro Tip: Before proceeding with theme template files like the header.php modification, must consider doing this in a child theme to avoid any issues with the theme updates. Plus, for accurate positioning of the logo subheading, you can insert this code following this path: WordPress Dashboard > Divi > Theme Options > General > Custom CSS
p.cu-sub-title {
font-size: 10px;
margin-top: -20px;
margin-left: 41px;
}
And don’t forget to click the “Save Changes” button.
How to Add an SVG Logo File in Divi?
Do you want to upload an SVG logo file type on the Divi website? The SVG file type is a great choice for various reasons.
Unfortunately, WordPress doesn’t support SVG files. And so does the Divi theme. But you can easily enable this on any WordPress website with and without the Divi theme.
We have a detailed tutorial on this. Check this; you will be able to use any SVG file type on the Divi theme.
Divi Logo Guide For Mobile
Nowadays, a non-responsive website design isn’t a typo. It’s a serious blunder. So for your logo to stand out with visual clarity is super valuable for phone and tablet devices.
But, the logo size gets smaller on phones and tablets on the Divi website. For this, you need to bigger the logo size for the mobile view.
How to Increase the Size of the Divi Mobile Menu Logo?
The Divi mobile menu logo size is tricky to increase, as the size is fixed on the style.css. So, here the solution is by using CSS to override the default styles.
Follow this file path: WordPress Dashboard > Divi > Theme Options > General > Custom CSS.
If you don’t find the Custom CSS option, scroll down. You should see the option at the bottom. Once you see it, write down or paste the CSS code below.
@media only screen and (max-width: 767px) {
body header img#logo {
max-width: 80%!important;
max-height: 80%!important;
height: auto!important;
width: auto!important;
}
}
Note that after embedding this code to style.css, the logo size appears well for the phone view only. But for tablet view, insert the following new code.
@media only screen and (max-width: 980px) {
body header img#logo {
max-width: 80%!important;
max-height: 80%!important;
height: auto!important;
width: auto!important;
}
}
Next, we will learn to add a completely different logo for mobile only.
How to Display a Different Logo on Mobile in Divi?
You may wish to display a different logo for mobile visitors. Let’s do this on your Divi website with two easy steps.
Step 1: Start with uploading your mobile logo image. Once the image is in your media library, click it. You will see the “File URL” option on the next screen. Here, copy the link.
Step 2: Like before, follow this way: WordPress Dashboard > Divi > Theme Options > General > Custom CSS. Now, in the custom CSS box, enter the following CSS code.
@media only screen and (max-width: 981px) {
#logo {
content: url("http://yourwebsite.com/mobile_logo.png");
}
}
Do note that you should replace the URL part of the code with the file URL you have copied in the first step. That’s all; check your website on mobile to confirm it shows a different logo.
Divi Logo Favicon Guide
Now we will learn about the favicon. It’s more likely you have an idea about this. It’s a position next to your website title tag on your browser’s tab. This is one of the most common places where your logo appears.
At which point, I would like to explain how to add a favicon on your Divi website.
What is The Best Size For Favicon in Divi?
Favicon is the logo’s smallest showcase. But a crucial branding element of your website. This icon is also found on bookmarks, history, and windows tiles. So choosing the best size for the favicon could be a bit challenging.
However, for your Divi website, the burden isn’t on your shoulder completely.
Generally, the icon displayed on the browser tab is 16×16 pixels. But you won’t upload this size. We will follow the WordPress recommended size, which is 512×512 pixels. This size dimension will help WordPress to automatically resize the image according to the use cases.
Now, you know the size. Let’s add a favicon on the Divi website.
How to Add Favicon in Divi?
From your WordPress dashboard, follow this file path: Divi > Theme Customizer > General Setting> Site Identity > Site Icon.
Here, click on “Select Site Icon.” On the next screen, your media library opens up. Upload and select your image file.
Skip the cropping part if not needed. See the browser tab preview on the theme customizer sidebar. All ok to go! Just hit the “Publish” button.
Conclusion
So this was our ultimate Divi theme logo guide. We have outlined every possible logo-related issue with the Divi theme. And, by now, you have found your solution as well.
Share with us if there are any logo-related issues that need to be addressed by us. We will love to hear from you in the comment box.
0 Comments