#
Back to blog page

Divi Logo Guide: All You Need to Know!

by | May 6, 2024 | Divi

Table of Contents

Having a professionally designed logo on your website can give your audience a great first impression. 

A study showed that a well-made logo makes people think a brand cares about how it looks, and this can boost consumer trust by 75%.

But the question is – how will you add a logo to your Divi site? What will be the perfect logo size for Divi websites and how do you even customize it? 

That’s why in this in-depth Divi logo guide, we will answer all these questions and many more to get you on the right track. Here we will cover everything from uploading a logo to customizing it with codes.

Let’s get started.

Recommended Divi Logo Size

For Divi websites, Elegant Themes recommends a logo size between 250×100 and 250×150. However, it may vary based on user preference and logo design. 

For example, the Divi theme uses its default logo size is 93×43 pixels and Divi layouts typically include logos with sizes between 160×50 and 225×100.

That means you have a bit of freedom when it comes to choosing a size for the logo on your Divi website.  

How to Change Logo Size via Divi Image Module Preset?

If you are still confused about your logo size, Divi gives you the flexibility to choose a logo size via the image module presets. Here’s how you can use it- 

  • Go to the theme builder and edit the global header 
  • Add an image module where you want the logo to be
  • Click on the ‘Preset: Default’ to open up the logo sizes
  • And finally use the presets to style and place the logo accordingly

Recommended Divi Logo File Format 

The recommended Divi logo file format is PNG because PNG files retain their quality even when being compressed. You can scale up this format without degrading the quality. Plus, PNGs have a transparent background, which is perfect for websites and digital spaces.

Alternatively, you can try the SVG format as a second option. SVG logos are vector graphics, so they can be scaled up and down without losing resolution, just like PNG files. Whatever size you display them at, they’ll always look sharp and professional.

As a third option, you can use the JPG format. However, we do not recommend it because it tends to lose quality when compressed. That means, when you try to scale it up, it will degrade its quality and your logo will look pixelated. 

Apart from these three, you can try other acceptable formats for the logo like PSD, JPEG, GIF, etc. 

How to Upload, Hide & Reset Divi Logo?

You can upload, remove, and hide your Divi logo easily within a few seconds within the Divi theme options.

Upload Your Logo

To upload a logo for your Divi website, simply follow these steps –

  • Go to the WordPress dashboard menu and click on Divi > Theme Options > General > General tab. You will see the Logo field here.
  • Now click the “Upload” button to select and upload your logo image into your media library.
  • Click on “Set As Logo”, and your logo URL will be added to the options field.

Now, check the result on the live site. 

Reset Your Logo

To reset your logo from the Divi website, simply click on the ’RESET’ button. Doing so will remove logo from the website permanently. 

Hide Your Logo

To hide the logo, go to the Divi Theme Customizer from your WordPress dashboard > Header & Navigation > Primary Menu Bar > and click ‘HIDE LOGO IMAGE.’

However, this process will only hide your logo from the fixed header. That means, when you scroll down, the logo will appear again.

So, if you want to permanently hide the logo, go to the Divi > Theme Customizer > Header & Navigation> Fixed Navigation Settings> and check the “HIDE LOGO IMAGE.”

Once done, don’t forget to hit the “Publish” button. That’s how you can successfully hide the Divi logo from the header.

How to Add SVG Logo File?

Divi doesn’t let you upload an SVG file as your website logo by default. But if you have to upload an SVG file, you will need a plugin, like DiviFlash

After installing the plugin, go to DiviFlash > Settings > SVG file upload, then enable it. 

Now you can upload your SVG logo by following the steps we have described in the previous section.

How to Add Favicon in Divi?

To add a favicon, go to the WordPress dashboard Divi > Theme Customizer > General Settings > Site Identity and upload your icon by clicking on the ‘Select Site Icon.’

What’s the Best Size For Favicon?

While there is no standard size for favicons, WordPress recommends using an image that is at least 512×512 pixels and square in shape. 

If you choose an image that’s larger than 512×512, WP will ask you to crop it and then it will automatically be converted to 512×512. 

When the favicon is displayed in the browser or other places, it will be displayed as 16×16 pixels. Now, for better quality, favicons are also displayed as 32×32 and 48×48 pixels. The higher pixeled favicons provide enough detail for 2x scaling. 

How to Customize the Logo Using the Theme Customizer?

The Divi theme customizer has options to edit your Divi website logo in different ways.

How to Change the Size of the Logo?

To increase or decrease the logo size, go to Theme Customizer > Header & Navigation > Primary Menu Bar > Logo Max Height. 

