How To Add Background Masks to Your Divi Footer

by | Jul 31, 2022 | Etcetera | 0 comments

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.

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

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.

.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;}

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.

Footer Design with Divi Background Masks

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.

Footer Design with Divi Background Masks

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.

See also  SQL Injections: What WordPress Customers Want to Know

Footer Design with Divi Background Masks

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.

Footer Design with Divi Background Masks

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.

Footer Design with Divi Background Masks

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

Footer Design with Divi Background Masks

This is the end result.

Footer Design with Divi Background Masks

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.

See also  How to Integrate Salesforce Web-to-Lead with WordPress

Footer Design with Divi Background Masks

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.

Footer Design with Divi Background Masks

This is the end result.

Footer Design with Divi Background Masks

Diagonal Traces

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

Footer Design with Divi Background Masks

This is the end result.

Footer Design with Divi Background Masks

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

Footer Design with Divi Background Masks

This is the end result.

Footer Design with Divi Background Masks

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

Footer Design with Divi Background Masks

This is the end result.

Footer Design with Divi Background Masks

Ultimate Effects

Let’s check out the general effects.

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

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.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *