(202) 750-1910
  • Facebook
  • Twitter
  • Instagram
  • Yelp
  • Reddit
  • Google
  • Pinterest
  • WhatsApp
  • Facebook
  • Twitter
  • Instagram
  • Yelp
  • Reddit
  • Google
  • Pinterest
  • WhatsApp
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Status
  • Services
    • Website Design
    • SEO
    • Accessibility Compliance
    • Social Media
    • Managed Hosting
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Contact
  • Login
  • Logout
  • Portal
    • Dashboard
    • Prospect Form
Select Page

How To Add Background Masks to Your Divi Footer

In Divi, you can add background masks to any element in Divi. This creates a great opportunity to boost the design of your website’s footer with Divi. In this tutorial, we’ll show you how to easy it is to add a background mask to your footer template using the Divi Theme Builder. Once done, you will have a brand new footer design in place that is easy to tweak for your own website.

Let’s get started.

Sneak Peek

Here is a quick look at the footer designs with a background mask we’ll build in this tutorial.

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain
access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new
subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the
list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .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 strong { 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 strong, .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 !important;}

Download For Free

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

  1. Navigate to the Divi Theme Builder.
  2. Click the Import button at the top right of the page.
  3. In the portability popup, select the import tab
  4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
  5. Then click the import button.

Footer Design with Divi Background Masks

Once done, the template will be available in the Theme Builder. To edit the template, click the edit icon on the footer template.

Footer Design with Divi Background Masks

Let’s get to the tutorial, shall we?

Getting Started with a Premade Footer Template

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

For this tutorial, we are going to use the free header and footer template designed for the Consultant Layout Pack. Go to the blog post and download the template by entering your email address in the newsletter optin and clicking the Download the Files button that appears immediately after.

Footer Design with Divi Background Masks

Once the zip file has been downloaded, unzip it.

To upload the unzipped JSON file to the theme builder, do the following:

  1. Navigate to the Divi Theme Builder.
  2. Click the Import button at the top right of the page.
  3. In the portability popup, select the import tab
  4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
  5. Un-check the options that will override your current templates.
  6. Then click the import button.
  7. Select the option “Import them as static layouts…”.
  8. Then click the import button again.

Footer Design with Divi Background Masks

Once the template has been loaded to the Theme Builder, delete the header of the template (we won’t need it for this) and click to edit the footer of the template.

Footer Design with Divi Background Masks

How To Add Background Masks to Your Divi Footer

Adding a Background Mask to the Section Containing the Footer Content

This particular footer is built with a single section. Since we are going to add the background mask design to the entire footer background, we can add the mask to the section that contains the footer content.

To do this, open the settings of the section. Under the background options, select the Mask tab, and add a background mask to the section as follows:

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

Footer Design with Divi Background Masks

Here is the result.

Footer Design with Divi Background Masks

Adjusting the Mask for Mobile

In order for the background mask design to look good on mobile devices as well, we will need to make a few adjustments. Each mask may need different adjustments, but in general, the following adjustment should work for most.

Activate the responsive settings/tabs for the background options and select the tablet tab. Then update the following Mask options:

  • Mask Transform: Rotate
  • Mask Size: Fit
  • Mask Position: Top Right

Now the mask has a nice design for mobile.

Footer Design with Divi Background Masks

Trying New Masks and Colors

Once the initial mask design is complete, we can try different masks and mask colors for new footer background design options. Since you can change masks with a simple click, we might as well see what a few others will look like.

Blades Mask

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

Footer Design with Divi Background Masks

Here is the result.

Footer Design with Divi Background Masks

Diagonal Lines

Select the Diagonal Lines mask for a different look.

Footer Design with Divi Background Masks

Here is the result.

Footer Design with Divi Background Masks

Honeycomb (subtle)

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

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

Footer Design with Divi Background Masks

Here is the result.

Footer Design with Divi Background Masks

Corner Blob (subtle framing)

You can use the Corner Blob mask to add a subtle frame design around the contact form inside the footer. Simply update the following:

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

Footer Design with Divi Background Masks

Here is the result.

Footer Design with Divi Background Masks

Final Results

Let’s take a look at the final results.

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Footer Design with Divi Background Masks

Final Thoughts

Creating a background mask design for your footer is quite simple using the Theme Builder and Divi’s built-in background options. Simply click through the different masks and transform options to experiment and find the right one for your footer. Don’t forget to make the necessary adjustments for mobile. Hopefully, this will come in handy for your own website or your next project.

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} 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 Add Background Masks to Your Divi Footer appeared first on Elegant Themes Blog .

Recent Posts

  • Yoast SEO Plugin for WordPress: An Easy Setup Guide

    Yoast SEO Plugin for WordPress: An Easy Setup Guide

  • Divi Plugin Highlight: Divi Accordions Plus

    Divi Plugin Highlight: Divi Accordions Plus

  • How to Use the WordPress Query Loop Block

    How to Use the WordPress Query Loop Block

  • How to Use the WordPress Stack Block

    How to Use the WordPress Stack Block

  • Divi Plugin Highlight: Divi Carousel Module

    Divi Plugin Highlight: Divi Carousel Module

  • 7 Best Gallery Plugins for WordPress (in 2023)

    7 Best Gallery Plugins for WordPress (in 2023)

  • How to Use the WordPress Site Title Block

    How to Use the WordPress Site Title Block

  • How to Add Google Maps to Your Divi Website

    How to Add Google Maps to Your Divi Website

  • How to Use the WordPress Site Logo Block

    How to Use the WordPress Site Logo Block

  • How to Customize Your WordPress Header (in 2023)

    How to Customize Your WordPress Header (in 2023)

B2B_Companies_Massachusetts_2020
Web Design Certified by UpCity WordPress Web Development
Best Web Designers in Boston
Upcity Badge
Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

1201 Connecticut Avenue NW
Suite 627
Washington, DC 20036
(202) 750-1910

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

About Ask the Egghead

Ask the Egghead is a full service WordPress web design and development agency. An Egghead will help you develop ideas and projects, transform your organization, and grow your business.

Services

  • Website Design
  • Social Media
  • SEO
  • Hosting
  • Privacy Policy
  • Facebook
  • Twitter
  • Instagram
Designed by The Egghead © 2015-2023 Ask the Egghead, Inc.