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

Cell

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.

Download the Files

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

See also  How To Combine Background Masks with Section Dividers in Divi

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.

DOWNLOAD

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!

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

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

Overflows

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

• Horizontal Overflow: Hidden
• Vertical Overflow: Hidden

Upload Row #1

Column Construction

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

Sizing

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

• Width: 100%
• Max Width: 100%

Spacing

Take away all default peak and backside padding as smartly.

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

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

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

Column Settings

Subsequent, we’ll open the column settings.

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

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;

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.

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

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

Spacing

We’re including some peak margin as smartly.

• Most sensible Margin: 3vh

Border

And we’ll come with some rounded corners.

• All Corners: 15px

Upload Row #2

Column Construction

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

Sizing

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

• Width: 100%
• Max Width: 100%

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

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.

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

Sizing

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

• Max Width: 980px
• Module Alignment: Heart

Spacing

Come with some unfavorable peak margin as smartly.

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.

Button Alignment

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

• Button Alignment: Heart

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

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

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

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.

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

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 Sizing

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

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

Transition Period

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

• Transition Period: 500ms

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

Cell

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.

read more