Wondering how to add your own logo in Divi ?
Luckily, the Divi WordPress theme comes with plenty of easy options for customizing your logo and your entire header and navigation area.
In this tutorial, I’m going to show you how to add a logo in the Divi header.
We’ll also look at some easy website logo sizing and styling tips to help you get your logo looking just right in no time.
As you’ve probably noticed, the Divi WordPress theme comes with a default Divi logo in the theme header at the top of each page.
But you can easily change this logo out and add your own custom logo in just a couple of quick steps.
Let’s get started!
How to add your own logo in Divi:
1. Log in to your WordPress dashboard. Here, head to “Divi” and click on “Theme Options”.
2. This will take you to the “Divi Theme Options” area. At the top of Theme Options area, you’ll see several menu tabs. Click on the “General” tab. Under this tab, locate the “Logo” sections.
3. You’ll now see an empty “Logo” field. To fill in this field with your logo’s URL, click the “Upload” button beside it.
4. This will take you to your media library. If you’ve already uploaded your logo to the media library, go ahead and select it. Then under the “Attachment Details” section, click the “Set as Logo” button.
5. If you haven’t uploaded your logo to the media library yet, select the “Upload Files” tab at the top of the page, under “Choose an Image”.
6. Upload your logo by dropping it or selecting it directly from your computer files.(It’s a good idea to have your logo in PNG format.) Then click the “Set as Logo” button.
7. This will take you back to the “Divi Theme Options” section. Here, you’ll notice that the URL of the logo you selected now shows in the “Logo” field.
8. Finally, click the “Save Changes” button. You’ll see a green and white check symbol pop up, letting you know that your changes have successfully been saved.
And that’s it! Your new logo has now been set in place of the default Divi logo. Open your site up in another tab to see how it looks.
If you’ve followed the steps above, you should see your own logo in the the Divi Theme Header on every page, instead of the Divi theme logo.
What’s the best logo size to choose for your website or blog?
While there are no set recommended logo sizes, keep optimization in mind.
When you add your own logo in Divi, make sure it displays well on both desktop and mobile.
If you’re looking for a starting point, the default Divi theme logo is 93 x 43.
Note though, this may be too small to display well if your logo is made up of a lot of text.
How to change logo size in Divi:
Uploaded your own logo in the Divi theme but wish it could be just a little bigger or smaller?
Well, have no fear!
Adjusting the logo size in Divi is super-simple too.
Here’s how it’s done:
1. Head back to your dashboard area and go to Appearance > Customize.
2. Next, select “Header & Navigation”.
3. Select “Primary Menu Bar”.
4. This will pull up several sizing options for you to adjust.
We’re primarily looking for the “Logo Max Height” option.
Here you can increase or decrease the size of your logo by sliding the button up or down the line.
You can also input your preferred number in the logo height box manually.
You can also play around with the “Menu Height” option here to find the right fit for your new logo size. Just keep in mind that your menu height will affect the appearance of all the other items in your header as well.
5. As you adjust the logo and menu height sizes up and down, be sure to look at the preview screen to the side. This will help you decide on the perfect size for your logo and menu.
6. Once you’ve found the logo and menu height you like best, click the “Publish” button. This will save your changes and apply them to your Divi website.
Open your website in another window and check out your adjustments. Your logo and menu should now be the height/size you selected for them. Congratulations, you’ve successfully changed your logo size!
How to center your logo in Divi:
When you add your own logo in Divi, you’ll see that it appears on the left-hand side.
By default, your logo will be left-aligned in Divi, while your menu will be right-aligned.
But that doesn’t mean they have to stay that way!
If you want to center your logo (or choose any other position for it), just go through the following steps:
1. In your dashboard, go to Appearance > Customize.
2. Next, select “Header & Navigation”.
3. Select “Header Format”.
4. Here, you’ll see a drop-down menu called “Header Style”.
5. Click this menu and you’ll see several header alignment choices. Here you can choose whether you’d like your header style to be default, centered, centered inline logo, slide in, or full-screen.
6. Since we want to center our logo, we’ll choose the “Center” option. When you choose this option, both your menu and your logo will be center-aligned. Your centered logo will appear above your menu items, like this:
7. If you prefer to have your logo inline with your menu items, select “Centered Inline Logo” instead. This way your logo will appear on the same centered line as your menu items.
Here’s an example of a centered inline logo in Divi:
And that’s all there is to it!
Hopefully, this tutorial has helped you learn how to change the logo in Divi, how to change your logo size, and how to center your logo.
One of the biggest benefits of using the Divi WordPress theme for your site is that you have almost endless styling options.
So whether you want to add your own logo in Divi, change your logo’s size, or its alignment, Divi’s comprehensive theme options section has you covered.
Do you have any Divi logo styling tips and tricks of your own? Share them with us in the comments below!