With the entire fine-tuning and explicit main points you’ll upload for your website the usage of the Divi Theme Builder, few is also as high-impact/low-effort as including a background symbol for your Divi header. The usage of the theme builder, you’ll upload this flourish with little or no fuss and create a visua enjoy in your guests that may make you and your logo stick out from the contest. We’re going to stroll you during the steps so as to add a background symbol for your Divi header, so let’s get to it!
How you can Upload a Background Symbol to Your Divi Header
To succeed in this impact, we’re going to be the usage of the Divi Theme Builder. You’ll be able to to find this to your WordPress dashboard underneath Divi – Theme Builder.
Additionally, we’re going to be the usage of our free pre-made header for the Data Science layout pack for this instructional. You’ll be able to both obtain the JSON report from the submit 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
When you’re the usage of a header that isn’t already within the Divi Theme Builder, it would be best to to find the double-arrow icon within the upper-right of the dashboard. Click on it to deliver up the Portability choices.
Pass into the Import tab, to find the JSON report for the header template, after which click on the blue Import Divi Theme Builder Templates button on the backside.
Edit the Header Format
You are going to then wish to input the Divi builder itself for the format. We’re going to use this header because the World Header for the website, however you may well be doing this to any header you’ve got assigned to a template. Both is ok. You’ll be able to double-click the format phase or right-click and make a selection Edit from the context menu to go into the builder.
You must see a identical display screen to the picture underneath when issues load up.
Select Background Location
With maximum headers, you’re going to have a couple of sections, rows, and columns. Any and/or all of those could have a background symbol hooked up, however on the whole, it’s a just right observe to stay it restricted to at least one. No longer best does that stay your design cleaner, it additionally helps to keep your page loading times lower.
With this format pack, we’re going to upload a background design to the left column in the second one phase of the header format, the place it is only a forged black colour to start with.
Input the Location’s Settings
If you’ve determined the place you wish to have a background symbol within the header, move into the settings. Since we’re including it to a unmarried column, we need to to find the containing Row settings first.
Underneath the Content material tab, you’re going to discover a record of all of the columns within the row. Those are in descending order, which means the highest column is the left-most column and so forth.
In finding the Background Choices
If you’re within the column’s settings, you’re going to scroll down till you to find the Background choices.
Underneath that heading, you’re going to see 4 other tabs. They’re for, from left to appropriate, including a unmarried background colour, including a gradient background, including a background symbol, and including a background video. Click on into the 3rd tab so as to add a background symbol.
Select a Static or Dynamic Symbol
The Divi Theme Builder provides you with the collection of atmosphere both a static or dynamic background symbol for any module or phase. To make use of a static symbol (one that doesn’t trade in keeping with positive standards), click on the Upload New Background symbol button within the heart of the phase.
To make use of a dynamic symbol, click on the stacked-circles icon within the upper-right of the sphere.
Opting for to make use of a dynamic background symbol is excellent when you’re making those edits on an international header (or a header this is utilized in a couple of location for your website). That manner, you’ll set what displays as much as the consumer in keeping with no matter web page they see. You’ll be able to choose between choices just like the submit/web page’s Featured Symbol or the writer’s Profile Image. You’ll be able to also have it pull the website brand or from any customized box that you just’ve set any place at the website.
On the other hand, for this text, we’re going the extra conventional trail of opting for a static background symbol for the header via clicking the Upload Background Symbol button. This may occasionally be sure that each example of this international header has the similar background symbol.
Select Your Background Symbol
Clicking the Upload Background Symbol button brings up your media library. You’ll be able to both add a brand new report for the background, or you’ll choose between the present pieces for your website. Neither will trade the end result.
Alter the Background Symbol
If you wish to use the untouched symbol, this step is not obligatory. On the other hand, you’ll upload results like Parallax Scrolling and symbol mixing. You’ll be able to even set the place you wish to have the picture located in the case of the column in order that it’s going to focal point on other spaces as an alternative of defaulting to the middle.
Once more, those are not obligatory, however can help in making the background symbol merge with the encircling design via Divi with the ability to darken it simply somewhat, as an example.
Save Your Paintings!
Subsequent, just be sure you save your whole paintings. You’ll want 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 definately’re protected to X out the builder to go back to the dashboard.
We additionally wish to be aware that your Divi Theme Builder must display All Adjustments Stored within the upper-left. If the button reads Save Adjustments, your background symbol within the header isn’t reside.
We wish to be aware this in particular as a result of there are a large number of puts to avoid wasting within the theme builder, and we don’t need you to omit the person who pushes the brand new designs reside.
Wrapping Up
Including a background symbol for your Divi header is likely one of the highest tactics to liven up any design via the usage of a static symbol and even thru our dynamic content material function. Whether or not you utilize certainly one of our loose, pre-made designs or upload for your personal, you’ll take a easy design and make it extra complicated and attention-grabbing via including a picture for your header with only some clicks.
Do you like a dynamic or static background symbol to your Divi Header?
The submit How to Add a Background Image to Your Divi Header gave the impression first on Elegant Themes Blog.
0 Comments