By changing the “LOGO MAX HEIGHT” from 0-100 pixels the size of the logo will increase or decrease. But keep in mind that you need to match the logo size with the menu height.

How to Change the Placement of the Logo? 

To change the placement of the logo, go to the Divi “Theme Customizer” and navigate to Header & Navigation > Header Format > Header Style. There you can see five different header style options by clicking the dropdown menu. 

Among these five options, three of them have impacts on the logo placement, which are- 

  • Default: Your logo is displayed on the left side of the main header, as usual.
  • Centered: Choosing this option puts your logo in the middle. 
  • Centered Inline Logo: Keep your logo in line with the menu item, standing tall at the center.

The rest two options do not affect the logo placement, they affect your header style only. 

How to Make an Overlapping Logo? 

Instead of sticking to the traditional way of showing the logo in the header menu, you can place the logo below the header area and display it simultaneously. 

To add an overlapping logo effect, you need to add a code snippet to the custom CSS tab in the Divi theme options. For this, head to your WordPress dashboard and go to Divi > Theme Options > General > Custom CSS.  Paste in the code below, and hit “Save Changes.”

Overlapping logo code for desktop:

@media (min-width: 981px) {#logo {position: absolute;max-height: 350%;margin-top: 15px;}}

Overlapping logo code for tablet & mobile:

@media (max-width: 980px) {#logo {position: absolute;max-height: 200%;margin-top: 15px;}}

Note: The “min-width”, “max-height”, and “margin-top” are the variables that affect the logo size. You can tweak these to get the appropriate logo size based on your preferences. 

How to Stop the Logo From Shrinking After Scrolling?

Divi header, by default, shrinks as you scroll and shows a smaller version. However, if you don’t like this, here’s how to put a stop to this: 

  • Go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Menu Height.
  • Check the value assigned to the “Menu Height.”
  • Then, navigate to Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings > Fixed Menu Height.
  • Set the exact value that was in the “Menu Height.”

For example, if your primary menu header is 60 pixels, then your fixed header menu must be 60 pixels as well.

How to Change the Divi Logo on Scroll?

With Divi, you can display two logos on your website; one will be displayed on the fixed header and the other will be displayed as the user scrolls.

To use two different logos on your Divi website, follow these steps:

  1. To upload the second logo, go to the WordPress dashboard > Media > Add New Media File.
  2. Once uploaded, click on Media > library, click on the logo and copy the URL location.
  1. Then add the following CSS code into Divi > Theme Options > Custom CSS. 
.et-fixed-header img#logo {content: url(File_URL_HERE);}
  1. Next, add your copied URL (Logo image “File URL”) in the “url” part of the code. This image will be the logo when the user scrolls.
  2. Finally, hit the “Save Changes” button. 

Now, go to your site and see if it works.

How to Make the Logo Responsive for Mobile Devices?

Making the logo responsive for mobile devices is crucial because it directly affects the user experience. 

Change the Size of the Logo on Smaller Devices

To change the logo size for smaller devices, we need to add a custom CSS code to override the main style.CSS file which controls the logo for the mobile version of the website. 

To make the logo responsive for mobile devices, go to the WordPress Dashboard > Divi > Theme Options > General > Custom CSS. Then 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;    }}

This code snippet will only work for mobiles. 

Now, to increase the logo size on tablets, insert the following 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;    }}

Note: You can change the “max-width” pixel according to your devices. The “max width” and “max height” percentage can also be changed depending on how you want to see the logo increased.

Display a Different Logo on Smaller Devices 

To display a different on smaller devices-

  • Upload your mobile logo image to your media library. Once it’s there, click on the image. You’ll find an option called “File URL.” Click on that and copy the link you see.
  • Now, head back to your WordPress Dashboard and follow this path: Divi > Theme Options > General > Custom CSS, just like before. In the custom CSS box, paste the code below.
@media only screen and (max-width: 981px) {  #logo {    content: url(File_URL_HERE);  }}

Note: This URL will be the same as the image URL that we have copied in the “How to Change the Divi Logo on Scroll?” section.

That’s all; check your website on mobile to confirm it shows a different logo.

Conclusion

This was our complete logo guide for Divi users. We’ve covered every logo-related topic you might encounter with Divi. By now, you should have all your questions answered.

If you find our blog ‘Divi Logo Guide’ to be helpful, please share it with your friends and contacts. Or, if you have any questions regarding this content, let us know in the comment box.

Team DiviGear

At DiviGear, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *