In Divi, you’ll upload background masks to any part in Divi. This creates an excellent chance to spice up the design of your website online’s footer with Divi. On this educational, we’ll display you easy methods to simple it’s so as to add a background masks in your footer template the use of the Divi Theme Builder. As soon as performed, you are going to have a brand spanking new footer design in position this is simple to tweak to your personal website online.

Let’s get began.

Sneak Peek

Here’s a fast have a look at the footer designs with a background masks we’ll construct on this educational.

Obtain the Structure for FREE

To put your fingers at the designs from this educational, you are going to first wish to obtain it the use of the button under. To realize
get right of entry to to the obtain it is very important subscribe to our Divi Day by day e mail listing via the use of the shape under. As a brand new
subscriber, you are going to obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! In case you’re already at the
listing, merely input your e mail cope with under and click on obtain. You are going to now not be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media most effective display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

See also  9 Best AI Prompt Generators 2024 (ChatGPT, Midjourney & More)

Obtain For Unfastened

Sign up for the Divi Publication and we will be able to e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative superb and loose Divi sources, guidelines and tips. Observe alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e mail cope with under and click on obtain to get right of entry to the structure pack.

DOWNLOAD

You could have effectively subscribed. Please examine your e mail cope with to substantiate your subscription and get get right of entry to to loose weekly Divi structure packs!

To import the footer template in your Divi Library, do the next:

1. Navigate to the Divi Theme Builder.
2. Click on the Import button on the height proper of the web page.
3. Within the portability popup, make a choice the import tab
4. Make a choice the obtain record out of your laptop (be sure you unzip the record first and use the JSON record).
5. Then click on the import button.

As soon as performed, the template shall be to be had within the Theme Builder. To edit the template, click on the edit icon at the footer template.

Let’s get to the academic, lets?

Getting Began with a Premade Footer Template

If you wish to use your personal current footer for this educational, be happy to skip this step and bounce in and edit your footer template. You’ll observe a background masks to any current footer design.

For this educational, we’re going to use the loose header and footer template designed for the Marketing consultant Structure Pack. Move to the blog post and obtain the template via coming into your e mail cope with within the e-newsletter optin and clicking the Obtain the Recordsdata button that looks straight away after.

As soon as the zip record has been downloaded, unzip it.

To add the unzipped JSON record to the theme builder, do the next:

1. Navigate to the Divi Theme Builder.
2. Click on the Import button on the height proper of the web page.
3. Within the portability popup, make a choice the import tab
4. Make a choice the obtain record out of your laptop (be sure you unzip the record first and use the JSON record).
5. Un-check the choices that can override your present templates.
6. Then click on the import button.
7. Make a choice the choice “Import them as static layouts…”.
8. Then click on the import button once more.

As soon as the template has been loaded to the Theme Builder, delete the header of the template (we gained’t want it for this) and click on to edit the footer of the template.

How To Upload Background Mask to Your Divi Footer

Including a Background Masks to the Segment Containing the Footer Content material

This actual footer is constructed with a unmarried phase. Since we’re going to upload the background masks design to all of the footer background, we will be able to upload the masks to the phase that comprises the footer content material.

To try this, open the settings of the phase. Below the background choices, make a choice the Masks tab, and upload a background masks to the phase as follows:

• Masks: Triangles
• Masks Colour: #2c98ff
• Masks Become: Horizontal Turn, Invert

This is the end result.

Adjusting the Masks for Cellular

To ensure that the background masks design to appear excellent on cellular units as smartly, we will be able to wish to make a couple of changes. Each and every masks would possibly want other changes, however typically, the next adjustment will have to paintings for many.

Turn on the responsive settings/tabs for the background choices and make a choice the pill tab. Then replace the next Masks choices:

• Masks Become: Rotate
• Masks Dimension: Are compatible
• Masks Place: Most sensible Proper

Now the masks has a pleasing design for cellular.

Making an attempt New Mask and Colours

As soon as the preliminary masks design is whole, we will be able to take a look at other mask and masks colours for brand new footer background design choices. Since you’ll exchange mask with a easy click on, we would possibly as smartly see what a couple of others will seem like.

Blades Masks

Open the phase settings and alter the background masks to Blades.

This is the end result.

Diagonal Traces

Make a choice the Diagonal Traces masks for a special glance.

This is the end result.

Honeycomb (delicate)

To make a extra delicate (and darker) background masks the use of Honeycomb, replace the next:

• Masks: Honeycomb
• Masks Colour: rgba(44,152,255,0.18)
• Masks Become: Invert

This is the end result.

Nook Blob (delicate framing)

You’ll use the Nook Blob masks so as to add a delicate body design across the touch shape within the footer. Merely replace the next:

• Masks: Nook Blob
• Masks Colour: rgba(44,152,255,0.18)
• Masks Become: Rotate, Invert

This is the end result.

Ultimate Effects

Let’s check out the general effects.

Ultimate Ideas

Making a background masks design to your footer is moderately easy the use of the Theme Builder and Divi’s integrated background choices. Merely click on in the course of the other mask and turn out to be choices to experiment and in finding the best one to your footer. Don’t overlook to make the essential changes for cellular. Optimistically, this may occasionally turn out to be useful to your personal website online or your subsequent challenge.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; colour: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!necessary} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The put up How To Add Background Masks to Your Divi Footer seemed first on Elegant Themes Blog.

read more