I chose to make this the first Divi 5 Quick Tutorial for a reason. It was to show you that while things have clearly changed with Divi 5 in the same breath they have also stayed the same. I am hoping this tutorial will put some of you at ease with it’s Divi familiar feel to it. Remebering that these are QUICK tutorials let’s get right to it.
STARTING TIP: All tutorials start at the same place. In your WP-Admin section. If you are brand new to WordPress and our site we have a beginners primer to get you where you need to be HERE > The rest of you can go to WP-Admin and find the Divi Heading in the left column. It’s best to give it a click once so the Divi menu opens up and you are ready to go.
1
Adding your logo this way is very familiar if you have worked with Elegant Themes Products in the past. If not it is easy to follow along. In the WP Admin dashboard under the 1.Divi heading look for 2.Theme Options and click it.
At the top of the Theme Options page note that the first option is labelled 3.Logo. Now click the 4.Upload button to either add a logo you have already added to the Media Library or upload it from your computer. This is kind of the old way to do this especially if you will be adding a menu to your header. We will talk about that next.
2
While I put this method 2nd it is likely the way that Elegant Themes recommends themselves. Method 1 was the original way to add your logo even before Elegant released Divi. With this method you can add and control the look of your header menu as well. The other advantage to this method of course is that you can create your “Global Header” in the process.
Let’s get started. Again head over to your wp-admin dashboard. This time find Divi > 1.Theme Builder. Once on the Theme Builder page you will see 2.Add Global Header
Clicking the Global Header button will present you with 2 options… Build Global Header and Add from Library… For the purposes of our tutorial you will select 3.Build Global Header
Now click the green 4.Add New Row button.
NOTE: We will get into the Section, Row and Module options in a later tutorial. For example If you have used Divi before you will notice that when you scroll over the black Add New Module button it now says Add New Module OR ROW. This is because of Divi 5’s awesome new Nested Rows options.
After Clicking the Add New Row button you will be presented with Divi 5’s updated row options. You have many options here and you can use the layout that works best for you. In this tutorial we will simply select the first option we see under the Equal Columns header 5.Full Row.
Next click the black + icon 6.Add New Module or Row options.
Now lets scroll down a bit and find the 7.Menu module.
In our final steps you will be presented with the default menu you have at the top of the page. If you look to the right column you will find a heading 8.Logo if you click this headers arrow it will open and you will see + Add Image. This is where you can upload your logo or add it from the Media Library if you already have it uploaded. You should see it now 9.Logo Image. Finally before you leave this page hit the 10.Save button.
3
The third way we will do this is for those that DO NOT need a menu attached to their logo. Many of you will think that most people likely use method 2 for adding a logo. The thing about page design these days is that you should always design MOBILE FIRST and if you do that the placement of the menu can vary greatly. I actually used this 3rd method for DIVI.sale the site you are looking at. If you look at the top of this page you will see why that is. I wanted some of the menu items to display when the page was scrolled down. So, the line that the logo is on is different than the location of my top menu.
*IMPORTANT: So we dont just repeat ourselves over and over from method 2 above let’s do this… Follow the steps in method 2 from the images that are labelled from numbers 1 to 6.
Before starting here be sure to follow the numbered steps from 1 to 6 from Method 2 above. Ok let’s get method 3 started with step 7. Scroll down and find module 7.Image.
In our final steps look to the right column and find the heading 8.Image Click this header to open it and you will see + Add Image. This is where you can upload your logo or add it from the Media Library if you already have it uploaded. You should see it now 9.Logo Image. Finally before you leave this page hit the 10.Save button.
This brings our Divi 5 logo tutorial to an end. In the process of making this tutorial we discoved a few new features that we will discuss in upcoming tutorials. A great example of that is Divi 5’s new Rows and Column layouts. This was re-imagined to include nested columns. We will also be taking a look at Divi 5’s new Flexbox and Loop Builder to mention a few. So, stay tuned.
