In Divi, you’ll add background mask to any part in Divi. This creates a very good likelihood to boost the design of your web site’s footer with Divi. In this tutorial, we’ll show you how you can easy it’s so to upload a background mask on your footer template using the Divi Theme Builder. Once accomplished, you will have a brand new footer design in place that is easy to tweak for your private web site.

Let’s get started.

Sneak Peek

Right here’s a quick check out the footer designs with a background mask we’ll assemble in this tutorial.

Download the Construction for FREE

To place your hands on the designs from this tutorial, you will first want to download it using the button underneath. To reach
get entry to to the download it is important to subscribe to our Divi Day-to-day electronic message tick list by the use of using the form underneath. As a brand spanking new
subscriber, you will download a lot more Divi goodness and a free Divi Construction pack every Monday! Must you’re already on the
tick list, simply enter your electronic message take care of underneath and click on on download. You’ll now not be “resubscribed” or download additional emails.

Obtain the Recordsdata

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:quicker than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:quicker than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:quicker than { border-top-color: transparent !essential; border-left-color: #ffffff !essential; }
@media best computer screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:quicker than { border-top-color: #ffffff !essential; border-left-color: transparent !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: transparent !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:quicker than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 tough { 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 tough, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

See also  How To Create a Virtual Advertising Technique

Download For Unfastened

Join the Divi Newsletter and we will electronic message you a replica of the ultimate Divi Landing Internet web page Construction Pack, plus lots of different excellent and free Divi property, guidelines and guidelines. Follow along and you will be a Divi seize in no time. If you are already subscribed simply type for your electronic message take care of underneath and click on on download to get entry to the structure pack.

DOWNLOAD

You’ve got successfully subscribed. Please take a look at your electronic message take care of to make sure your subscription and get get entry to to free weekly Divi structure packs!

To import the footer template on your Divi Library, do the following:

1. Navigate to the Divi Theme Builder.
2. Click on at the Import button at the top correct of the internet web page.
3. Throughout the portability popup, make a selection the import tab
4. Choose the download document from your computer (be mindful to unzip the document first and use the JSON document).
5. Then click on at the import button.

Once accomplished, the template it will likely be available throughout the Theme Builder. To edit the template, click on at the edit icon on the footer template.

Let’s get to the educational, we could?

Getting Started with a Premade Footer Template

If you want to use your own present footer for this tutorial, feel free to skip this step and leap in and edit your footer template. You’ll apply a background mask to any present footer design.

For this tutorial, we’re going to make use of the free header and footer template designed for the Information Construction Pack. Go to the weblog put up and acquire the template by the use of entering your electronic message take care of throughout the newsletter optin and clicking the Download the Information button that appears right away after.

As quickly because the zip document has been downloaded, unzip it.

So as to add the unzipped JSON document to the theme builder, do the following:

1. Navigate to the Divi Theme Builder.
2. Click on at the Import button at the top correct of the internet web page.
3. Throughout the portability popup, make a selection the import tab
4. Choose the download document from your computer (be mindful to unzip the document first and use the JSON document).
5. Un-check the decisions that can override your provide templates.
6. Then click on at the import button.
7. Choose the selection “Import them as static layouts…”.
8. Then click on at the import button all over again.

As quickly because the template has been loaded to the Theme Builder, delete the header of the template (we received’t need it for this) and click on directly to edit the footer of the template.

How To Add Background Masks to Your Divi Footer

Together with a Background Mask to the Segment Containing the Footer Content material subject material

This particular footer is built with a single segment. Since we’re going to add the background mask design to all of the footer background, we will add the mask to the segment that accommodates the footer content material subject material.

To check out this, open the settings of the segment. Underneath the background possible choices, make a selection the Mask tab, and add a background mask to the segment as follows:

• Mask: Triangles
• Mask Color: #2c98ff
• Mask Change into: Horizontal Flip, Invert

That is the result.

Adjusting the Mask for Cell

To make sure that the background mask design to look very good on cell devices as well, we will want to make a few adjustments. Every mask would in all probability need different adjustments, then again in most cases, the following adjustment should art work for lots of.

Flip at the responsive settings/tabs for the background possible choices and make a selection the tablet tab. Then change the following Mask possible choices:

• Mask Change into: Rotate
• Mask Size: Have compatibility
• Mask Position: Highest Correct

Now the mask has a pleasing design for cell.

Making an attempt New Masks and Colors

As quickly because the initial mask design is whole, we will take a look at different masks and mask colors for new footer background design possible choices. Because you’ll alternate masks with a simple click on on, we might as well see what a few others will appear to be.

Blades Mask

Open the segment settings and change the background mask to Blades.

That is the result.

Diagonal Strains

Choose the Diagonal Strains mask for a definite look.

That is the result.

Honeycomb (subtle)

To make a further subtle (and darker) background mask using Honeycomb, change the following:

• Mask: Honeycomb
• Mask Color: rgba(44,152,255,0.18)
• Mask Change into: Invert

That is the result.

Corner Blob (subtle framing)

You’ll use the Corner Blob mask so to upload a polished frame design around the contact form all the way through the footer. Simply change the following:

• Mask: Corner Blob
• Mask Color: rgba(44,152,255,0.18)
• Mask Change into: Rotate, Invert

That is the result.

Final Results

Let’s take a look at the overall results.

Final Concepts

Creating a background mask design for your footer is quite simple using the Theme Builder and Divi’s built-in background possible choices. Simply click on on all the way through the opposite masks and grow to be possible choices to experiment and to seek out the right kind one for your footer. Don’t overlook to make the very important adjustments for cell. With a bit of luck, this will more and more turn out to be useful for your private web site or your next endeavor.

I sit down up for being attentive to from you throughout the comments.

Cheers!

.inline-code{padding: 0px 4px; colour: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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);display:block;margin: 0 auto;}

The post How To Upload Background Mask to Your Divi Footer appeared first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

read more