By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
WordPressNews.orgWordPressNews.org
Aa
  • Home
  • Security
  • Themes
  • Plugins
  • CDN
  • Hosting
  • WooCommerce
  • SEO
Reading: How To Add Background Masks to Your Divi Footer
WordPressNews.orgWordPressNews.org
Aa
  • Bussiness
  • The Escapist
  • Entertainment
  • Science
  • Technology
  • Insider
Search
  • Home
  • Security
  • Themes
  • Plugins
  • CDN
  • Hosting
  • WooCommerce
  • SEO
Have an existing account? Sign In
Follow US
© Foxiz News Network. Ruby Design Company. All Rights Reserved.
How To Add Background Masks to Your Divi Footer
Themes

How To Add Background Masks to Your Divi Footer

Last updated: 2022/08/02 at 3:00 AM
By Info Feed 9 Min Read
Share
SHARE

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.

Contents
Sneak PeekDownload the Layout for FREEDownload For FreeYou have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!Getting Started with a Premade Footer TemplateHow To Add Background Masks to Your Divi FooterAdding a Background Mask to the Section Containing the Footer ContentAdjusting the Mask for MobileTrying New Masks and ColorsBlades MaskDiagonal LinesHoneycomb (subtle)Corner Blob (subtle framing)Final ResultsFinal Thoughts

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

More Read

Why Your Business Needs a Blog
Why Your Business Needs a Blog
25 best grid style WordPress themes in 2022 for blogs and portfolios
Announcing Spectra 2.0: The visual page builder for ultra fast websites

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
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!

The post How To Add Background Masks to Your Divi Footer appeared first on Elegant Themes Blog.

You Might Also Like

Why Your Business Needs a Blog

25 best grid style WordPress themes in 2022 for blogs and portfolios

Announcing Spectra 2.0: The visual page builder for ultra fast websites

Share this Article
Facebook Twitter Email Copy Link Print

Follow US

Find US on Social Medias
Facebook Like
Twitter Follow
Youtube Subscribe
Telegram Follow

Weekly Newsletter

Subscribe to our newsletter to get our newest articles instantly!

[mc4wp_form]
- Advertisement -
Ad image

Popular News

How to Import and Export Products and Orders in WooCommerce

By Info Feed July 7, 2022
5 Tips for Optimizing Your WooCommerce Shop Pages
GeneratePress 3.1.2
How to Manage Comments in WordPress (+ 8 Best Plugins)
TikTok’s history of low Creator Fund payouts has some leaving the platform for good
Global Coronavirus Cases

Confirmed

594.18M

Death

6.45M

More Information:Covid-19 Statistics

More Popular from Foxiz

Security

The Cybersecurity CIA Triad: What You Need to Know as a WordPress Site Owner

By Info Feed 17 Min Read

Cross-Site Scripting Vulnerability In Download Manager Plugin

By Info Feed

8 UX Design Tips: How to Balance Visual Aesthetic and User Experience in Web Design

By Info Feed 0 Min Read
- Advertisement -
Ad image
Security

Top Five Attacking IPs This Month: Their Locations May Not Be Where You Think

At Wordfence, we see large amounts of threat actor data, and often that data tells unexpected…

By Info Feed
Security

Top Five Attacking IPs This Month: Their Locations May Not Be Where You Think

At Wordfence, we see large amounts of threat actor data, and often that data tells unexpected…

By Info Feed
Security

Cross-Site Scripting Vulnerability In Download Manager Plugin

On May 30, 2022, Security Researcher Rafie Muhammad reported a reflected Cross-Site Scripting (XSS) vulnerability to…

By Info Feed
Security

The Cybersecurity CIA Triad: What You Need to Know as a WordPress Site Owner

One of the core concepts of cybersecurity is known as the CIA Triad. There are three…

By Info Feed
Security

Critical Privilege Escalation Vulnerability in Jupiter and JupiterX Premium Themes

On April 5, 2022, the Wordfence Threat Intelligence team initiated the responsible disclosure process for a…

By Info Feed
wordpressnews-logo-120-60

#1 Spot for Wordpress News and Tools

Categories

  • Home
  • Security
  • Themes
  • Plugins
  • CDN
  • Hosting
  • WooCommerce
  • SEO

Quick Links

  • Under Construction

© WordPressNews.org All Rights Reserved.

Removed from reading list

Undo
Welcome Back!

Sign in to your account

Lost your password?