In this tutorial I’ll be showing you how to change your logo using the Divi WordPress Theme Options. It’s a very simple process that I will show you in a way you’ll easily understand.
To start, I’ve made a website with a brand new install of the Divi WordPress Theme. You can see the Divi logo already in place at the top left. I’ll be swapping it out with one that I’ve made.
Size Up Your Logo
First you need to make sure your logo image is up to snuff. If you look at the image to the left, you’ll see the generic logo I whipped up for this tutorial. The dimensions are a little bigger than called for in the theme (300×90). I’m not sure what the exact dimensions are for the theme and I’m not too concerned with that for two reasons. First off, the theme is smart enough to resize whatever you give it to fit with the layout. I can upload an image that’s 2000×500 and it would still be the right size when viewing the website. I wouldn’t recommend an image that big, but it will work if you can’t size it down. The second reason is because the filesize of this logo is 18kb. In today’s world of high download speeds, file size doesn’t make too much cause for concern. I could trim it down to a few kb, but it wouldn’t really make a difference.
I recommend a PNG or JPG file for your logo. I’ve used a PNG for mine because if I change the background color of the top menu bar, I won’t have to worry about matching the background later.
If you are in the market for a simple image editing tool for sizing logos and image files I recommend https://pixlr.com/
Upload To Divi WordPress Theme
Now that we’re happy with our logo dimensions and file size, we’ll upload it to our site. If you’re not already there, go into your WordPress admin. Once logged into WordPress you should see a menu to the left. Mouseover the ‘Divi‘ option and select ‘Theme Options‘. The Divi WordPress Theme panel should load and it should be on the ‘General‘ tab.
The first option you see is ‘Logo‘. (FYI The ‘RESET‘ button will clear the field so you can reset your theme back to the original logo if you want to. I don’t know why you would want to do this… unless you’re writing a tutorial and need to toggle back and forth between the original logo and an upload, but why someone would do that is beyond me).
Once you click on ‘UPLOAD‘, the WordPress media window will pop up and you can upload your image by either drag and drop (my favorite) or by clicking on ‘Upload Files’ and browsing to the file on your computer. After your file is uploaded, select it and click on ‘Set As Logo‘.
Save Your Changes
Always remember to save your changes. You can do this by clicking on the green ‘Save Changes‘ button at the top left above the Divi WordPress Theme options panel. Once your changes are saved, you’ll see a little green circle in the middle of the screen with a check in it.
View Your Logo
The only step that’s left is to view our changes and make sure everything looks good. Let’s hop over to our testing site and see how the logo is doing in its new habitat.
Looks good to me! The Divi WordPress Theme did its job and made sure the logo is the right size. The Divi theme has many built-in features like this to make your life easier as you focus on web design.
I hope you enjoyed this tutorial and if you have any questions, please ask them in the comments below!