How to Create a Sticky Background Mask with Divi

by | Jul 27, 2021 | Etcetera | 0 comments

Divi’s sticky choices make it easier to construct a ton of various designs in your web pages. Nowadays’s submit provides some other educational to the record of items you’ll reach and it’ll with a bit of luck assist spark creativity. We’re going to turn you the right way to create a sticky background masks, and feature this masks practice the customer on scroll till the phase’s finish. This educational combines Divi’s sticky choices with the filter out mix modes. You’ll have the ability to obtain the JSON report free of charge as smartly!

Let’s get to it.

Preview

Earlier than we dive into the educational, let’s take a handy guide a rough have a look at the end result throughout other display screen sizes.

Desktop

sticky background mask

Cell

sticky background mask

Obtain The Format for FREE

To put your palms at the loose structure, you’ll first want to obtain it the use of the button underneath. To realize get entry to to the obtain it is very important subscribe to our Divi Day-to-day e-mail record through the use of the shape underneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a loose Divi Format pack each Monday! When you’re already at the record, merely input your e-mail cope with underneath and click on obtain. You’re going to now not be “resubscribed” or obtain additional 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:prior to { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media simplest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { 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 { shade: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { 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;}

Download For Free

Obtain For Unfastened

Sign up for the Divi E-newsletter and we will be able to e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of different superb and loose Divi sources, guidelines and tips. Apply alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely kind to your e-mail cope with underneath and click on obtain to get entry to the structure pack.

You might have effectively subscribed. Please test your e-mail cope with to substantiate your subscription and get get entry to to loose weekly Divi structure packs!

See also  Cyber Weekend Anticipated to Be the Greatest Ever; Is Your eCommerce Retailer Able?

1. Create Design in Divi

Upload New Phase

Background Symbol

Get started through including a brand new phase to the web page you’re operating on. Add a background symbol of your selection.

  • Background Symbol Dimension: Duvet

sticky background mask

Spacing

Transfer directly to the phase’s design tab and take away all default peak and backside padding within the spacing settings.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

sticky background mask

Overflows

Cover the phase’s overflows within the complex tab subsequent.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

sticky background mask

Upload Row #1

Column Construction

Proceed through including a brand new row the use of the next column construction:

sticky background mask

Sizing

With out including modules, open the row settings and alter the sizing settings accordingly:

  • Width: 100%
  • Max Width: 100%

sticky background mask

Spacing

Take away all default peak and backside padding as smartly.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

sticky background mask

Filters

We’re additionally including a mix mode to this row. This mix mode will assist us create a masks in a while within the educational.

  • Mix Mode: Display

sticky background mask

Z Index

To ensure this row stays underneath the second one row we’ll upload to the phase, we’re enhancing the z index within the complex tab.

  • Z Index: 9

sticky background mask

Column Settings

Subsequent, we’ll open the column settings.

sticky background mask

Background Colour

We’re the use of an absolutely white background shade. Some other shade you utilize right here will display during the phase background symbol, so it’s necessary to stay with a completely white shade.

  • Background Colour: #ffffff

sticky background mask

Primary Part CSS

We’re additionally including a peak price to the primary component within the complex tab. When we flip the row sticky, this peak will ensure that the column covers all the phase background symbol all the time.

peak: 100vh;

sticky background mask

Upload Textual content Module to Row

Go away Content material Field Empty

When you’ve finished the row settings, upload a Textual content Module to its column. Go away the content material field empty. We’re, as a substitute, the use of this module to create a form that unearths part of the phase background symbol.

See also  Person-Pleasant Newsletters with AcyMailing for WordPress

sticky background mask

Background Colour

To permit the mix mode to turn a work of the phase’s background symbol, we’re the use of a darker background shade for this module.

  • Background Colour: #0b3835

sticky background mask

Sizing

Then, we’ll navigate to the design tab and alter the sizing settings as follows:

  • Width:
    • Desktop: 20vw
    • Pill & Telephone: 70vw
  • Top:
    • Desktop: 30vh
    • Pill & Telephone: 10vh

sticky background mask

Spacing

We’re including some peak margin as smartly.

  • Most sensible Margin: 3vh

sticky background mask

Border

And we’ll come with some rounded corners.

  • All Corners: 15px

sticky background mask

Upload Row #2

Column Construction

Proceed through including some other row to the phase the use of the next column construction:

sticky background mask

Sizing

With out including modules but, open the row settings and make the next adjustments to the sizing settings:

  • Width: 100%
  • Max Width: 100%

sticky background mask

Z Index

Build up the row’s z index as smartly. This may occasionally assist ensure that the row’s content material stays on peak of the former row.

  • Z Index: 12

sticky background mask

Upload Textual content Module to Row

Upload H2 Content material

Time so as to add modules, beginning with a primary Textual content Module containing some H2 content material of your selection.

sticky background mask

H2 Textual content Settings

Taste the H2 textual content settings as follows:

  • Heading 2 Font: Playfair Show
  • Heading 2 Textual content Alignment: Heart
  • Heading 2 Textual content Colour: #0b3835
  • Heading 2 Textual content Dimension:
    • Desktop: 150px
    • Pill & Telephone: 45px
  • Heading 2 Line Top: 1.2em

sticky background mask

Sizing

Then, navigate to the sizing settings and follow the next settings:

  • Max Width: 980px
  • Module Alignment: Heart

sticky background mask

Spacing

Come with some unfavorable peak margin as smartly.

sticky background mask

Upload Button Module to Row

Upload Replica

The following and ultimate module we want on this row is a Button Module. Upload some reproduction of your selection.

sticky background mask

Button Alignment

Transfer directly to the module’s design tab and alter the button alignment.

  • Button Alignment: Heart

sticky background mask

Button Settings

Then, pass to the button settings and follow the next types:

  • Use Customized Kinds For Button: Sure
  • Button Textual content Dimension: 15px
  • Button Textual content Colour: #ffffff
  • Button Background Colour: #000000
  • Button Border Width: 0px
  • Button Border Radius: 100px

sticky background mask

  • Button Font: Montserrat
  • Button Font Weight: Semi Daring
  • Button Font Taste: Uppercase

sticky background mask

Spacing

We’re including some customized margin and padding values to the spacing settings as smartly.

  • Backside Margin: 60vh
  • Most sensible Padding: 15px
  • Backside Padding: 15px
  • Left Padding: 40px
  • Proper Padding: 40px
See also  WordPress Block Directory: How to Access & Use It

sticky background mask

2. Practice Sticky Results

Open Row #1

Now that we’ve constructed the root of our design, it’s time to use the sticky types. Open the primary row’s settings.

sticky background mask

Practice Sticky Choices

Navigate to the complex tab and follow the next sticky settings:

  • Sticky Place: Stick with Most sensible
  • Backside Sticky Prohibit: Phase
  • Offset From Surrounding Sticky Components: Sure
  • Transition Default and Sticky Kinds: Sure

sticky background mask

Textual content Module Sticky Choices

Now that the row has been became sticky, we will follow sticky types to the Textual content Module within the row. Open the module’s settings.

sticky background mask

Sticky Sizing

Then, navigate to the sizing settings and follow the next sticky sizing values:

  • Sticky Width: 80vw
  • Sticky Top: 90vh

sticky background mask

Transition Period

Closing however now not least, navigate to the complex tab and build up the transition period. That’s it!

  • Transition Period: 500ms

sticky background mask

Preview

Now that we’ve long gone thru all of the steps, let’s take a last have a look at the end result throughout other display screen sizes.

Desktop

sticky background mask

Cell

sticky background mask

Ultimate Ideas

On this submit, we’ve, as soon as once more, proven you the right way to get inventive with Divi’s sticky choices. Extra in particular, we’ve proven you the right way to mix Divi’s filters settings and sticky choices to create a sticky background masks. You have been ready to obtain the JSON report free of charge as smartly. If in case you have any questions or tips, be at liberty to depart a remark within the remark phase underneath.

When you’re keen to be told extra about Divi and get extra Divi freebies, you should definitely subscribe to our email newsletter and YouTube channel so that you’ll all the time be one of the crucial first other folks to understand and get advantages from this loose content material.

The submit How to Create a Sticky Background Mask with Divi gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment