How To Make A Navbar Image Background With Divi 4

How To Make A Navbar Image Background With Divi 4. In this video we’re going to show you how to make a navbar image background with the Divi 4 theme. First thing I’m going to need to do is grab some images. Now that I have some images let’s get started. I have one that’s roughly the shape of the navbar. I’m going to go ahead and upload it to the media library. , once the images in the media library, select the image and it will open in a new window, in the new window, on the right hand side about halfway down, you will see the URL pull the image we have just uploaded. Select and copy that URL as we are going to need it later.

Now go back to the browser, I’m using Google Chrome for this demonstration as it has the great inspector tools included. Leave your mouse up to the header and right click on the head and navbar area. This will bring up a drop-down menu, select inspect at the bottom. This will open up the Chrome inspector window. Make sure you have the elements tab selected on one side, this will show HTML code, and make sure you have style tab selected on the other side, this will show the CSS code, this is what we will be working with today. I use the inspector tools for checking out my CSS before writing it into the theme custom CSS box, it’s really useful for trying out ideas and viewing it in real time before committing it to the website itself.

Now we have the Chrome inspect to open, with the top header and navbar area selected. We can write in the code we need to change the background. Under the style tab select the element that you want to edit, and under the element ID left click to create a new line. Now start typing the code, the code that we want to use today his background- image: url(); in between the two round brackets we need to paste the URL of the image that we copied earlier. Now when you look up to the navbar you will see that the background has change from a gradient to an image.

Once you are happy with the way everything looks, we need to actually write this code into the theme itself, at the moment we have just written it into the browser and a viewing it in real time, what’s refresh is clicked, it will revert back to how it was before in the browser unless we write it into the site itself.

To get to the custom CSS box with Divi, go to the dashboard, down to Divi, to theme options, then, the bottom of the page you will find the custom CSS box for entering the code. Copy your code from the Chrome browser and paste it into this box. Once you have done this, the image background full be permanently change for your site. That is how to make enough body image background with Divi 4. Technique will also work with most other WordPress themes, or anything that has a custom CSS box for you to add code to.

The Divi theme from elegant themes is absolutely awesome. Whenever I have a WordPress build, it’s my go-to theme every time. I have built many, many sites with the Divi theme and it just keeps on getting better. Elegant themes keeps adding features, and tools to increase your productivity, as well as ease of use and site load speed. So if you are building a WordPress site I recommend you give it a try. You will not be disappointed!