#
Back to blog page

DIVI LOGO SIZE: ALL YOU NEED TO KNOW

by | Jul 14, 2019 | Divi

Divi Logo Size Guide
Table of Contents

Since its introduction, Divi has been elegant theme’s front runner. It has a very attractive design and has attracted a lot of positive reviews. The page builder has been enjoying a lot of updates. One of which is the inclusion of a true front-end page builder tool with point and click inline editing. Divi Logo size is another important aspect of the theme which has generated a lot of discussions. We will take a closer look at it as we go on. Divi helps you build attractive and powerful websites. More so it is a perfect template for your online store, sales page, and even some blog layouts. Navigation on Divi is very easy, so it means you don’t particularly have to be a professional to be able to use it. You can create amazing designs on your own with ease. Over 900 pre-made website layouts come packaged right inside of it for free. Brand new layouts are also added on a weekly basis. Royalty-free photos, icons, and illustrations are not left out. On a general note, Divi makes website building so much easier, faster and more enjoyable like we do in DiviGear.

Logo Friendliness

DIVI LOGO SIZE

As we highlighted earlier, Divi logo size is a topic we need to pay close attention to. It is a very sensitive aspect of website building. Based on this, we’ll look at how to upload your own logo to your website. How to choose the best Divi logo height for your website. And also how to change or adjust the height and size of your logo.

How to choose the best Divi logo height for your website

Divi Portrait Logo
Logo size 500x90 with max with option

Logos are very important when it comes to building your website. They vary in sizes, shapes, and designs. It is important to know the size or type of logo that will suit your website. There are times when you know exactly what you want. But, getting that desired size and height becomes the challenge. We’ll, therefore, be looking at how you can achieve that. The default Divi logo PNG dimensions are 93 pixels x 43 pixels. You can adjust the size of the logo in Divi’s theme customizer. Yet, you can’t adjust it larger than its native pixel size. You should always have this in mind before uploading your logo. Something between 45-55 pixels is a good height for a horizontal, or landscape logo. This affords the logos enough white space. It also brings for a less crowded outlook. For the size, 250 pixels wide would work fine. This sets the logo apart and also makes it appealing. Landscape or square is the ideal shapes for logos. Portrait logos tend to leave far too much vertical space in the header. If your logo is in a portrait form, you don’t need to worry too much. It is possible to change it to a landscape. Portrait logos will work fine with stationary or business cards. You might as well make two versions if you like. To get the 250 x 45 size which is ideal for your website, you need to create a larger logo. Say 500 x 90, then use the Divi theme customizer controls to create the desired or appropriate size. It’s best to keep the logo small as large logos can be a bit distracting. If you must use large logos, it has to work with the design of your website.

How to adjust the Divi logo size and height

Adjust Divi Logo Size

To change the logo height click on Theme Customizer. Then you follow that up by clicking on Header & Navigation. Then finally the Primary Menu Bar. [Divi > Theme Customizer > Header & Navigation > Primary Menu Bar] Having done this, you will see the “logo max-height” field. It enables you to adjust or change the logo height to your desired size. This would adjust the top and bottom space of the logo in the menu bar. To adjust the size of the logo, use the “menu height” field to make your changes. By so doing the entire menu bar will increase in height. In summary, Menu height controls the height of the menu bar itself. While logo max height controls the logo height. The Divi logo height settings in the theme customizer range from 30 to 100 pixels. The menu height ranges from 30 to 300. The default is 54 for the logo height and 66 for the menu height. So, you can navigate the fields, until you get exactly what you need. The “menu height” field sets the height of the menu in pixels. It is important to note that Divi actually adds an extra 23 pixels to your setting. The displayed height of the menu bar includes this extra 23. This implication has a default menu height setting of 66 translates to an actual menu bar height of 66+23, which equals 89px. You need to have this in mind when making your logo size/height calculations. An appropriate logo height is affected by the menu height as well as the font size of your menu. So, you could play around with the controls for all three of them until you get a perfect setting. This means perfect whitespace and balance.

How to set the fixed header logo height

For the “fixed header” option, it’ll be necessary for you to set the logo height for the fixed (shrunken) header. To do this you’ll go to the fixed header field at Divi. Follow the same process as in the case of Divi Height setting. [Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings”] Here your only concern is the “fixed menu height” setting. It performs the same role as the “menu height” setting above. It allows you to set the height of the main header, as it will show when the user scrolls down the page. Again, this height is in pixels with and extra 23px added by Divi to get the final height. There is no option to set the logo max-height on the fixed header. It rather inherits the value from the (non-fixed) main header.

How to upload your own logo to Divi

Upload logo to Divi

A new Divi site usually has a default Divi logo so you would likely want to replace it with your own. We’ll give you a guide on how you can do that. In your WordPress dashboard menu click on Divi. Then select Theme Options, from there click on General tab at the top, then you’ll see the Logo field. Click on the Upload image button to select and upload your logo image into your media library. Click on Set as Logo and your logo URL will be added into the option field. If you wish to go back to the default Divi logo, click the reset button to remove the uploaded logo. You can also choose from 5 different header styles from your Theme Customizer. These options determine the placement of your logo when uploaded in the header. The options include Default, Centered, Centered Inline Logo, Slide-in and Full-Screen. We hope you have found the above information helpful. The Divi theme has so much in store for you, and it promises you a great experience. If you’re looking to launch a website or an online store, Divi might be your best option.

Saddam Hossen

0 Comments

Submit a Comment

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