With all of the fine-tuning and specific details you’ll be capable of add in your internet web page using the Divi Theme Builder, few is also as high-impact/low-effort as together with a background image in your Divi header. Using the theme builder, you’ll be capable of add this flourish with very little fuss and create a visua enjoy in your visitors that may make you and your brand stick out from the competition. We’re going to walk you during the stairs to be able to upload a background image in your Divi header, so let’s get to it!

The right way to Add a Background Image to Your Divi Header

To succeed in this influence, we’re going to be using the Divi Theme Builder. You’ll be capable of to search out this on your WordPress dashboard under Divi – Theme Builder.

Moreover, we’re going to be using our free pre-made header for the Data Science layout pack for this tutorial. You’ll be capable of each download the JSON record from the put up itself or use a header template inside the theme builder you’ve already designed and created. It’s up to you.

Upload the Header

For individuals who’re using a header that isn’t already inside the Divi Theme Builder, you’ll want to to search out the double-arrow icon inside the upper-right of the dashboard. Click on on it to hold up the Portability possible choices.

Transfer into the Import tab, to search out the JSON record for the header template, and then click on at the blue Import Divi Theme Builder Templates button at the bottom.

Edit the Header Structure

You’re going to then want to enter the Divi builder itself for the construction. We’re going to make use of this header since the World Header for the internet web page, then again you might be doing this to any header you’ve assigned to a template. Each is fine. You’ll be capable of double-click the construction phase or right-click and select Edit from the context menu to enter the builder.

You’ll have to see a similar show to the image underneath when problems load up.

Make a selection Background Location

With most headers, you’re going to have a couple of sections, rows, and columns. Any and/or all of the ones could have a background image connected, then again typically, it’s a superb observe to stick it limited to at least one. Not best does that keep your design cleaner, it moreover assists in keeping your page loading times lower.

With this construction pack, we’re going to add a background design to the left column in the second phase of the header construction, where it’s only a forged black color initially.

Enter the Location’s Settings

On every occasion you’ve decided where you want a background image inside the header, transfer into the settings. Since we’re together with it to a single column, we wish to to search out the containing Row settings first.

Underneath the Content material subject material tab, you’re going to find a tick list of all the columns inside the row. The ones are in descending order, that suggests the best column is the left-most column and so on.

Find the Background Alternatives

On every occasion you’re inside the column’s settings, you’re going to scroll down until you in finding the Background possible choices.

Underneath that heading, you’re going to look 4 different tabs. They’re for, from left to suitable, together with a single background color, together with a gradient background, together with a background image, and together with a background video. Click on on into the third tab to be able to upload a background image.

Make a selection a Static or Dynamic Image

The Divi Theme Builder provides you with the choice of environment each a static or dynamic background image for any module or phase. To use a static image (one who doesn’t trade based on sure requirements), click on at the Add New Background image button inside the heart of the phase.

To use a dynamic image, click on at the stacked-circles icon inside the upper-right of the field.

Choosing to use a dynamic background image is excellent will have to you’re making the ones edits on a global header (or a header that is used in a couple of location on your internet web page). That method, you’ll be capable of set what displays up to the shopper based on regardless of internet web page they see. You’ll be ready to choose from possible choices identical to the put up/internet web page’s Featured Image or the creator’s Profile Symbol. You’ll be capable of even have it pull the internet web page logo or from any custom designed field that you simply’ve set anywhere on the internet web page.

On the other hand, for this article, we’re going the additional typical path of choosing a static background image for the header thru clicking the Add Background Image button. This may occasionally most likely make sure that every instance of this global header has the identical background image.

Make a selection Your Background Image

Clicking the Add Background Image button brings up your media library. You’ll be capable of each upload a brand spanking new record for the background, otherwise you’ll be ready to choose from the existing items on your internet web page. Neither will trade the outcome.

Alter the Background Image

If you want to use the untouched image, this step isn’t necessary. On the other hand, you’ll be capable of add effects like Parallax Scrolling and image blending. You’ll be capable of even set where you want the image located in terms of the column so that it’ll point of interest on different areas instead of defaulting to the center.

Over again, the ones don’t seem to be necessary, then again can help in making the background image merge with the surrounding design thru Divi with the ability to darken it merely moderately, as an example.

Save Your Art work!

Next, make sure that you save your entire art work. You’ll need to click on at the green checkmark inside the column settings and the row settings. Then the green save button inside the lower-right of the internet web page. Then you definately surely’re secure to X out the builder to return to the dashboard.

We moreover want to practice that your Divi Theme Builder must show All Changes Saved inside the upper-left. If the button reads Save Changes, your background image inside the header isn’t live.

We want to practice this specifically on account of there are a lot of places to avoid wasting quite a lot of inside the theme builder, and we don’t want you to go away out the one who pushes the new designs live.

Wrapping Up

Together with a background image in your Divi header is likely one of the easiest techniques to bring life to any design thru using a static image or even via our dynamic content material subject material serve as. Whether or not or no longer you employ thought to be one among our free, pre-made designs or add in your non-public, you’ll be capable of take a simple design and make it additional difficult and eye-catching thru together with an image in your header with just a few clicks.

Do you prefer a dynamic or static background image on your Divi Header?

The put up How to Add a Background Image to Your Divi Header gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more