With the entire fine-tuning and particular particulars you’ll be able to add to your website utilizing the Divi Theme Builder, few could also be as high-impact/low-effort as including a background picture to your Divi header. Utilizing the theme builder, you’ll be able to add this flourish with little or no fuss and create a visua expertise to your guests that can make you and your model stand out from the competitors. We’re going to stroll you thru the steps so as to add a background picture to your Divi header, so let’s get to it!
Add a Background Picture to Your Divi Header
To realize this impact, we’re going to be utilizing the Divi Theme Builder. You’ll find this in your WordPress dashboard beneath Divi – Theme Builder.
Additionally, we’re going to be utilizing our free pre-made header for the Knowledge Science format pack for this tutorial. You possibly can both obtain the JSON file from the put up itself or use a header template within the theme builder you’ve already designed and created. It’s as much as you.
Add the Header
If you happen to’re utilizing a header that isn’t already contained in the Divi Theme Builder, it would be best to discover the double-arrow icon within the upper-right of the dashboard. Click on it to deliver up the Portability choices.
Go into the Import tab, discover the JSON file for the header template, after which click on the blue Import Divi Theme Builder Templates button on the backside.
Edit the Header Format
You’ll then need to enter the Divi builder itself for the format. We’re going to use this header because the World Header for the positioning, however you may be doing this to any header you could have assigned to a template. Both is okay. You possibly can double-click the format part or right-click and choose Edit from the context menu to enter the builder.
It is best to see an analogous display to the picture under when issues load up.
Select Background Location
With most headers, you should have a number of sections, rows, and columns. Any and/or all of those can have a background picture hooked up, however generally, it’s a superb apply to maintain it restricted to 1. Not solely does that preserve your design cleaner, it additionally retains your web page loading instances decrease.
With this format pack, we’re going to add a background design to the left column within the second part of the header format, the place it’s only a strong black colour to start with.
Enter the Location’s Settings
When you’ve determined the place you desire a background picture within the header, go into the settings. Since we’re including it to a single column, now we have to seek out the containing Row settings first.
Below the Content material tab, one can find an inventory of all of the columns within the row. These are in descending order, which means the highest column is the left-most column and so forth.
Discover the Background Choices
When you’re contained in the column’s settings, you’ll scroll down till you discover the Background choices.
Below that heading, you will notice 4 completely different tabs. They’re for, from left to proper, including a single background colour, including a gradient background, including a background picture, and including a background video. Click on into the third tab so as to add a background picture.
Select a Static or Dynamic Picture
The Divi Theme Builder offers you the selection of setting both a static or dynamic background picture for any module or part. To make use of a static picture (one that doesn’t change primarily based on sure standards), click on the Add New Background picture button within the heart of the part.
To make use of a dynamic picture, click on the stacked-circles icon within the upper-right of the sector.
Selecting to make use of a dynamic background picture is nice if you happen to’re making these edits on a worldwide header (or a header that’s utilized in multiple location in your website). That means, you’ll be able to set what reveals as much as the person primarily based on no matter web page they see. You possibly can select from choices just like the put up/web page’s Featured Picture or the writer’s Profile Image. You possibly can even have it pull the positioning brand or from any customized subject that you just’ve set anyplace on the positioning.
Nonetheless, for this text, we’re going the extra conventional path of selecting a static background picture for the header by clicking the Add Background Picture button. It will guarantee that each occasion of this world header has the identical background picture.
Select Your Background Picture
Clicking the Add Background Picture button brings up your media library. You possibly can both add a brand new file for the background, or you’ll be able to select from the prevailing objects in your website. Neither will change the result.
Regulate the Background Picture
If you wish to use the untouched picture, this step is elective. Nonetheless, you’ll be able to add results like Parallax Scrolling and picture mixing. You possibly can even set the place you need the picture positioned in relation to the column so that it’s going to deal with completely different areas as a substitute of defaulting to the middle.
Once more, these are elective, however may help make the background picture merge with the encircling design by Divi with the ability to darken it simply barely, as an example.
Save Your Work!
Subsequent, just be sure you save your entire work. It would be best to click on the inexperienced checkmark within the column settings and the row settings. Then the inexperienced save button within the lower-right of the web page. Then you definitely’re secure to X out the builder to return to the dashboard.
We additionally need to notice that your Divi Theme Builder ought to present All Adjustments Saved within the upper-left. If the button reads Save Adjustments, your background picture within the header just isn’t dwell.
We need to notice this particularly as a result of there are loads of locations to avoid wasting within the theme builder, and we don’t need you to overlook the one which pushes the brand new designs dwell.
Wrapping Up
Including a background picture to your Divi header is likely one of the best methods to liven up any design through the use of a static picture and even via our dynamic content material function. Whether or not you utilize one among our free, pre-made designs or add to your individual, you’ll be able to take a easy design and make it extra superior and attention-grabbing by including a picture to your header with just some clicks.
Do you favor a dynamic or static background picture in your Divi Header?
The put up Add a Background Picture to Your Divi Header appeared first on Elegant Themes Weblog.